最近、レビューログのWordPressテーマを完全に１から自力で実装し直しており、それに当たって躓いた点や残したい実装内容を備忘録として纏めています。(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 name="keywords" content="<?php meta_keywords(); ?>"> <meta name="description" content="<?php meta_description(); ?>">
上記で、meta_keywordsとmeta_descriptionという関数を呼び出しています。
では、２つの関数を定義しているfunctions.phpはというと、以下のように実装しています。
<?php
// meta keywordsの表示
function meta_keywords() {
// グローバル変数$postを定義して、投稿のID、カスタムフィールドの値を抜き取る
global $post;
$post_id = $post->ID;
// 投稿 or 固定ページの場合、カスタムフィールドの値によりkeywordを出力。何も入ってない時は入れない
if (is_singular()) {
// カスタム変数に「meta_keywords」が入っていれば、抜き出して$keywに格納
$keyw = get_post_meta($post_id, 'meta_keywords', true);
if (empty($keyw) === false) {
// $keywをエスケープ処理して出力
echo esc_html(strip_tags($keyw));
}
} elseif (is_home() || is_front_page()) {
echo 'レビュー,ガジェット,家電,商品,購入,買い物,洋服,靴,スーツ';
}
}
// meta descriptionの取得
function meta_description() {
// グローバル変数$postを定義して、投稿のID、カスタムフィールドの値を抜き取る
global $post;
$post_id = $post->ID;
// 投稿 or 固定ページの場合、カスタムフィールドの値によりdescriptionを出力。何も入ってない時は最初の120文字を入れる
if (is_singular()) {
$desc = get_post_meta($post_id, 'meta_description', true);
if (empty($desc) === false) {
echo esc_html(strip_tags($desc));
} else {
// $descがnullの場合、投稿記事の序文を抜き出す
$cont = strip_tags($post_id->post_content);
// $contに格納された文字列の最初の120文字を抜き出す
$desc = mb_substr($cont, 0, 120);
echo esc_html(strip_tags($desc));
}
} elseif (is_home() || is_front_page()) {
echo 'ガジェット要素多めのレビューサイト。実際に購入して使った商品のレビューを、買って良かったところ悪かったところ全部書きます。他にも家電や洋服、靴、スーツや小物まで色々レビューしていきます。';
}
}
?>
keywordsとdescriptionを別々に実装していますが、纏めて構いません。
詳しくはコード中に記載していますが、カスタムフィールドの名前が「meta_keywords」「meta_description」に登録されている値を、header.phpに記載のmetaタグに書き出す、というコードになっています。
ちなみに、僕はこの方法を採用しました。
後述の方法と比較して、header.php上でどの関数がmeta keywordsとmeta descriptionを呼び出しているか一目瞭然で、functions.phpを見て実装内容もすぐ分かるためです。
そもそもカスタムフィールドって何？という方、投稿画面の「表示オプション▼」から追加できます！
説明が後になって申し訳ないのですが、先程から登場している「カスタムフィールド」って何ですか？という方が多いと思いますが、投稿編集画面の右上にある「表示オプション▼」をクリックすると、選択することができます。
すると、投稿画面の一番下に以下のようなボックスが追加されています。
ここに名前と値をセットすれば、色々使えて便利です。
functions.phpで関数を定義し(一緒)、アクションフックを用いてwp_head()で出力させる
header.phpに必要なのは、wp_head()のみです。
<?php wp_head(); ?>
後は、functions.phpでアクションフックを用いてwp_head()が呼び出された時にmetaタグを吐き出すように実装します。(処理内容はほぼ同じなので、コード内の説明は多少省略。)
<?php
function meta_adds_head() {
// グローバル変数$postを定義して、投稿のID、カスタムフィールドの値を抜き取る
global $post;
$post_id = $post->ID;
if (is_singular()) {
$keyw = get_post_meta($post_id, 'meta_keywords', true);
$desc = get_post_meta($post_id, 'meta_description', true);
// エスケープ処理しとく
$esc_keyw = esc_html(strip_tags($keyw));
$esc_desc = esc_html(strip_tags($desc));
if (empty($esc_keyw) === false) {
echo '<meta name="keywords" content="'.$esc_keyw.'">'."\n";
}
if (empty($esc_desc) === false) {
echo '<meta name="keywords" content="'.$esc_desc.'">'."\n";
} else {
$cont = strip_tags($post_id->post_content);
$cont_desc = mb_substr($cont, 0, 120);
echo '<meta name="description" content="'.$cont_desc.'">'."\n";
}
} elseif (is_home() || is_front_page()) {
echo '<meta name="description" content="hoge">'."\n";
echo '<meta name="keywords" content="hoge">'."\n";
}
}
add_action('wp_head', 'meta_adds_head');
?>
先述の通り、上記の実装は採用しませんでした。
確かにheader.phpのコード量は減ってスマートになるのですが、代わりにfunctions.phpにhtmlタグを記述しなければならず、正直気に食いませんでした。
また、この実装を行うとheader.phpにmetaタグ出力の記述は一切無いため、他人がコードを見た時に迷子になりがちな気がします。
「functions.phpでecho乱発しない」「header.phpをなるべくきれいに」を念頭に入れて実装したつもりですが、こんな実装もっと良いよ！とかあったらぜひ教えてください…！
