CSSとJavascriptのコードを追加できるWordPressプラグイン「Simple Custom CSS and JS」をご紹介します。
WordPressテーマのファイルに直接編集を加えると、テーマがアップデートした時に変更・追加箇所が元に戻ってしまいます。テーマファイルを頻繁に編集する人は、子テーマを入れておく方が便利なのですが、子テーマの導入は少々専門知識も要りますので、ハードルが高い場合もあるでしょう。
そんなときは、「Simple Custom CSS and JS」が便利です。設定画面にただコードを追加するだけなので、手軽にCSS、JS、HTMLを追加したい人向けです。Googleのアクセス解析タグを入れる場合にも便利です。
目次
Simple Custom CSS and JSとは
Simple Custom CSS and JSとは、SilkyPressさんが作成したWordPressプラグインで、CSSとJavascriotコードに加え、HTMLが追加できます。「Simple Custom CSS and JS」プラグインとはほぼ同機能ですので、使用感やアップデートの頻度で選ぶと良いでしょう。
Simple Custom CSS and JSの特徴
Simple Custom CSS and JSの主な機能は次の通り（公式解説より抜粋）。
- 構文ハイライト機能のあるテキストエディター
- インラインや外部ファイルに含めてのコードの出力
- ヘッダーやフッターにコードを出力
- フロントエンド・管理画面・ログイン画面に追加できる
- 追加したい多くのコードを追加
- テーマを変更しても変更点を維持
テーマを変更した際にも追加したコードは引き継がれるのは便利ですね。
プラグインのインストール
管理画面から「Simple Custom CSS and JS」を検索してインストールするか、下のボタンからもダウンロード可能です。プラグインファイルを wp-content/pluginsディレクトリにアップした後、管理画面から有効化してください。
使い方
プラグインを有効化すると、左メニューに「カスタム CSS & JS」というメニューが追加されています。そこからCSS、JS、HTMLを追加できます。
カスタムCSS
カスタムJS
カスタムHTML
設定
設定では以下のことができます。
- HTML エンティティを変換せずそのままに
- HTML エンティティを変換
- エディター内での自動補完
- 「ウェブデザイナー」権限を追加
- HTML からコメントを除去
解説は以上となります。
記事を書く前はカスタムCSSとJSを追加できるだけのシンプルな機能を想像していましたが、ログインや管理画面にもコード追加できたり、細やかな設定ができるのはいいですね。
TCDテーマには既にカスタムCSS・スクリプト機能がある。
TCDテーマには、最初からカスタムCSSやカスタムスクリプト（JavaScript）機能がついています。ですので、当プラグインは基本的には必要ありません。
TCDテーマのカスタムCSS・スクリプトは、所定位置にコードを挿入できるだけというシンプルなものですので、挿入位置を変えたり、フロントだけでなく管理画面やログイン画面にもCSS・JSを追加したい人は「Simple Custom CSS and JS」がおすすめです。
ただ、こちらの記事でも書いたのですが、TCDテーマにも同様の機能が実装されているので、プラグインとの緩衝が起きないとは限りません。いくつかのテーマで動作していることを確認していますが、すべてを確認したわけではありませんので、TCDユーザーの方はその旨をご理解頂いた上でご利用ください。
WordPressテーマ集
コメント