- Menu -

【WordPress】CSS & JavaScript Toolbox プラグインの使い方。CSS、HTML、JS、PHPを一括管理して便利にしよう!

Home >> Blog >> Webサイト制作

Tag: ,

CSS & JavaScript Toolboxの使い方:

このWordPress用のプラグイン『CSS & JavaScript Toolbox』は、コリスさんのサイトでプレゼント企画されていて、応募したら見事当選したものです。
コリス | サイト制作に関する最新の情報をご紹介
また、使い方も書かれています。
WordPressで特定ページにだけコードを埋め込める便利プラグインの使い方をご紹介 -CSS & JavaScript Toolbox | コリス

では、実際に私が使った感想や使い方をご紹介します。

『CSS & JavaScript Toolbox』について

WordPressでは、CSS、HTML、JavaScript、PHPを個別ページやカテゴリーごとになど適用したいページのヘッダー(またはフッター)にだけコードを差し込みたい時があります。
このプラグインはそれぞれのコードを一括管理してくれるWordPress用有料プラグインです。(期間限定で時々割引していたりします)
一括で管理することにより、メンテナンスがしやすくなります
詳しくは『CSS & JavaScript Toolbox』をご覧下さい。

【ご注意!】質問やお問い合わせについて

『CSS & JavaScript Toolbox』の使い方などでわからないことや質問がある場合は、『CSS & JavaScript Toolbox』のサポートへ直接問い合わせて下さい。
(私の場合、ここに書いた範囲であれば答えられるかもしれませんが、詳細はわからないところがあるかもしれません)

本体『CSS & JavaScript Toolbox』のインストール

本体の容量は結構あります!

  1. CSS & JavaScript Toolbox』よりダウンロード。
  2. WordPressのpluginsフォルダにアップロード。
  3. プラグインを有効化。

拡張プラグイン

『CSS & JavaScript Toolbox』をもっと使いやすくするために、他にもプラグインがパッケージされています。
インストールは任意ですが、いろいろ便利機能がありますね!

拡張プラグインの種類

  • Editor Themes:コーディングブロックごとにテーマを変えて見やすくします。
  • Editor Toolbox:コードを編集するのに便利な機能。
  • Code Auto Completion (CAC):コードのオートコンプリート(スニペットとか)機能。
  • Import Export Tool:CJT機能を別のサイトにエクスポートします。
  • Block Widget Linker:サイドバーやフッターのウィジェット管理。
  • Advanced Plugins Editor:Wordpressのテーマ編集を使いやすくするエディタ。
  • Advanced Theme Editor:Wordpressのプラグイン編集を使いやすくするエディタ。
  • WP Core Editor:Wordpressのコアファイル(config.php、.htaccess)の編集をするエディタ。

拡張プラグインのインストールと有効化

私は『CJTe Editor Themes』と『CJTe Editor Toolbox』を追加してみました。

  1. インストールしたい拡張プラグインがあれば、WordPressのpluginsフォルダにアップロード。
  2. メニューにExtensionsがあるのでクリック。
  3. 有効化

CSS & JavaScript Toolboxの使い方:CJT用プラグインの追加と有効化

※メニューのプラグインからも有効化できます。

使い方例:JavaScriptを全てのArchiveに追加

上記のプラグインを入れた状態でやってみます。
(この例は、テンプレートに入れればできる範囲のものですが、説明するためにやってみます。)

私のサイトではギャラリーページのArchiveのみに使っているJavaScriptがあるので、『CSS & JavaScript Toolbox』を使って入れてみたいと思います。

新しいブロックの作成

CSS & JavaScript Toolboxの使い方:新しいブロックの追加

  1. メニューが出来上がっていますので、クリックして開く。
  2. 「New Code Block」をクリック。

CSS & JavaScript Toolboxの使い方:新しいブロックの追加

  1. 任意の名前をつける。(後で変更可)
  2. コードを入れる場所、HeaderかFooterを選択。(後で変更可)
  3. 複数のコードがある場合、そのコードの初めにいれるか後に入れるか。First BlockかLast Blockを選択。(後で変更可)
  4. 「Create」をクリック。

CSS & JavaScript Toolboxの使い方:CSS、JSなど選ぶ

ブロックが出来上がりました。
CSS、HTML、JS、PHPを選びます。

コードを入力

CSS & JavaScript Toolboxの使い方:コードを入力

  1. コードを入力。
  2. どのページに入れるか選択。
  3. 「Save」で保存。

ソースを確認します。
Block START(ID番号)~Block END(ID番号)の間に入っています。
以上です。

CSS & JavaScript Toolboxの使い方:コードが入っています

(※記事とは関係ないですが、表示のJSはBlocksIt.jsというスクリプトです。これもコリスさんのサイトで紹介されています。いつもお世話になりすぎやなぁ(笑) [JS]エレメントをグリッド状にランダムに配置したり、Pinterest風に配置するスクリプト – BlocksIt.js

本体『CSS & JavaScript Toolbox』メニュー

メニューの説明です。

CSS & JavaScript Toolboxの使い方:メニュー

  1. 全てのブロックに適応/無効/元に戻す
  2. 全てのコードブロックをフッター/ヘッダーに設置変更
  3. テンプレートマネージャーを開く(※使ってないのでわかりません。)
  4. 全てのコードブロックを削除/からのブロックを削除/バックアップ
  5. (※使ってないのでわかりません。)
  6. ブロックコードを全て展開
  7. ブロックコードを全て閉じる

CSS & JavaScript Toolboxの使い方:メニュー

  1. コードブロックの有効/無効
  2. 設置場所のヘッダ-/フッターの変更
  3. (※使ってないのでわかりません。)
  4. (※使ってないのでわかりません。)
  5. ID、ショートコードの表示。
  6. CSS、HTML、JS、PHPの切り替え。
  7. ブロックの名前を変更。
  8. 修正の履歴と戻すことができます。
  9. このコードブロックを削除。

ブロックの名前を変更

ブロックの名前を変更する方法です。

CSS & JavaScript Toolboxの使い方:ブロックの名前を変更

CSS & JavaScript Toolboxの使い方:ブロックの名前を変更

  1. ブロック名のところをクリックすると編集状態になるので、修正
  2. 保存

拡張プラグイン『CJTe Editor Themes』

ブロックごとにいろんなテーマが選べるので、CSSとJSなど色分けすると増えてきたときにぱっと見やすいかもしれません。
CSS & JavaScript Toolboxの使い方:CJTe Editor Themes

CSS & JavaScript Toolboxの使い方:色分けされると見やすい。
こんな感じに。

拡張プラグイン『CJTe Editor Toolbox』

CJTのエディタを使いやすくする拡張プラグイン。

CJTe Editor Toolbox 入力フォームを広く
入力フォームを広くしたり。

CJTe Editor Toolbox 全画面
全画面表示にしたり。

CJTe Editor Toolbox 文字のサイズ、削除、設定の保存
コードのフォントのサイズの変更、入力したコードの全削除、設定の保存ができます。

最後に

一括管理することで、WordPressの作業を見やすく効率化するのだと思います。
一通り見てみましたが、ここに書いた範囲しか使えていません。他にもいろいろ便利な発見はあると思います。
なお、お気づきの点などございましたら、ご連絡いただけると幸いです。

今回は、プレゼント企画をしてくださったコリスさんと『CSS & JavaScript Toolbox』作者さんに御礼申し上げます。ありがとうございました!