Genesis にはGenesis専用のプラグインが多く公開されていますが、その中で最も有名なプラグインのひとつが『Genesis Visual Hook Guide』です。
ガイドという名前の通り、このプラグイン単体で完結するものではありませんが、Genesisをカスタマイズすればするほど必要不可欠になると言っても良いくらい、とても便利なプラグインです。
https://ja.wordpress.org/plugins/genesis-visual-hook-guide/
Genesis Visual Hook Guideの使い方
Genesis Visual Hook Guideの使い方はとてもシンプルです。
プラグインを有効化すると、Adminバーに『G Hook Guide』が表示されるので、この中から『Action Hooks』や『Filter Hooks』をクリックします。
これで開いているページのガイドが表示されます。
| Action Hooks | そのページのアクションフックを表示 |
|---|---|
| Filter Hooks | フィルターフックを表示 |
| Markup | HTML構造を表示 |
| Clear | ガイドを非表示にする |
1 Action Hookを表示させる
アクションフックを表示させるには、ガイドを表示させたいページで、Adminバーに表示される『G Hook Guide』から『Action Hooks』を選択します。
ここではトップページを開いた状態で、アクションフックを表示させます。表示されるガイドはGenesis子テーマによって変わりますが、『Metro Pro』では下の画像のようになりました。
genesis_beforeなどのオレンジ色の文字がアクションフックです。これは何に使うんだろうという場所にまで、アクションフックが用意されています。
Genesisサイトのカスタマイズを便利にするアクションフックとは
2 Filter Hookを表示させる
フィルターフックの使い方はアクションフックと全く同じです。
ガイドを表示させたいページで、『G Hook Guide』から『Filter Hooks』を選択します。
アクションフックと同じようにgenesis_post_title_textなどのフィルターフックがオレンジ色で表示されました。
フィルターフックの使い方（準備中）
3 Markupを表示させる
マークアップについても、ガイドを表示させたいページで『G Hook Guide』から『Filter Hooks』を選択します。
マークアップガイドでは、CSSと同じように『ドット(.)＋名前』がクラス名として表示されるので、構造を考える場合以外に、CSSで見た目を変更する場合にも便利です。
例）Secondaryナビゲーションメニューの背景をグレーに変更
.nav-secondary {
background: #ddd;
}
