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

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

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

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

2年ほど前に「子テーマの作り方」という記事を書いたのですが、その後子テーマの作り方についてのオススメの方法が多少変わりました。 自分自身...

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

子テーマには 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

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

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

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

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

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

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

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

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

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

よくある質問、などで「タイトルをクリックすると詳細を表示する」という仕組みがあります。ちょっとこういう表現をしたいなと思って調べてみまし...

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

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

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

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

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

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

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

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

内容が表示されます。

複数ある場合は <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は有効なので若干注意が必要です。必要があれば一覧から無効にしたりできますので、テーマに合わせた内容で使うと良いと思います。

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
トップへ戻る