WordPressで個別のページごとに、CSSやJavaScriptが利用できる便利なプラグイン -CSS & JavaScript Toolbox

WordPressの記事ページや固定ページごとに、異なるHTMLやCSSやJavaScriptやPHPを利用でき、一元管理もできるWordPressのプラグインを紹介します。

適用できるページは単独でも複数も可能で、適用する場所もヘッダやフッタにと指定できます。前回紹介した際から大きくバージョンがアップし、さらに便利になった新機能も含めて要チェックです。

サイトのキャプチャ

CSS & JavaScript Toolbox

CSS & JavaScript Toolboxの特徴

CSS & JavaScript Toolboxの特徴

  • HTMLやCSSやJavaScriptやPHPのコードを特定のページのみに挿入できます。
  • 記事ページ、固定ページ、カテゴリ、カスタム投稿、タグごとに指定できます。
  • コードを記述するのに最適なエディタを備えています。
  • テーマファイルに手を加える必要はありません。
  • FTPも必要ありません。
  • ページのコンテンツや広告、Google Analyticsやフッタなど、そのページだけでも全ページに適用するコードにも対応。

WordPressの指定したページだけにコードを加える

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

CSS & JavaScript Toolboxのキャプチャ

左: 固定ページの一覧、右: 記事ページの一覧

コードを配置する場所を指定できる

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

CSS & JavaScript Toolboxのキャプチャ

コードを配置する場所を指定(H: ヘッダ、F: フッタ)

コードの一元管理が簡単

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

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

コードの管理機能

サポート言語

CSS & JavaScript Toolboxでは、以下のコードを配置できます。

  • HTML
  • CSS
  • JavaScript
  • PHP

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

CSS & JavaScript Toolboxのキャプチャ

サポート言語

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

作成したコードはバックアップマネージャーで、全てのコードのバックアップを作成し、復活することも削除することも可能です。また、コードごとにリビジョンが管理されているので、個別のコードだけを直したい場合も問題ありません。

CSS & JavaScript Toolboxのキャプチャ

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

ショートコードとしても利用できる

作成したコードは、ショートコードとして利用することも可能です。コードを作成するとショートコードが自動で生成され、編集画面のビジュアルエディタから利用できます。

CSS & JavaScript Toolboxのキャプチャ

ショートコードでも利用できる

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

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

CSS & JavaScript Toolboxのキャプチャ

用意されているテーマ

CSS & JavaScript Toolboxのインストール

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

サイトのキャプチャ

CSS & JavaScript Toolbox

必要システム

  • WordPress 3.9+(4.9.5対応)
  • PHP 5.4+

CSS & JavaScript Toolboxのインストール

  1. ダウンロードしたファイルをサーバーの指定の場所(/wp-content/plugins/)にアップロードします。
  2. WordPressの管理画面のプラグインから「CSS & JavaScript Toolbox」を有効化。

CSS & JavaScript Toolboxの使い方

CSS & JavaScript Toolboxを使用して、特定のページにだけCSSを適用してみます。

管理画面のメニューから「CSS & JavaScript Toolbox」をクリックし、プラグインのページを開きます。最初に、適用するCSSのコードを作成するので、「New Code Block」をクリックします。

CSS & JavaScript Toolboxのキャプチャ

コード ブロックの新規作成

ダイアログが開くので、コードの名称を決めます。

CSS & JavaScript Toolboxのキャプチャ

新規作成のダイアログ

名前を入力し、「Create」をクリックします。
名前や配置場所などは、後からでも変更できます。

CSS & JavaScript Toolboxのキャプチャ

新規作成のダイアログ

p要素をレッドにしてみます。

CSS & JavaScript Toolboxのキャプチャ

適用するコード

コードを適用するページを設定します。
右パネルから適用するページを選択し、その上の「Save」をクリックし保存します。

CSS & JavaScript Toolboxのキャプチャ

適用するページを指定

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

CSS & JavaScript Toolboxのキャプチャ

ページに反映

コードを見てましょう。
加えられたコードは、CJTのコメントに挟まれて記述されています。

CSS & JavaScript Toolboxのキャプチャ

自動コメント機能

sponsors

top of page

©2018 coliss