GeneratePress テーマフックを使用する

WordPress テーマの一つである GeneratePress テーマは、簡単にカスタムが可能なように、独自のフックを提供しています。 無料版では、関数ファイルに GeneratePress テーマフックを使ってコードを直接挿入でき、 GPプレミアムを使用している場合は、Elementを使用してより簡単にコードを配置できます。

[この記事は2024年9月26日に最終更新されました。 ]

GeneratePress テーマで提供されるフック

GPテーマでは、さまざまなフックを提供していますので、目的の場所にHTMLコード、Javascript、PHPコード、ショートコード等を追加することができます。

個別のポストに使用可能なフックは、次の図を参照してみてください。 クリックすると大きく見ることができます。

たとえば、文のタイトルのすぐ上にいくつかの要素を挿入するにはgenerate_before_entry_titleフックを使用することができます。 記事の下部に関連記事（Related Posts）や広告を配置するgenerate_after_contentフックを使用することができます。

GeneratePress テーマフック活用例

このブログの場合上部バナー、タイトルの下の AdSense 広告とSNS共有アイコンは、下段の一致する広告（AdSense）が GeneratePress フックで実装されています。

そして、上記の図では、ヘッダ部分（2および3）は、ElementsのHeader要素を利用したものだが、ブレッドクラム（2）は、フックに追加が可能です。 他にもヘッダにメタタグ（例： Naver ウェブマスターツールを所有認証コード）を追加するか、Googleのアナリティクストラッキングコードを追加するなど、多様に活用することができます。

• GeneratePress テーマの上部のバナーを表示する（+プラグイン未使用）

手動で GeneratePress テーマフックを使用する（関数ファイルに追加）

無料版を使用している場合、 GeneratePress テーマの関数ファイルに直接コードを入れることができます。 まずはチャイルドテーマを作ってチャイルドテーマ（サブテーマ、子テーマ）内の関数ファイル（functions.php）にコードを追加するようにします。

たとえば、文タイトルの上に ブレッドクラム（Breadcrumb）を追加したい場合には、 Yoast SEO プラグインを使用する場合Yoast SEOでブレッドクラム機能を有効にして、次のようなコードスニペットをテーマ関数ファイルに追加します。

// Yoast SEO 브레드크럼 추가하기
add_action( 'generate_after_header', function() {
    if ( function_exists('yoast_breadcrumb') ) {
        yoast_breadcrumb( '<div class="grid-container grid-parent"><p id="breadcrumbs">','</p></div>' );
    }
} );

上ではgenerate_after_headerアクションを使用したが、before_entry_titleフックを使用してもされます。 ポストタイトルのすぐ下に追加するには、after_entry_entry_titleフックを使用します。 次は、 ブレッドクラムナビゲーション プラグインを使用してブレッドクラムを書かタイトルのすぐ下に追加する例です。

add_action( 'generate_after_entry_title', 'tu_breadcrumbs' );
add_action( 'generate_after_page_title', 'tu_breadcrumbs' );
function tu_breadcrumbs() {
    ?>
    <div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/">
        <?php if(function_exists('bcn_display'))
        {
            bcn_display();
        }?>
    </div>
    <?php
}

フックを使用して目的の場所にブレッドクラム（移動経路）を追加した場合、CSSを使用してスタイルを変更することができます。

テーマの関数ファイルにコードを追加するには、FTPを使用する必要があります。 （Bluehostナ SiteGroundのようなホスティングを利用する場合 File Manager（ファイルマネージャ）ツールを使用することもできます。）

Elementを使用してフックを追加する（GP Premiumの使用時）

有料版（GP Premium）を使用している場合、Elements機能を使用して、より簡単に目的の場所にコードを追加することができます。

たとえば、Googleの AdSense バナー広告を記事の下部に追加したい場合は、次のような手順で行わします。

他の方法で AdSense プラグインを使用すると、より便利にさまざまな場所に AdSense 広告を付けることができます。 以下の方法は、プラグインを使用せずに広告を追加するときに利用することができます。

エレメントを追加する

1 外観（外観、テーマデザイン） » Elementsをクリックします。 上部のElementsフレーズの横に 新規追加 (Add New Element) ボタンをクリックします。

上の図で テーマのデザインは 外観の翻訳です。 WordPress 6.6.1バージョンから 「形」に翻訳れました。 WordPress バージョンによっては、外観、外観、デザイン、テーマデザインなどの用語に翻訳されている可能性があります。

2 Element Type (エレメントタイプ)を選択する画面が表示されます。ヘッダー（ヘッダー）、フック（フック）、レイアウト（レイアウト）から選択できます。ここでは フックを選択します。

