サポート » テーマ » ページごとにヘッダーを変えたらナビゲーションバーが表示されない

  • 解決済 stream2930

    (@stream2930)


    header-1.phpのようにページテンプレートを用意して、トップページと他のページのヘッダー画像を変えるようにしたのですが、他のページにナビゲーションバーが表示されなくて困っています。
    いきなりソースコードを貼ったらこちらの規約違反なのか公開されなかったので、このような形で投稿させていただきます。
    よろしくご教示お願いします。

    ヘルプの必要なページ: [リンクを見るにはログイン]

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • こんにちは

    ヘッダー(header.php)の一部分だけの処理を変更(画像の変更)するのであれば、個別のヘッダーファイルではなく条件分岐タグ(下記ページ)で処理を分岐すると良い場合があります。
    https://wpdocs.osdn.jp/条件分岐タグ

    トップページと他のページのヘッダー画像を変えるようにしたのですが、

    トップページと他のページの条件分岐でしたら、上記ページの「ブログページ」セクションが参考になると思います。

    例:

    <?php if ( is_front_page() && is_home() ) { ?>
    	トップページ(デフォルトホームページ)の処理
    <?php } else { ?>
    	それ以外の処理
    <?php} ?>

    @ishikawa さん
    いつも回答していただきありがとうございます。
    上記のコードをheader-1.phpへ書き足すということでしょうか。
    要領を得なくてすいません。
    phpについてはからきしなもので。

    どのようなコードでしょうか?
    ※ 全コードではなく、要所を抜粋して出来るだけ短いコードでお願いします。

    header-1.php

    <!DOCTYPE html>
    <html lang="ja"><!--日本語のサイトであることを指定-->
    <head>
    <meta charset="UTF-8"><!--エンコードがUTF-8であることを指定-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0 "><!--viewportの設定-->
    <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"><!--スタイルシートの呼び出し-->
    <?php wp_head(); ?><!--システム・プラグイン用-->
    <!--<?php wp_title(); ?> サイトタイトル -->
    </head>
    <body <?php body_class(); ?>>
    <div class="page-deader">
    	<img src="http://atsumare.wp.xdomain.jp/wp-content/uploads/2019/09/page-header.jpg">
    		<nav>
        		<?php wp_nav_menu( array(
                	'theme_location'=>'mainmenu', 
                	'container'     =>'', 
                	'menu_class'    =>'',
                	'items_wrap'    =>'<ul id="main-nav">%3$s</ul>'));
        		?>
    		</nav>
    

    他のページにナビゲーションバーが表示されなくて困っています。

    ナビゲーションは画像の下に表示されていますが、文字と背景が同系色のため見えない状態です。
    トップページの画像だけを変更するのであれば、トップページと同様にスタイルで表示するのが簡単かもしれません。ただし、CSS の背景で大きい画像ファイルを複数指定するのはパフォーマンス的にあまりおすすめはできませんが・・・。

    header {
    	background-image:url("http://atsumare.wp.xdomain.jp/wp-content/uploads/2019/09/bg.jpg");
    	background-size:100%;
    	background-repeat:no-repeat;
    	height:600px;
    	margin-bottom:15px;
    	background-attachment: fixed;
    	overflow: hidden;
    }

    header {
    	background-size:100%;
    	background-repeat:no-repeat;
    	margin-bottom:15px;
    	background-attachment: fixed;
    	overflow: hidden;
    }
    body.home header {
    	background-image:url("http://atsumare.wp.xdomain.jp/wp-content/uploads/2019/09/bg.jpg");
    	height:600px;
    }
    header {
    	background-image:url("http://atsumare.wp.xdomain.jp/wp-content/uploads/2019/09/page-header.jpg");
    	height:250px;
    }

    @ishitaka
    ありがとうございます。
    いただいた回答を元にcssを書き直しました。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • このトピックに返信するにはログインが必要です。