WordPressテーマ「SWELL」と同じ制作者で作られたサイト制作に適したArkhe(アルケー)というテーマがあります。
たとえばWooCommerceを使ったECサイトを作る場合、SWELLではなくArkheが推奨されています。
そんなArkheでのサイト制作でよくフックを使うので、コードを調査してまとめてみました。
Arkhe本体のアクションフック 55個まとめ
アクションフック(Action Hook)は、指定された場所やタイミングで処理を実行させるための仕組みです。
例えば、コンテンツが始まる前に特定の要素を追加したい場合、このフックを使うことで簡単に実現できます。
do_action( 'arkhe_xxxxxx' );
このリストではArkhe公式で抜け漏れているarkhe_end_footer_inner
などのフックの解説も載せています。
アクションフック名 | 備考 |
---|---|
arkhe_before_header | <header> の前に実行されるフック |
arkhe_after_header | </header> の後に実行されるフック |
arkhe_header_bar_content | ヘッダー上部で情報を表示するためのフック |
arkhe_header_left_content | ヘッダー左側に配置されるコンテンツのフック |
arkhe_header_right_content | ヘッダー右側に配置されるコンテンツのフック |
arkhe_start_drawer_body | ドロワーメニューの開始部分で実行されるフック |
arkhe_after_drawer_nav | ドロワーメニュー内ナビの後に実行されるフック |
arkhe_end_drawer_body | ドロワーメニューの終了部分で実行されるフック |
arkhe_start_sidebar | サイドバーの開始部分で実行されるフック |
arkhe_end_sidebar | サイドバーの終了部分で実行されるフック |
arkhe_before_footer | <footer> の前に実行されるフック |
arkhe_start_footer_inner | フッター内のコンテンツ開始部分で実行されるフック |
arkhe_end_footer_inner | フッター内のコンテンツ終了部分で実行されるフック ※公式未記載 |
arkhe_start_footer_foot_content | フッター下部コンテンツの開始部分で実行されるフック |
arkhe_before_copyright | コピーライトの前に実行されるフック |
arkhe_after_copyright | コピーライトの後に実行されるフック |
arkhe_after_footer | </footer> の後に実行されるフック |
arkhe_start_content | コンテンツ部分の開始時に実行されるフック |
arkhe_end_content | コンテンツ部分の終了時に実行されるフック |
arkhe_start_front_main | フロントページのメイン部分の開始時に実行されるフック |
arkhe_end_front_main | フロントページのメイン部分の終了時に実行されるフック |
arkhe_before_front_content | フロントページのコンテンツ前に実行されるフック |
arkhe_start_home_main | ホームページのメイン部分の開始時に実行されるフック |
arkhe_end_home_main | ホームページのメイン部分の終了時に実行されるフック |
arkhe_after_front_content | フロントページのコンテンツ後に実行されるフック |
arkhe_before_home_content | ホームページのコンテンツ前に実行されるフック |
arkhe_after_home_content | ホームページのコンテンツ後に実行されるフック |
arkhe_start_page_main | 固定ページのメイン部分の開始時に実行されるフック |
arkhe_end_page_main | 固定ページのメイン部分の終了時に実行されるフック |
arkhe_before_page_content | 固定ページのコンテンツ前に実行されるフック |
arkhe_after_page_content | 固定ページのコンテンツ後に実行されるフック |
arkhe_start_entry_main | 投稿ページのメイン部分の開始時に実行されるフック |
arkhe_end_entry_main | 投稿ページのメイン部分の終了時に実行されるフック |
arkhe_before_entry_content | 投稿ページのコンテンツ前に実行されるフック |
arkhe_after_entry_content | 投稿ページのコンテンツ後に実行されるフック |
arkhe_start_entry_foot | 投稿ページのフッター部分の開始時に実行されるフック |
arkhe_end_entry_foot | 投稿ページのフッター部分の終了時に実行されるフック |
arkhe_start_archive_main | アーカイブページのメイン部分の開始時に実行されるフック |
arkhe_end_archive_main | アーカイブページのメイン部分の終了時に実行されるフック |
arkhe_before_term_post_list | タームアーカイブページの投稿リスト前に実行されるフック |
arkhe_before_archive_post_list | アーカイブページの投稿リスト前に実行されるフック |
arkhe_start_author_main | 著者アーカイブページのメイン部分の開始時に実行されるフック |
arkhe_end_author_main | 著者アーカイブページのメイン部分の終了時に実行されるフック |
arkhe_before_author_post_list | 著者アーカイブページの投稿リスト前に実行されるフック |
arkhe_start_search_main | 検索結果ページのメイン部分の開始時に実行されるフック |
arkhe_end_search_main | 検索結果ページのメイン部分の終了時に実行されるフック |
arkhe_before_search_post_list | 検索結果ページの投稿リスト前に実行されるフック |
arkhe_start_404_main | 404ページのメイン部分の開始時に実行されるフック |
arkhe_end_404_main | 404ページのメイン部分の終了時に実行されるフック |
arkhe_before_404_content | 404ページのコンテンツ前に実行されるフック |
arkhe_after_404_content | 404ページのコンテンツ後に実行されるフック |
arkhe_after_author_name | 著者情報の名前の後に実行されるフック |
arkhe_author_links | 著者情報のリンクの後に実行されるフック |
arkhe_pre_get_part__{$slug} | パーツ取得前に実行されるフック ※公式未記載 |
arkhe_did_get_part__{$slug} | パーツ取得後に実行されるフック ※公式未記載 |
Arkhe本体のアクションフック 55個の解説とサンプルコード
arkhe_before_header
arkhe_before_headerは、Arkheテーマにおいて、ヘッダー部分が表示される前に実行されるアクションフックです
このフックを利用することで、ヘッダーの直前に特定の要素や機能を追加することができます。
add_action( 'arkhe_start_content', 'add_custom_content_start_message' );
function add_custom_content_start_message() {
echo '<div class="custom-message">コンテンツがここから始まります</div>';
}
arkhe_after_header
arkhe_after_headerは、Arkheテーマにおいて、ヘッダー部分が表示された直後に実行されるアクションフックです
このフックを使うことで、ヘッダーの直後に特定の要素やカスタマイズを追加することができます。
// ヘッダーの後にカスタムバナーを表示
add_action( 'arkhe_after_header', 'add_custom_after_header_banner' );
function add_custom_after_header_banner() {
echo '<div class="custom-banner">限定セール開催中!今すぐチェック</div>';
}
arkhe_header_bar_content
arkhe_header_bar_contentは、Arkheテーマでヘッダーバーの内容をカスタマイズするためのアクションフックです
このフックを使うことで、テーマのヘッダーバー内に自由にコンテンツを追加することができます。
// ヘッダーバーにカスタムメッセージを追加
add_action( 'arkhe_header_bar_content', 'add_custom_header_bar_content' );
function add_custom_header_bar_content() {
echo '<p class="header-bar-message">特別なプロモーション中!詳しくはこちら</p>';
}
arkhe_header_left_content
arkhe_header_left_contentは、Arkheテーマのヘッダー部分の左側にコンテンツを追加またはカスタマイズするためのアクションフックです。
このフックを使うことで、ロゴの左側に任意のコンテンツを表示したり、カスタマイズすることが可能です。
// ヘッダー左側にカスタムメッセージを追加
add_action( 'arkhe_header_left_content', 'add_custom_header_left_content' );
function add_custom_header_left_content() {
echo '<div class="custom-header-left">特別なお知らせはこちら!</div>';
}
arkhe_header_right_content
arkhe_header_right_contentは、Arkheテーマのヘッダー部分の右側にコンテンツを追加またはカスタマイズするためのアクションフックです。
このフックを使うことで、ヘッダーの右側にSNSアイコン、カートアイコン、ログインリンクなど、任意のコンテンツを追加することができます。
// ヘッダー右側にソーシャルメディアリンクを追加
add_action( 'arkhe_header_right_content', 'add_custom_header_right_content' );
function add_custom_header_right_content() {
echo '<div class="header-social-links">';
echo '<a href="https://twitter.com" target="_blank">Twitter</a> | ';
echo '<a href="https://facebook.com" target="_blank">Facebook</a>';
echo '</div>';
}
arkhe_start_drawer_body
arkhe_start_drawer_bodyは、Arkheテーマのドロワーメニューのボディ部分が開始される直前に実行されるアクションフックです。
このフックを使うことで、ドロワーメニューの開始部分にカスタムコンテンツや要素を追加することが可能です。
// ドロワーメニューの開始部分にカスタムメッセージを追加
add_action( 'arkhe_start_drawer_body', 'add_custom_drawer_body_message' );
function add_custom_drawer_body_message() {
echo '<div class="drawer-custom-message">特別セール開催中!今すぐチェック</div>';
}
arkhe_after_drawer_nav
このフックは、ドロワーメニューのナビゲーションが終わった後に特定のコンテンツを挿入するために使用されます
例えば、ナビゲーションの下に追加の情報やプロモーションバナー、ソーシャルメディアリンクなどを表示したい場合に利用できます。
// ドロワーメニューのナビゲーション後にソーシャルメディアリンクを追加
add_action( 'arkhe_after_drawer_nav', 'add_custom_after_drawer_nav_content' );
function add_custom_after_drawer_nav_content() {
echo '<div class="drawer-social-links">';
echo '<a href="https://twitter.com" target="_blank">Twitter</a> | ';
echo '<a href="https://facebook.com" target="_blank">Facebook</a>';
echo '</div>';
}
arkhe_end_drawer_body
arkhe_end_drawer_bodyは、Arkheテーマにおいて、ドロワーメニューのボディ部分が終了する直前に実行されるアクションフックです。
このフックを利用することで、ドロワーメニューの末尾にカスタムコンテンツを追加することができます。
// ドロワーメニューの終了部分にカスタムボタンを追加
add_action( 'arkhe_end_drawer_body', 'add_custom_end_drawer_button' );
function add_custom_end_drawer_button() {
echo '<div class="drawer-custom-button">';
echo '<a href="https://example.com" class="button">お問い合わせ</a>';
echo '</div>';
}
arkhe_start_sidebar
arkhe_start_sidebarは、Arkheテーマにおいて、サイドバーが表示される前に実行されるアクションフックです。このフックを使うことで、サイドバーの上部にカスタムコンテンツを追加することが可能です。
例えば、サイドバーの最初に特別なお知らせやバナーを表示することができます。
// サイドバーの開始部分にカスタムメッセージを追加
add_action( 'arkhe_start_sidebar', 'add_custom_start_sidebar_message' );
function add_custom_start_sidebar_message() {
echo '<div class="sidebar-custom-message">特別なお知らせ:今だけ無料!</div>';
}
arkhe_end_sidebar
arkhe_end_sidebarは、Arkheテーマにおいて、サイドバーの内容がすべて表示された後に実行されるアクションフックです。
このフックを使うことで、サイドバーの最後に追加のコンテンツや要素を挿入することが可能です。
たとえば、サイドバーの末尾にカスタムバナーやSNSリンク、特定のアクションボタンを表示したい場合に便利です。
// サイドバーの終了部分にソーシャルメディアリンクを追加
add_action( 'arkhe_end_sidebar', 'add_custom_end_sidebar_content' );
function add_custom_end_sidebar_content() {
echo '<div class="sidebar-social-links">';
echo '<a href="https://twitter.com" target="_blank">Twitter</a> | ';
echo '<a href="https://facebook.com" target="_blank">Facebook</a>';
echo '</div>';
}
arkhe_pre_get_part__{$slug}
arkhe_pre_get_part__{$slug}は、Arkheテーマでテンプレートパーツを読み込む前に発火するアクションフックです。
このフックを使用することで、特定のテンプレートパーツが読み込まれる直前に任意の処理を実行することができます。
{$slug}は、読み込まれるテンプレートパーツの識別子で、特定のパーツに応じてフックをカスタマイズすることができます。
// テンプレートパーツ「header」が読み込まれる前にカスタムメッセージを表示
add_action( 'arkhe_pre_get_part__header', 'before_header_part_message' );
function before_header_part_message() {
echo '<p class="custom-message">ヘッダーが表示される前のカスタムメッセージ</p>';
}
arkhe_did_get_part__{$slug}
arkhe_did_get_part__{$slug}は、Arkheテーマにおいて、指定されたテンプレートパーツが読み込まれた後に発火するアクションフックです。
このフックを使用することで、特定のテンプレートパーツが表示された後に追加の処理を実行することが可能です。
{$slug}は読み込まれるテンプレートパーツの識別子です。
// ヘッダーが読み込まれた後にカスタムメッセージを表示
add_action( 'arkhe_did_get_part__header', 'after_header_part_message' );
function after_header_part_message() {
echo '<p class="custom-message">ヘッダーの読み込みが完了しました。</p>';
}
以下、制作予定
Arkhe本体のフィルタフック 64個まとめ
フィルターフック(Filter Hook)は、関数を使ってデータを操作する際に使います。
例えば、表示されるテキストを変更したり、データを加工することができます。
apply_filters( 'arkhe_xxxxxx', $return );
フィルタフック名 | 備考 |
---|---|
ark_get__head_logo_img | ヘッダーロゴ画像の取得結果を上書き |
ark_the__thumbnail | 投稿のサムネイル画像の出力を上書き |
ark_the__postdate | 投稿の日付表示を上書き |
ark_the__pnlink | 前後の記事リンクを上書き |
arkhe_logo_tag | ロゴ部分のHTMLタグを上書き |
arkhe_head_logo_url | ヘッダーロゴのURLを上書き |
arkhe_head_logo_overlay_url | オーバーレイロゴのURLを上書き |
arkhe_head_logo_sizes | ヘッダーロゴの画像サイズ属性を上書き |
arkhe_gnav_location_name | グローバルナビのメニュー位置を上書き |
arkhe_ttlbg_img_id | タイトル背景画像のIDを上書き |
arkhe_page_subtitle | ページのサブタイトルを上書き |
arkhe_top_area_excerpt | タイトル下の抜粋文を上書き |
arkhe_list_type_on_home | ホームページの投稿リストのレイアウトを上書き |
arkhe_list_type_on_term | タームアーカイブページの投稿リストのレイアウトを上書き |
arkhe_list_type_on_author | 著者アーカイブページの投稿リストのレイアウトを上書き |
arkhe_list_type_on_archive | アーカイブページの投稿リストのレイアウトを上書き |
arkhe_list_type_on_search | 検索結果ページの投稿リストのレイアウトを上書き |
arkhe_show_entry_thumb | 投稿のアイキャッチ画像を表示するかを上書き |
arkhe_show_foot_terms | 投稿のターム情報の表示を上書き |
arkhe_show_prev_next_link | 前後の記事リンクの表示を上書き |
arkhe_show_author_box | 投稿の著者情報を表示するかを上書き |
arkhe_show_related_posts | 関連記事の表示を上書き |
arkhe_show_entry_comments | 投稿のコメントエリアの表示を上書き |
arkhe_author_area_title | 著者情報エリアのタイトルを上書き |
arkhe_related_area_title | 関連記事エリアのタイトルを上書き |
arkhe_related_posts_args | 関連記事取得のクエリを上書き |
ark_get__thumbnail | 投稿のサムネイル取得結果を上書き |
ark_get__term_links | 投稿のタームリンクリストの出力を上書き |
arkhe_search_title | 検索結果ページのタイトルを上書き |
arkhe_404_title | 404ページのタイトルを上書き |
arkhe_404_content | 404ページのコンテンツを上書き |
arkhe_content_width | コンテンツの幅を上書き |
arkhe_root_attrs | <html> タグの属性を上書き |
arkhe_header_attrs | <header> タグの属性を上書き |
arkhe_main_class | .l-main クラスの名前を上書き |
arkhe_main_body_class | .l-main__body クラスの名前を上書き |
arkhe_post_content_class | .c-postContent クラスの名前を上書き |
arkhe_is_show_sidebar | サイドバーの表示を上書き |
arkhe_is_show_ttltop | タイトルトップの表示を上書き |
arkhe_is_header_overlay | ヘッダーオーバーレイの有無を上書き |
arkhe_breadcrumbs_position | パンくずリストの位置を上書き |
arkhe_breadcrumbs_data | パンくずリストのデータを上書き |
arkhe_is_show_comments | コメントエリアの表示を上書き |
arkhe_alignwide_plus_width | 幅広コンテンツの広がりを上書き |
arkhe_move_post_count_into_a | 投稿数カウントの位置を上書き ※以下、公式未記載 |
ark_the__tagline | サイトのタグラインを上書き |
arkhe_customizer_args | カスタマイザーの引数を上書き |
arkhe_list_layouts | 投稿リストのレイアウトを上書き |
arkhe_get_the_terms_data | タームデータの取得を上書き |
arkhe_get_author_icon_data | 著者アイコンデータを上書き |
arkhe_get_archive_data | アーカイブデータの取得を上書き |
arkhe_get_tax_of_post_type | 投稿タイプのタクソノミー取得を上書き |
arkhe_part_args__{$slug} | パーツの引数を上書き |
arkhe_part_path__{$slug} | パーツのパスを上書き |
arkhe_part_cache__{$slug} | パーツのキャッシュデータを上書き |
arkhe_part__{$slug} | パーツの内容を上書き |
arkhe_main_body_attrs | メインボディの属性を上書き |
arkhe_use_fse_blocks | FSEブロックの使用を上書き |
arkhe_get_svg | SVGアイコンの取得を上書き |
arkhe_use_lazy_top_area | トップエリアの遅延読み込みを上書き |
arkhe_term_description | タームの説明文を上書き |
arkhe_show_term_description | タームの説明文の表示を上書き |
Arkhe本体のフィルターフック 64個の解説とサンプルコード
以下、制作予定
Arkhe Blocksのフック 6個の解説とサンプルコード
Arkhe Blocks のフックもまとめてみました。
バージョン 2.23.0
アクションフック
無し
フィルターフック
フック名 | 簡単な説明 |
---|---|
arkb_blogcard__cache_time | ブログカードのキャッシュ時間を変更するためのフィルター |
arkb_blogcard__title_length | ブログカードのタイトルの長さを変更するためのフィルター |
arkb_blogcard__excerpt_length | ブログカードの抜粋文の長さを変更するためのフィルター |
arkb_blogcard__name_length | ブログカードの名前の長さを変更するためのフィルター |
arkb_section__media_html | セクションブロックのメディアHTMLを変更するためのフィルター |
arkb_toc__ignore_classes | 目次(ToC)の無視するクラスを指定するためのフィルター |
Arkhe Blocks Proのフック 11個の解説とサンプルコード
Arkhe Blocks Proのフックもまとめてみました。
バージョン 2.26.0
アクションフック
無し
フィルターフック
フィルターフック名 | 備考 |
---|---|
arkb_rss__cache_time | RSSフィードのキャッシュ時間を変更するためのフィルター |
arkb_slider__arrow_svg | スライダーの矢印アイコン(SVG)を変更するためのフィルター |
arkb_blogcard__cache_time | ブログカードのキャッシュ時間を変更するためのフィルター |
arkb_blogcard__title_length | ブログカードのタイトルの長さを変更するためのフィルター |
arkb_blogcard__excerpt_length | ブログカードの抜粋文の長さを変更するためのフィルター |
arkb_blogcard__name_length | ブログカードの名前の長さを変更するためのフィルター |
arkb_section__media_html | セクションブロックのメディアHTMLを変更するためのフィルター |
arkb_slide__media_html | スライドブロックのメディアHTMLを変更するためのフィルター |
arkb_toc__ignore_classes | 目次(ToC)の無視するクラスを指定するためのフィルター |
arkb_boxlink__figure_html | ボックスリンクの画像部分のHTMLを変更するためのフィルター |
arkb_boxlink__svg | ボックスリンク内のSVGアイコンを変更するためのフィルター |
Arkhe Toolkitのフック 13個の解説とサンプルコード
Arkhe Toolkitのフックもまとめてみました。
バージョン 1.11.1
アクションフック
アクションフック名 | 備考 |
---|---|
arkhe_toolkit_before_share_btns_list | シェアボタンリストの表示前に実行されるアクションフック |
フィルターフック
フィルターフック名 | 備考 |
---|---|
arkhe_toolkit_twitter_to_x | TwitterのリンクをX(旧Twitter)に変更するためのフィルター |
arkhe_toolkit_delay_js_prevent_pages | JS遅延を防止するページを指定するためのフィルター |
arkhe_toolkit_delay_js_list | JS遅延対象のリストを変更するためのフィルター |
arkhe_toolkit_side_meta_screens | サイドメタボックスを表示する画面を指定するためのフィルター |
arkhe_toolkit_code_meta_screens | コードメタボックスを表示する画面を指定するためのフィルター |
arkhe_toolkit_hide_share_btns | シェアボタンの非表示設定をカスタマイズするためのフィルター |
arkhe_toolkit_term_meta_screens | タームメタボックスを表示する画面を指定するためのフィルター |
arkhe_toolkit_use_fix_sidebar | 固定サイドバーを使用するかどうかを指定するフィルター |
arkhe_toolkit_json_ld | JSON-LDデータをカスタマイズするためのフィルター |
arkhe_toolkit_json_ld_article | 記事のJSON-LDデータを変更するためのフィルター |
arkhe_toolkit_get_share_btns_list | シェアボタンのリストをカスタマイズするためのフィルター |
arkhe_toolkit_get_svg | SVGアイコンの取得結果を変更するためのフィルター |