注目キーワード

WordPress 投稿画面のボタンをエディタの上に追加する

WordPress 投稿画面のボタンをエディタの上に追加する
  1. HOME
  2. WordPress
  3. WordPress使い方
  4. WordPress 投稿画面のボタンをエディタの上に追加する

WordPressのテーマによって投稿画面の記事編集で使用できるボタンはそれぞれですが、頻繁に使用するタグやスタイルをボタンにして追加することで投稿画面で記事の作成や編集をする作業は加速します。

WordPressで投稿画面のボタンをエディタの上に追加するやり方を記事にしたので興味がある方は読み進めてみてください。

 

目次

WordPressの投稿画面にボタンを追加する場所

 

WordPressの投稿画面にボタンを追加すると言っても投稿画面には色々な場所にボタンがあるので今回の投稿画面にボタンを追加する場所を説明しておきす。

WordPressの投稿画面にボタンを追加する場所はWordPressのクラシックエディタの上の部分にあるツールバーです。

WordPressのクラシックエディタはTinyMCEのWYSIWYGエディタを組み込んで「ビジュアルエディタ」と「テキストエディタ」2つのエディタを投稿画面で使用可能にしています。

 

ビジュアルエディタのボタン追加場所

 

 

WordPressの投稿画面でビジュアルエディタに切り替えると投稿画面のエディタの上にツールバーが表示します。

表示したエディタの上のツールバー内がボタンを追加する場所です。ツールバー内部でボタンを追加する場所についてはスタイル項目を表示させてボタンを追加します。

また上の画像のようにエディタのツールバーの上にある「メディアを追加」横の場所にもボタンを追加します。

 

テキストエディタのボタン追加場所

 

 

WordPressの投稿画面でビジュアルエディタからテキストエディタに切り替えると、テキストエディタで使用可能なボタンがテキストエディタのツールバーに表示されます。

テキストエディタに切り替えて表示されたツールバー内がボタンを追加する場所です。

そしてWordPressの投稿画面にボタンを追加するためのPHPコードを記述する場所はテーマのfunctions.phpです。

 

ビジュアルエディタにボタンを追加

 

WordPressのビジュアルエディタにボタンを追加するのは、スタイルをプルダウンメニューから選択して投稿編集に使用できるスタイルセレクトボタンの追加とメディアを追加というボタンの横にボタンを追加します。

 

スタイルセレクトボタンを追加

 

WordPressで投稿画面のビジュアルエディタにスタイルセレクトボタンを追加するやり方は、テーマのfunctions.phpにPHPで関数を定義して配列でボタンの内容を記述します。

 

function tiny_style_formats( $settings ) {
    $style_formats = array(
        array(
            'title' => 'marker-animation',
            'block' => 'span',
            'classes' => 'marker-animation-blue',
            'wrapper' => 'true',
        ),
    );
$settings[ 'style_formats '] = json_encode( $style_formats );
return $settings;
}

add_filter( 'tiny_mce_before_init', 'tiny_style_formats' );
function original_styles_button( $buttons ){
    array_splice( $buttons, 0, 0, 'styleselect' );
    return $buttons;
}

add_filter('mce_buttons_2', 'original_styles_button' );

 

定義する関数はfunction tiny_style_formats( $settings )と記述してスタイルの内容はarray()の配列で記述します。

 

  • title=>投稿画面に追加するボタンに表示される
  • block=>タグの種類。divでブロック、spanでインライン
  • classes=>クラス属性。CSSでスタイルするときのクラス名
  • wrapper=>親要素にして囲むかどうか

 

複数のスタイルを追加したい場合には、「array(),array()」というようにコンマ区切りで記述することで、スタイルセレクトボタン内にプルダウン形式で内容を増やせます。

配列を記述したらJSONエンコードしてtiny_mce_before_initで定義した関数の配列を渡します。

 

Advertisement

 

そしてWordPressのビジュアルエディタの上のツールバーに表示するスタイルセレクトボタンはfunction original_styles_button( $buttons )の関数を書いた中のarray_spliceでセレクトボタンを表示します。

このときボタンを追加するツールバー内の位置を変更するときには、array_splice( $buttons, 0, 0, ‘styleselect’ );の第二引数の数値を変更すれば横に移動します。例えば1にしたら左から右に１つずれます。

ボタンを追加する位置を段下げしたい場合には、フィルターadd_filter(‘mce_buttons’, ‘original_styles_button’ );の’mce_buttons’を’mce_buttons_2’にするとビジュアルエディタのツールバー2段目の位置にボタンを追加でます。

 

 

