HTML,CSS,PHP,ワードプレスカスタマイズ 技術情報資料

WP投稿 HTMLタグ外す PLUGIN はないか?AddQuickTagをカスタマイズしてみた。

スポンサーリンク

スペシャル便利な ワードプレスプラグイン Add Quick Tag。
マジ便利だよね?

ところでゆずまるはワードプレスのタイニィなんとかとかかんとかのワードプレスのエディタを使わない。
なぜなら、空白行とか自由にできないからだ。

やつらのエゴで勝手に空白行を捨てたり br タグを殺したりするからだ。
まして、動的表示もできなくなるしね。

HTMLやCSSを理解せずにページを「それなりに」作るときにはいいんだろうが、
余計なことされるので使っていないのだ。

で、ほとんどの必要な機能は AddQuickTag にぶちこんで使っている。

あ、さて、ところがここにきて「不便じゃない?」って思ったことがある。
というのは、HTMLタグで囲んだ時、「あ、やっぱ黄色のアンダーラインがいいな」とか思って直す場合。
いちいち前後のHTMLタグを手動で消してそれから付け直すよね?

これ、面倒。

ボタン一つで消したい。
ゆずまるのCGIのAddQuickTagもどきでは搭載してある機能なんだけどね。

で、この機能を追加してみた。

場所は、大きく言って3か所。
着目点は、「HTML Entitles」。
2017y03m15d_080539694


この HTML Entitles をAddQuickTagで追加してやると(AddQuickTagの設定の下の方に pre と一緒に出ている)
AddQuickTagのボタンの並びに「HTML Entitles」と「Decode HTML」ってのが表示されるようになる。

これは、HTMLをHTMLの表示タグに置き換えるのと表示タグをHTMLに置き換えるって機能を持っている。
ここに、HTMLタグをとっぱらうってコマンドをいれたらできると思ったわけだ。

構造的には、htmlentitles がチェックされていたら最初の2つのモジュールが追加される仕組みになっていたので、ソース検索で「HTML Entitles」を検索して、add-quicktags.dev.js と add-quicktags.js を修正した。

なので add-quicktags.dev.js のその部分に cut html ってオリジナルモジュールを追加。

add-quicktags.dev.js は、コマンドをそのまま治せるのでよいけど add-quicktags.js は目がちかちかする(笑)
ちなみに html タグをJavaScriptで外すのは、(str).replace(/<("[^"]*"|'[^']*'|[^'">])*>/g,”) でよい。


ところがだ、この2つのソース修正だけだと ボタンが表示されないのだ。
探した結果 languages にいくつか文字列定義があって、それを処理してボタンを表示させている”らしい”。

HTML Decode の後ろに ,HTML Cut っていれてみた。

おお!出た?!
2017y02m16d_014728709

で、見事HTMLタグを取り外すボタンを追加できました。めでたしめでたしwww

add-quicktags.dev.js


/**
 * AddQuicktag Script to add buttons to html-editor
 *
 * @package  AddQuicktag Plugin
 * @author   Frank Bueltge <frank@bueltge.de>
 * @version  12/19/2014
 * @since    2.0.0
 */

