ハミングバードのアニメーションヘッダーを使わずにヘッダー画像をそのまま表示する方法

ハミングバードの特徴として、トップページでアニメーションヘッダーがあります。

アイキャッチ画像とテキスト（リンクボタンも）がアニメーションで魅力的に表示される機能ですが、このアニメーションヘッダーを使わずに、ヘッダーの画像をそのまま表示したい場合のカスタマイズ方法を紹介したいと思います。

カスタマイズは子テーマで

テンプレートファイルを変更することになりますので、できるなら子テーマをご利用くださいませ。親テーマを直接カスタマイズしていただいても同様の結果となりますが、テーマをアップデートした際にデフォルトの状態にもどってしまいます。

まだ子テーマをご利用頂いていない場合は、子テーマのページからダウンロード＆インストールを行なって下さい。

parts_homeheader.phpをカスタマイズ

parts_homeheader.phpというファイルがございますので、まずこのファイルをFTPソフトやサーバーのファイル転送サービスを使って、子テーマ（hummingbird_custom）内にコピーします。

そして上で子テーマにコピーしたparts_homeheader.phpを開きます。

先頭に下記のようなコードが記されています。このコードの上に下の［追記するコード］で紹介する[追記するコード]を入力してください。

▼このコードよりも上に！
<?php if ( get_option( 'opencage_toppage_headeregtext' ) && get_optio~~~~~~~~

ヘッダー画像をそのまま表示するためのコード

下記コードをparts_homeheader.phpの一番上に追記します。（もしくはコードを全て置き換えてもかまいません。ただし、元のコードを消した場合はアニメーションヘッダーの機能が使えなくなります。）

追記するコード

<?php if ( !get_option( 'opencage_toppage_headeregtext' ) && !get_option( 'opencage_toppage_headeregtext' ) && get_theme_mod( 'opencage_toppage_headerbg' ) && is_front_page() && !is_paged() ) : ?>
<div id="custom_header2" style="text-align: center"><img src="<?php echo get_theme_mod( 'opencage_toppage_headerbg' ); ?>"></div>
<?php endif; ?>

このコードの追記により【外観 > カスタマイズ > トップページ設定】の【ヘッダー背景画像】に設定した画像が表示されるようになります。

parts_homeheader.phpのカスタマイズ後のコード

<?php if ( !get_option( 'opencage_toppage_headeregtext' ) && !get_option( 'opencage_toppage_headeregtext' ) && get_theme_mod( 'opencage_toppage_headerbg' ) && is_front_page() && !is_paged() ) : ?>
<div id="custom_header2" style="text-align: center"><img src="<?php echo get_theme_mod( 'opencage_toppage_headerbg' ); ?>"></div>
<?php endif; ?>


▼このコードよりも上に！（デフォルトのコード）
<?php if ( get_option( 'opencage_toppage_headeregtext' ) && get_optio~~~~~~~~

~~~~以下省略~~~~~

注意点

下記のフィールドに何らかのテキストを入力しないで下さい。

【外観 > カスタマイズ > トップページ設定】内の

• 英語表示テキスト（大テキスト）
• 日本語表示テキスト（小テキスト）

こちらは何も入力しないでください。（半角スペースも含めて）

入力するとデフォルト機能のアニメーションヘッダーも動作してしまい、ヘッダーが２種類表示されてしまいます。

その点はご注意ください。

CHECK!

キャンペーン中オープンケージのアフィリエイトプログラムについて