AddQuickTagプラグインを使わずにWordPressの編集画面にボタンを追加する方法。コードのコピペでOK
きむおば
このブログではアフィリエイト・アドセンス広告を利用しています
当ブログでは、アドセンス・アフィリエイト広告を掲載しています。
消費者庁が発表しているルールに沿って記事を作成していますが、問題のある表現を見つけた際にはご連絡ください。
今日は、私がよく使っているWordPressの処理のうち、AddQuickTagプラグインを使わなくても同様な処理ができるようになるコードをご紹介します。コピペで使えるようになりますよ。
目次(読みたいところへジャンプ!)
AddQuickTagプラグインは使う必要ない
このブログで現在使用中のプラグインは全8つ。
少しでもプラグイン使わないで済むのなら、使わない方法を選んでいます。
とは言っても、ブログの入力は少しでも楽にした方が記事作成時間の時短に繋がりますよね。
入力画面上部に自分がよく使う処理ボタンを追加できる「AddQuickTag」プラグインをインストールすると、写真のように簡単にボタンが表示されるようになります。
例えば、「テーブル」ボタンをクリックすると、一瞬でこのブログ用のテーブルタグが入力欄にセットされるという仕組みです。このおかげで、記事内に簡単に表を取り入れることができています。
でも、この処理、わざわざAddQuickTagプラグインを使わなくても、punctions.phpにコードを追加するだけで実現するんです。
WordPressカスタマイズにちょっと慣れてきた人なら、無理なく取り入れられる方法ですよ。
AddQuickTagプラグインなしで編集画面に独自のボタンを追加する方法
下のコードをコピペすると、きむおばブログと全く一緒のボタンが編集画面に追加されます(笑。
/*-------------------------------------------------------
AddQuickTag
-------------------------------------------------------*/
<?php
function add_my_quicktag() {
?>
<script type="text/javascript">
QTags.addButton('list-check', 'リスト−チェック', '<li class="setmark_check">', '</li>');
QTags.addButton('list-heart', 'リスト−ハート', '<li class="setmark_heart">', '</li>');
QTags.addButton('list-star', 'リスト−星', '<li class="setmark_star">', '</li>');
QTags.addButton('list-arrow', 'リスト−矢印', '<li class="setmark_arrow">', '</li>');
QTags.addButton('list-number', 'リスト−番号', '<li class="numberlist"><a href="#">', '</a></li>');
QTags.addButton('button01', 'ボタン大', '<button type="button" class="btn btn-default btn-lg">', '</button>');
QTags.addButton('table01', 'テーブル', '<div class="table-responsive">' +'\n'
+ '<table class="table table-striped table-hover">' +'\n'
+ '<thead>' +'\n'
+ '<tr>' +'\n'
+ '<th></th>' +'\n'
+ '</tr>' +'\n'
+ '</thead>' +'\n'
+ '<tbody>' +'\n'
+ '<tr>' +'\n'
+ '<th></th>' +'\n'
+ '<td></td>' +'\n'
+ '</tr>' +'\n'
+ '</tbody>' +'\n'
+ '</table>' +'\n'
+ '</div>' +'\n', '');
QTags.addButton('code', 'コード', '<pre class="prettyprint html prettyprinted">', '</pre>');
QTags.addButton('box1', '枠1', '<div class="box1">', '</div>');
QTags.addButton('box2', '枠2', '<div class="box2">', '</div>');
QTags.addButton('box3', '枠3', '<dl class="dlbox"><dt>タイトル</dt><dd>本文</dd></dl>');
QTags.addButton('arrow', '矢印', '<div class="arrow"><i class="fa fa-arrow-down" aria-hidden="true"></i></div>');
</script>
<?php
}
add_action('admin_print_footer_scripts', 'add_my_quicktag');
?>
カスタマイズに慣れている方なら、単純なコードなのですぐに察するかと思いますが、簡単に構成を説明しますね。
QTags.addButton('ボタンのhtmlのid値', 'ボタンに表示されるボタン名', 'ボタンを押したら入力される開始タグ', 'ボタンを押したら入力される終了タグ');
あなたのWordPressテーマで必要なコードに書き換えて使ってみてくださいね。