ホームページ作成 神戸★1人で悩まないでWeb制作や運営でお困りの方はお気軽にご相談ください。

WordPress|アイキャッチ画像(サムネイル)を新着記事一覧に表示する方法

2017-01-24 486 view
  • facebook 0
  • Pocket 0
  • twitter
WordPress|アイキャッチ画像(サムネイル)を新着記事一覧に表示する方法

WordPress(ワードプレス)のバージョン3.xから”アイキャッチ画像”という機能が追加されました。

”アイキャッチ”というネーミングは「愛を取る」という意味合いではなく(ある意味近いか?)、「ユーザーの目を惹く」という意味で、記事ひとつひとつの印象付けの為のサムネイル画像を表示させる機能です。

アイキャッチ画像を記事に設定(登録)しておけば、記事に関連するページのサムネイルやヘッダー画像としても利用が可能です。
ここではホームページのトップページやサイドバー(最新の投稿)などに表示するアイキャッチ画像付き記事一覧(エントリータイトルリスト)の表示方法を綴ります。カスタムフィールドやプラグインを使うことなく実装できますし、ポータルサイトなどにも使え、簡単シンプルかつ凄く使えるソースだと確信致します(笑)

ブックマークなどをしていただき辞書的にいつでも振り返り活用していただければと思います♪

スポンサーリンク

縦横51pxのアイキャッチ(サムネイル)画像付きの新着記事を6件表示するソース

<ul class="blog">
<?php query_posts('showposts=6');
if (have_posts()) : while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink(); ?>" style="float:left; margin-right:10px;">
<?php the_post_thumbnail(array(51,51)); ?></a>
<a href="<?php the_permalink(); ?>" style="width:300px; padding-top:8px;"><?php the_title(); ?></a>
</li>
<?php endwhile; endif; wp_reset_query(); ?>
</ul>

※ 数値は任意でお書き換え下さい。

”showposts=6”の数字を変更することで新着情報(新着記事)の表示件数が変更できます。
”(array(51,51)); ”は、縦51px、横51pxという数値です。

WordPress管理画面(ダッシュボード)の”メディア設定”ページでのサムネイルのサイズの設定もお忘れなく。

<?php add_theme_support( 'post-thumbnails' ); ?>

”テーマ編集”画面にて、functions.php(テーマのための関数)に上記ソースの記入をお忘れなく。
functions.phpというファイルが存在しなかったら新たに作りましょう。

お試しくださいませ。

当記事がお役に立ちましたらシェアして頂ければ嬉しいです。

  • facebook 0
  • Pocket 0
  • twitter