WordPressで記事やページなどに個別のHTML, CSS, JS, PHPを追加・管理できるプラグイン -CSS & JavaScript Toolbox

WordPressで特定のページだけ個別のスタイルシートやスクリプトを使いたい! しかも1ページだけでも複数のページにも適用する場合がある! そんな要望を叶えてくれます。

投稿記事、固定ページ、カテゴリページ、カスタム投稿記事に、個別のHTML, CSS, JavaScript, PHPのコードを追加でき、一元管理もできるプラグインを紹介します。

サイトのキャプチャ

CSS & JavaScript Toolbox
CSS & JavaScript Toolbox -WP Plugin Directory

以前、紹介したCustom CSS and JSは記事や固定ページごとにそれぞれ個別のCSS, JavaScriptの外部ファイルやコードを追加できるプラグインで、これは手軽に利用できて便利ですが、今回紹介するのはそれより高機能。
まずは、その画面をご紹介。

WordPressのキャプチャ

当ブログにインストールした画面です。
左パネルでHTML, CSS, JavaScript, PHPなどを編集し、右パネルで適用ページを選択します。

CSSやJavaScriptをあのページにだけ追加したいというのが簡単にできます。

CSS & JavaScript Toolboxの特長

  • WordPressの投稿記事、固定ページ、カテゴリページ、カスタム投稿記事にコードをブロック単位で追加できます。
  • コードの追加箇所は、headerとfooterの選択が可能。
    CSSはheader、JSはfooterにというのもできます。
  • 追加できるコードは、HTML, CSS, JavaScript, PHPをサポート。
  • 編集画面はシンタックスハイライトに対応。
  • 編集したコードは、ショートコードとしても利用可能。

プラグインは無料版と有料版の2種類があり、上記の機能は無料版で利用できます。有料版は下記のような便利機能がさらに追加されます。

  • 編集したコードのバックアップやリビジョン管理も可能。
  • コードを管理するためのバッチを用意。

詳しくは、下記ページの下の方の表をご覧ください。

サイトのキャプチャ

CSS & JavaScript Toolbox

CSS & JavaScript Toolboxのインストール

インストールは簡単です。

  1. WordPress管理画面の「プラグイン」から「新規追加」をクリックし、「プラグインのインストール」ページを開きます。
  2. 検索の欄に「CSS & JavaScript Toolbox」と入力し、「検索」ボタンをクリック。
  3. 「いますぐインストール」をクリックし、指示に従いインストールします。
  4. インストールが完了すると、管理画面のナビゲーションに「CSS & JavaScript Toolbox」が追加されます。

管理画面の「CSS & JavaScript Toolbox」ページを最初に開いた時に、プラグインの設定が始まります。

WordPressのキャプチャ

「CSS & JavaScript Toolbox」の初期設定画面

CSS & JavaScript Toolboxの使い方

管理画面を見ながら、簡単に使い方を説明します。

WordPressのキャプチャ

左パネル:コード編集、右パネル:管理

左パネルで、HTML, CSS, JavaScript, PHPを作成・編集できます。シンタックスハイライトに対応しているので見やすいです。

WordPressのキャプチャ

右パネルの拡大

右パネルで、コードや適用ページなどを管理します。
上のボタンは左から順に

  • コードのアクティブ化
  • 配置する場所(Hがheader、Fがfooter)
  • コードの補足情報
  • コードの種類(HTML, CSS, JS, PHP)
  • コードの名前の編集
  • コードの削除

ボタン下の適用ページの欄では、コードを適用するページをチェックボックスで管理することができます。当ブログは記事が4,000以上ありますが、ずらっと表示されました。
表示されている4つのページは当ブログの固定ページです。

より高度な使い方は、動画を参考に。

CSS & JavaScript Toolbox - THE OVERVIEW -YouTube

top of page

©2017 coliss