質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.78%

ワードプレスで、カスタムヘッダーを設定する方法

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 2,265
退会済みユーザー

退会済みユーザー

Fluid Magazineというテーマを使っているのですが、ダッシュボードの中の「外観」内に、ヘッダーが最初から無かったので、
カスタムヘッダー機能の導入を行うために、まず、「function.php」をいじりました。

引用テキスト
add_theme_support( 'custom-header' );
を入れました。

次にヘッダーを表示させるための設定を行おうとして、「ダッシュボード」→「外観」→「テーマ編集」→「header.php」を開いて、<body>タグ内に以下のコードを追記しました。

引用テキスト
<!-- custom header -->
<?php $header_image = get_header_image();
if ( ! empty( $header_image ) ) : ?>
<div id="header_img">
<a href="<?php echo home_url(); ?>"><img src="<?php header_image(); ?>" alt="<?php bloginfo('name'); ?>"  /></a>
</div>
<?php endif;?>

これで更新しようとすると、コピペしただけにもかかわらず、シンタックスエラーが出てしまうので、テーマによってコピペするphpファイルが違うのかなと思い、
メインのHOMEのページに入れたかったので、「テーマ編集」の、「メインインデックスのテンプレート」(index.php)に入れました。
※先ほど「header.php」の中でコピペした   <!-- custom header -->〜は消しました。

それで、ダッシュボードの中の「外観」内に戻り、ヘッダーが反映されたのでそれをクリックし、カスタマイズ内に設置された「ヘッダー画像」をックリックし、画像を新規追加しました。
すると、
一番上の(配置したい位置の)ナビゲーションバーの下ではなく、設定した「ロゴ」と「広告」の下に左ヨリで設置されてしまいます。この現象はなぜそうなってしまうのでしょうか?

配置したい位置である、ナビゲーションバーのすぐ下に入れるにはどうすれば?

ワードプレス始めたばっかりで結構わかりやすく教えて頂けると助かります。

よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

これで更新しようとすると、コピペしただけにもかかわらず、シンタックスエラーが出てしまうので、テーマによってコピペするphpファイルが違うのかなと思い、

以下の手順を手元の環境に試したところ、シンタックスエラーが出ることなく正常に動作しました。
おそらく、最初にコードを書き加えた場所がPHPコード上で不正な位置だったものと思われます。

(1) Fluid Magazineを手元の環境に導入
(2)add_theme_support( 'custom-header' );をfunctions.phpに記載
(3)ご提示のコードをtemplate-functions.phpのfluid_magazine_header_top関数内に記載し、CSSで画像の位置とサイズを設定

function fluid_magazine_header_top(){

    ?>
    <div class="sticky-holder"></div>
    <div class="header-t">
        <div class="container">
            <div id="mobile-header">
                <a id="responsive-menu-button" href="#sidr-main">
                    <span></span>
                    <span></span>
                    <span></span>
                </a>
            </div>
            <nav id="site-navigation" class="main-navigation" role="navigation">
                <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>
            </nav><!-- #site-navigation -->

        <?php $ed_search_form = get_theme_mod( 'fluid_magazine_ed_search', '1' ); ?>

                <div class="right">
                    <?php if( $ed_search_form ){ ?>
                    <div class="btn-search">
                        <i class="fa fa-search"></i>
                        <div class="form-holder">
                        <?php get_search_form(); ?>
                        </div>
                    </div>
                    <?php } ?>
                    <?php fluid_magazine_get_social_links(); ?>
                </div>
        </div>
    </div>
<!-- ここからコード追加 -->
<!-- custom header -->
<?php $header_image = get_header_image();
if ( ! empty( $header_image ) ) : ?>
<div id="header_img" style="max-width: 50%; margin: 0 auto;"><!-- ヘッダ画像の位置とサイズはCSSで調整 -->
<a href="<?php echo home_url(); ?>"><img src="<?php header_image(); ?>" alt="<?php bloginfo('name'); ?>"  /></a>
</div>
<?php endif;?>
<!-- ここまでコード追加 -->
    <?php
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る