GeneratePress テーマヘッダー要素（ページヒーロー）の作成

GeneratePress テーマでは、ヘッダー要素を作成してヘッダーレイアウトをカスタマイズできます。エレメントプロ ヘッダーテンプレートと似ていますが、使いやすさの面では、エレメータのテーマビルダーはより簡単です。

開発者になじみのある方法ですが、 GeneratePress テーマのElementをうまく活用すれば、サイトのスピードを素早く維持しながら、好きなようにカスタマイズすることができます。

GeneratePress テーマヘッダー要素（ページヒーロー）の作成

この WordPress ブログのポストテンプレートを少し変更してみました。

Happistさんのサイトでも GeneratePress テーマが使用されていますが、ポストヘッダーは次のようになっています。ナビゲーション部分が透明になっており、ページヒーローがヘッダー全体に表示されるようにしました。

GeneratePress テーマの有料版を使用している場合は、Header要素を使用して必要に応じてヘッダーをカスタマイズできます。

GeneratePress テーマで特定のページや投稿のヘッダーレイアウトを変更したい場合は、参考にしてください。

1 Header 要素を使用するには、まず 要素 モジュールを有効にする必要があります。 WordPress 管理者ページ » 外観 » GeneratePress » Modules セクションに移動して 要素 モジュールを有効にします。

モジュールが有効な場合 非活性化します ボタンが表示され、無効状態の場合 アクティブにしましょう ボタンが表示されます。

参考までに WordPress バージョンによっては、「外観」は「デザイン」、「外観」などの単語に翻訳されている可能性があります。

• WordPress Appearance 翻訳「デザイン」から「外観」に変更

2 形状 » Elementsに移動し、 Add New Element (新しい要素を追加) ボタンをクリックします。

Choose Element Type ポップアップが表示されたら ヘッダを選択して、 創造する ボタンをクリックします。

このポップアップでは、次の要素を選択できます。

• ブロック
• フック(フック)
• レイアウト
• 헤더

3 ヘッダー要素が生成されます。

上の図は、私のブログに適用されたポストヘッダー要素を示しています。

ヘッダー要素の名前を指定し（①）、テキストボックスにヘッダーに表示するコンテンツを入力します。この部分に入力したコンテンツがページタイトルバーまたはページヒーローに表示されます。

次のテンプレートタグがサポートされています。

1. {{post_title}}: 現在の投稿/分類のタイトル
2. {{post_date}}: 現在の投稿の発行日
3. {{post_author}}: 現在の投稿の作成者（投稿者）
4. {{post_terms.taxonomy}}：選択した分類（カテゴリ、ポストタグ、商品カテゴリ）に関連付けられている用語
5. {{custom_field.name}}: カスタムポストメタ。 name 部分をカスタムフィールドの名前に置き換えます。

これにより、記事のタイトル、作成者、発行日、カテゴリ/タグ、カスタムフィールドなどの情報を表示できます。

私 Yoast SEOのブレッドクラムや投稿更新日、コメント数などのコンテンツも表示されるようにしました。ブレッドクラムの場合は、ショートコードを入力できます。

• WordPress Yoast SEOプラグイン：ブレッドクラムショートコード

投稿修正日とコメント数はショートコードを作成して追加しました。

• WordPress 投稿に更新日を表示する方法（ジェネレートプレステーマ）

このブログでは、次のコードを使用しました。以下のコード チャイルドテーマの関数ファイルに追加すると、投稿の更新日とコメントの数をショートコードとして追加できます。

// 更新 날짜 표시
function post_modified_date() {
    return get_the_modified_date();
}
add_shortcode( 'modified_date', 'post_modified_date' );

// 댓글 개수
function post_comment_number() {
    ob_start();
    comments_popup_link( __( '댓글', 'generatepress' ), __( '1개 댓글', 'generatepress' ), __( '%개 댓글', 'generatepress' ) );
    return ob_get_clean();
}
add_shortcode( 'comment_number', 'post_comment_number' );

コンテンツ入力フィールドには、次の要素を入力できます。

1. テキスト
2. HTMLコード
3. テンプレートタグ
4. ショートコード（ショートコード）

PHPコードは入力できません。 JavaScript（JavaScript）は フックエレメントを使用してフッターセクション（wp_footer）に追加できます。

下の Page Hero タブでスタイルを指定でき、Page Hero タブで指定できないスタイルは CSSを使用して、スタイルを好きなようにカスタマイズできます。

4 Page Hero タブをクリック（③）し、ページヒーロースタイルを指定します。

ページヒーローについて 木ウィキ文書では次のように説明しています。

ウェブサイトで画面をいっぱいにする大きなバナーイメージで、一般的に目の前や中央に入るように配置されるため、訪問者の注目を集中させる。

GeneratePress テーマのヘッダー要素の「ページヒーロー」は、ページ/ポストタイトルバーを意味するようです。ここに特性画像を表示させることもできます。

Bluehostでページヒーローに特性画像が表示されるようにするので、多少のディレイが感じられて表示しませんでしたが、 クラウドウェイズでサーバーを切り替えた後に特性イメージを表示するように指定しても速度が遅くなる現象はないようです。

ちなみにコスパ比良くて韓国でもスピードの速い海外ホスティングが欲しい場合 Bluehostと同様のレベルの海外共有ホスティングサービス ファーストコメットや ケミクラウドそれはまともな選択かもしれません。特に、ChemiCloudはソウルサーバーを先月末に追加し、韓国でもスピードが速くなります。

• ケミクラウド WordPress ホスティングソウルサーバーリージョンの追加

ページヒーローでページタイトルバーにプロパティ画像（サムネイル）を表示するように設定でき、オーバーレイカラーも指定できます。

5 サイトヘッダー タブをクリックして適切に設定します。私は次のように設定されていますね。

6 Display Rules（表示ルール） タブで、このヘッダー要素が表示される場所を指定します。すべての投稿（投稿）に表示させたい場合は、以下のように設定できます。

Exclude（除く） セクションで例外ルールを指定できます。

最後に、

以上で GeneratePress テーマのヘッダー要素について調べました。ヘッダーレイアウトをカスタマイズしたい場合は、参考にして好きなようにしてみてください。

元のヘッダーテンプレートを作成するには、テーマのheader.phpファイルを変更する必要がありますが、この機能を使用すると、テーマファイルを変更することなくヘッダーテンプレートを作成できます。

Avada, Diviテーマ, Newspaperなどの一部のテーマでも、ヘッダーテンプレートを通知パネルで作成できます。

参照

• WordPressで簡単にランディングページを作成する（feat。エレメント、 GeneratePress, Divi)
• GeneratePress テーマ：ヘッダー、フッター、サイドバーを削除する方法
• クラウドウェイズLinodeサーバーからVultrサーバーに変更
• 71歳ソボンス9段の囲碁優勝、年齢を越える人生教訓