WordPress(ワードプレス）で記事の最初の画像を取得方法
今回紹介するのは、WordPressで記事の一番最初の画像を取得する方法を紹介します。記事の一番最初の画像を取得し、サムネイルを表示されることができます。この方法を使えば多くの方に関連記事を見てもらうこともできます。設定方法いたって簡単です。
サムネイル画像とは？
まず、ブログに使われる画像には二種類あるということを押さえておきましょう
・アイキャッチ画像
・サムネイル画像
アイキャッチ画像とサムネイル画像の二つの違いは？
・サムネイルは「thumb nail]（親指の爪）といい
（親指の爪）のように小さく簡潔という意味合いでサムネイルとして使われます。
・アイキャッチ画像は「eye catch]（目をつかむ）といい
ユーザーの目を掴む、奪う、キャッチするためのもの、として使われます。
の二種類があることを押さえておきましょう!
では、サムネイルはなぜ必要なのでしょうか？それは記事を読んでもらうためです。
YouTubeのサムネイルと何が違うのか？
・動画の内容を分かりやすくカラフルな文字の入っているもの
・動画の途中画面が切り抜かれたもの
皆さんはどちらの動画を再生しますか？
答えは前者だと思います
また、YouTubeなどで動画を見ている方の大半はサムネイルでその動画を見るか見ないかを判断している方が大半だそうです。これらからサムネイルの重要性が分かります。
では、今回はそのサムネイルの作り方について解説します
サムネイルの作り方
当サイトもトップページの記事一覧はサムネイル画像と、文章出だしの一覧になっていると思いますが、構造としては孤児の一番最初に画像を挿入し、文章出だしを書いてmoreタグをつける手順を踏んでいます。
もちろん、抜粋などを利用して頑張れば色々出来ることはあると思いますが、今回紹介する方法であればサムネイル画像を自由に設置することができます。
functions.phpにコードを記述する
準備として「functions.php」を呼び出して、コードを記述していきます。 それでは手順です。
- WordPressにログインします。
- メニューの［外観］→［テーマの編集］
- 「functions.php」を選択し、ソースコードを記述します。
- functions.phpの中に、下記のコードを挿入します。
function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){ //Defines a default image
$first_img = "http://detarame.moo.jp/wp/wp-content/themes/whbk5/images/default.jpg";
}
return $first_img;
}
サムネイル画像を表示する方法
上記functions.phpでソースを記述したら、次は画像の呼び出し方をご説明します。
サムネイルを表示させたいところに下記のコードを追加するだけです。
<img src="<?php echo catch_that_image(); ?>" />まとめ
今回は、WordPressで記事の一番最初の画像を取得する方法をご紹介しました。サムネイルを設定することで多くの方に関連記事を見てもらえやすくなります。functions.phpにソースコードを記述することで簡単に設定できますのでぜひ、試してみてください。