目次
  1. フックの概要と仕組み
    1. アクションフックでできること
      1. カスタマイズ例(1) ハンバーガーメニュー[左サイド]内に文字を出力
      2. カスタマイズ例(2) Emanonパーツのショートコードを出力
      3. カスタマイズ例(3) 指定カスタム投稿セミナーのサイドバーに問い合わせフォームを追加
  2. Emanon Premiumのフック一覧
    1. ヘッダーの外側
    2. ヘッダーの内側
    3. ヘッダーロゴの左右
    4. ヘッダーレイアウト1行
    5. ヘッダーCTA
    6. 【固定ページ】コンテンツの上下
    7. 【投稿ページ】コンテンツの上下
    8. カスタム投稿[求人情報]ページコンテンツの上下
    9. カスタム投稿[ニュース]ページコンテンツの上下
    10. カスタム投稿[商品紹介]ページコンテンツの上下
    11. カスタム投稿[資料請求]ページコンテンツの上下
    12. カスタム投稿[セミナー]ページコンテンツの上下
    13. 404ページコンテンツの上下
    14. 検索結果ページコンテンツの上下
    15. フッターの外側
    16. フッターの内側
    17. サイドバーの内側
    18. サイドバー左の内側
    19. カスタム投稿[求人情報]サイドバーの内側
    20. カスタム投稿[ニュース]サイドバーの内側
    21. カスタム投稿[商品紹介]サイドバーの内側
    22. カスタム投稿[資料請求]サイドバーの内側
    23. カスタム投稿[セミナー]サイドバーの内側
    24. ドロワーメニューの内側
    25. ハンバーガーメニュー[左サイド]
    26. ハンバーガーメニュー[左サイド]の内側
    27. ハンバーガーメニュー[左サイド]のSNS内側
    28. 全幅[オーバーレイ] 投稿ページ・固定ページ
    29. 全幅[オーバーレイ] アーカイブページ
    30. 全幅[オーバーレイ]セミナー アーカイブページ
    31. 全幅[オーバーレイ]資料請求 アーカイブページ
    32. 全幅[オーバーレイ]求人情報 アーカイブページ
    33. 全幅[オーバーレイ]ニュースアーカイブページ
    34. 全幅[オーバーレイ]商品紹介アーカイブページ
    35. 全幅[オーバーレイ]求人情報 タームページ
    36. 全幅[オーバーレイ]ニュース タームページ
    37. 全幅[オーバーレイ]商品紹介 タームページ
    38. 全幅[オーバーレイ]資料請求 タームページ
    39. 全幅[オーバーレイ]セミナー タームページ
    40. フィルターフック

フックの概要と仕組み

WordPressがページの表示や内部的な処理を行う際に任意の処理(関数)を挿入できる仕組みをフックといいます。フックにはアクションフックフィルターフックの2種類があります。

アクションフック処理追加を実行。特定のタイミングで独自の処理を行うフックです。
フィルターフックデータ加工を実行。WordPress が出力するテキストを変更するフックです。

アクションフックでできること

アクションフックを使うことで、Emanon Premiumのテーマファイル1を改変せずに任意のHTMLを追加できます具体的には、Emanon Premiumのテーマファイル内にdo_action(  'emanon_xxx'  );2 という記述がある箇所にHTMLを自由の追加できます。

  1. WordPressインストール先にあるwp-content>themes>emanon-premiumフォルダ ↩︎
  2. do_action( 'emanon_before_header' )やdo_action( 'emanon_after_header' )など ↩︎

カスタマイズ例(1) ハンバーガーメニュー[左サイド]内に文字を出力

アクションフックを使ったカスタマイズ例
表示例

下記のカスタマイズが完了すると上記ように、ハンバーガーメニュー[左サイド]内にWordPress Theme Emanonの文字が縦書きで表示されます。

01
子テーマのfunctions.phpに追記

子テーマemanon-premium-childのfunctions.phpに次のコードを書き込むと、ハンバーガーメニュー[左サイド]にWordPress Theme Emanonの文字が出力されます。

/**
 * ハンバーガーメニュー[左サイド]
 */
function fixed_sidebar_menu_description() {
	?>
	<li class="fixed-sidebar-menu-description">WordPress Theme Emanon</li>
	<?php
}

add_action( 'emanon_fixed_sidebar_menu_sns', 'fixed_sidebar_menu_description' );
02
外環>カスタマイズ>追加CSSにCSSを追記

