ワードプレスで子テーマを使って特定の固定ページのみのヘッダーデザインを変更したい

Question

前提・実現したいこと

タイトル通りです

発生している問題・エラーメッセージ

意図した変更ができない
意図していない部分まで大幅に変わってしまう
エラーはでていません

該当のソースコード

<header class="entry-header">
		<div class="page_thumbnail">
<div class="bg_thumbnails" style="background-image: url()">
    <h1 class="entry-title">タイトル</h1>
</div>
</div>
	</header>
を↓に変更したい
<header class="entry-header">
		<div class="page_thumbnail">
<div class="bg_thumbnails" style="background-image: url()">
    
    <div>
    <hr>
    <hr>
    <h1 class="entry-title">タイトル</h1>
    <hr>
    <hr>
    <hr>
</div>
    
</div>
</div>
	</header>

試したこと

https://teratail.com/questions/278074
この質問で回答いただいたことを参考に
子テーマを自作してアップロードしてその中にheader.phpというファイルを作って
template-parts/content-page.php
これをコピペして変更したい部分

<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>

を

<?php the_title( '<div>','<hr class="hr1">','<hr class="hr2">','<h1 class="entry-title">','<hr class="hr3">','<hr　class="hr4">','<hr class="hr5">', '</h1>','</div>'); ?>

に変更したところ、上記のように意図していないページ（サイトのトップページなど）まで変更されてしまっていた
また、変更内容もヘッダー部分のデザインのみを変えたいという意図通りにならず、サイトのデザインが全体的に変更されてしまっている

補足情報（FW/ツールのバージョンなど）

サイトのテーマelementare
質問主はHTML,CSSの知識はありますが、PHPの知識は0です

Answer 1

元の質問に回答したので、フォローです。

固定ページを全部変更するわけではなかったのですね。
実現したい内容は、具体的に記載していただいた方が回答した内容が異なるといることは少なくなると思います。

<?php the_title( '<div>','<hr class="hr1">','<hr class="hr2">','<h1 class="entry-title">','<hr class="hr3">','<hr　class="hr4">','<hr class="hr5">', '</h1>','</div>'); ?>

前回の質問に記載したthe_title の説明にある通り、the_title のカッコの中に記載する内容はルールがあります。

使い方
<?php the_title( $before, $after, $echo ); ?>

と書かれているようにカッコ内に記載できるのは、3つのパラメータで、それぞれに意味があります。

一つ目は、タイトルの前につけるHTMLタグ
二つ目は、タイトルの後ろにつけるHTMLタグ
三つ目は、タグの位置にそのまま表示するか
です。

それ以外のパラメータは、HTML のタグとしては、無視されて出力されないので、開きタグと閉じタグの数が合わない等で、レイアウトが崩れると思います。

表示を

<div>
    <hr>
    <hr>
    <h1 class="entry-title">タイトル</h1>
    <hr>
    <hr>
    <hr>
</div>

にするので有れば、

the_title( '<div><hr><hr><h1 class="entry-title">','</h1><hr><hr></div>');

のように指定することになります。

特定の固定ページだけ変更するので有れば、条件分岐タグ で、条件を判断して、出力を切り替える必要があります。

固定ページのID が、 99 の場合に変更する場合は、下記のように記載します。

<?php
if( is_page( '99' ) ){
    the_title( '<div><hr><hr><h1 class="entry-title">','</h1><hr><hr></div>');
} else {
    the_title( '<h1 class="entry-title">', '</h1>' );
}
?>

Answer 2

WordPressではbodyタグのclassに固定ページのidが出力されますので
下記のように特定のページのみCSSのスタイルを適用できます。

body.id-XXX header {
  /* idがXXXの固定ページのheaderのみに適用 */
}