SEOについて調べていた時、「h1見出しは記事のタイトルであるべき!」という情報をよく目にしました。
そこで、愛用しているテーマ「ZERO」をカスタマイズすることにしました。
テーマファイルを編集すると、テーマが更新された際の対応がややこしくなるので基本的にはやらない方がいいです。
gitなどを利用して差分を管理できる状態でチャレンジするとよいでしょう。
gitなどを利用して差分を管理できる状態でチャレンジするとよいでしょう。
「ZERO」は記事タイトルがh1ではない
「ZERO」はTCDが開発・配布しているWordPressテーマです。
私がテーマ選びをしていた数年前は、「TCDのテーマは記事のタイトルがh1じゃないからイマイチ」と評されていることが多かったように思います(最近は調べていないので現在の評価はわかりません)
確かに、SEOに必須と言われている要素を備えていないテーマは選択肢にはなりません。
しかし私は「ZERO」が気に入っていたので、ちょいとカスタマイズして使うことにしました。
h1見出しの使い所を変更する方法
下記の位置を変更すれば、記事のタイトルをh1見出しにできます。
(テーマファイルのバージョンによって行数が多少異なるかもしれません。ご注意ください)
(1) header.phpを編集
サイトのキャッチフレーズを囲むタグをh1からdivに変更しちゃいます。
<div id="container">
<div id="header_top">
<div id="header_top_inner">
<?php if($options['show_tagline'] == 1){ ?><div id="site_desc" style="font-size:<?php echo esc_html($options['tagline_font_size']); ?>px;"><?php echo esc_html(get_bloginfo('description')); ?></div><?php }; ?>
(2) single.phpを編集
記事のタイトルをh2からh1に変更しちゃいます。
<article id="article">
<?php if ( $options['show_category'] || $options['show_view'] ){ ?>
<ol class="clearfix item_cat_id_<?php echo show_category_id(); ?>" id="post_meta_top">
<?php if ( $options['show_category'] ){ ?><li class="category"><?php echo show_parent_category(); ?></li><?php }; ?>
<?php if ( $options['show_view'] ){ ?><li class="view"><?php the_post_views(); ?> view</li><?php }; ?>
</ol>
<?php }; ?>
<h1 id="post_title" class="rich_font"><?php the_title(); ?></h1>
<?php if($page == '1') { ?>
(3) functions/logo.phpを編集
記事ページ以外ではサイト名がh1になるように変更しちゃいます。
<div id="logo_image">
<?php if( is_singular() ) : ?><div class="logo"><?php else: ?><h1 class="logo"><?php endif; ?>
<a href="<?php echo esc_url($url); ?>/" title="<?php echo esc_attr($title); ?>">
<?php if(!empty($logo_image)) { ?>
<img class="pc_logo_image" src="<?php echo esc_attr($logo_image[0]); ?>?<?php echo esc_attr(time()); ?>" alt="<?php echo esc_attr($title); ?>" title="<?php echo esc_attr($title); ?>" width="<?php echo esc_attr($pc_image_width); ?>" height="<?php echo esc_attr($pc_image_height); ?>" />
<?php }; ?>
<?php if(!empty($logo_image_mobile)) { ?>
<img class="mobile_logo_image" src="<?php echo esc_attr($logo_image_mobile[0]); ?>?<?php echo esc_attr(time()); ?>" alt="<?php echo esc_attr($title); ?>" title="<?php echo esc_attr($title); ?>" width="<?php echo esc_attr($mobile_image_width); ?>" height="<?php echo esc_attr($mobile_image_height); ?>" />
<?php } elseif(!empty($logo_image)) { // モバイル専用の画像が無い場合はPC用の画像を表示 ?>
<img class="mobile_logo_image" src="<?php echo esc_attr($logo_image[0]); ?>?<?php echo esc_attr(time()); ?>" alt="<?php echo esc_attr($title); ?>" title="<?php echo esc_attr($title); ?>" width="<?php echo esc_attr($pc_image_width); ?>" height="<?php echo esc_attr($pc_image_height); ?>" />
<?php }; ?>
</a>
<?php if( is_singular() ) : ?></div><?php else: ?></h1><?php endif; ?>
</div>
<?php } else { ?>
<div id="logo_text">
<?php if( is_singular() ) : ?><div class="logo"><?php else: ?><h1 class="logo"><?php endif; ?>
<a href="<?php echo esc_url($url); ?>/"><?php echo esc_html($title); ?></a>
<?php if( is_singular() ) : ?></div><?php else: ?></h1><?php endif; ?>
</div>
以上で、記事のタイトルがh1見出しで表示されるようになるはずです。
この記事へのコメントはありません。