外環>カスタマイズ>追加CSSに、次のCSSを反映させて文字を縦書きにします。

.fixed-sidebar-menu-description {
    writing-mode: vertical-rl;
    margin-bottom: 32px;
    color: #93b5cd;
}

カスタマイズ例(2) Emanonパーツのショートコードを出力

表示例

プラグインEmanon Premium Blocksを有効化するとEmanonパーツが使えます。下記は、Emanon パーツで作成したブロックのショートコードを出力するカスタマイズ手順です。固定ページのアイキャッチ全幅[オーバーレイ]にテキストとボタンを2つ表示します。

01
Emanonパーツの作成

プラグインEmanon Premium Blocksを有効化し、Emanonパーツを作成します。下記の例では、スペーサーブロック>段落ブロック>スペーサーブロック>ボタン:複数[Emanon]の順番で配置しています。

Emanonパーツの作成が終わりましたらショートコード(例

)をコピーし、アクションフックのコードに貼り付けます。

02
子テーマのfunctions.phpに追記

子テーマemanon-premium-childのfunctions.phpに次のコードを書き込むと、固定ページ全幅[オーバーレイ]にショートコード(ショートコード例 [ blog_parts id=48 title=ボタン ] )が出力されます。

/**
 * 固定ページ 全幅[オーバーレイ]にショートコードを出力
 */
function header_full_width_overy_inner() {
    // 固定ページの場合のみ出力
    if ( is_page() ) {
        ?>
        <div class="l-content">
            <?php
            echo do_shortcode('[ blog_parts ショートコード ]');
            ?>
        </div>
        <?php
    }
}
add_action('emanon_after_article_header_full_width_overy_inner', 'header_full_width_overy_inner');

特定の固定ページだけショートコードを出力したい場合、if ( is_page() )に固定ページのIDを入力してください。例えば、固定ページIDが2場合、if ( is_page('2') )となります。

ページIDの調べ方
  • WordPress管理画面から調査したいページ一覧を開きます。
  • 調べたいページタイトルにマウスカーソルをあてます。
  • 画面下部にURLが表示される→「post=」の後の数字が、ページIDです。
 この場合、固定ページIDは 2 です。

子テーマemanon-premium-childのfunctions.phpに次のコードを書き込むと、ページID2の場合だけ、ショートコードが出力されます。

/**
 * 固定ページ 全幅[オーバーレイ]にショートコードを出力
 */
function header_full_width_overy_inner() {
    // 固定ページID2の場合のみ出力
    if ( is_page('2') ) {
        ?>
        <div class="l-content">
            <?php
             echo do_shortcode('[ blog_parts ショートコード ]');
            ?>
        </div>
        <?php
    }
}
add_action('emanon_after_article_header_full_width_overy_inner', 'header_full_width_overy_inner');

カスタマイズ例(3) 指定カスタム投稿セミナーのサイドバーに問い合わせフォームを追加

表示例
01
プラグインContact Form 7を有効化

ここでは、問い合わせフォームを設置できるプラグインContact Form 7を使ったカスタマイズ例をご案内します。Contact Form 7で問い合わせフォームを作成し、ショートコードを取得します。

02
子テーマのfunctions.phpに追記

子テーマemanon-premium-childのfunctions.phpに次のコードを書き込むと、指定したカスタム投稿セミナーページIDのサイドバーに問い合わせフォームが出力されます。ページIDの調べ方はこちらをご覧ください。

/**
 * カスタム投稿セミナーのサイドバーにショートコードを出力
 */
function seminar_sidebar_inner() {
    // カスタム投稿セミナーの投稿IDが20の場合のみ出力
    if ( is_singular(SEMINAR_SLUG) && get_the_ID() == 20 ) {
        ?>
        <div id="js-sidebar-sticky" class="sidebar-sticky">
            <?php
            echo do_shortcode('[contact-form-7 id="03f2011" title="コンタクトフォーム 1"]');
            ?>
        </div>
        <?php
    }
}
add_action('emanon_before_seminar_sidebar_inner', 'seminar_sidebar_inner');
注意事項:サイドバー[追従型]

上記サンプルコードは、id="js-sidebar-sticky" class="sidebar-sticky"により、サイドバー[追従型]のスタイルになっています。ウィジェットのセミナー:サイドバー[追従型]と併用できませんのでご注意ください。

