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

FacebookさえずりredditPinterestのLinkedInのmail

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

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

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

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

ワードプレスGeneratePressテーマフック

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

手動で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を使用する必要があります。 (ブルルーホストまたはサイトグラウンドのようなホスティングを利用する場合 File Manager(ファイルマネージャ)ツールを使用することもできます。)

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

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

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

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

エレメントを追加する

1. テーマのデザイン> Elementsをクリックします。 上部のElementsフレーズの横に 新しく追加(Add New) ボタンをクリックします。

GeneratePressテーマElementsを使用する

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

ワードプレス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ワードプレスのテーマフックを使用する

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

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

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

おわりに

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

参考



コメントを残す