商品のtitltとh1をカスタムフィールドを使って変更する

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

Welcartの「商品詳細ページタイトル」と別のものをmeta-titleにする方法

見出しの通りですが、デフォルトでは、meta-titleは「商品詳細ページタイトル」が表示されます。
SEOを考えて形容詞を入れたりすると、ちょっと商品ページそのものが見難くなったりします。
そこで、「商品詳細ページタイトル」にはワイン名を入れて、meta-titleにはSEO対策を兼ねたタイトルにしたいと思います。

具体的なカスタマイズ

まず、カスタムフィールドにフィールド名「title」のSEO用のタイトル設定部分を作成します。
カスタムフィールドは自作しても良いし、Advanced Custom Fields というプラグインで作成しても良いです。

そして、header.phpの直下に


<?php //titleタグの設定
$custom_fields = get_post_custom();
$title = $custom_fields['title'];
if ($title != null) { ?>
<title><?php echo get_post_meta($post->ID,'title',true); ?></title>
<?php }
else { ?>
<title><?php wp_title(''); ?></title>
<?php }
?>

と記載すれば、オッケーです^^
→不具合がおこるページがあるので改良しました。
(固定ページやカテゴリーページでうまくmeta-titleが表示されない)

参考にしたのは、こちらのサイト。参考というより、コードはそのままコピペですね^^;

プラグイン不要、カスタムフィールドでページ毎にメタ情報を指定する

修正コード

カスタムフィールドにフィールド名「title」は分かりにくいので
SEO用のタイトル設定として「seo_title」を作成します。
私は、Advanced Custom Fields というプラグインで作成しました。
※2019年1月追記:Advanced Custom Fieldsでは商品ページのカスタムフィールドに表示されないですね?
記事を書いた時には表示されたと思うのです・・・そこで、Smart Custom Fieldsというプラグインでカスタムフィールドを作成してみました。
無事表示されました^^

そして、header.phpの直下に書くのは次のコードです。


<?php //titleタグの設定
if ( is_page() )  { ?>
    <title><?php wp_title(''); ?></title>
<?php }
elseif  ( is_singular($wc_item_single) )  { ?>
    <?php
    $custom_fields = get_post_custom();
    $title = $custom_fields['seo_title'];
    if ($title == null) { ?>
    <?php wp_head(); ?>
    <?php }
    else { ?>
    <title><?php echo  $custom_fields['seo_title'][0]; ?></title>
    <?php }
    ?>
<?php }
else { ?>
    <title><?php wp_title(''); ?></title>
<?php }
?>

最初は商品ページとその他のページで分岐させたのですが、
なぜかその他のページの設定が固定ページに適用されなかったので
固定ページ>商品ページ>その他のページ
で分岐させました。

やっぱり、おかしいので変更


<?php //titleタグの設定
if ( is_page() )  { ?>
    <title><?php wp_title(''); ?></title>
<?php }
elseif  ( is_singular($wc_item_single) )  { ?>
    <?php if(post_custom('seo_title')): // 入力がある場合 ?>
    <?php $custom_fields = get_post_custom(); $title = $custom_fields['seo_title']; ?>
    <title><?php echo get_post_meta($post->ID,'seo_title',true); ?></title>
    <?php else: // 入力がない場合 ?>
        <title><?php wp_title(''); ?></title>
    <?php endif; ?>
<?php }
else { ?>
    <title><?php wp_title(''); ?></title>
<?php }
?>

商品ページのh1をカスタムフィールドで設定する

続いて、同様のカスタマイズです。
デフォルトでは、h1は「商品詳細ページタイトル」を読み込みます。
ここも単純なワイン名でなく少し訪問者に訴求できるようなタイトルにしようと思います。
そのまま、変更してもよいのですが、Yoast SEOプラグインでパンくずリストを表示させているので
そのパンくずリストはワイン名だけのほうがキレイです。

ということで、タイトル同様にカスタムフィールドを使ってカスタマイズです。

具体的なカスタマイズ

まず、カスタムフィールドにフィールド名「seo-h1」のSEO用のタイトル設定部分を作成します。
カスタムフィールドは自作しても良いし、Advanced Custom Fields というプラグインで作成しても良いです。

wc_item_single.php の


<header class="item-header">
<h1 class="item_page_title"></h1>
</header>
<!-- .item-header -->
</code></pre>
を
<pre><code>
<header class="item-header"><!--?php $custom = get_post_custom(); ?--> <!--?php if(empty($custom['seo-h1'])){ $custom['seo-h1'][0] = get_the_title(); } ?-->
<h1 class="item_page_title entry-title"></h1>
</header>
<!-- .item-header -->
</code></pre>
<del datetime="2017-10-24T09:57:02+00:00">に変更します。</del>
これもおかしなこと書いていますね。正しくは、下記です。

<pre><code>
<header class="item-header">
<?php $custom = get_post_custom(); ?>
<?php if(empty($custom['seo-h1'])){ $custom['seo-h1'][0] = get_the_title(); } ?>
<h1 class="item_page_title entry-title"><?php echo $custom['seo-h1'][0]; ?></h1>
</header><!-- .item-header -->

h1に関しても先ほどのページに書いてあったのですが、別の時期にカスタマイズしたからか、私が参考にしているのは

WordPressのヘッダーに可変のh1やh2を設置する


というページですね・・・(笑)

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

コメントを残す

*

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください