きむおばプロフィール画像

きむおばです。関東在住の40代の主婦です。 ファイナンシャルプランナーとしてライターをやったり、サイトを作ったり…基本ひきこもりでお仕事をしています。
お金のこと・趣味のこと…何でも気ままに書く雑記ブログです。
目標は、ライター・サイト制作・広告他の収入バランスを整えること。ブログ収入UPに今年は力を入れます。

Menu

AddQuickTagプラグインは必要ない。functions.phpにボタンを追加するコード

wordpressテーマ作成方法

今日は、私がよく使っているWordPressの処理のうち、AddQuickTagプラグインを使わなくても同様な処理ができるようになるコードをご紹介します。コピペで使えるようになりますよ。

AddQuickTagプラグインは使う必要ない

このブログで現在使用中のプラグインは全8つ。

ブログで使用中のお気に入りWordPressプラグインベスト8【2018年版】

少しでもプラグイン使わないで済むのなら、使わない方法を選んでいます。

とは言っても、ブログの入力は少しでも楽にした方が記事作成時間の時短に繋がりますよね。
AddQuickTagプラグインなしで実現する方法
入力画面上部に自分がよく使う処理ボタンを追加できる「AddQuickTag」プラグインをインストールすると、写真のように簡単にボタンが表示されるようになります。

AddQuckTagプラグインなしで実現する方法
例えば、「テーブル」ボタンをクリックすると、一瞬でこのブログ用のテーブルタグが入力欄にセットされるという仕組みです。このおかげで、記事内に簡単に表を取り入れることができています。

でも、この処理、わざわざ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テーマで必要なコードに書き換えて使ってみてくださいね。

>>参考サイト:WordPressCodex クイックタグAPI

wordpressテーマ作成方法
Twitterで最新情報をお知らせ
みんなにシェアしてみる?
稼ぐ