ページごとにCSSやJavaScriptの設定ができるWordPressプラグイン「CSS & JavaScript Toolbox」

投稿する記事の量が多くなっていくと、共通のスタイルシートがどんどん膨れ上がりCSSやJavaScriptのメンテナンスが大変になっていきます。

特に、1ページのみに使用する場合やサンプルとして紹介するときなどは、ページ単位で個別の管理がしたくなります。

今回は、そんな要望に答えてくれるプラグイン「CSS & JavaScript Toolbox」を紹介します。

「CSS & JavaScript Toolbox」は、ページ単位でCSSやJavaScriptなどのコード管理/設定ができる機能を持つプラグインです。

また、コードは任意のかたまり(block)で管理し、一度作成したblockは他のページでも簡単に使い回すことができるようになります。

CSS & JavaScript Toolboxの設定
  1. CSS & JavaScript Toolboxのインストール
  2. CSS & JavaScript Toolboxの使い方

CSS & JavaScript Toolboxのインストール

1.CSS & JavaScript Toolbox をインストール、有効化します。
cssjstoolbox
2.CSS & JavaScript Toolbox を使うためには、追加のプラグインとデータベースの構築が必要となります。そのため、左のメニューから CSS & JavaScript Toolbox の管理画面に行き「Install」ボタンをクリックします。
cssjstoolbox1
3.これで設定は完了です。「Start」ボタンをクリックすると CSS & JavaScript Toolbox が開始できます。
cssjstoolbox2

CSS & JavaScript Toolboxの使い方

1.CSS & JavaScript Toolbox の管理画面に行き、「Now Code Block」ボタンをクリックし、新規のBlockを追加します。
cssjstoolbox3
2.Block名などの情報を入力します。(※入力内容は、後で変更も可能です)
cssjstoolbox4
Name新規blockの名称
Acitvate有効/無効(チェックONでblockを有効にします。)
Location HookBlockの挿入場所(Header/Footerが選択できます)
Initial Block PositionBlockの挿入場所の詳細(Header/Footer内で先頭/最後への挿入を選択できます)
3.入力完了後は新規Blockが作成されます。
cssjstoolbox15
新規blockの設定一覧
コードの記入エリア
コードを挿入するページの選択
blockの設定
active Activate/Deactivate(有効/無効)の切り替え
header-hook コードの挿入場所の切り替え(Header/Footer)
info タイトルや作成日などの情報を表示(Information)
html シンタックスハイライトの変更(HTML/CSS/JavaScript/PHP)
edit-name タイトルの編集
revisions 改版履歴の表示(過去の変更時に戻すことができます)
delete Blockの削除
コードを挿入するページの選択

投稿したいページにチェックを付ければ、そのページにコードが挿入されます。

cssjstoolbox9

Pages固定ページ
Postsブログ投稿(投稿記事)
Categoriesカテゴリー
Custom Postsカスタム投稿
Auxiliaryタグ/日付などのアーカイブ
AdvancedURLの直接指定
4.コードを入力と挿入するページの指定ができたら、「Save」ボタンを押下します。
cssjstoolbox14
5.これで完了です。ページのソースを見てみるとコードが埋め込まれていることがわかります。
cssjstoolbox16

※コードが埋め込まれない場合は、他のプラグインとの競合している可能性があります。私も「Header Cleaner」というWordPressで生成したソースをキレイにしてくれるプラグインを使用していたのですが、このプラグインの影響で埋め込まれたコードが消されていました。

最後に、CSS & JavaScript Toolbox は無料ですが、さらに機能アップした有料版のPro Editionもありますので、興味のある人は確認してみてください。

divider

Trackback URL

http://webnonotes.com/web/css-javascript-toolbox/trackback/

No Comments Yet

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>