jQuery(document).ready(function ($) {

	if ( typeof addquicktag_tags == 'undefined' )
		return;

	if (typeof addquicktag_post_type == 'undefined')
		return;

	if (typeof addquicktag_pt_for_js == 'undefined')
		return;

	var tags = addquicktag_tags['buttons'];
	if (typeof tags == 'undefined')
		return;

	function html_entity_decode( str ) {
		/*Firefox (and IE if the string contains no elements surrounded by angle brackets )*/
		try{
			var ta=document.createElement("textarea");
			ta.innerHTML=str;
			return ta.value;
		}catch(e){};
		/*Internet Explorer*/
		try{
			var d=document.createElement("div");
			d.innerHTML=str.replace(/</g,"&lt;").replace(/>/g,"&gt;");
			if(typeof d.innerText!="undefined")return d.innerText;/*Sadly this strips tags as well*/
		}catch(e){}
	}

	// window for input; currently not in use; maybe later
	function qt_callback_input_window(e, c, ed) {

		var prmt = prompt('Enter Tag Name');

		if (prmt === null)
			return;

		this.tagStart = '[tag]' + prmt + '[/tag]';

		QTags.TagButton.prototype.callback.call(this, e, c, ed);
	}

	function get_selected_text(canvas) { // "canvas" is what they call the textarea of the editor
		canvas.focus();

		if (document.selection) { // IE
			return document.selection.createRange().text;
		} else { // standards
			return canvas.value.substring(canvas.selectionStart, canvas.selectionEnd);
		}
	}

	// check post type
	if ( $.inArray( "addquicktag_post_type", addquicktag_pt_for_js ) ) {

		for ( var i = 0; i < tags.length; i++ ) {
			// check for active on this post type
			if ( 1 === parseInt(tags[i][addquicktag_post_type] ) ) {

				if (typeof tags[i].title == 'undefined') tags[i].title = ' ';
				if (typeof tags[i].end == 'undefined') tags[i].end = '';
				if (typeof tags[i].access == 'undefined') tags[i].access = '';

				/**
				 * @param id string required Button HTML ID
				 * @param display string required Button's value="..."
				 * @param arg1 string || function required Either a starting tag to be inserted like "<span>" or a callback that is executed when the button is clicked.
				 * @param arg2 string optional Ending tag like "</span>"
				 * @param access_key string optional Access key for the button.
				 * @param title string optional Button's title="..."
				 * @param priority int optional Number representing the desired position of the button in the toolbar. 1 - 9 = first, 11 - 19 = second, 21 - 29 = third, etc.
				 * @param instance string optional Limit the button to a specific instance of Quicktags, add to all instances if not present.
				 */
				QTags.addButton(
					html_entity_decode( tags[i].text ).replace( /"|\\/gi, "" ).toLowerCase(),
					tags[i].text,
					tags[i].start,
					tags[i].end,
					tags[i].access,
					tags[i].title.replace( /"|\\/gi, "" )
				);

				/**
				 * @TODO New idea for multiple edit windows
				 // for edit window
				 QTags.addButton(
				 tags[i].text.toLowerCase(),
				 tags[i].text,
				 qt_callback_input_window,
				 tags[i].end,
				 tags[i].access,
				 tags[i].title
				 );
				 */
			}
		}

	} // end check post type

	// Check the Code buttons, if inside the json
	var code_buttons = addquicktag_tags['code_buttons'];

	// Fallback, if WP core don't set the var
	if ( typeof typenow == 'undefined' )
		typenow = '';

	// IF no code buttons was active
	if ( typeof code_buttons == 'undefined' )
		return;

	// Fallback for no htmlentities settings
	if ( typeof code_buttons.htmlentities == 'undefined' )
		code_buttons.htmlentities = 0;

	// Fallback for no pre settings
	if ( typeof code_buttons.pre == 'undefined' )
		code_buttons.pre = 0;

	// if the htmlentities settings is active for each post type (var typenow from WP core)
	if ( code_buttons.htmlentities[typenow] === 1 ) {
		/**
		 * ideas for code buttons and optional window with input possibility
		 *
		 * @see @see http://bililite.com/blog/2012/08/20/custom-buttons-in-the-wordpress-html-editor/
		 */
		QTags.addButton('toHTML', 'HTML Entities', function (el, canvas) {
			QTags.insertContent(
				get_selected_text(canvas).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
			);
		}, 'Encode HTML Entities');
		
		QTags.addButton('fromHTML', 'Decode HTML', function (el, canvas) {
			QTags.insertContent(
				get_selected_text(canvas).replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>')
			);
		}, 'Decode HTML Entities');
		
		//----yuzumaru----
		QTags.addButton('cutHTML', 'HTML cut', function (el, canvas) {
			QTags.insertContent(
				get_selected_text(canvas).replace(/<("[^"]*"|'[^']*'|[^'">])*>/g,'')
			);
		}, 'Cut HTML Entities');
		//----/yuzumaru----

	}

	// if the pre settings is active for each post type (var typenow from WP core)
	if ( code_buttons.pre[typenow] === 1 ) {
		var code_languages = ['html', 'javascript', 'css', 'bash', 'php', 'vb'];
		// Insert before the code button
		edButtons[109] = {
			html: function (id_prefix) {
				return '<select id="' + id_prefix + 'code_language" class="language-select">' +
				'<option>blank</option>' + // include a blank option
				'<option>' + code_languages.join('</option><option>') + '</option>' +
				'</select>';
			}
		};
		$('body').on('change', 'select.language-select', function () {
			var lang = $(this).val();
			// 110 is the code qt-tag from core, wp-includes/js/quicktags.js
			edButtons[110].tagStart = lang ? '<code class="language-' + lang + '">' : '<code>';
		});

		// Add pre button for preformatted text
		QTags.addButton('qt_pre', 'pre', '<pre>', '</pre>', '', 'Preformatted text', '108');
	}


});



