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

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

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

htmlソース

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

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

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

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

all in one seoパックのmetaのkeywords

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

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

All in one seoパックのキーワード設定

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

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

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

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

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

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

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

wp-pl-04

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

これで完成です。
metaのdescriptionも同様に設置することができます。

まとめ

いかがでしたか。
プラグインを使えばそれほど難しくないですよね。

また、この「Advanced Custom Fields」を使えば、簡単にカスタムフィールドを使いすることができるので、別のことにも応用できそうですよね。
例えば、投稿記事に優先順位をつけるなどといったことも実装できそうです。

ということで、みなさんもチャレンジしてみてはいかがでしょうか。