wordpressで特定のページに他のページと異なる画像を貼り付けたい

Question

Wordpressのlightningテーマを使用しております。
今回、画像をページ内のどこに挿入したいかというとpage-headerというヘッダー部の帯のような部分になります。

この桜の写真がそうなのですが、これをpost=405のIDを持つぺージだけ別な画像にしたいと思っています。因みにpage-headerの画像は、とくに手を加えなければ一様にすべての固定ページや投稿ページに同じ画像が表示されます。

page-deaderの記述があるところはpage-heder.phpというところなので、その関係する記述の下にpost=405を指定する内容を付け加えてみました。しかし、phpの記述が不慣れなのとwordpressの構文に対して理解不足もあるのか、悉く挿入したコードがエラーになってしまいました。

//失敗例1

/*-------------------------------------------*/
/*	Set wrap tags
/*-------------------------------------------*/
$pageTitHtml_before  = '<div class="section page-header"><div class="container"><div class="row"><div class="col-md-12">' . "\n";
$pageTitHtml_before .= '<' . $pageTitTag . ' class="page-header_pageTitle">' . "\n";
$pageTitHtml_after   = '</' . $pageTitTag . '>' . "\n";
$pageTitHtml_after  .= '</div></div></div></div><!-- [ /.page-header ] -->' . "\n";

//ここに特定のページを指定するように付け加えてみた。↓↓↓↓
$pageid=get_the_ID()
if($pageid==405){ page-header'(img src="https://example.com/wp-content/uploads/xxxxxxxxx.png")'; }
else{ page-header'(img src="https://example.com/wp-content/uploads/IMG_xxxxxxxxxxxxx.jpg")'; }

//失敗例2

/*-------------------------------------------*/
/*	Set wrap tags
/*-------------------------------------------*/
$pageTitHtml_before  = '<div class="section page-header"><div class="container"><div class="row"><div class="col-md-12">' . "\n";
$pageTitHtml_before .= '<' . $pageTitTag . ' class="page-header_pageTitle">' . "\n";
$pageTitHtml_after   = '</' . $pageTitTag . '>' . "\n";
$pageTitHtml_after  .= '</div></div></div></div><!-- [ /.page-header ] -->' . "\n";

//ここに特定のページを指定するように付け加えてみた。↓↓↓↓
$pageid=get_the_ID()
if(is_page('405'){ .page-header'(img src="https://example.com/wp-content/uploads/xxxxxxxxxxxx.png")'; }
else{ .page-header'(img src="https://point-everyday.com/wp-content/uploads/IMG_xxxxxxxxxxxxxx.jpg")'; }

調べた上でこのように記述してみましたが、たぶん何か勘違いしているようです。その勘違いもよくわからないので、その点も推察していただけたら幸いです。

なお、自分はlightningの無料版を使用していて、本来の無料版ならこのpage-headerの部分は青いだけの帯になっています。これを有料版風にstyle.cssでアレンジしたのが上の画像です。なのでおそらくは有料版とは違うカスタマイズかもしれません。その点も余談かもしれませんが、考慮していただければ幸いです。

どうぞ、よろしくお願いいたします。

Answer 1

色々とツッコミどころが多いせいか、回答がついていませんが、もう少しPHPの基礎を勉強された方がよいのではと思います。
その後でWordPressを勉強し、今回の自分のコードのどこに不備があるのかわかるようになると思います。

チャレンジは評価できますので、ヒントのみ記載します。

$pageid=get_the_ID() 
// ↑ 行末の;がない

if($pageid==405){ page-header'(img src="https://example.com/wp-content/uploads/xxxxxxxxx.png")'; }
// ↑ $pageidはどこからでてきましたか？
// 　page-headerでは変数の宣言になっていません。もしかして関数でしょうか？
// 　page-header'(img ・・・ここに関しては何をしたいのか・・・echoしたいのか、変数に値を代入したいのか、値もタグのように見えるがなにをどうしたいのか・・・

if(is_page('405'){ .page-header
// ↑ いきなり「.page-header」というCSSのクラスのような書き方がでてきていますが、こちらも何をしたいのでしょうか。

Comments

[of_the_Europa]

ご回答ありがとうございます。
やはりまだ一つのアクションを起こすのに相当な時間をかけてしまうところが、勉強不足だなとつくづく感じています。インプットよりアウトプット主体の勉強が大事と言われますが、いやそのどちらも絡めた学習方法をしていかないと今後も時間とストレスがかかる一方なんだなとも思いました。

個人的な反省はとりあえず置いといて、今回は rjunakc 様のヒントが非常に参考になりましたので以下、自己解決法にて記します。結局cssでの変更にとどまりましたが、wordpressの構文もhtmlの階層もよく分かったので覚えた甲斐がありました。本当に助かりました。ありがとうございます_(._.)_

Answer 2

rjunakc様のご指摘をもと、page-header.phpでこのように変更しました。

/*-------------------------------------------*/
/*    Set wrap tags
/*-------------------------------------------*/
$pageTitHtml_before  = '<div class="section page-header"><div class="container"><div class="row"><div class="col-md-12">' . "\n";
$pageTitHtml_before .= '<' . $pageTitTag . ' class="page-header_pageTitle">' . "\n";
$pageTitHtml_after   = '</' . $pageTitTag . '>' . "\n";
$pageTitHtml_after  .= '</div></div></div></div><!-- [ /.page-header ] -->' . "\n";

/*-------------------------------------------*/
/*   書き直しの部分　↓↓↓ （特定のページに他のページとは異なる画像を表示させる）
/*-------------------------------------------*/
$gazou1 = wp_get_attachment_image(689,'', false, array( 'class'=>'page-header' ) ); 
$gazou2 = wp_get_attachment_image(404,'', false, array( 'class'=>'page-header' ) ); 
$pageid= get_the_ID(); 
if($pageid=is_page(405)){ 
	$pageTitHtml_before = $gazou1; }
else{ $pageTitHtml_before = $gazou2; }

すると、ID:405ページの画像が見事ほかのページとは異なる画像になりました。

しかし・・・・　↓↓↓

見にくいかもしれませんが、この ”RSSの間” という文字が本来なら画像の中央にタイトルとして表示されなくてはならないのですが、上記の記述では画像とタイトルが別々な表示になっています。
if文での記述をbeforeなしで $pageTitHtml としてもみましたが、それだと画像は表示されず、デフォルトの青い帯のデザインになるだけでした。↓↓↓

結局、最終的にはcssで書き込むことに。
このように405ページとそれ以外のページを別けてタイトルも真ん中にくるように調整しました。↓↓↓

.page-id-405 .page-header{ background-image: url("https://example.com/wp-content/uploads/xxxxxxxxxx.jpg");   display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; height: 250px; alt="xxxxxxx"; } 
.page-header{ background-image: url("https://example.com/wp-content/uploads/xxxxxxxxxxx.jpg");　  display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; height: 300px; alt="xxxxxxxx"; }
.page-header_pageTitle{ font-weight: 600; font-size: 32px; }

phpで変化を作れなかったことは悔やまれますが、これでやりたいことができたので一応はほっとしております。