Web、モバイル(スマホ・格安SIM)、ソーシャルメディア活用術、フリーランスの働き方などを綴ります!

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

68,065 view
更新日:2014年12月30日 投稿日 : 2012年04月24日
  • はてなブックマーク
  • facebook
  • twitter

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
  • twitter
68,065 view 2012年04月24日

webdesignerwork 著者

フリーランスWebデザイナーとして活動をはじめて18年。全国の私を必要としてくれる方々からWordPressでのWeb制作のご依頼を頂いております。

各地のコワーキングスペースやWordPressの勉強会(WordBench/WordCamp)などに顔を出し、様々な人達とご縁をいただき刺激を受け、学んだこと感じたことを、日々のお仕事や自社メディアへの開発・配信にと繋げております。妻、子、プードル2匹と里山暮らし。

当ブログで公開されているテキスト、画像、イラストなどに関する権利は、当方に帰属します。
著作者の許諾を得ることなく複製、改変、転載、販売、出版など著作権法そのほか法律に触れる行為は禁止されております。

運営者情報

© 2004 webdesignwork ALL COPYRIGHTS RESERVED.