WordPressで自作CSSを管理するクイックタグ活用法

WordPressの投稿画面にクイックタグは、ボタン一つでタグを挿入でき、作業効率をあげることができますよね。実はコレ、手入力しなければいけない独自で作ったCSSを登録することもできます。

私の場合、作ってしばらくしたあと、存在を忘れてしまうことがあるので、クイックタグに登録して管理するようにしています。

目次


　
クイックタグの登録は、投稿ページの管理画面への表示を変えるので、functions.phpにこのようなコードを追加する必要が出てきます。

function add_quicktags() {
    ?>
    <script type="text/javascript">
    QTags.addButton('ID', 'ボタン', '開始タグ', '終了タグ');
    </script>
    <?php
}
add_action('admin_print_footer_scripts', 'add_quicktags');

このコードをどうのように扱うかですが…
やり方は以下の通り。
　
　

　
　

functions.php自体さわらない

一番簡単なのが、AddQucktagというプラグインを使うことです。WordPressでブログを作る上で大切なのは、記事を書くこと。デザインに凝ることではありません。WordPressのことはよくわからないし、functions.phpに自分で手を加えたくない！というときはプラグインを利用してクイックタグを追加しましょう。
　
自作のCSSは、追加CSSに入力することで新しく作ることができます。
外観 → カスタマイズ → 追加CSS

カスタマイズ
　
　↓
　
クイックタグ 追加css
　
　↓
　
クイックタグ 追加CSS 入力

　

インストール済のプラグインを使う

これは私がプラグインで自作のCSSと自作のショートコードの管理をしているので、これらのプラグインを利用してクイックタグを追加していきます。
　
クイックタグに自作のタグを表示させるために必要なのは、自作のcss。Simple Custom CSS and JSというプラグインを使用して自作したcssを追加します。
　
そして、ページ冒頭のコードはCode snippetsというプラグインに入力します。

function add_quicktags() {
    ?>
    <script type="text/javascript">
    QTags.addButton('ID&', 'ボタン', '開始タグ', '終了タグ');
    </script>
    <?php
}
add_action('admin_print_footer_scripts', 'add_quicktags');

ショートコードを作るときの型と同じですね。
　
　
このコードを丸ごとコピーして貼り付けてしまえばOKですが、
・「ID」にはそれらしい適当な名前をつけます。クイックタグには表示されません。
・「ボタン」にはクイックタグに表示させたい名前をつけて
・「開始タグ」「終了タグ」にはテキストエリアに表示させたいタグを入力します。
　
　
たとえば、文字に赤のマーカーでアンダーラインを引くとなると、

.marker{
    background: linear-gradient(transparent 60%, #ff0000 0%);
}

cssはこうなって
　

QTags.addButton('marker', '赤マーカー', '<span class="marker">', '</span>');

となります。
　
　
Code snippetsはfunctions.phpにクイックタグへの登録コードを追記するので、functions.phpは、Simple Custom CSS and JSによって外部ファイル化された自作cssを読みにいって、クイックタグに表示してくれます。
　
クイックタグ 表示
　
　
クイックタグを追加したい場合は、QTags.addButtonの下にQTags.addButtonを増やしていく。

function add_quicktags() {
    ?>
    <script type="text/javascript">
    QTags.addButton('ID&', 'ボタン', '開始タグ', '終了タグ');
    QTags.addButton('ID&', 'ボタン', '開始タグ', '終了タグ');
    </script>
    <?php
}
add_action('admin_print_footer_scripts', 'add_quicktags');

一度作った自作CSSに新たなCSSを追加したら、QTags.addButtonの１行を追加すればOKです。
　

CSSとfunctions.phpに直接入力する

文字通り、自作のcssとクイックタグ登録用のコードを、それぞれスタイルシートとfunctions.phpに直接入力します。テーマファイルをいじる必要があるので神経を使うかもしれません。しかし、プラグインを使用しないでクイックタグを登録できるため、プラグイン追加によるサイトの負荷はありません。
　
新しいスタイルを作ったら、クイックタグへ登録する、ちょっとした手間はかかりますが、記事の作成はかなり楽になるはずです。
　

WordPressのアップデートで表示されなくなった！

（2022/6/3 更新）
2022/05/25にリリースされたバージョン6.0にアップデートしたところ、追加したはずのクイックタグが表示されなくなりました。
　
いろいろと探ってみたところ、バージョンアップしたことでバグによってQTags.addButtonがうまく認識できなくなっているようです。
　
この症状の回復はアップデートを待つしかない（汗）。と言いたいところですが、次のような対策で認識させることができます。

このif文でQTags.addButtonを囲う事。
　

if(window.addEventListener){
    window.addEventListener('load', function(){

    });
}

　
こういう形です。
↓↓↓
　　

function add_quicktags() {
    ?>
    <script type="text/javascript">

    if(window.addEventListener){
        window.addEventListener('load', function(){

       QTags.addButton('ID', 'ボタン', '開始タグ', '終了タグ');
    
    });
    }

    </script>
    <?php
}
add_action('admin_print_footer_scripts', 'add_quicktags');

　
再読み込みさせているので一瞬ズレが発生しますが、これで表示させることができます。
　
　

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です