WordPressで記事やページなどに個別のHTML, CSS, JS, PHPを追加・管理できるプラグイン -CSS & JavaScript Toolbox
Post on:2014年2月5日
sponsors
WordPressで特定のページだけ個別のスタイルシートやスクリプトを使いたい！ しかも1ページだけでも複数のページにも適用する場合がある！ そんな要望を叶えてくれます。
投稿記事、固定ページ、カテゴリページ、カスタム投稿記事に、個別のHTML, CSS, JavaScript, PHPのコードを追加でき、一元管理もできるプラグインを紹介します。
CSS & JavaScript Toolbox
CSS & JavaScript Toolbox -WP Plugin Directory
以前、紹介したCustom CSS and JSは記事や固定ページごとにそれぞれ個別のCSS, JavaScriptの外部ファイルやコードを追加できるプラグインで、これは手軽に利用できて便利ですが、今回紹介するのはそれより高機能。
まずは、その画面をご紹介。
当ブログにインストールした画面です。
左パネルでHTML, CSS, JavaScript, PHPなどを編集し、右パネルで適用ページを選択します。
CSSやJavaScriptをあのページにだけ追加したいというのが簡単にできます。
CSS & JavaScript Toolboxの特長
- WordPressの投稿記事、固定ページ、カテゴリページ、カスタム投稿記事にコードをブロック単位で追加できます。
- コードの追加箇所は、headerとfooterの選択が可能。
CSSはheader、JSはfooterにというのもできます。 - 追加できるコードは、HTML, CSS, JavaScript, PHPをサポート。
- 編集画面はシンタックスハイライトに対応。
- 編集したコードは、ショートコードとしても利用可能。
プラグインは無料版と有料版の2種類があり、上記の機能は無料版で利用できます。有料版は下記のような便利機能がさらに追加されます。
- 編集したコードのバックアップやリビジョン管理も可能。
- コードを管理するためのバッチを用意。
詳しくは、下記ページの下の方の表をご覧ください。
CSS & JavaScript Toolboxのインストール
インストールは簡単です。
- WordPress管理画面の「プラグイン」から「新規追加」をクリックし、「プラグインのインストール」ページを開きます。
- 検索の欄に「CSS & JavaScript Toolbox」と入力し、「検索」ボタンをクリック。
- 「いますぐインストール」をクリックし、指示に従いインストールします。
- インストールが完了すると、管理画面のナビゲーションに「CSS & JavaScript Toolbox」が追加されます。
管理画面の「CSS & JavaScript Toolbox」ページを最初に開いた時に、プラグインの設定が始まります。
「CSS & JavaScript Toolbox」の初期設定画面
CSS & JavaScript Toolboxの使い方
管理画面を見ながら、簡単に使い方を説明します。
左パネル：コード編集、右パネル：管理
左パネルで、HTML, CSS, JavaScript, PHPを作成・編集できます。シンタックスハイライトに対応しているので見やすいです。
右パネルの拡大
右パネルで、コードや適用ページなどを管理します。
上のボタンは左から順に
- コードのアクティブ化
- 配置する場所（Hがheader、Fがfooter）
- コードの補足情報
- コードの種類（HTML, CSS, JS, PHP）
- コードの名前の編集
- コードの削除
ボタン下の適用ページの欄では、コードを適用するページをチェックボックスで管理することができます。当ブログは記事が4,000以上ありますが、ずらっと表示されました。
表示されている4つのページは当ブログの固定ページです。
より高度な使い方は、動画を参考に。
sponsors
