サポート » テーマ » ヘッダーの背景画像がループ

  • 解決済 stream2930

    (@stream2930)


    はじめまして。
    テーマの自作のためにヘッダーから作っているのですが、ヘッダー画像がループしているのでプレビューしてみたりサーバーへインストールしたファイルのソースを見たりしまして、ファイル構成の際に何かが間違っていて<header></header>タグを2つ出力しているようで、そこまでは突き止めたのですが、一体どうしてこのようになったのかが分かりません。
    はじめてこちらのフォーラムにお世話になるので、至らない点もあるかと思います。必要な事柄などありましたらレスポンスを返させていただきますのでよろしくご教示ください。

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

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

    テーマは自作ということですが、参考にされたのはどちら(テーマ、サイトまたは書籍?)でしょうか?
    header.php は、どのようなコードでしょうか?

    • この返信は2ヶ月、 3週前にishitakaが編集しました。

    header.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(); ?>”><!–スタイルシートの呼び出し–>
    <link href=”https://fonts.googleapis.com/css?family=M+PLUS+1p&display=swap&#8221; rel=”stylesheet”>
    <link href=”https://use.fontawesome.com/releases/v5.6.1/css/all.css&#8221; rel=”stylesheet”><!–font-awesomeのスタイルシートの呼び出し–>
    <link rel=”shortcut icon” href=”ファビコン画像のURL”> <!– ファビコン画像設置 –>
    <?php wp_head(); ?><!–システム・プラグイン用–>
    <?php wp_title(); ?><!– サイトタイトル –>
    </head>
    <body <?php body_class(); ?>>
    <header>
    <nav>
    <?php wp_nav_menu( array(
    ‘theme_location’=>’mainmenu’,
    ‘container’ =>”,
    ‘menu_class’ =>”,
    ‘items_wrap’ =>'<ul id=”main-nav”>%3$s‘));
    ?>
    </nav>
    <div class=”clear”></div>
    店名
    </header>

    参考にした書籍は
    WordPressレッスンブック(ソシム)
    WordPressステップアップブック(ソシム)

    あとはネットを検索して骨組みだけのテーマに必要なファイル群をZipで圧縮してレンタルサーバーへインストールしてから作り込みをしています。

    ちなみに、
    page.php
    <?php
    /*
    Template Name: アルバ小樽 オリジナルテーマ
    */
    ?>

    <?php get_header(); ?>
    <div id=”main” role=”main”>
    <?php if (have_posts()) :
    while (have_posts()) : the_post(); ?>
    <article>
    <!–       <header>

    </header> –>

    <?php if(has_post_thumbnail()) {the_post_thumbnail(); } ?>
    <?php the_content(); ?>
    </article>

    <?php endwhile; ?>
     <?php else : ?>
    <p>お探しの記事は見つかりませんでした。</p>
    <?php endif; ?>
    </div><!– /#main –>
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>

    に<header></header>タグがあったのでコメントアウトしたところ、背景画像のループはなくなりました。

    HTML のコメントは <!----> です。

    <!–       <header>
    
    </header> –>

    <!--       <header>
    
    </header> -->

    すみません、間違えたかもしれません。

    コードを逆クォートで括って、再度投稿してください。
    詳細は、下記ページをご覧ください。
    https://wpdocs.osdn.jp/フォーラムへようこそ#.E3.82.B3.E3.83.BC.E3.83.89.E3.81.AE.E6.8A.95.E7.A8.BF

    header.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(); ?>"><!--スタイルシートの呼び出し-->
    <link href="https://fonts.googleapis.com/css?family=M+PLUS+1p&display=swap" rel="stylesheet">
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"><!--font-awesomeのスタイルシートの呼び出し-->
    <link rel="shortcut icon" href="ファビコン画像のURL"> <!-- ファビコン画像設置 -->
    <?php wp_head(); ?><!--システム・プラグイン用-->
    <?php wp_title(); ?><!-- サイトタイトル -->
    </head>
    <body <?php body_class(); ?>>
    <header>
    <nav>
        <?php wp_nav_menu( array(
                'theme_location'=>'mainmenu', 
                'container'     =>'', 
                'menu_class'    =>'',
                'items_wrap'    =>'<ul id="main-nav">%3$s</ul>'));
        ?>
    </nav>
    <div class="clear"></div>
    	<img src="http://atsumare.wp.xdomain.jp/wp-content/uploads/2019/09/banner.png" alt="店名" width="341" height="139" />	
    </header>
    

    これでよろしいでしょうか。

    header.php は問題ないようです。page.php の方に問題があると思われます。
    ※ ただし、現在のバージョンでは非推奨のテンプレートタグ(wp_title)が使われていたりと、古い書籍(5年前?)を参考にしたと思われる記述が見受けられるので、新しい書籍(WordPress 5 対応)を参考にされるといいかと思います。

    なお、ヘルプの必要なページは、現時点では header タグは出力されなくなったようですが、問題は解消されたのでしょうか?

    • この返信は2ヶ月、 3週前にishitakaが編集しました。
    • この返信は2ヶ月、 3週前にishitakaが編集しました。

    HTML の <head> 要素と <header> 要素は、よく混同しがちです。
    <head> 要素と違って <header> 要素は、ページのヘッダーと記事のヘッダーのように、場合によっては同一ページ内に複数あっても間違いではありません。
    https://developer.mozilla.org/ja/docs/Web/HTML/Element/header#Examples
    デフォルトテーマでもページのヘッダー以外に <article> 内に <header> 要素が使われています。

    <header></header>タグがあったのでコメントアウトしたところ、背景画像のループはなくなりました。

    とありますが、ヘッダーの背景画像がループするのは、html と CSS の書き方の問題で

    header {
        background-image: url(http://example.com/background.jpg);
    }

    だと、全部の <header> 要素に背景が付いてしまいますが、
    <header class="page-header">
    <header class="entry-header">
    のようにクラスを設定してやれば、

    .page-header {
        background-image: url(http://example.com/background.jpg);
    }
    .entry-header {
        background-clor: #fdfdfd;
    }

    といった感じで、別々のCSSを当てることが可能です。

    <header></header>タグがあったのでコメントアウトしたところ、背景画像のループはなくなりました。

    おっ、すみません、見落としてました。m(__)m

    この<header></header>タグは削除しても問題ないでしょうか。
    大丈夫なら削除して、問題解決としたいのですが。

    CG

    (@du-bist-der-lenz)

    「この<header></header>タグは削除しても問題ない」か判断するよう、背景を付ける方と、不要な方をクラス分けしてはどうでしょう。

    この<header></header>タグは削除しても問題ないでしょうか。

    page.php の header タグは、投稿のタイトルなどを記述することを想定して用意されたものだと思われます。使用しないのであれば削除してもいいかと思います。@stream2930 さんが必要かどうかです。
    @rocketmartue さんが書かれているように、個別のクラスを設定するのがいいかと思います。

    • この返信は2ヶ月、 3週前にishitakaが編集しました。
    • この返信は2ヶ月、 3週前にishitakaが編集しました。

    ishitakaさん、他の皆さんもありがとうございました。
    この件に関してはこの返信をもって締め切らせていただきます。

    仰る通り、元の骨組みテーマも4年程前に作成したのですが、phpに関する知識は自分にはないので改めてスレッドをたてさせていただきます。

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