ヘッダーの背景画像がループ
-
はじめまして。
テーマの自作のためにヘッダーから作っているのですが、ヘッダー画像がループしているのでプレビューしてみたりサーバーへインストールしたファイルのソースを見たりしまして、ファイル構成の際に何かが間違っていて<header></header>タグを2つ出力しているようで、そこまでは突き止めたのですが、一体どうしてこのようになったのかが分かりません。
はじめてこちらのフォーラムにお世話になるので、至らない点もあるかと思います。必要な事柄などありましたらレスポンスを返させていただきますのでよろしくご教示ください。ヘルプの必要なページ: [リンクを見るにはログイン]
-
こんにちは
テーマは自作ということですが、参考にされたのはどちら(テーマ、サイトまたは書籍?)でしょうか?
header.php は、どのようなコードでしょうか?-
この返信は5年、 7ヶ月前に
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” 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‘));
?>
</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.BFheader.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>
これでよろしいでしょうか。
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>タグは削除しても問題ないでしょうか。
大丈夫なら削除して、問題解決としたいのですが。「この<header></header>タグは削除しても問題ない」か判断するよう、背景を付ける方と、不要な方をクラス分けしてはどうでしょう。
この<header></header>タグは削除しても問題ないでしょうか。
page.php の header タグは、投稿のタイトルなどを記述することを想定して用意されたものだと思われます。使用しないのであれば削除してもいいかと思います。@stream2930 さんが必要かどうかです。
@rocketmartue さんが書かれているように、個別のクラスを設定するのがいいかと思います。ishitakaさん、他の皆さんもありがとうございました。
この件に関してはこの返信をもって締め切らせていただきます。仰る通り、元の骨組みテーマも4年程前に作成したのですが、phpに関する知識は自分にはないので改めてスレッドをたてさせていただきます。
-
この返信は5年、 7ヶ月前に
- トピック「ヘッダーの背景画像がループ」には新たに返信することはできません。