【WordPress】プラグイン無しでカスタムフィールドを利用してmeta keywordsとmeta descriptionを実装する

2016年12月20日WordPressdescription, keywords, meta, WordPress, カスタムフィールド, プラグイン, 実装, 無し

スポンサーリンク

最近、レビューログのWordPressテーマを完全に1から自力で実装し直しており、それに当たって躓いた点や残したい実装内容を備忘録として纏めています。(Facebook ogp,Twitter Cardのプラグイン無しの実装方法はこちら)

今回は、All in One SEOという有名なプラグインを使わずに、WordPressにあるカスタムフィールド機能を利用して、meta keywordsとmeta descriptionを実装してみました。(参考:WordPressでmeta robotsをプラグイン無しで実装する方法)

いくつか方法があると思うので、有識者の皆さんのツッコミをお待ちしております。

参考:MacにVagrantとVirtualBoxを導入して仮想環境構築を簡単に行う

スポンサーリンク

functions.phpで関数を定義し、header.phpで定義した関数を呼び出す

metaタグはhtmlのheadタグ内に記述しなければいけないため、WordPressの場合はheader.phpで記述する必要がありますが、metaタグ出力部分についてはこちら。

上記で、meta_keywordsとmeta_descriptionという関数を呼び出しています。

では、2つの関数を定義しているfunctions.phpはというと、以下のように実装しています。

keywordsとdescriptionを別々に実装していますが、纏めて構いません。

詳しくはコード中に記載していますが、カスタムフィールドの名前が「meta_keywords」「meta_description」に登録されている値を、header.phpに記載のmetaタグに書き出す、というコードになっています。

ちなみに、僕はこの方法を採用しました。

後述の方法と比較して、header.php上でどの関数がmeta keywordsとmeta descriptionを呼び出しているか一目瞭然で、functions.phpを見て実装内容もすぐ分かるためです。

そもそもカスタムフィールドって何?という方、投稿画面の「表示オプション▼」から追加できます

説明が後になって申し訳ないのですが、先程から登場している「カスタムフィールド」って何ですか?という方が多いと思いますが、投稿編集画面の右上にある「表示オプション▼」をクリックすると、選択することができます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-14-23-50-29

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-14-23-45-28

すると、投稿画面の一番下に以下のようなボックスが追加されています。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-14-23-45-16

ここに名前と値をセットすれば、色々使えて便利です。

functions.phpで関数を定義し(一緒)、アクションフックを用いてwp_head()で出力させる

header.phpに必要なのは、wp_head()のみです。

後は、functions.phpでアクションフックを用いてwp_head()が呼び出された時にmetaタグを吐き出すように実装します。(処理内容はほぼ同じなので、コード内の説明は多少省略。)

先述の通り、上記の実装は採用しませんでした。

確かにheader.phpのコード量は減ってスマートになるのですが、代わりにfunctions.phpにhtmlタグを記述しなければならず、正直気に食いませんでした。

また、この実装を行うとheader.phpにmetaタグ出力の記述は一切無いため、他人がコードを見た時に迷子になりがちな気がします。

「functions.phpでecho乱発しない」「header.phpをなるべくきれいに」を念頭に入れて実装したつもりですが、こんな実装もっと良いよ!とかあったらぜひ教えてください…!

WordPressをスクールで学んでみませんか?

スポンサーリンク