add-quicktags.js


/**
 * AddQuicktag Script to add buttons to html-editor
 * 
 * @package  AddQuicktag Plugin
 * @author   Frank Bueltge <frank@bueltge.de>
 * @version  12/19/2014
 * @since    2.0.0
 */

jQuery(document).ready(function(e){function t(e){try{var t=document.createElement("textarea");return t.innerHTML=e,t.value}catch(n){}try{var a=document.createElement("div");if(a.innerHTML=e.replace(/</g,"&lt;").replace(/>/g,"&gt;"),"undefined"!=typeof a.innerText)return a.innerText}catch(n){}}function n(e){return e.focus(),document.selection?document.selection.createRange().text:e.value.substring(e.selectionStart,e.selectionEnd)}if("undefined"!=typeof addquicktag_tags&&"undefined"!=typeof addquicktag_post_type&&"undefined"!=typeof addquicktag_pt_for_js){var a=addquicktag_tags.buttons;if("undefined"!=typeof a){if(e.inArray("addquicktag_post_type",addquicktag_pt_for_js))for(var o=0;o<a.length;o++)1===parseInt(a[o][addquicktag_post_type])&&("undefined"==typeof a[o].title&&(a[o].title=" "),"undefined"==typeof a[o].end&&(a[o].end=""),"undefined"==typeof a[o].access&&(a[o].access=""),QTags.addButton(t(a[o].text).replace(/"|\\/gi,"").toLowerCase(),a[o].text,a[o].start,a[o].end,a[o].access,a[o].title.replace(/"|\\/gi,"")));var i=addquicktag_tags.code_buttons;if("undefined"==typeof typenow&&(typenow=""),"undefined"!=typeof i&&("undefined"==typeof i.htmlentities&&(i.htmlentities=0),"undefined"==typeof i.pre&&(i.pre=0),1===i.htmlentities[typenow]&&

(
QTags.addButton("toHTML","HTML Entities",function(e,t){QTags.insertContent(n(t).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"))},"Encode HTML Entities"),
QTags.addButton("fromHTML","Decode HTML",function(e,t){QTags.insertContent(n(t).replace(/&amp;/g,"&").replace(/&lt;/g,"<").replace(/&gt;/g,">"))},"Decode HTML Entities"),
QTags.addButton("cutHTML","HTML Cut",function(e,t){QTags.insertContent(n(t).replace(/<("[^"]*"|'[^']*'|[^'">])*>/g,''))},"Cut HTML Entities")

),1===i.pre[typenow])){var d=["html","javascript","css","bash","php","vb"];edButtons[109]={html:function(e){return'<select id="'+e+'code_language" class="language-select"><option>blank</option><option>'+d.join("</option><option>")+"</option></select>"}},e("body").on("change","select.language-select",function(){var t=e(this).val();edButtons[110].tagStart=t?'<code class="language-'+t+'">':"<code>"}),QTags.addButton("qt_pre","pre","<pre>","</pre>","","Preformatted text","108")}}}});



languages


addquicktag-zh_CN.po などを Grepなどをつかって HTML Entitles で ソース検索し、

msgid “htmlentities: HTML Entities, HTML Decode”
msgstr “htmlentities: HTML Entities, HTML Decode”

こういうところを

msgid “htmlentities: HTML Entities, HTML Decode, HTML Cut”
msgstr “htmlentities: HTML Entities, HTML Decode, HTML Cut”

のように修正した。

スポンサーリンク

スポンサーリンク

よく使うタグ

・float クリア
<br clear="all"><div style="clear:both;" class="clearfix"></div>
・角丸め
round-radius
border-radius:5px; -webkit-border-radius:10px; -moz-border-radius:10px;
・div box
overflow:scroll;min-width:300px;max-width:300px;min-height:300px;max-height:300px;
・TEXTAREAリサイズ
resize: vertical;
・サイトURL
home_url() // http://…
if(site_url()==home_url){
$shorturl_yuzu_path = substr(ABSPATH,0,strpos( ABSPATH, substr(site_url(),strlen(home_url()) ) ) ).’/’;
}else{
$shorturl_yuzu_path = ABSPATH.’/’;
}
// /var/…
・WP HOME URL
site_url() // http://…/wp
ABSPATH // /var/…/wp
・プラグイン(自分のDIR追加必要)
plugins_url() // http://…/plugins
WP_PLUGIN_URL // http://…/plugins
WP_PLUGIN_DIR // /var/…/plugins
・使用中のテーマ
get_template_directory_uri() // http://…/theme/xx
get_template_directory() // /var/…/theme/xx
・wp-content
content_url() // http://…/wp-content
WP_CONTENT_DIR // /var/…/wp-content
・画像URLからDIR変換
$pctdir=str_replace(content_url(), WP_CONTENT_DIR,$pcturl);
・パス名分解
$pathData = pathinfo($file);
echo $pathData["dirname"]; // /var/~
echo $pathData["filename"]; // xxx
echo $pathData["extension"]; // txt
echo $pathData["basename"]; // xxx.txt
・画像サイズ
list($width,$height) = getimagesize($url);
if(has_post_thumbnail()){
$thumbnail_id = get_post_thumbnail_id();
$thumbnail_img = wp_get_attachment_image_src( $thumbnail_id , ‘full’ );
$src = $image[0]; //url
$width = $image[1]; //横幅
$height = $image[2]; //高さ
・画像サイズ比率
list($src_w,$src_h) = getimagesize($file);
$dst_w = 600;$dst_h = 0;
$dst_h = ($dst_w!=0)?(intval(($src_h*$dst_w)/$src_w )):(($dst_h!=0)?(intval(($src_w*$dst_h)/$src_h)):0);
・疑似要素順
link visited hover active


特殊文字
シングルクォート : &#39;
ダブルクォート : &quot;
WP設定内表示前処理(htmlタグ許可項目)
$str = str_replace(‘<','&lt;' ,$str);
$str = str_replace(‘>’,’&gt;’ ,$str);
$str = str_replace(‘\”‘,’&quot;’,$str);
$str = str_replace(“\'”,’&#39;’ ,$str);
WO設定項目表示前処理(htmlタグ許可項目)
$str = str_replace(‘\”‘,'”‘,$str);
$str = str_replace(“\'”,”‘”,$str);
・テーマ
get_theme_root_uri()
get_theme_root()
・WP 情報
get_bloginfo( $show )
・Wp config FTP 情報 設置
define( ‘FTP_HOST’, ‘host’ );
define( ‘FTP_USER’, ‘id’ );
define( ‘FTP_PASS’, ‘pw’ );
define( ‘FTP_SSL’, false );
弾に使う
placeholder:ユーザー入力補助

カテゴリー

MW WP FORM のフックが効かない。

MW WP FORM のフックが効かない。 MW WP FORM のフックが効かない。MW WP FORM は、各種フックがあってカスタマイズが便利~とか言われているプラグインですが。。。マニュアルにはあるのにフックが効かないフックがかなりある

MW WP FORM のショートコードで出力される内容をカスタマイズする。

MW WP FORM のショートコードで出力される内容をカスタマイズする。 MW WP FORM のショートコードで出力される内容をカスタマイズしたくなりました。非表示フィールド type=”hidden” にデータをためておいて、それをメール送信する

WelCart 買い物かごのカスタマイズ、テンプレートファイルの場所

WelCart 買い物かごのカスタマイズ、テンプレートファイルの場所 WelCart 買い物かごのカスタマイズするとき、毎回テンプレートファイルを探すのでメモしておきます。WelCart 買い物かごのカスタマイズ、テンプレートファイルの場所WelCart 買い物かごのカ

WelCart で投稿ページに商品購入欄を作る

WelCart で投稿ページに商品購入欄を作る WelCart の商品ページは、ご存知んごとくウルトラダサい。これをカスタマイズしないとなんとも素人っぽさの抜けないサイトになってしまう。WelCart で投稿ページに商品購入欄を作るときのモジュール

FB 広告 最適化~グーグルアナリティクスとサーチコンソールの連動のさせかた(必要な分だけ)

FB 広告 最適化~グーグルアナリティクスとサーチコンソールの連動のさせかた(必要な分だけ) FB 広告 最適化にあたって必要になってくるツールがグーグルアナリティクスとサーチコンソール。別にグーグルのアナリティクス、サーチコンソールでなくてもアクセス解析はできるんだけど、グーグルはユーザー囲

FB 広告 最適化~グーグルアナリティクスの使い方(必要な分だけ)

FB 広告 最適化~グーグルアナリティクスの使い方(必要な分だけ) FB 広告 最適化にあたって必要になってくるツールがグーグルアナリティクス。別にグーグルのアナリティクスでなくてもアクセス解析はできるんだけど、グーグルはユーザー囲い込みの為他のアクセス解析では見せな