WordPressで個別のページごとに、CSSやJavaScriptが利用できる便利なプラグイン -CSS & JavaScript Toolbox
Post on:2018年4月18日
sponsors
WordPressの記事ページや固定ページごとに、異なるHTMLやCSSやJavaScriptやPHPを利用でき、一元管理もできるWordPressのプラグインを紹介します。
適用できるページは単独でも複数も可能で、適用する場所もヘッダやフッタにと指定できます。前回紹介した際から大きくバージョンがアップし、さらに便利になった新機能も含めて要チェックです。
CSS & JavaScript Toolboxの特徴
CSS & JavaScript Toolboxの特徴
- HTMLやCSSやJavaScriptやPHPのコードを特定のページのみに挿入できます。
- 記事ページ、固定ページ、カテゴリ、カスタム投稿、タグごとに指定できます。
- コードを記述するのに最適なエディタを備えています。
- テーマファイルに手を加える必要はありません。
- FTPも必要ありません。
- ページのコンテンツや広告、Google Analyticsやフッタなど、そのページだけでも全ページに適用するコードにも対応。
WordPressの指定したページだけにコードを加える
WordPressの記事ページ、固定ページをはじめ、カテゴリ、カスタム投稿、タグなどのグループに、複数のコードをブロック単位で加えることができます。加えるコードは一元管理でき、簡単に修正・変更がもできます。
左: 固定ページの一覧、右: 記事ページの一覧
コードを配置する場所を指定できる
コードを加える場所をヘッダとフッタそれぞれに指定することができます。例えば、CSSはヘッダに、JavaScriptはフッタにといった使い分けもできます。
コードを配置する場所を指定（H: ヘッダ、F: フッタ）
コードの一元管理が簡単
加えたコードは、CSS & JavaScript Toolboxの管理画面で一元管理ができます。
- コードのアクティブ化・非アクティブ化
- コードの配置をヘッダに・フッタに
- コードのバックアップ・削除
コードの管理機能
サポート言語
CSS & JavaScript Toolboxでは、以下のコードを配置できます。
- HTML
- CSS
- JavaScript
- PHP
これらの言語の編集時はシンタックスハイライトに対応しており、コードをテンプレート化することもできます。また「Auto Completion」のプラグイン（無料）を使用することで、オートコンプリートにも対応します。
サポート言語
コードのバックアップとリビジョン管理
作成したコードはバックアップマネージャーで、全てのコードのバックアップを作成し、復活することも削除することも可能です。また、コードごとにリビジョンが管理されているので、個別のコードだけを直したい場合も問題ありません。
コードのバックアップとリビジョン管理
ショートコードとしても利用できる
作成したコードは、ショートコードとして利用することも可能です。コードを作成するとショートコードが自動で生成され、編集画面のビジュアルエディタから利用できます。
ショートコードでも利用できる
コード編集画面のカスタマイズ
コードの編集画面は作業がしやすいようシンタックスハイライト、オートコンプリート、フルスクリーン表示、テーマ変更に対応しています。
用意されているテーマ
CSS & JavaScript Toolboxのインストール
通常のプラグインと同じで、WordPressの管理画面の「プラグインの新規追加」から「CSS & JavaScript Toolbox」を検索するか、下記ページからファイルをダウンロードします。
必要システム
- WordPress 3.9+(4.9.5対応)
- PHP 5.4+
CSS & JavaScript Toolboxのインストール
- ダウンロードしたファイルをサーバーの指定の場所（/wp-content/plugins/）にアップロードします。
- WordPressの管理画面のプラグインから「CSS & JavaScript Toolbox」を有効化。
CSS & JavaScript Toolboxの使い方
CSS & JavaScript Toolboxを使用して、特定のページにだけCSSを適用してみます。
管理画面のメニューから「CSS & JavaScript Toolbox」をクリックし、プラグインのページを開きます。最初に、適用するCSSのコードを作成するので、「New Code Block」をクリックします。
コード ブロックの新規作成
ダイアログが開くので、コードの名称を決めます。
新規作成のダイアログ
名前を入力し、「Create」をクリックします。
名前や配置場所などは、後からでも変更できます。
新規作成のダイアログ
p要素をレッドにしてみます。
適用するコード
コードを適用するページを設定します。
右パネルから適用するページを選択し、その上の「Save」をクリックし保存します。
適用するページを指定
指定したページだけp要素のカラーがレッドになりました、もちろん他のページには適用されていません。
ページに反映
コードを見てましょう。
加えられたコードは、CJTのコメントに挟まれて記述されています。
自動コメント機能
sponsors
