WordPressのアイキャッチ画像を有効化＆表示しよう【WordPressのテンプレートタグ#1】
こんにちは！
はじめに、この記事の概要と目次です。本編は少しスクロールすると始まります。
今回は、WordPressの自作テーマ開発や既存テーマのアレンジで、記事にアイキャッチ画像(サムネイル)を追加する手順と、サイト内にを紹介します。この記事では、functions.phpや、アイキャッチを表示させたい箇所のテンプレートパーツを編集します。アイキャッチ画像はSEOにも大きく影響するので、極力設定がおすすめです。
アイキャッチ画像をテーマで有効化
ここ最近のテーマなら、だいたいが初めからアイキャッチ画像のブロックが設定されていますが、シンプルなテーマや自作テーマを使っているかたは、記事投稿画面にアイキャッチ画像のブロックがあるかどうか、投稿画面から確認することができます。
アイキャッチ画像を未実装の場合は、以下のコードをfunctions.phpに追加してください。うまくできれば、上の画像のように、アイキャッチ画像のボックスが有効になります。
|
1 2 3 4 5 6 7 8 9 10 |
// able to thumbnail add_theme_support('post-thumbnails'); // add setting of thumbnail in post and page function add_featured_image_column_to_posts($columns) { $columns['featured_image'] = __('サムネイル'); return $columns; } add_filter('manage_posts_columns', 'add_featured_image_column_to_posts'); |
ちなみに、6行目の「サムネイル」の箇所は、記事一覧のヘッダー行に表示されます。こだわりがなければ、他の項目も日本語なことに倣い、「アイキャッチ」「サムネイル」あたりで合わせるがおすすめです。
アイキャッチ画像を記事に表示
投稿画面でアイキャッチを設定したら、それを実際に表示するために、index.phpやsingle.phpの任意の位置に以下のコードを追加します。
|
1 2 3 4 5 6 |
// アイキャッチを呼び出すテンプレートタグ <?php the_post_thumbnail('post-thumbnail'); ?> // アイキャッチのキャプションを表示 <?php the_post_thumbnail_caption(); ?> |
画像のサイズや表示する範囲、スペースなどは、CSS側で調整することができます。2つとも呼び出す場合は、Divisionタグで囲うのがおすすめです。
アイキャッチとしてアップロードした画像のキャプションを設定した場合は、以下のようなイメージで出力されます。
キャプションのセンタリングなど、こちらも細かい設定はCSSでかけることができます。
キャプションの内容はメディアの詳細から
キャプションは、各画像の詳細にある「キャプション」に入力すると、キャプションを呼び出した際に出力されます(デフォルトは空欄)。
画像内に含まれる文字列は検索エンジンも認識できないため、どのような画像か説明書きを入れることで、SEO効果が期待できます。
まとめ
codepiaではお気づきの通り、サムネイルを必ず設定しています。キャプションはあまり設定していませんが、これから始めるかたなら、正直キャプションは都度設定するのがおすすめです。
理由は、SEO評価に関わる検索エンジンのクローラーが、画像内の文字を読むことができず、代わりにキャプションやalt属性をヒントにしているためです。なので、できればキャプションはある方が、サイト評価の底上げを図ることができます。
ちなみにcodepiaも、本文中に挿入する画像には必ずalt属性が、必要に応じキャプションも追加しています。
コメント