AddQuickTagプラグインを使わずにWordPressの編集画面にボタンを追加する方法。コードのコピペでOK

このブログではアフィリエイト・アドセンス広告を利用しています

当ブログでは、アドセンス・アフィリエイト広告を掲載しています。
消費者庁が発表しているルールに沿って記事を作成していますが、問題のある表現を見つけた際にはご連絡ください。

今日は、私がよく使っている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

    同じカテゴリの関連記事リスト