WordPressの投稿画面のエディタの上に実際にボタンを追加して表示すると上の画像のようにツールバー2段目にスタイルセレクトボタンが追加されボタンをクリックすると配列に記述したスタイル内容が含まれています。

 

「メディアを追加」の横にボタン

 

WordPressで投稿画面のボタンをビジュアルエディタの上に追加するときに「メディアを追加」の横にボタンを追加する場合は以下のように記述します。

 

<?php

function add_custom_preview_button() {
?>
<script>
    (function($) {
    $('#wp-content-media-buttons').append('<a id="custom-preview" class="button">preview</a>');
    $(document).on('click', '#custom-preview', function(e) {
        e.preventDefault();
        $('#post-preview').click();
    });
    }(jQuery));
</script>
<?php
}
add_action( 'admin_footer-post-new.php', 'add_custom_preview_button' );
add_action( 'admin_footer-post.php', 'add_custom_preview_button' );

?>

 

#wp-content-media-buttonsが「メディアを追加」ボタンの親要素になっているようなので、#wp-content-media-buttonsのidでボタンを追加します。

JavaScriptやjQueryは理解不足なので調べたり参考にしながらボタンを追加してみたのですが、append()で要素に引数で指定したコンテンツを追加できるようです。

そのためWordPressの投稿画面の「メディアを追加」ボタンの親要素#wp-content-media-buttonsのidでappend()の引数にボタン表示の要素を作成し、jQueryでイベント処理を作成します。

 

アクションフックについては以下2つにフックします。

 

  • admin_footer-post-new.php　新規投稿画面
  • admin_footer-post.php　投稿編集画面

 

そうするとWordPressの投稿画面「メディアを追加」のボタン横に新しくボタンを追加できます。

 

 

メディアを追加の横にボタンを追加するのはイベント処理がよくわからないため私には難しく感じました。勉強しなくては…

 

テキストエディタにボタンを追加

 

WordPressで投稿画面のエディタの上に追加するときに、テキストエディタにボタンを追加する場合にはクイックタグをテストエディタに挿入できるようにPHPでコードを以下のように記述します。

 

<?php

if(!function_exists( 'add_quicktags_to_text_editor')) {
    function add_quicktags_to_text_editor() {
        if(wp_script_is('quicktags')){?>
        <script>
            //ここにボタンで挿入する内容を書く
        </script>
        <?php
        }
    }
}
add_action( 'admin_print_footer_scripts', 'add_quicktags_to_text_editor');

?>

 

function_existsで作成する関数が登録済みかを判定できるようにしてボタンを追加する関数を書きます。

そしてif(wp_script_is(‘quicktags’))でスクリプトキューにquicktagsが登録済みか判定できるように記述。

作成した関数はadd_actionでadmin_print_footer_scriptsにアクションフックします。

 

Advertisement

 

クイックタグのボタンを追加して投稿編集エディタに挿入される内容は<script></script>に記述します。

WordPressの投稿画面のテキストエディタで「ボックスを挿入するボタンの追加」と「ショートコードを挿入できるボタンの追加」を例にしてクイックタグの作り方を説明します。

 

ボックスを挿入するボタンを追加

 

WordPressのテキストエディタにクイックタグでボックスを挿入できるようにするときはボタンを追加する関数の<script></script>の中にQTags.addButtonでパラメータ記述します。

 

<?php

if(!function_exists( 'add_quicktags_to_text_editor')) {
    function add_quicktags_to_text_editor() {
        if(wp_script_is('quicktags')){?>
        <script>
            QTags.addButton('qt-bgbox','BOX','<div class="bgbox">','</div>');
        </script>
        <?php
        }
    }
}
add_action( 'admin_print_footer_scripts', 'add_quicktags_to_text_editor');

?>

 

QTags.addButton(‘qt-bgbox’,’BOX’,'<div class=”bgbox”>’,'</div>’);

 

上記のQTags.addButtonで説明します。

 

qt-bgboxがidです。投稿画面のテキストエディタにボタンを追加したinputタグにidが付与されます。

BOXはWordPressのテキストエディタのツールバーに表示されるボタン名です。

<div class=”bgbox”>は追加するボタンでテキストエディタに挿入される開始タグです。ボックスのボタンを追加したいので、実際に挿入する要素はdiv要素が挿入できるようにします。

</div>はテキストエディタに挿入される終了タグです。

パラメータはカンマで区切って記述してください。

 

 

