WordPressヘッダ内の h1, h2 をページごとに変更

WordPressヘッダ内の h1, h2 をページごとに変更

WordPress のヘッダ内で表示される 「h1」 タグと 「h2」 タグは通常 「h1」 タグがそのサイトのタイトル、 「h2」 タグが description となります。(なってないテーマもあるかも )

以前から 「h1」 はそのページのタイトル、 「h2」 はそのページだけの description に変えようと考えてました。 でもすっかりサッパリ忘れてしまって3年くらいたっちゃった :mrgreen:

で、現在 XAMPP を使って手直し中のサイトをイジッてるうちに上記のことを思い出し、色々と手を加えてみることにしました。


Sponsored Link

当ブログの SEO 関連プラグインは、長いこと HeadSpace を使ってます。 HeadSpace はページごとの 「ページタイトル」、「Description(説明文)」、「Keywords」 はもちろん、「ページ特定のプラグイン」 や 「Custom date」 、「生データ」 、「Google ウェブマスタとの連携」、「Google Analytics との連携」、「Feedburner Stats Pro との連携」などなど、コレでもかというぐらい色々なことができる強力なプラグインです。

でもヘッダの「h1」 、 「h2」 タグを変える項目はないんですよね。 「All in One SEO Pack」 はどうだったかな? 忘れちゃった。

ヘッダの h1, h2 をページごとに変更

下記サンプルは当ブログのものです。 まずは 「h1」 。

<h1><?php if ( is_home() ) { ?><a href="<?php echo get_settings('home'); ?>/">愚者の紋章 -The Fool-</a>
<?php } elseif ( is_search() ) { ?>検索結果 : <?php echo the_search_query(); ?> | 愚者の紋章 -The Fool-
<?php } elseif ( is_page() ) { ?><?php wp_title(''); ?> | 愚者の紋章 -The Fool-
<?php } elseif ( is_category() ) { ?>「<?php single_cat_title(); ?>」の記事一覧 | 愚者の紋章 -The Fool-
<?php } elseif ( is_month() ) { ?><?php the_time('Y年F'); ?>の記事一覧 | 愚者の紋章 -The Fool-
<?php } elseif ( is_tag() ) { ?>「<?php single_tag_title();?>」タグが付いている記事一覧 | 愚者の紋章 -The Fool-
<?php } elseif  ( is_404() ) { ?>404エラー お探しのページは見つかりませんでした。 | 愚者の紋章 -The Fool-
<?php } else { ?><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><?php } ?></h1>

これをヘッダ内の 「h1」 と入れ替えるとそのページのタイトルに変わります。

上のサンプルはコードを折っちゃってますが、続けて書かないとソースを見たときに変な感じになります :(

次は 「h2」 。

<h2><?php if ( is_home() ) { ?><?php bloginfo('description') ?>
<?php } elseif ( is_search() ) { ?><?php echo the_search_query(); ?> を検索結果した結果です。
<?php } elseif ( is_page() ) { ?>愚者の紋章 -The Fool- の <?php the_title(); ?> ページ
<?php } elseif ( is_category() ) { ?>愚者の紋章 -The Fool- の <?php single_cat_title(); ?> カテゴリに含まれる記事一覧
<?php } elseif ( is_month() ) { ?>愚者の紋章 -The Fool- の <?php the_time('Y年F'); ?> 記事一覧
<?php } elseif ( is_tag() ) { ?>愚者の紋章 -The Fool- の 「<?php single_tag_title();?>」 タグが付いている記事一覧
<?php } elseif  ( is_404() ) { ?>お探しのページは削除・移動されているかもしれません。 大変お手数ですが URL をもう一度確認してみて下さい。
<?php } elseif ( is_single() ) { ?><?php $key="h2"; echo get_post_meta($post->ID, $key, true); ?>
<?php } else { ?><?php the_title(); ?>
<?php } ?></h2>

「h2」 の個別ページはカスタムフィールドから持ってくるように指定してるので、個別ページのカスタムフィールドで必ず 「h2」 を作っておく必要がある。

「投稿編集」 のカスタムフィールドで 「新規追加」 をクリックして 「h2」 を作る。
WordPressヘッダ内の h1, h2 をページごとに変更1

「投稿編集」 にカスタムフィールドが無い場合は、画面上部の 「表示オプション」 をクリックして 「カスタムフィールド」 にチェックを入れる。

一度 「h2」 を作っておくと、新しい記事を作成した時に 「-選択―」 で選べるようになる。
WordPressヘッダ内の h1, h2 をページごとに変更2
画像が横長になったので切っちゃったけど、こんな感じで指定する。
WordPressヘッダ内の h1, h2 をページごとに変更3

当ブログを見ればわかるけど、これでページごとに 「h1」 と 「h2」 が変わります。

個別ページのカスタムフィールドがなかったとき(書き忘れた時)の条件分岐が上手くいかなかったので、 ↑ を使う場合は書き忘れないように :titi:

私の PHP の知識などその程度のものなので、このカスタマイズについての質問はお断りします(おそらく答えられない)。 というか逆にやりかたを教えてほしいわ :mrgreen:

カスタムフィールドを使えば上記のやり方で 「タイトル」 や 「Description」、「Keywords」 もページごとに変えることができます。

この方法なら SEO プラグインの 「HeadSpace」 も 「All in One SEO Pack」 も不要かもしれないね。

Sponsored Link

コメントを残す