Simple Custom CSS and JS：子テーマなしでCSSとJavaScriptの追加ができるプラグイン

WordPressのテーマを自分のWebサイトに合うようにCSSの修正をしたり、JavaScriptを追加して機能を追加するときは子テーマを利用しましょう！とお伝えしてきました。しかし最初から子テーマでWebサイトを作っていない場合に途中から子テーマに切り替えるとか、慣れていない方が子テーマを使うというのも面倒に感じたりすることもあるかもしれません。CSSとJSの追加だけならプラグインを使えば子テーマでなくても影響が出ないということがわかりましたので、そのプラグインについてご紹介します。

テーマに修正を加えたいときは子テーマを使う、意味

テーマに修正を加えたいときは子テーマを使うのはなぜか？ということについては、

こちらに書いてあります。

子テーマには　functions.php　というphpというプログラム言語で書かれたファイルを使ってかなり大胆なカスタマイズができます。

慣れてしまえば簡単な手順ですが、慣れていないと面倒に感じたり既に親テーマ（通常のテーマ）でWebサイトを運用していたりすると子テーマにするのは気が重いものです。

functions.phpは使わず、CSSによって色やデザインを変えたい、とかJavaScriptで機能をちょっと付け加えたいというカスタマイズがしたいという場合でしたら子テーマを作らなくて親テーマのままでCSSやJavaScriptを追加できるプラグインを見つけました。

その名も　Simple Custom CSS and JS

プラグインの名前はずばり　Simple Custom CSS and JS　というものです。親テーマとは別のところでCSSやJavaScriptを追加できるので、テーマが更新された場合もテーマを違うテーマに変更しても追加したCSSやJavaScriptは適用されたままになります。

インストールは

ダッシュボード プラグイン＞新規追加 をクリック

simple custom css and javascript と入力すると、

このプラグインが見つかるので今すぐインストールをクリック

有効化をクリック。これでプラグインのインストールと有効化が終了です。

CSSを変更して、デザインを変えてみる

CSSを変更してデザインを変えてみたいと思います。

テストサイトでSimplicityをテーマとして使っています。

こんな感じで表示されています。たとえばこの表示の見出し部分の文字の大きさを変えてみます。

ダッシュボード　Custom CSS & JS ＞ Add Custom CSS をクリック

こんな感じの投稿や固定ページの入力画面のようなものが開きます。

タイトル部分には一覧で表示したときにわかるような名前をつけます。

本文のところに、追加したいCSS

.entry h2 a {
  font-size: 18px;
}

を記述します。公開をクリック

このようにタイトル部分の文字が小さくなりました。

CSSのclass指定などはテーマによって違ったりするので、テーマを変えてもCSSが生きているかどうかを確認するために、

* {
  color: #0f0 !important;
}

すべての色を緑色にする　というCSSを入れてみました。

このように表示されています。テーマをTwentySixteenに変更して確認してみます。

このようにテーマを変えても追加したCSSは生きたままになっていました。

※ 確認できたら、文字を全部緑色にするというコードは外しておきます。

タイトルをクリックすると内容を表示するJavaScriptを追加してみる

JavaScriptを追加して何か実用的な動きができるようにカスタマイズしてみたいと思います。

この記事でもご紹介した、FAQなどに良くある「タイトルが並んでいてタイトルをクリックすると内容が表示される」という動きをJavaScriptでつけてみたいと思います。

ダッシュボード　Custom CSS & JS ＞ Add Custom JS をクリック

先ほどと同じような画面が表示されるのでタイトルに一覧したときにわかりやすい名前をつけて、赤枠で囲った部分に

jQuery(function($){
    $('.accordionLister dd').hide();
    $(function(){
        $('.showExcerpt').on('click', function() {
            if($(this).parent().find('dd').css('display') == 'none'){
                $(this).parent().find('dd').show();
            } else {
                $(this).parent().find('dd').hide();
            }
      });
    });

});

このコードを追加して、公開をクリック。

これで使う準備ができました。タイトルをクリックして中身を表示するというコードは投稿や固定ページのテキストタブから

<dl class="accordionLister">
    <dt class="showExcerpt">タイトルをここに入れる</dt>
    <dd>
    内容をここに入れる。
    </dd>
</dl>

上記のコードを入力します。

こんな感じです。これを表示してみると、

このように表示されます。タイトルをクリックすると

内容が表示されます。

複数ある場合は <dl ～ </dl> をワンセットとしてタイトルと内容を書いていきます。

このようにタイトルだけが表示されて、

クリックするとそれぞれの内容が表示されるようになります。

追加したCSSやJSの有効／無効切り替えもできます。

ダッシュボード　Custom CSS & JS ＞ All Custom Code をクリックすると

追加したCSSやJSの一覧が表示されます。

この星マークが青になっている状態は　Active で、有効になっていますので、

星をクリックして無効にすると、先ほどのJavaScriptが無効になり

このように開いた状態で表示されます。同じようにCSSもこの一覧から有効／無効が指定できますのでいろいろ試したりすることが可能です。

まとめ：CSSとJavaScriptの追加をするだけなら子テーマを作らなくてもOK

ということで、まとめとしてはこのSimple Custom CSS and JSプラグインを使えば「CSSとJavaScriptの追加をするだけなら子テーマを作らなくてもOK」ということでした。子テーマを作らずに親テーマのままでCSSとJavaScriptによるカスタマイズが行えて、親テーマの更新時にも影響を受けません。

逆にテーマを変更しても、このプラグインで追加したCSSやJavaScriptは有効なので若干注意が必要です。必要があれば一覧から無効にしたりできますので、テーマに合わせた内容で使うと良いと思います。