この記事は約 2 分で読めます ( 約 1151 文字 )

記事の概要

あなたはWordpressのカスタマイズをどれだけ行っていますか?WordPressのカスタマイズの方法によってはcssやjavascriptを編集することもあるでしょう。

しかし、直接テーマにあるものを書き換えた場合テーマを更新すると編集した内容が消えてしまいます。テーマを更新するたびに何度も同じ内容を編集し直すのは面倒ではありませんか?

この記事では、そういった悩みを解決できる「Diana Burduja」氏の「Simple Custom CSS and JS」を紹介します。

「Simple Custom CSS and JS」とは?

「Simple Custom CSS and JS」とは直接テーマを編集しなくても編集した内容を反映できるプラグインです。直接テーマを編集しないのでテーマの更新後も編集内容は保持されます。

「Simple Custom CSS and JS」の導入方法

手順1

WordPressの管理画面にログインします。

手順2

管理画面の左メニューの”プラグイン”をクリックします。
wp_plugin-001

手順3

”プラグイン”の中の”新規追加”をクリックします。
wp_plugin-002

手順4

画面右上の検索欄に”Simple Custom CSS and JS”と入力します。
simple-custom-css-and-js-001

手順5

下記画像のプラグインを探して”インストール”をクリックします。
simple-custom-css-and-js-002

手順6

”インストール”のボタンが”インストール中”を経て”有効化”ボタンに変わるので、”有効化”ボタンをクリックしたらインストールは完了です。

CSSやJavaScriptの追加方法

手順1

管理画面の左メニューの”Custom CSS & JS”をクリックします。
simple-custom-css-and-js-003

手順2

CSSを追加する場合は”Add CSS Code”、JavaScriptを追加する場合は”Add JS Code”、HTMLを追加する場合は”Add HTML Code”をクリックします。
simple-custom-css-and-js-004

手順3

コードの名前とコードの内容、そしてHTMLにどう反映しどこでリンクをするかといったことを選んだあとに”公開”をクリックします。個人的にはHTML(特にヘッダー)をあまり汚したくないので”External File”と”Footer”を選択しています。”Where in site”の項目は公開する場所に反映する位場合は”in Frontend”、管理用のページに反映する際はは”in Admin”を選択します。
simple-custom-css-and-js-005

まとめ

この記事では、テーマを直接編集せずともCSSやJSを反映できる「Simple Custom CSS and JS」を紹介しました。

テーマの更新毎にCSSやJSを編集せずに済むので非常に便利です。

あなたもこのプラグインを導入してテーマの更新毎に”function.php”を編集し直す手間を省きませんか?