ベンチャー企業の執行役員がゲームやカメラなど、いろいろ書いていきます。

ログ日記

wordpress プラグイン

WordPressで投稿や記事ページごとにcssやjsが指定できる便利プラグイン「Custom css and Js」の使い方

更新日:

WordPressでサイトを作っているときにページごとにCSSやJSを設定したいときがありませんか?
私も仕事でホームページを作るときには複数人で作業をするためスタイルシートを誰かが開いているときにはうかつに触れないし、テストページなどではそのためにスタイルシートを作り、読み込ませるのも面倒。

そんなときに便利なWordPressプラグインが「Custom CSS and JS」。これを使えばカスタムフィールドでCSSやJSを読み込ませることができますし、カスタムフィールドに直接CSSとJSを書き込むことができます。

Custom CSS and JSの使い方

使い方はとっても簡単でCustom CSS and JSをインストールするだけです。
1.Custom CSS and JSのインストール
WordPressのプラグイン追加で「Custom CSS and JS」と検索すると出てきます。
しかしシンプルな名前のプラグインの宿命とも言えますが、ほぼ同じ名前のプラグインがいくつか出てきます。
今回紹介しているプラグイン「Custom css and Js」です。

同じような名前のプラグインで「Custom CSS and javascript」というものもあり、使い方も一緒ですが、こちらは私の環境では機能しませんでした(WordPressのバージョンは4.2.1)。ほかのプラグインやテーマとの相性もあるかとは思いますが。

↑動かなかったプラグイン。

2.カスタムフィールドに追加
カスタムフィールドで新規追加をクリックします。
そしてここからはファイルを読み込む場合と直接書き込む場合でちょっと変わります。

2-1.css・jsファイルを読み込ませる場合
「名前」のところにcssファイルを読み込む場合「custom_css」、jsファイルを読み込む場合「custom_js」と書きます。
そして「値」のところにファイルのパスを書きます。これは相対パスでも絶対パスでも大丈夫です。

2-2.css・jsを直接書く場合
「名前」のところにcssファイルを直接書く場合「custom_css_code」、jsを直接書く場合「custom_js_code」と書きます。
そして「値」のところに直接コードを書いていきます。

これだけで投稿や固定ページごとに自由にcssやjsが指定できます。使い方によってはページごとのcss/jsファイルの容量を軽くすることができそうなので利便性以外にもメリットがありそうです。個人的にはテストページ作成が少し楽になりました。


Pick UP!
東京の定番スイーツ情報をお届け。おいしいスイーツ情報満載!
定番東京スイーツ

最新の更新を
プッシュ通知で購読しよう

-wordpress, プラグイン
-,

Copyright© ログ日記 , 2020 All Rights Reserved.