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

特定のページだけヘッダに手をいれたい、テキストや画像を加えたい、CSSやJavaScriptやPHPを適用するなど、特定の複数ページにだけコードを埋め込めるWordPressのプラグインを紹介します。

個別にCSS/JavaScriptを埋め込むことができるプラグインは他にもありますが、HTMLやPHPにも対応、そしてそれらを一元管理できるのはこれだけだと思います。

サイトのキャプチャ

CSS & JavaScript Toolbox

以前ご紹介したCSS&JavaScript Toolboxが新しいバージョンをリリースされたので、改めて紹介します。

新しいバージョンになり、Free版とPro版の機能の差はなくなりました。
※Pro版はサポートやフォーラムへのアクセス権がつきます。

CSS & JavaScript Toolboxの特長

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

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

CSS & JavaScript Toolboxのキャプチャ

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

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

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

CSS & JavaScript Toolboxのキャプチャ

ヘッダとフッタの切替

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

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

  • 全てのコードのアクティブ化・非アクティブ化
  • 全てのコードの配置をヘッダ・フッタに
  • 全てのコードのバックアップ・削除
CSS & JavaScript Toolboxのキャプチャ

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

サポート言語

  • HTML
  • CSS
  • JavaScript
  • PHP

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

CSS & JavaScript Toolboxのキャプチャ

サポート言語は、4種類

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

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

CSS & JavaScript Toolboxのキャプチャ

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

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

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

CSS & JavaScript Toolboxのキャプチャ

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

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

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

CSS & JavaScript Toolboxのキャプチャ

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

CSS & JavaScript Toolboxのインストール

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

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

CSS & JavaScript Toolboxの使い方

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

CSS & JavaScript Toolboxのキャプチャ

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

CSS & JavaScript Toolboxのキャプチャ

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

CSS & JavaScript Toolboxのキャプチャ

コードブロックができました。

CSS & JavaScript Toolboxのキャプチャ

テスト用に、カラーをレッドにするスタイルシートを書いてみました。

CSS & JavaScript Toolboxのキャプチャ

適用するページを選択し、その上の「Save」ボタンをクリックし保存します。

CSS & JavaScript Toolboxのキャプチャ

左端の「Activateボタン」をクリックすると、反映されます。

CSS & JavaScript Toolboxのキャプチャ

ページは右の選択ページから、クリックして確認できます。

CSS & JavaScript Toolboxのキャプチャ

カラーがレッドになりました、もちろん他のページには適用されていません。

テストを終了する時は、「Activateボタン」をクリックするか、コードブロックを削除するのをお忘れなく。

top of page

©2017 coliss