ブログのWordPressテーマを自作した時に、カスタムフィールドも自力で設置しました。今まではプラグインを利用してましたが、個人ブログの簡単な入力欄のみなので軽量化・簡素化しました。その方法を紹介します。
ゆめぴょん(@yume_pyon)です。こんちはっ！
このブログはWordPressというブログシステムを用いて作成しています。そして今年に入ってからテーマ（デザイン）を自作しました。その時の制作方法などは下の記事を参考にしてみてください。
自作テーマを制作した時に特に気をつけた点は「軽量化」「高速化」「シンプル」などです。この中で「軽量化」については、WordPressプラグインを極力減らすという目標も意識しました。
というわけで、今回から数回にかけて「WordPressプラグインはずし特集」を進めていきたいと思います。プラグインをはずすために必要なコードサンプルも紹介していきます。
今回はずせるWordPressプラグイン
まずはカスタムフィールドを設置してくれる便利系プラグインは全て不要になります。もちろん企業などで投稿画面をカスタマイズする場合はプラグインを利用した方が楽な場合も多いでしょう。ニーズに応じて考えてみてください。
私の個人ブログの場合は、今のところ5つくらいのカスタムフィールドがあれば充分だと思っています。だから自力設置で事足ります。ちなみに今回不要となったプラグインは次のとおりです。
- Custom Field Template
- Advanced Custom Fields
- All in One SEO Pack
上2つは、WordPressのカスタムフィールドを簡単に設置・拡張できるプラグインです。「Custom Field Template」は私の別ブログで利用してましたが、現在は「Advanced Custom Fields」に乗り換えました。
「Advanced Custom Fields」は高機能なので企業サイト構築にも使えます。あのLIGも「神アプリ」に認定してたほどです。
そして今回、副産物的にあの有名プラグインも外せるようになりました。機能が多いので軽量化の妨げになりそうなプラグイン「All in One SEO Pack」です。
もちろんこのプラグインは、ほとんどのテーマではSEO効果を発揮してくれるのでかなりオススメです。アーカイブページをnoindexにしたりもできるので、テーマいじりしない人には必須だと思います。私も記事書いています。
今回設置する3つのカスタムフィールドについて
私が設置しているカスタムフィールドのうちそこそこ需要がありそうで、「All in One SEO」を外すには必須となる次の3つの設置方法を紹介したいと思います。
- キーワード（meta keywordsで利用）
- 大見出し（主にh1の記事タイトルとして利用）
- Googleにインデックスしないフラグ（meta noindexで利用）
キーワードは現在はGoogleに対してのSEO効果はゼロだと言われています。しかし他の検索エンジンなどで利用してたり、将来Googleも採用する可能性も考慮して設定してもいいと思ってます。
ちなみに似た要素で「meta description」もありますが、私はWordPressに標準搭載の「抜粋」機能を利用しているため、今回は設置していません。
大見出しとはh1タグのことです。ブログでは通常は記事タイトルのtitleタグと同じ内容を表示します。私もほとんどはそうです。しかし少し昔のSEO関連本ではtitleとh1では違うキーワード設定が推奨されたりしてます。
現在のGoogleはtitleに比べてh1タグは重要視してないようです。ただtitleタグはSNSでの拡散を見越して設定してる場合も多いため、その場合はもっと人間に分かりやすくて適切なh1を設定しようと考えています。
3つめの「noindex」は最近SEO関連でも話題の、低品質ページ対策です。文章量が少なかったり、検索流入のほとんどないページはGoogleにインデックスさせないよう「noindex化」するのが望ましいと思います。
しかしWordPressは標準では記事単位でnoindexできないため、カスタムフィールドで対応することにしました。「All in One SEO」プラグインでも可能です。
WordPressで自力でカスタムフィールドを設置する方法
テーマファイル「functions.php」を編集します。WordPressで最重要ファイルです。修正前には必ずバックアップをとってください。もし問題が起こったらすぐ元に戻してください。全て自己責任でお願いします。
まずは下のコードを「functions.php」にコピペして保存してください。解説はしないので興味ある方はググってもいいし、実際にコードを修正したりとかして試してみてください。
|
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 33 34 35 36 37 38 |
// カスタムフィールド追加 add_action('admin_menu', 'add_custom_fields'); add_action('save_post', 'save_custom_fields'); function add_custom_fields() { add_meta_box( 'my_sectionid', 'カスタムフィールド', 'my_custom_fields', 'post'); } function my_custom_fields() { global $post; $meta_keywords = get_post_meta($post->ID,'meta_keywords',true); $h1 = get_post_meta($post->ID,'h1',true); $noindex = get_post_meta($post->ID,'noindex',true); if($noindex==1){ $noindex_c="checked";} else{$noindex_c= "/";} echo '<p>キーワード（meta keyword）カンマ区切り。2〜6つまで<br />'; echo '<input type="text" name="meta_keywords" value="'.esc_html($meta_keywords).'" size="40" /></p>'; echo '<p>大見出し（h1）40文字以内を推奨<br />'; echo '<input type="text" name="h1" value="'.esc_html($h1).'" size="50" /></p>'; echo '<p>低品質コンテンツならチェックすると「noindex」に<br />'; echo '<input type="checkbox" name="noindex" value="1" ' . $noindex_c . '> noindex</p>'; } // カスタムフィールドの値を保存 function save_custom_fields( $post_id ) { if(!empty($_POST['meta_keywords'])) update_post_meta($post_id, 'meta_keywords', $_POST['meta_keywords'] ); else delete_post_meta($post_id, 'meta_keywords'); if(!empty($_POST['h1'])) update_post_meta($post_id, 'h1', $_POST['h1'] ); else delete_post_meta($post_id, 'h1'); if(!empty($_POST['noindex'])) update_post_meta($post_id, 'noindex', $_POST['noindex'] ); else delete_post_meta($post_id, 'noindex'); } |
テーマでカスタムフィールドの内容を利用する方法
上のコードを設置した後でWordPressの投稿画面にアクセスすると、このスクリーンショットのように3つの入力フォームが現れます。
画面の指示のとおり入力してから、いつものように「更新」ボタンをクリックすると内容が保存されます。しかしこれだけでは実際のブログ画面には何も変化がありません。
まずはカスタムフィールドの内容を取得する必要があります。「header.php」などに下のコードを記述してください。変数「$custom」に配列としてカスタムフィールド値が代入されます。
|
1 |
$custom = get_post_custom(); |
キーワード（meta keywords）の取得と利用方法
下のコードを「header.php」などのテーマファイルの、meta keywordsを設定する箇所に記述してください。
|
1 2 3 4 5 6 |
<?php if( !empty( $custom['meta_keywords'][0] ) ) { $keywords = $custom['meta_keywords'][0]; } elseif( !empty( $custom['_aioseop_keywords'][0] ) ) { $keywords = $custom['_aioseop_keywords'][0]; } else{ $keywords = "ブログ,WordPress,プラグイン"; } //デフォルト値 ?> <meta name="keywords" content="<?php echo $keywords ?>"> |
カスタムフィールドが入力されていれば、変数「$keywords」にその値を代入します。入力がなければ「All in One SEO」のキーワード入力欄の値を、それもなければデフォルト値を代入します。
大見出し(h1)の取得と利用方法
下のコードを大見出しを出力する場所にコピペしてください。具体的には記事の場合は「single.php」や「content.php」に、記事一覧の場合は「index.php」などになると思います。
|
1 2 |
<?php if(empty($custom['h1'][0])){ $custom['h1'][0] = get_the_title(); } ?> <h1><?php echo $custom['h1'][0] ?></h1> |
noindexフラグの取得と利用方法
下のコードを「header.php」の最上段、titleタグの後くらいに記述してください。なぜか$customではうまく行かなかったので、get_post_metaで直接取得しました。
|
1 |
<?php if(get_post_meta(get_the_ID(),'noindex',true)==1){ ?><meta name="robots" content="noindex"><?php } ?> |
この項目は一歩間違えると大惨事（あらゆるページがGoogleにインデックスされない）を引き起こすので、設置後は何度もソースを直接確認してください。
まとめ：今日のゆめぴょんの知恵
プラグインを使ってカスタムフィールドを設置するのも楽ちんだけど、慣れれば自力でも簡単にできます。ただ今回は入力チェックなどはしていませんので、必要があれば対処した方がいいでしょう。
今回は2〜3つのプラグインをはずすことができました。次回以降もWordPressプラグインを減らす方法について紹介していきたいと思っていますので、RSSやFacebookページなどでの購読もお待ちしています！
なお今回の記事内容は次のブログも参考にさせていただきました。ありがとうございます。
→独自のカスタムフィールドの入力－その１ | WordPress 編
ご意見・ご感想などは、Facebook、Google+などでもお待ちしています。
ゆめぴょん(@yume_pyon)でした。
では、ばいちゃお！ こてっZzz