ワードプレスのテキストエディタにプラグイン無しでボタンを追加

ワードプレスのテキストエディタに任意のボタンを追加することができます。よく使うタグをあらかじめ設定しておけば、記事作成の手間を軽減することができます。プラグインでも可能ですが、
functions.phpに記述するだけで、独自のタグを出力するボタンを追加することが可能になります。
 
ワードプレスには、ボタン追加するためのクイックタグ「Quicktags API」が用意されているので、初心者の方でも簡単に作成することができますよ。

Quicktags APIの使い方

QTags.addButtonのパラメータを設定していきましょう。

QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance );

 
例1
QTags.addButton( ‘eg_paragraph’, ‘p’, ‘<p>’, ‘</p>’, ‘p’, ‘段落タグ’, 1 );
<p></p>タグをボタンで追加する事ができます。
 
例2
QTags.addButton( ‘custom-button’, ‘赤マーカー’, ‘<span class=”red-marker”>’, ‘</span>’, ”, ‘赤マーカー’, 1 );
classを付け任意のCSSで装飾がする事ができます。

function.phpへの記述例

例では特殊文字を使用するボタンを追加しています。
記事作成はテキストエディタのみでやっているので、「&lt」やスペースを利用したい時に使っています。

// add more buttons to the html editor

add_action('admin_print_footer_scripts', function () {
		
	//QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance );
	
	if (wp_script_is('quicktags')){
		
		echo <<<EOF
<script type="text/javascript">
	QTags.addButton('custom-button-1', '<>', '&lt;', '&gt;', '', '<>特殊文字', 1);
	QTags.addButton('custom-button-2', 'SPACE', '&nbsp;', '', '', 'スペース特殊文字', 2);  
</script>

EOF;
		
	}
	
},100);

 
プラグインを導入したけど自分が使いたいボタンが無い、毎回タグをコピペするのは面倒。HTMLタグだけではなくアフィリエイトのタグなど登録しておくのも良いかもですね。
ご自身に必要な便利な機能だけを追加して記事作成に励んでください。
 

参考ページ：WordPress Codex 日本語版
https://wpdocs.osdn.jp/クイックタグAPI

関連投稿:

【初心者の方向け】 Bootstrap4の使い方 ボーダー 【初心者の方向け】 Bootstrap4の使い方 フォーム 【初心者の方向け】 Bootstrap4の使い方 余白 【初心者の方向け】 Bootstrap4の使い方 カルーセル