Emanon Premiumのフック一覧

Emanon Premiumのテーマファイル内に配置されたdo_action( 'emanon_xxx' );の場所とフック名の一覧です。カスタマイズにご利用ください。

ヘッダーの外側

フック名説明
emanon_before_headerヘッダー要素外側の前
emanon_after_headerヘッダー要素外側の後

対象phpファイル

header.php

ヘッダーの内側

フック名説明
emanon_before_header_innerヘッダー要素内側の前
emanon_after_header_innerヘッダー要素内側の後

対象phpファイル

template-parts/layout/header/header_center_top_menu.php
template-parts/layout/header/header_center.php
template-parts/layout/header/header_default_menu_right.php
template-parts/layout/header/header_default.php
template-parts/layout/header/header_row.php

ヘッダーロゴの左右

フック名説明
emanon_before_header_site_brandingロゴ要素の左側
emanon_after_header_site_brandingロゴ要素の右側

対象phpファイル

template-parts/layout/header/header_center_top_menu.php
template-parts/layout/header/header_center.php
template-parts/layout/header/header_default_menu_right.php
template-parts/layout/header/header_default.php
template-parts/layout/header/header_row.php

ヘッダーレイアウト1行

フック名説明
emanon_before_header_menu1行レイアウトのメニューの前
emanon_after_header_menu1行レイアウトのメニューの後

対象phpファイル

header_row.php

ヘッダーCTA

フック名説明
emanon_before_header_ctaEmanon設定>多言語や、検索、CTA>コンタクト選定の前
emanon_after_header_ctaEmanon設定>多言語や、検索、CTA>コンタクト選定の後

対象phpファイル

header-cta.php

【固定ページ】コンテンツの上下

フック名説明
emanon_before_page_content_innerコンテンツ要素の上
emanon_after_page_content_innerコンテンツ要素の下

対象phpファイル

template-parts/layout/page/page-layout.php

【投稿ページ】コンテンツの上下

フック名説明
emanon_before_post_content_innerコンテンツ要素の上
emanon_after_post_content_innerコンテンツ要素の下

対象phpファイル

template-parts/layout/post/post-layout.php

カスタム投稿[求人情報]ページコンテンツの上下

フック名説明
emanon_before_job_content_innerコンテンツ要素の上
emanon_after_job_content_innerコンテンツ要素の下

対象phpファイル

template-parts/layout/post/post-job-layout.php

カスタム投稿[ニュース]ページコンテンツの上下

フック名説明
emanon_before_news_content_innerコンテンツ要素の上
emanon_after_news_content_innerコンテンツ要素の下

対象phpファイル

template-parts/layout/post/post-news-layout

カスタム投稿[商品紹介]ページコンテンツの上下

フック名説明
emanon_before_product_content_innerコンテンツ要素の上
emanon_after_product_content_innerコンテンツ要素の下

対象phpファイル

template-parts/layout/post/post-product-layout.php

カスタム投稿[資料請求]ページコンテンツの上下

フック名説明
emanon_before_request_content_innerコンテンツ要素の上
emanon_after_request_content_innerコンテンツ要素の下

対象phpファイル

template-parts/layout/post/post-request-layout.php

カスタム投稿[セミナー]ページコンテンツの上下

フック名説明
emanon_before_seminar_content_innerコンテンツ要素の上
emanon_after_seminar_content_innerコンテンツ要素の下

対象phpファイル

template-parts/layout/post/post-seminar-layout.php

404ページコンテンツの上下

フック名説明
emanon_before_404_content_innerコンテンツ要素の上
emanon_after_404_content_innerコンテンツ要素の下

対象phpファイル

template-parts/layout/404/404-layout.php

検索結果ページコンテンツの上下

フック名説明
emanon_before_search_content_innerコンテンツ要素の上
emanon_after_search_content_innerコンテンツ要素の下

対象phpファイル

template-parts/layout/search/search-layout.php

フッターの外側

フック名説明
emanon_before_footer<footer>タグの直上
emanon_after_footer</footer>タグの直下

対象phpファイル

footer.php

フッターの内側

フック名説明
emanon_before_footer_inner<footer>タグの直下
emanon_after_footer_inner</footer>タグの直上

対象phpファイル

footer.php

サイドバーの内側

フック名説明
emanon_before_sidebar_inner<aside class="sidebar">タグの直下
emanon_after_sidebar_inner<aside class="sidebar">の閉じタグ</aside>の直上

