Advanced Custom Fieldsを使ってWordpressのカテゴリのmeta情報をカスタマイズする方法

こんにちは。
ひでまるノートです。

今回は、Advanced Custom Fields（アドバンスドカスタムフィールド）というプラグインを使って、Wordpressのカテゴリトップページの「metaのkeywords」と「metaのdescription」をカスタマイズしたお話です。

htmlのソースコードだと、下記画像の赤丸で囲んだ場所です。

現状、僕が使っているWordpressのテーマは、画像のようにカテゴリ名をmetaのkeywordsに自動で表示してくれているので、表示されています。
ですが、今回は自分で意図したキーワードと説明文を表示したいと思い、実装することにしました。

「metaのkeywords」はSEO的には、それほど重要ではないということは置いておいて・・・

ちなみに、「All in One SEO Pack」などのプラグインを実装しているから問題ないじゃん？と思われる方もいるかと思います。
実際に私も問題ないと思っていました・・・

ただ、カテゴリトップページのソースコードを見て気づいたのですが、下記写真のように、metaのkeywordsにたくさんキーワードが入っていますよね？

これは、「All in One SEO Pack」の設定で、投稿記事の「タグ」をmetaのkeywordsに表示するように設定しているから。
つまり、タグをたくさん入れてしまうと、カテゴリトップページに表示されるキーワードの量が多くなってしまうということです。

もし、「All in One SEO Pack」をお使いで、カテゴリトップページにmetaのkeywordsを表示したくないのであれば、「All in One SEO Pack」の設定画面で、下記画像のように設定してください。

「メタキーワードとしてカテゴリを使う」と「メタキーワードとしてタグを使う」の項目のチェックを外してください。
そうすれば、カテゴリトップに表示されなくなります。

ちょっと話がそれてしまいましたが、Advanced Custom Fields（アドバンスドカスタムフィールド）でカテゴリトップページをカスタマイズする方法を紹介していきます。

ステップ１
Advanced Custom Fieldsをインストールする

まずは、Wordpressに、「Advanced Custom Fields（アドバンスドカスタムフィールド）」をインストールします。
ダッシュボードから、「プラグイン」⇒「新規追加」と進んでください。

次に、下記画像のように検索窓に「Advanced Custom Fields」と入力して検索してください。

検索できたら「インストール」をクリックして、インストールしてプラグインを有効にします。

下記画像の丸で囲んだようになっていれば、インストールができています。

インストールができて、プラグインが有効になると、ダッシュボードに「カスタムフィールド」という項目が追加されます。

ステップ２
カスタムフィールドを新規追加する

続いて、カテゴリの編集ページにカスタムフィールドを追加していきます。
要するに、カテゴリトップ用の「metaのkeywords」と「metaのdescription」を入力する場所を作成すること。

まずは、ダッシュボードから「カスタムフィールド」⇒「カスタムフィールド」をクリックします。

そしたら、「新規追加」をクリックします。

カスタムフィールドで表示したい項目を作っていきます。
今回は、「メタのキーワード」と「メタのディスクリプション」。

最初に「metaのkeywords」から作成していきます。

①に新規作成するカスタムフィールドの名前を入力する。
「カテゴリキーワード」としておきます。

②と③は「Taxonomy Term」「等しい」「カテゴリー」を選択する。

続いて、「フィールド追加」をクリックして入力していきます。

④は、編集画面で表示される名前です。
わかりやすく「meta keywords」などとしておくと良いと思います。

⑤のフィールド名は、Advanced Custom Fieldsを出力する時に必要になります。
なので、「cat_meta_k」とわかりやすくしておくと良いと思います。

入力が終了したら「公開」をクリックします。

下記画像のように、フィールドグループに表示されていたら成功です。

さらに、カテゴリの編集ページをみてみると、下記画像のように入力フォームが作成されています。

ステップ３
Advanced Custom Fieldsを出力する

最後のステップとして、カスタムフィールドで入力したテキストを出力できるようにします。
現状のままだと、ウェブサイトに表示されないので、表示させるようにするということです。

そのためには、今使用しているテーマのソースに下記コードを追加していきます。

<?php
$cat_id = get_queried_object()->cat_ID;
$post_id = 'category_'.$cat_id;
?>
<?php the_field('フィールド名',$post_id); ?>

具体的には、テキストを表示したい場所に追記。
今回は、metaのkeywordsに表示したいので、テーマのヘッダーに追記していきます。

テーマを編集するには、ダッシュボードから「外観」⇒「テーマの編集」をクリックして、先に進みます。

そして、「テーマヘッダ（header.php）」をクリック。
使っているテーマによって、メタ情報を出力している場所が異なる場合があります。

テキストを表示したい場所に追記していきます。
なのですが、今回はメタ情報に出力したいので、下記のように記述を追記しました。

<meta name="keywords" content="<?php
$cat_id = get_queried_object()->cat_ID;
$post_id = 'category_'.$cat_id;
?>
<?php the_field('フィールド名',$post_id); ?>">

さらに、カテゴリページだけに表示したいので、PHPの記述でカテゴリページだけに表示するようにしました。

<?php if(is_category()): ?>
<meta name="keywords" content="<?php
$cat_id = get_queried_object()->cat_ID;
$post_id = 'category_'.$cat_id;
?>
<?php the_field('cat_mk',$post_id); ?>">
<?php endif; ?>

そうすると、下記画像のように、カテゴリ編集の画面で入力した「Web、ウェブ、Wordpress」の文字がソースコードに出力されます。