WordPressでtitleタグを各記事ごとに設定する方法（カスタムフィールド利用）
こんにちは、ゾノ( @ozonosho )です。
さて、今日のブログではWordPressでtitleタグを各記事ごとに設定する方法を紹介したいと思います。
titleタグを記事別に設定するためにプラグイン「All in One SEO Pack」「Yoast SEO」などを利用する方が多いですが、いずれも多機能ゆえにサイトの表示速度が遅くなってしまうので、ここではプラグインを使用せずに簡単に実装する方法をお伝えします。
WordPressでtitleタグを各記事ごとに設定する方法
実装は下記の３ステップでおこないます。
- 記事投稿画面にtitleタグ入力用のカスタムフィールドを作成する
- 記事の保存時にカスタムフィールドの値も保存する
- titleタグにカスタムフィールドの値を出力する
それぞれ解説していきます。
①記事投稿画面にtitleタグ入力用のカスタムフィールドを作成する
まずは記事投稿画面に下図のようなtitleタグ入力欄をつくります。
実装は簡単で、functions.phpに下記のコードを追加してください。
|
1 2 3 4 5 6 7 8 9 10 11 |
//カスタムフィールドの入力欄を作成 function insert_seo_fields() { global $post; echo '<input type="text" name="seo_title" value="' . get_post_meta($post->ID, 'seo_title', true) . '" size="100" />'; } //記事の投稿画面にカスタムフィールドを追加 function add_seo_fields() { add_meta_box('seo_setting', 'SEOタイトル', 'insert_seo_fields', 'post', 'normal'); } add_action('admin_menu', 'add_seo_fields'); |
これで投稿画面にカスタムフィールドの入力欄が作成されます。
②記事の保存時にカスタムフィールドの値も保存する
titleタグ用の入力欄を作成したので、次は入力された内容を保存するための処理を加えます。
functions.phpに下記のコードを追加してください。
|
1 2 3 4 5 6 7 8 9 |
//カスタムフィールドの値を保存 function save_seo_fields($post_id) { if(!empty($_POST['seo_title'])) { update_post_meta($post_id, 'seo_title', $_POST['seo_title'] ); //値を保存 } else{ delete_post_meta($post_id, 'seo_title'); //値を削除 } } add_action('save_post', 'save_seo_fields'); |
フック「save_post」を利用すれば記事を保存するタイミングで処理を追加することができるので、ここでカスタムフィールドの値も保存するようにします。
③titleタグにカスタムフィールドの値を出力する
ここまででtitleタグに設定したい内容を入力・保存することができたので、あとは保存した内容をtitleタグに出力すればOKです。
出力方法は通常のカスタムフィールドと同じなので下記のとおりです。
|
1 2 3 4 5 |
//記事ページ内などで出力する場合 the_field('seo_title'); //記事のIDを利用してどのページからでも出力する場合 echo get_post_meta($post->ID, 'seo_title', true); |
これをtitleタグに出力しましょう。
titleタグの表示処理はテンプレートごとに異なるため共通した処理を紹介するのは難しいのですが、下記のように記事ページの場合にカスタムフィールドの値を出力するようにしてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<title> <?php global $page, $paged; if(is_front_page()) : //HOME bloginfo('name'); elseif(is_single()) : //記事ページ if(get_field('seo_title')) { //カスタムフィールドの値がある場合 the_field('seo_title'); } else { //カスタムフィールドの値がない場合 wp_title(''); } elseif(is_page()) : //固定ページ wp_title('|',true,'right'); bloginfo('name'); elseif(is_author()) : //Author wp_title('|',true,'right'); bloginfo('name'); elseif(is_archive()) : // アーカイブ wp_title('|',true,'right'); bloginfo('name'); elseif(is_search()) : //検索 wp_title(''); elseif(is_404()) : //404 echo'404|'; bloginfo('name'); endif; if($paged >= 2 || $page >= 2) : echo'-'.sprintf('%sページ', max($paged,$page)); endif; ?> </title> |
get_fieldでカスタムフィールドの値を取得できるので、値がある場合にはその値をtitleタグに設定し、値が無い場合には記事のタイトルをtitleタグに設定するようにしています。
これで各記事ごとにtitleタグを設定できるようになりました。
titleタグはSEO上とても重要な要素なので、細かく調整したい方はぜひ活用してみてください。
おわりに
以上、今回の記事ではWordPressでtitleタグを各記事ごとに設定する方法を紹介させていただきました。
当サイトではWordPressのカスタマイズ依頼を請け負っています。実現したい機能・要望がある方はぜひ下記ページよりご相談ください。
