フックを使ったカスタマイズ

フックの概要と仕組み

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

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

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

カスタマイズ例（１） ハンバーガーメニュー［左サイド］内に文字を出力

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

子テーマ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' );

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

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

カスタマイズ例（２） Emanonパーツのショートコードを出力

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

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

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

子テーマ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です。

子テーマ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');

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

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

子テーマ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');

カスタマイズ例（４） ハンバーガーメニュー［SP・TB］の左隣に問い合わせリンクを設置

スマホ表示の際にロゴ（サイトタイトル）を左配置、ハンバーガーメニュー［SP・TB］を右配置になるよう設定します。

ロゴ（サイトタイトル）を左配置

1. WordPress管理画面にログイン
2. 外観＞カスタマイズ＞サイト基本情報に移動し、ロゴ（サイトタイトル）レイアウト［SP］を右配置を選択
3. 公開保存

ハンバーガーメニュー［SP・TB］を右配置

1. WordPress管理画面にログイン
2. 外観＞カスタマイズ＞デザイン設定＞バーガーメニュー設定に移動し、ハンバーガーメニューを右に配置［SP］にチェックを入れる
3. 公開保存

子テーマemanon-premium-childのfunctions.phpに次のコードを書き込むと、ハンバーガーメニュー［SP・TB］にリンクが出力されます。href="#"やお問い合わせの文字は目的に合わせて変更してください。

/**
 * ハンバーガーメニュー［SP・TB］にリンクを出力
 */
function hamburger_after_menu_contact() {
	?>
	<a href="#" class="hamburger-menu-contact u-display-tablet">お問い合わせ</a>
	<?php
}

add_action( 'emanon_after_hamburger_menu', 'hamburger_after_menu_contact' );

外環＞カスタマイズ＞追加CSSに、次のCSSを反映させてリンクのデザインを整えます。

.hamburger-menu-contact {
    min-width: 90px;
    letter-spacing: 0.04em;
    font-size: 0.88889rem;
}

フィルターフックでできること

フィルターフックを使うことで、Emanon Premiumのテーマファイルを改変せずに任意の出力内容を編集できます。具体的には、Emanon Premiumのテーマファイル内にapply_filtersという記述がある箇所の出力内容を加工できます。

カスタマイズ例（１）特定ページのmeta description書き換え

子テーマemanon-premium-childのfunctions.phpに次のコードを書き込むと、指定したページIDのmeta descriptionが出力されます。ページIDの調べ方はこちらをご覧ください。

/**
 * 投稿ID 1のmeta descriptionをカスタマイズ
 */
function emanon_customize_meta_description( $description ) {
    if ( is_single() && get_the_ID() === 1 ) {
        $custom_description = "ここに新しいmeta descriptionを設定します";
        return $custom_description;
    }
    return $description;
}
add_filter( 'emanon_custom_description', 'emanon_customize_meta_description' );

カスタマイズ例（２）サブタイトル書き換え

子テーマemanon-premium-childのfunctions.phpに次のコードを書き込むと、サブタイトルに連番（投稿ID）を追加されます。

/**
 * サブタイトルに連番（投稿ID）を追加
 */
function add_sequential_number_to_subtitle( $subtitle ) {
    global $post;
    // 投稿IDをサブタイトルの前に追加
    $new_subtitle = $post->ID . '. ' . $subtitle;
    return $new_subtitle;
}

add_filter( 'emanon_custom_subtitle', 'add_sequential_number_to_subtitle' );

カスタマイズ例（３） サイト名・ロゴの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' );

カスタマイズ例（４） 検索ボタン［ヘッダー］の検索窓のURL変更

子テーマemanon-premium-childのfunctions.phpに次のコードを書き込むことで、検索ボタン［ヘッダー］の検索窓を指定したショートコードの出力に変更できます。

/**
 * 検索ボタン［ヘッダー］の検索窓をショートコード出力に置き換える
 */
function add_shortcode_custom_searchform( $search_form ) {
    // 追加するショートコードを記入してください。
    $shortcode = ‘[ここにショートコードを入力]’;

    $search_form = do_shortcode($shortcode);
    return $search_form;
}

add_filter('emanon_custom_searchform', 'add_shortcode_custom_searchform');

カスタマイズ例（５） パンくずHomeのURL変更

子テーマemanon-premium-childのfunctions.phpに次のコードを書き込むことで、 パンくずHomeのURLを指定したURLの出力に変更できます。

/**
 * パンくずHomeのURL変更
 */
function custom_breadcrumb_home_url( $url ) {

		$url = 'https://XXX/'; // 変更するURLを記入してください。
	return $url;
}
add_filter( 'emanon_breadcrumb_home_url', 'custom_breadcrumb_home_url' );

Emanon Premiumのフック一覧

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

meta description

ヘッダーの外側

対象phpファイル

header.php

ヘッダーの内側

対象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

ヘッダーロゴの左右

対象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行

対象phpファイル

header_row.php

ヘッダーCTA

対象phpファイル

header-cta.php

コンタクトボタン［ヘッダー］

対象phpファイル

header-panel.php

検索ボタン［ヘッダー］

対象phpファイル

header-panel.php

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

対象phpファイル

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

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

【固定ページ・投稿ページ】サブタイトル

対象phpファイル

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

コメントフォームの上下

対象phpファイル

comments.php

コメントフォーム内の上下

対象phpファイル

comments.php

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

対象phpファイル

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

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

対象phpファイル

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

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

対象phpファイル

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

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

対象phpファイル

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

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

対象phpファイル

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

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

対象phpファイル

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

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

対象phpファイル

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

フッターの外側

対象phpファイル

footer.php

フッターの内側

対象phpファイル

footer.php

サイドバーの内側

対象phpファイル

sidebar.php

サイドバー左の内側

対象phpファイル

sideba-left.php

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

対象phpファイル

sidebar-job.php

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

対象phpファイル

sidebar-news.php

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

対象phpファイル

sidebar-product.php

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

対象phpファイル

sidebar-request.php

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

対象phpファイル

sidebar-seminar.php

ドロワーメニューの内側

対象phpファイル

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

ハンバーガーメニュー［左サイド］

対象phpファイル

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

ハンバーガーメニュー［左サイド］の内側

対象phpファイル

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

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

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

対象phpファイル

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

全幅［オーバーレイ］ 投稿ページ・固定ページ

対象phpファイル

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

全幅［オーバーレイ］ アーカイブページ

対象phpファイル

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

全幅［オーバーレイ］セミナー アーカイブページ

対象phpファイル

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

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

対象phpファイル

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

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

対象phpファイル

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

全幅［オーバーレイ］ニュースアーカイブページ

対象phpファイル

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

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

対象phpファイル

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

全幅［オーバーレイ］求人情報 タームページ

対象phpファイル

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

全幅［オーバーレイ］ニュース タームページ

対象phpファイル

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

全幅［オーバーレイ］商品紹介 タームページ

対象phpファイル

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

全幅［オーバーレイ］資料請求 タームページ

対象phpファイル

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

全幅［オーバーレイ］セミナー タームページ

対象phpファイル

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