WordPressで特定ページにだけコードを埋め込める便利プラグインの使い方をご紹介 -CSS & JavaScript Toolbox

WordPressのプラグイン

Post on:2014年5月12日

CSS & JavaScript Toolboxの特長

WordPressで特定のページだけに複数のコードを加える

WordPressの投稿ページ、固定ページをはじめ、カテゴリ、カスタム投稿、その他用意されているページグループに、複数のコードをブロック単位で加えることができます。加えるコードは一元管理でき、簡単に修正・変更がもできます。

左：固定ページ一覧、右：用意されているページグループ

ヘッダに個別のCSS、フッタに個別のJavaScriptを加える

CSS & JavaScript Toolboxでは、コードを加える場所をヘッダとフッタそれぞれに指定することができます。これはCSSはヘッダに、JavaScriptはフッタにといった使い分けもできます。

ヘッダとフッタの切替

加えるコードの一元管理が簡単

加えるコードは、CSS & JavaScript Toolboxの管理画面で一元管理ができます。

全てのコードのアクティブ化・非アクティブ化
全てのコードの配置をヘッダ・フッタに
全てのコードのバックアップ・削除

左から、アクティブ化の管理、ヘッダとフッタの管理、全コードのバックアップ管理

サポート言語

HTML
CSS
JavaScript
PHP

これらの言語はコードのブロックとして扱うことが可能で、編集時はシンタックスハイライトに対応しており、コードをテンプレート化することもできます。また「Auto Completion」のプラグイン（無料）を使用することで、オートコンプリートにも対応します。

サポート言語は、4種類

コードのバックアップとリビジョン管理

作成したコードはバックアップマネージャーで、全てのコードのバックアップを作成し、復活させることも削除することも可能です。バックアップの際はアイテムの名前、管理者、日付を元に自由な名前で各ファイルを管理できるため、指定した代のバックアップファイルに戻すといったことも簡単にできます。

バックアップマネージャー

ショートコードで特定ページ内の指定した位置へコードを配置

作成したコードは、ショートコードとして利用することも可能です。各コードのインフォメーションからショートコードをコピペするか、記事編集画面のビジュアルエディタからも利用できます。

ビジュアルエディタからショートコードを利用

コード編集画面のカスタマイズ

コードの編集画面は作業がしやすいようシンタックスハイライト、オートコンプリート、フルスクリーン表示、テーマ変更などにも対応しています。

用意されているテーマは32種類

CSS & JavaScript Toolboxのインストール

まずは、プラグインをダウンロードします。
WordPressの管理画面の「プラグインの新規追加」から「CSS & JavaScript Toolbox」を検索するか、下記ページからファイルをダウンロードします。

無料のCSS & JavaScript Toolbox Free: CSS & JavaScript Toolbox Free
有料のCSS & JavaScript Toolbox Pro: CSS & JavaScript Toolbox Pro

ダウンロードしたファイルをサーバーの指定の場所（/wp-content/plugins/）に設置します。
WordPressの管理画面のプラグインから、「CSS & JavaScript Toolbox」を「有効化」します。
これで完了です。

CSS & JavaScript Toolboxの使い方

特定のページにだけ、スタイルシートを適用してみます。

WordPressの管理画面から「CSS & JavaScript Toolbox」を選択し、「New Code Block」をクリックし、コードのブロックを作ります。

Nameはコードの名称、Activateはコード活性化、Location Hookはヘッダとフッタのどちらに配置するか、Initial Block Positionはどこに配置するか。
テストする時は、Nameを「test」とか適当つけて、Activateのチェックをはずして、「Create」をクリックします。