WordPress アイキャッチ画像を取得してタイトル一緒にリンクつけて表示する方法

この記事を書いてる人

オジー

  • WordPress歴8年
  • 副業でデザイン/開発を受託→法人化
  • WordPressで会社HPをオリジナルテーマで作成
  • 主軸はデザイン、たまにフロントエンドのコードも書きます
  • 事業会社/受託会社 両方経験あり

おさらいですが投稿に設定してあるアイキャッチ画像を取得してタイトルとかと一緒に表示する方法を今回ご紹介したいと思います。Wordpressといえば独自のタグがありますがそれを使用することによってわずか数行でデータベースから画像のパスを取ってくるなんてこともできます。

実際SQLを書いてデータベースとのデータのやり取りをしたことがない人にとってはその便利さはわからないと思いますが、これはかなり便利です。

話を本題に戻しますが、今回はそのWordpressが用意しているタグを使用してアイキャッチ画像とタイトルを取得して表示するところまでやりたいと思います。

目次

アイキャッチ画像とは

eye-catchingから来ており、人目をひく画像という意味です。Wordpressではこのアイキャッチ画像を投稿ごとに設定でき、一覧で表示する際などにタイトルなどと一緒に表示することで文字通り人目をひくような効果を得られます。

実際、テキストだけのものより画像の方がクリック率が高いということもわかっており今現在存在するブログやキュレーションメディアなどはほぼアイキャッチ画像を表示しています。

WordPressのデータベース構造

その投稿に設定したアイキャッチ画像やタイトル、本文などはどこに保存されるかというとデータベースに保存されます。下書き保存や公開などのボタンを押した瞬間にクエリ(データベースの値をいじるコード)が実行されデータベースの値を変更・追加・削除しています。

そのデータベースに入っている投稿情報(アイキャッチ画像、タイトル、本文、日付などなど)を取得するため、本来ならばクエリを自分で書かなければならないところですがWordpressにはそれを簡単にしてくれる便利なタグが用意されています。

投稿情報の取得の仕方

実際の取得方法ですが、様々な方法がありここでは全部は紹介できませんが(今回の記事の目的はあくまでアイキャッチ画像・タイトル取得ため)、ベーシックな方法を紹介したいと思います。

<?php $query = new WP_Query( array( 'post_type' => 'post' ) ); ?>

上記のコードで投稿情報をデータベースから引っ張りだしてくることができます。上記のコードの意味は「投稿タイプが’post’の投稿を全て取得」です。その取ってきたデータはどこに保存されるかというと$queryという変数に保存されます。このデータを保持した$queryを使用して後々投稿に紐づく情報取得します。

アイキャッチ画像・タイトルの取得

アイキャッチ画像

<?php the_post_thumbnail( array(100, 100) ); ?>
<?php get_the_post_thumbnail( array(100,100) ); ?>

上記の二つがアイキャッチ画像を取得する際に用いられるタグです。違いは出力するかどうかです。the_post_thumbnailの方は、imgタグごと出力します。get_the_post_thumbnailの方はアイキャッチ画像を取得はしますが出力しません。

()の内はパラメータを何個か設定できます。上記では画像サイズのパラメーターを設定しているのでwidth:100px, height:100pxにしたアイキャッチ画像を取得するコードです。実際に指定できるパラーメータは下記URLよりご覧下さい。

http://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/the_post_thumbnail

http://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/get_the_post_thumbnail

タイトル

<?php the_title();?>
<?php get_the_title();?>

上記の二つのコードで投稿のタイトルは取得できますが、二つのコードの違いはアイキャッチ画像の時と同様出力するかしないかです。the_title()の方は投稿タイトルを自動的に出力します = htmlとして書き出されます。get_the_title()の方はデータは取得しますが書き出しませんのでecho get_the_title()としてあげるか、 $title = get_the_title(); echo $title; として出力してあげなければなりません。

各々の情報を表示して、CSSで体裁を整える

では上記のコードを実際に使用して表示するまでのコードが下記になります。
if(has_post_thumbnail())では投稿にアイキャッチ画像が設定されているかどうかを判別しています。アイキャッチ画像が設定されている場合は、アイキャッチ画像を、そうでない場合はデフォルトの画像を設定することで画像がないということを回避できます。

またアイキャッチ画像・タイトルだけではリンクがないのでthe_permalink()を用いて投稿のURLを取得してaタグに設定しています。

今回はCSSについては書きませんのでご自由にスタイルを指定してあげてください。

<?php

//投稿情報をWP_Queryでデータベースから取得します。

$query = new WP_Query( array( 'post_type' => 'post' ) );

// $the_queryに投稿情報が入っているかチェック
if ( $the_query->have_posts() ) {

  //投稿情報があったらループ開始

  while ( $the_query->have_posts() ) {
    $the_query->the_post();
    ?>
      <article>
        <div class="post-thum">
          <a href="<?php the_permalink(); ?>">
            <figure>
              <?php if ( has_post_thumbnail() ) { ?>
                <?php the_post_thumbnail( array(100, 100) );?>
              <?php }else{ ?>
                <img src="デフォルトアイキャッチ画像のURL">
              <?php }?>
            </figure>
          </a>
        </div>
        <div class="post-meta">
          <h3 class="post-title">
            <a href="<?php the_permalink(); ?>"><?php the_title();?></a>
          </h3>
        </div>
      </article>
  <?php 
  }
  
} else {
  //投稿情報がなかった場合
  echo "投稿がありません。";
}

//投稿情報のデータを空にします
wp_reset_postdata();

?>

まとめ

今回は投稿情報取得から表示まではわりと丁寧に解説いたしました。Wordpressには便利なタグが用意されていて、それはそれで嬉しいのですがそのタグがどのような情報を取得し、どのような動きをするかを把握することでエラーにも対処しやすくなりますし、カスタマイズしたい時なんかも応用が利くようになります。

WordPressは幸運なことにコミュニティもでかいですし、公式のフォーラムを充実しているので探せばいくらでも情報は出てくるので一度自分が使用しているタグを調べてみてはいかがでしょうか?
そうすれば「このタグこんな情報をとってこれるんだ」など新たな発見があり、カスタマイズすることがどんどん楽しくなると思います。

では。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次