サイトに独自のCSSやJavaScriptを追加できるWordPressプラグイン「Simple Custom CSS and JS」

サイトに独自のCSSやJavaScriptを追加できるWordPressプラグイン「Simple Custom CSS and JS」

サイトに独自のCSSやJavaScriptを追加できるWordPressプラグイン「Simple Custom CSS and JS」

Simple Custom CSS and JSは、サイトに独自のCSSやJavaScriptを管理画面上から追加できるWordPressプラグインです。

管理画面上からコードを追加できるので、子テーマ化してテーマを編集する必要がありません。

Simple Custom CSS and JSのインストール

インストール手順は以下の通りです。

ファイルをFTPでアップロードしてインストール

  1. Simple Custom CSS and JSをダウンロードします。
  2. ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。
  3. 管理画面の[プラグイン]ページで、Simple Custom CSS and JSを有効化します。

WordPress管理画面でインストール

  1. [プラグイン] – [新規追加]にアクセスします。
  2. 「Simple Custom CSS and JS」で検索します。
  3. [今すぐインストール]をクリックして、Simple Custom CSS and JSをインストールします。
  4. [有効化]をクリックしてプラグインを有効化します。

Simple Custom CSS and JSの設定

WordPress管理画面の[カスタムCSS&JS] – [設定]でプラグインの設定ができます。

Simple Custom CSS and JSの設定
HTMLエンティティを変換せずそのままに 記号などをHTMLエンティティに変換しない
HTMLエンティティを変換 記号などをHTMLエンティティに変換する
エディター内での自動補完 コードの自動補完有効化
「ウェブデザイナー」権限を追加 コードの追加ができるユーザー権限を追加(通常は管理者のみ)
HTMLからコメントを除去 コード出力時に追加されるHTMLコメントを除去

Simple Custom CSS and JSの使い方

カスタムCSSの追加

[カスタムCSS&JS] – [カスタムCSSの追加]を開くと、カスタムCSSを追加できます。

わかりやすいタイトルを入力して、CSSを記述しましょう。

カスタムCSSの追加

「リンクの種類」では、インラインで出力するか、外部ファイルとして読み込むかを選択します。どちらを選択したとしても、追加したコードは「/wp-content/uploads/custom-css-js/」配下にファイルとして保存されます。

「表示位置」では、ヘッダーとフッターのどちらに出力するか選択します。「表示対象」では、サイト・管理画面・ログイン画面のどこに出力するか選択します。

カスタムJSの追加

JavaScriptを追加したい場合は、[カスタムCSS&JS] – [カスタムJSの追加]から追加します。

CSSの時と同様に、タイトルやコードを入力して保存します。

カスタムHTMLの追加

Googleアナリティクスのトラッキングコードや外部のライブラリ読み込みなど、カスタムHTMLを追加したい場合は[カスタムCSS&JS] – [カスタムHTMLの追加]から追加します。

カスタムHTMLの追加

カスタムHTMLの場合は、「表示位置」に”<body>タグの後”という選択肢が追加されています。「表示対象」では”ログイン画面”がありません。

また、カスタムCSSやJSのようにファイルとして保存はされません。そのため、「リンクの種類」の選択肢もありません。

既存コードの管理

既存コードの管理は、[カスタムCSS&JS] – [コードの一覧]で行います。編集や削除、無効化が可能です。

既存コードの管理

あとがき

管理画面上からサイトにコードを追加できて便利ですね。

ちなみに、有料版を購入すると、特定のページのみに適用したり、コードのバージョン管理(編集履歴の管理)などができるようになります。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です