対象phpファイル

sidebar.php

サイドバー左の内側

フック名説明
emanon_before_sidebar_left_inner<aside class="sidebar">タグの直下
emanon_after_sidebar_left_inner<aside class="sidebar">の閉じタグ</aside>の直上

対象phpファイル

sideba-left.php

カスタム投稿[求人情報]サイドバーの内側

フック名説明
emanon_before_job_sidebar_inner<aside class="sidebar">タグの直下
emanon_after_job_sidebar_inner<aside class="sidebar">の閉じタグ</aside>の直上

対象phpファイル

sidebar-job.php

カスタム投稿[ニュース]サイドバーの内側

フック名説明
emanon_before_news_sidebar_inner<aside class="sidebar">タグの直下
emanon_after_news_sidebar_inner<aside class="sidebar">の閉じタグ</aside>の直上

対象phpファイル

sidebar-news.php

カスタム投稿[商品紹介]サイドバーの内側

フック名説明
emanon_before_product_sidebar_inner<aside class="sidebar">タグの直下
emanon_after_product_sidebar_inner<aside class="sidebar">の閉じタグ</aside>の直上

対象phpファイル

sidebar-product.php

カスタム投稿[資料請求]サイドバーの内側

フック名説明
emanon_before_request_sidebar_inner<aside class="sidebar">タグの直下
emanon_after_request_sidebar_inner<aside class="sidebar">の閉じタグ</aside>の直上

対象phpファイル

sidebar-request.php

カスタム投稿[セミナー]サイドバーの内側

フック名説明
emanon_before_seminar_sidebar_inner<aside class="sidebar">タグの直下
emanon_after_seminar_sidebar_inner<aside class="sidebar">の閉じタグ</aside>の直上

対象phpファイル

sidebar-seminar.php

ドロワーメニューの内側

フック名説明
emanon_before_drawer_menu_inner<div class="drawer-menu">タグの直下
emanon_after_drawer_menu_inner<div class="drawer-menu">の閉じタグ</div>の直上

対象phpファイル

template-parts/parts/footer/drawer-menu.php

ハンバーガーメニュー[左サイド]

フック名説明
emanon_before_fixed_sidebar_menu<div class="js-hamburger-menu">タグの直下
emanon_after_fixed_sidebar_menu<div class="js-hamburger-menu">の閉じタグ</div>の直上

対象phpファイル

template-parts/parts/footer/fixed-sidebar-menu.php

ハンバーガーメニュー[左サイド]の内側

フック名説明
emanon_fixed_sidebar_menu_inner<div class="fixed-sidebar-menu__inner">タグ内の<button class="hamburger-menu">の直下

対象phpファイル

template-parts/parts/footer/fixed-sidebar-menu.php

ハンバーガーメニュー[左サイド]のSNS内側

フック名説明
emanon_fixed_sidebar_menu_sns<div class="fixed-sidebar-menu__inner">タグ内の<button class="fixed-sidebar-menu-sns"><ul>の直下

ulの子要素は、liしか使用できませんのでご注意ください。

対象phpファイル

template-parts/parts/footer/fixed-sidebar-menu.php

全幅[オーバーレイ] 投稿ページ・固定ページ

フック名説明
emanon_before_article_header_full_width_overy_inner<div class="article-header-full-width__inner">タグの直下
emanon_after_article_header_full_width_overy_inner<div class="article-header-full-width__inner">の閉じタグ</div>の直下

対象phpファイル

template-parts/parts/featured-image/singular/header-full-width-overlay.php

全幅[オーバーレイ] アーカイブページ

フック名説明
emanon_before_archive_header_full_width_overy_inner<div class="article-header-full-width__inner">タグの直下
emanon_after_archive_header_full_width_overy_inner<div class="article-header-full-width__inner">の閉じタグ</div>の直下

対象phpファイル

template-parts/parts/featured-image/archive/archive-header-full-width-overlay.php

全幅[オーバーレイ]セミナー アーカイブページ

フック名説明
emanon_before_archive_seminar_header_full_width_overy_inner<div class="article-header-full-width__inner">タグの直下
emanon_after_archive_seminar_header_full_width_overy_inner<div class="article-header-full-width__inner">の閉じタグ</div>の直下

対象phpファイル

