“アイキャッチ画像” タグの記事（3件）

WordPress のサイトから RSS フィードを取得して表示する場合、RSS フィードからデフォルトで取得できる情報は、タイトル、パーマリンク、投稿日、投稿者、概要（本文）くらいで、アイキャッチ画像を取得することはできません。そもそもアイキャッチ画像は RSS フィードに含まれていないので当然です。

そこで、WordPress の RSS テンプレートを加工してアイキャッチ画像を含め、別のサイトでこの RSS フィードを取得して表示してみました。（RSS フィード発信元の WordPress サイトの管理者権限があることが前提です。）

“RSS フィードにアイキャッチ画像を含めて別のサイトで表示する” の続きを読む »

Webページを Facebook 等にシェアした際に適切な情報を表示させる OGP。これを WordPress のテーマファイルに設定する方法は、ググるといろいろ紹介されています。

その中の og:image を設定する部分の記述ですが、大抵、次のように紹介されています。

<?php
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?).*?>/i';  // 投稿記事に画像があるか調べる
if ( is_single() or is_page() ){  // 記事か固定ページの場合
  if ( has_post_thumbnail() ){  // アイキャッチがある場合
    $image_id = get_post_thumbnail_id();
    $image = wp_get_attachment_image_src( $image_id, 'full');
    echo '<meta property="og:image" content="'.$image[0].'">'. "\n";
  } elseif ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive() ){  // アイキャッチは無いが画像がある場合
    echo '<meta property="og:image" content="'.$imgurl[2].'">'. "\n";
  } else {  // 画像が1つも無い場合
    echo '<meta property="og:image" content="'. get_bloginfo('template_url'). '/images/ogp_image.png">'. "\n";
  }
} else {  // 記事や固定ページ以外の場合（ホーム、カテゴリーなど）
  echo '<meta property="og:image" content="'. get_bloginfo('template_url'). '/images/ogp_image.png">'. "\n";
}
?>

記事ページか固定ページの場合、アイキャッチ画像があればそれを、アイキャッチ画像は無いが本文に画像がある場合はそれを、画像がない場合と記事や固定ページ以外は予め用意したデフォルト画像（上記では ogp_image.png）を設定するという記述です。

ただ、Facebook の仕様では 200×200px に満たないサイズの画像は og:image として設定できないため、上記の記述では、本文内に小さい画像がある場合は、シェアした際に画像が表示されません。

そこで、画像が 200×200px に満たない場合はデフォルト画像を設定するようにしてみました。

“WordPress で og:image を設定する際に小さい画像を除外する” の続きを読む »

WordPress のカスタムメニューを使って、任意の固定ページをリストアップし、それぞれに登録したアイキャッチ画像を表示する方法を考えてみました。

通常、カスタムメニューの出力には wp_nav_menu 関数を使いますが、これでは固定ページに関連付けられている情報を取得することができません。

そこで、一旦 wp_get_nav_menu_items 関数でカスタムメニュー項目の配列を取得します。そこから各メニュー項目に設定した固定ページのアイキャッチ画像の属性を取得し、タイトルや URL などと共に自由なスタイルで出力します。

<ul>
<?php
$menu_items = wp_get_nav_menu_items('menu_name');  // menu_name: カスタムメニューの名前
foreach ($menu_items as $menu):
  $page_id = $menu->object_id;
  $thumbnail_id = get_post_thumbnail_id($page_id);
  $image_attributes = wp_get_attachment_image_src($thumbnail_id); 
  $content = get_page($page_id);
?>
  <li class="<?php echo $content->post_name; ?>">
    <a href="<?php echo get_permalink($page_id); ?>">
      <img src="<?php echo $image_attributes[0]; ?>" alt="" width="<?php echo $image_attributes[1]; ?>" height="<?php echo $image_attributes[2]; ?>" />
      <?php echo $content->post_title; ?>
    </a>
  </li>
<?php
endforeach;
?>
</ul>

上記では、wp_get_attachment_image_src 関数の初期値で thumbnail サイズの画像を取得していますが、異なるサイズの画像を取得する場合は、”medium”, “large”, “full” あるいは “array(32,32)” という形でオプションを指定します。

また、アイキャッチ画像だけでなく、<?php echo $content->custom_field_name; ?> のようにして、カスタムフィールドの値も表示させることができます。

この方法で、このサイトのトップページの3つのコンテンツを表示しています。実際は、更にアイキャッチ画像が無い場合に代替画像を表示するための条件分岐とか入れています。