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

ワードプレスのテキストエディタに任意のボタンを追加することができます。よく使うタグをあらかじめ設定しておけば、記事作成の手間を軽減することができます。プラグインでも可能ですが、
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

- PR -

ニッチなテーマのイラスト素材投稿始めました。良かったら使ってください。
RU DESIGN/無料イラスト・フリー素材「イラストAC」

オリジナル絵本　Kindleにて出版
ナマケモノのふにゃまるちゃん

ドメイン取得は同じところで取得しておくと便利ですよ。
お名前.comは1円から購入(1年間)できるドメインがあるので、いろいろと便利で経済的です。