template-parts/parts/featured-image/archive/seminar/seminar-header-full-width-overlay.php

全幅[オーバーレイ]資料請求 アーカイブページ

フック名説明
emanon_before_archive_request_header_full_width_overy_inner<div class="article-header-full-width__inner">タグの直下
emanon_after_archive_request_header_full_width_overy_inner<div class="article-header-full-width__inner">の閉じタグ</div>の直下

対象phpファイル

template-parts/parts/featured-image/archive/request/request-header-full-width-overlay.php

全幅[オーバーレイ]求人情報 アーカイブページ

フック名説明
emanon_before_archive_job_header_full_width_overy_inner<div class="article-header-full-width__inner">タグの直下
emanon_after_archive_job_header_full_width_overy_inner<div class="article-header-full-width__inner">の閉じタグ</div>の直下

対象phpファイル

template-parts/parts/featured-image/archive/job/job-header-full-width-overlay.php

全幅[オーバーレイ]ニュースアーカイブページ

フック名説明
emanon_before_archive_news_header_full_width_overy_inner<div class="article-header-full-width__inner">タグの直下
emanon_after_archive_news_header_full_width_overy_inner<div class="article-header-full-width__inner">の閉じタグ</div>の直下

対象phpファイル

template-parts/parts/featured-image/archive/news/news-header-full-width-overlay.php

全幅[オーバーレイ]商品紹介アーカイブページ

フック名説明
emanon_before_archive_product_header_full_width_overy_inner<div class="article-header-full-width__inner">タグの直下
emanon_after_archive_product_header_full_width_overy_inner<div class="article-header-full-width__inner">の閉じタグ</div>の直下

対象phpファイル

template-parts/parts/featured-image/archive/product/product-header-full-width-overlay.php

全幅[オーバーレイ]求人情報 タームページ

フック名説明
emanon_before_term_job_header_full_width_overy_inner<div class="article-header-full-width__inner">タグの直下
emanon_after_term_job_header_full_width_overy_inner<div class="article-header-full-width__inner">の閉じタグ</div>の直下

対象phpファイル

template-parts/parts/featured-image/taxonomy-term/job/job-term-header-full-width-overlay.php

全幅[オーバーレイ]ニュース タームページ

フック名説明
emanon_before_term_news_header_full_width_overy_inner<div class="article-header-full-width__inner">タグの直下
emanon_after_term_news_header_full_width_overy_inner<div class="article-header-full-width__inner">の閉じタグ</div>の直下

対象phpファイル

template-parts/parts/featured-image/taxonomy-term/news/news-term-header-full-width-overlay.php

全幅[オーバーレイ]商品紹介 タームページ

フック名説明
emanon_before_term_product_header_full_width_overy_inner<div class="article-header-full-width__inner">タグの直下
emanon_after_term_product_header_full_width_overy_inner<div class="article-header-full-width__inner">の閉じタグ</div>の直下

対象phpファイル

template-parts/parts/featured-image/taxonomy-term/product/product-term-header-full-width-overlay.php

全幅[オーバーレイ]資料請求 タームページ

フック名説明
emanon_before_term_request_header_full_width_overy_inner<div class="article-header-full-width__inner">タグの直下
emanon_after_term_request_header_full_width_overy_inner<div class="article-header-full-width__inner">の閉じタグ</div>の直下

対象phpファイル

template-parts/parts/featured-image/taxonomy-term/request/request-term-header-full-width-overlay.php

全幅[オーバーレイ]セミナー タームページ

フック名説明
emanon_before_term_seminar_header_full_width_overy_inner<div class="article-header-full-width__inner">タグの直下
emanon_after_term_seminar_header_full_width_overy_inner<div class="article-header-full-width__inner">の閉じタグ</div>の直下

対象phpファイル

template-parts/parts/featured-image/taxonomy-term/seminar/seminar-term-header-full-width-overlay.php

フィルターフック

Emanon Premiumには、ヘッダーのサイト名・ロゴのURLを変更するフィルターフックが用意されています。子テーマemanon-premium-childのfunctions.phpに次のコードを書き込むことで、ヘッダーのサイト名・ロゴのURLが指定したURLに置き換わります。

/**
 * ヘッダーのサイト名・ロゴのURLを変更する
 */
 function stie_logo_link() {
   $link = '指定URL';
   return $link;
 }
 add_filter( 'emanon_stie_logo_link', 'stie_logo_link' );