投稿画面のテキストエディタにボタンを追加する関数でQTags.addButtonのパラメータを記述してからfunctions.phpを保存してWordPressの投稿画面からテキストエディタのツールバーを確認するとボックスというボタンが追加されてます。

 

 

テキストエディタでボックスのボタンをクリックするとQTags.addButtonのパラメータに記述したdiv開始タグが挿入でき、もう一度ボックスボタンをクリックするとdiv終了タグが挿入されてボックス要素がマークアップできます。

ボックス要素のスタイルはテーマのstyle.cssでQTags.addButtonのパラメータに記述した開始タグのクラス名をCSSのクラスセレクタにしてデザインします。

 

ショートコードをボタンで追加

 

次にWordPressのショートコードをボタンで追加できるようにします。ボックスボタンを追加したときと同じくQTags.addButtonのパラメータで作成します。

 

<?php

if(!function_exists( 'add_quicktags_to_text_editor')) {
    function add_quicktags_to_text_editor() {
        if(wp_script_is('quicktags')){?>
        <script>
            QTags.addButton('qt-bgbox','BOX','<div class="bgbox">','</div>');
            QTags.addButton('qt-adsense','記事内広告','[adsense]','');
        </script>
        <?php
        }
    }
}
add_action( 'admin_print_footer_scripts', 'add_quicktags_to_text_editor');

?>

 

上のPHPコードではボックスのボタンを記述した下にショートコードのボタンを追加しています。

投稿画面にショートコードボタンを追加したinputタグのidとボタンの名前を記述してから[adsense]のようにショートコードタグを記述します。

 

Advertisement

 

次にパラメータに記述したショートコードの中身を作成します。

 

function short_adsense_post() {
    return '<div class="article-ad"><p>Advertisement</p><!-- adsenseコード --></div>';
}

add_shortcode('adsense', 'short_adsense_post');

 

ショートコード用の関数にreturnでショートコードで挿入する内容を作ります。

作成した関数はショートコード用のadd_shortcodeでフックして追加します。

WordPressの投稿画面内のテキストエディタからツールバーを確認すると、ショートコードの記事内広告ボタンが追加されています。

 

 

テキストエディタに記事内広告ボタンをクリックで挿入するとQTags.addButtonのパラメータで記述したadsenseのショートコードタグがマークアップできます。

ショートコードで挿入した要素のスタイルはテーマのstyle.css使用して、ショートコード関数のreturnで記述した開始タグのクラス名をCSSのクラスセレクタにしてデザインします。

 

WordPressのエディタにボタンを追加したCSS

 

WordPressの投稿画面に追加したボタンで挿入した要素のCSSをエディタで反映させたい場合には、style-editoe.cssを読みむことで投稿画面でも実際と同様のCSSを記述できます。

 

add_editor_style("style-editor.css");

 

functions.phpにadd_editor_style関数を記述します。add_editor_styleのパラメータにはstyle-editor.cssのパスを指定。

上記のコードではテーマフォルダの直下にstyle-editor.cssを配置した場合です。

子テーマでスタイルするなら子テーマのfunctions.phpにadd_editor_styleを記述して子テーマフォルダ直下にstyle-editor.cssを配置します。

 

配置したstyle-editor.cssを使用してWordPressのエディタにボタンを追加したCSSを書いていきます。

例えばボタンに追加したボックスのスタイルを実際のスタイルと同じデザインで投稿編集画面でも適用する場合。

 

QTags.addButton('qt-bgbox','BOX','<div class="bgbox">','</div>');

 

WordPressの投稿画面にボックスのボタンを追加したときのQTags.addButtonのパラメータの<div class=”bgbox”>のクラス名をstyle-editor.cssでクラスセレクタにします。

 

.divbox{
    position: relative;
    border: 2px solid #5f69dd;
    border-radius: 5px;
    padding: 20px;
    width: 500px;
}

.divbox::before{
    content: "POINT";
    position: absolute;
    top: -15px;
    left: 15px;
    font-size: 1.3rem;
    font-weight: bold;
    background-color: #ffffff;
    color: #c53929;
    padding: 0 10px;
    font-family: Arial, Helvetica, sans-serif;
}

 

 

WordPressのエディタにボタンを追加したCSSは実際に投稿画面のビジュアルエディタにボタンでボックスを挿入するとスタイルが適用できます。

WordPressのエディタにボタンを追加したCSSを適用させておくのは、WordPressの投稿画面のボタンをエディタの上に追加する作業に含めて一緒にやってしまうといいかと思えます。

WordPress使い方カテゴリの最新記事