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:ユーザー入力補助

カテゴリー

jQuery ボタンを押しても反応しない

jQuery ボタンを押しても反応しない jQuery の click イベントを使ってボタンを押したら alert を表示する簡単な仕様なのになにも反応しない。一瞬はまってしまうことって・・・ありますよね?例えば、こう書きます。popup.

WP パーマリンク リダイレクト インターナルサーバーエラー

WP パーマリンク リダイレクト インターナルサーバーエラー WP パーマリンクのリダイレクトがインターナルサーバーエラーを起こすようになった。ユーザーさんのサイトなので「なにをしたか」わからない。WP パーマリンク リダイレクト インターナルサーバーエラーのい

Javascript から CGIを呼び出すのに便利な XMLHttpRequest 覚書

Javascript から CGIを呼び出すのに便利な XMLHttpRequest 覚書 XMLHttpRequestは、Javascript から サーバー上のCGIを呼び出す時に便利なコマンドだ。XMLHttpRequestをざっくり書いておく。CGIへコマンドを送る(JavaScri

Unchecked runtime.lastError: The message port closed before a response was received.の解決策

Unchecked runtime.lastError: The message port closed before a response was received.の解決策 Unchecked runtime.lastError: The message port closed before a response was received.未チェックのruntime.la

ロボフォームのようなパスワードを保存する拡張機能

ロボフォームのようなパスワードを保存する拡張機能 ロボフォームのようなパスワードを保存するJavaScritpを書こうと思った。ロボフォームは、wwwサイトのログイン情報などを保存できるブラウザの拡張機能だ。ところが、バージョンが上がるたび使い勝手が

flexbox インストールなど面倒なことなしにDIV BOX を横に並べるクラス

flexbox インストールなど面倒なことなしにDIV BOX を横に並べるクラス flexbox は、div の box を横に並べるためのブラウザに標準装備されてるクラス。乱暴な言い方すればそういうことです。現場では細かいことはどうでもよくて、とにかく簡単に DIV BOX を横