3 Add New Element（新しいエレメントを追加） 画面が表示されます。

（1）タイトルフィールドに、この要素の名前を指定します。

（2）見出しの下のボックスに AdSense 広告コードを入力します。 上記のように入力してもされ、CSSで制御するためにクラスを追加してもされます。 例：

<div class="adsense-bottom">
//AdSense 광고 스크립트
</div>

CSSコードは 外観 » カスタム » 追加 CSSに追加します。 例：

// 하단 AdSense 광고
.adsense-bottom {
text-align: center;
margin: 20px 0;
}

経験上 AdSense 広告を追加するときは、 AdSense 広告を中央に配置する属性（text-align）とマージン（Margin）程度を設定すると、無難なようです。 さらに、モバイル機器とデスクトップで広告のサイズを異にしてたいCSSメディアクエリを使用することができます。 W3Schoolsのドキュメントを参照ください。

• CSS text-align Property（CSS text-align属性）
• CSS Margins（CSS外部マージン）
• CSS Media Queries - Examples（CSSメディアクエリの例）

(3) フックで、適切なフックを指定します。 記事の下部にある場合は、次のフックを使用することができます。

• generate_after_content
• generate_after_entry_content

このブログのように記事のタイトルの下に広告を配置するには、generate_after_entry_titleを選択します。

ちなみに、ヘッダーセクションまたはフッターセクションにコードを追加したい場合は、wp_headまたはwp_footerアクションを選択できます。 wp_headとwp_footerは WordPressで独自に提供するフックです。 AdSense 自動広告 Naver サイト所有権確認コード、Google Analyticsトラッキングコードなどをwp_headフックを使用して追加できます。 GeneratePress テーマが提供するフックは generate_ で始まります。

ショートコートを追加する場合には、 Execute Shortcodesをチェックするようにします。 PHPコードを実行できるようにする Execute PHPをチェックします。

例えば、 Rank Math SEOプラグインを使用している場合は、Rank Mathのブレッドクラム機能を有効にして、次のようなショートコードを追加して、記事のタイトルの上または下に移動経路を表示することができます。 この場合、 Execute Shortcodes オプションを有効にする必要があります。

[rank_math_breadcrumb]

同じ場所に複数のエレメントを追加する場合 Priority（優先順位）を介して、同じフックの位置に追加された要素の順序を指定することができます。

表示ルールを指定する

続いて 表示ルール タブをクリックして、エレメントをどこに表示するかを指定します。

ロケーションでこの要素を表示する場所を選択できます。

たとえば、すべての投稿に表示するには、「投稿」を選択し、「すべての投稿」を選択します。特定の記事にのみ表示したい場合は、[すべての記事]ドロップダウンを選択して特定の記事を指定できます（英語版では Post » All Posts 選択）。サイト全体に適用したい場合 サイト全体（デフォルト）を選ぶ。

• Add Location Rule（位置ルールの追加） ボタンを押して場所を追加することができます。
• 除外するから除外する場所を選択します。
• ユーザーでは、この要素を見ることができるユーザーを指定することができます。 例えば、ログインユーザ（会員）にのみ表示されるようにしたり、非会員（ゲスト）のみの表示もするように設定することができます。 特定のメンバーの役割（User Role）を選択することも可能です。

すべて設定を完了したら、右上の「公開「を押してこの要素を発行します。

Yoast SEOブレッドクラムを追加する（例）

上記の手順に従ってYoast SEOブレッドクラムを GeneratePress テーマに追加する方法を次の記事で見ることができます。

• WordPress GeneratePress テーマでYoast SEOブレッドクラム適用する

Rank Mathブレッドクラムを追加する方法も同様のプロセスで可能です。

最後に、

以上で WordPress GeneratePress テーマフックを使用する方法について説明しました。 この方法を使用して目的の場所にHTMLコード、 AdSense 広告は、JavaScriptコード、ショートコード、さらにPHPコードを追加することができます。

GP Premiumのヘッダー要素を使用すると、ヘッダーテンプレートを作成できます。 」WordPress ポストに更新日を表示する（GeneratePress テーマ）「の「ヘッダーエレメント」に「更新」の日付を表示する」を参照してください。

参照

• WordPressで簡単にランディングページを作成する（feat。エレメント、 GeneratePress, Divi)
• GeneratePress テーマ：ヘッダー、フッター、サイドバーを削除する方法
• WordPress GeneratePress テーマサイドバーの幅を変更する
• GeneratePress テーマのポストにコメント数を表示する
• WordPress GeneratePress ライフタイム（寿命）ライセンス新設