GeneratePress テーマフックを使用する - WordPress 情報パッケージ
인기 WordPress テーマブルフセール 詳細

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

Last Updated:2022年9月30日| コメントを残す
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

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

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

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

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

WordPress GeneratePress テーマフック

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

GeneratePress テーマフック活用例

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

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

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

手動で 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フックを使用します。 次は、 Breadcrumb Navxt プラグインを使用してブレッドクラムを書かタイトルのすぐ下に追加する例です。

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) ボタンをクリックします。

GeneratePress テーマElementsを使用する

2. Element Type(エレメントタイプ)を選択する画面が表示されます。 Header(ヘッダ)、Hook(フック)、Layout(レイアウト)の中から選択が可能です。 ここで フックを選択します。

WordPress GeneratePress テーマエレメントタイプ

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

GeneratePress AdSense 広告を追加する

(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のドキュメントを参照ください。

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

  • after_content
  • after_entry_content

このブログのように書かれ、タイトルの下に広告を配置するafter_entry_titleを選択します。

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

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

[rank_math_breadcrumb]

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

表示ルールを指定する

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

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

所在地この要素を表示する場所を選択することができます。 たとえば、すべての記事に表示するには、「文」を選択し、「All文」を選択します。 特定の記事だけを表示したい場合は、「All文」のドロップダウンを選択して、特定の文を指定することができます。 (英語版では、 Post> All Posts 選択)

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

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

Yoast SEOブレッドクラムを追加する(例)

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

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

最後に、

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

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

参照



コメントを残す

コメント

カフェで WordPress 情報を共有できます。

ありがとうございます!