WordPressでプラグインを使わずに最新記事をアイキャッチ(サムネイル画像)付きで表示する方法

読了時間:約 7分3秒
WordPressでプラグインを使わずに最新記事をアイキャッチ(サムネイル画像)付きで表示する方法

前回の記事はWordPressで人気記事を表示する方法を紹介しましたが、今回は最新記事を表示する方法を紹介します。

 

WordPressはプラグインを多用すると、処理に負担がかかり表示がどんどん遅くなってしまうので、簡単なPHPの記述で済む場合はプラグインを使わずに、テンプレートファイルにPHPを書いちゃいましょう。

ソースコードを書いてみよう

今回ご紹介する方法は、このブログで実際に使っている方法です。

 

参考サイト
[Wordpress] サムネイル(アイキャッチ)画像の設定いろいろ | nm705.com

 

上記サイトを参考にさせていただき、ちょっとアレンジしてみました。

 

最新記事を表示したい場所(sidebar.phpの中など)に下記のソースを記述します。

<ul>
<?php $posts = get_posts('numberposts=5'); //最新5件を表示
foreach($posts as $post): ?>
  <li>
    <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
    <?php
    if (has_post_thumbnail()):
      $title = get_the_title();
      the_post_thumbnail(array(64,64), array('alt' => $title, 'title' => $title));
    else: //アイキャッチ画像がなかった場合の処理
    ?>
      <img src="<?php bloginfo('template_url'); ?>/images/no_thumb.png" title="<?php the_title(); ?>" alt="<?php the_title(); ?>" width="64" height="64" />
    <?php endif; ?>
    </a>
    <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
  </li>
<?php endforeach; ?>
</ul>

この場合、64✕64ピクセルのアイキャッチ(サムネイル画像)が表示され、<a>タグのtitleと、<img>タグのtitleとaltには記事のタイトルが入ります。

 

アイキャッチ画像がなかったときは、no_thumb.pngという画像が表示されるように設定していますので、あらかじめimagesフォルダにno_thumb.pngを置いておきます。

 

そして生成されるHTMLは以下のようになります。

&lt;ul&gt;
  &lt;li&gt;
    &lt;a title=&quot;記事のタイトル&quot; href=&quot;パーマリンク&quot;&gt;&lt;img width=&quot;64&quot; height=&quot;64&quot; title=&quot;記事のタイトル&quot; alt=&quot;記事のタイトル&quot; class=&quot;attachment-64x64 wp-post-image&quot; src=&quot;サムネイルのパス&quot;&gt;&lt;/a&gt;
    &lt;a title=&quot;記事のタイトル&quot; href=&quot;パーマリンク&quot;&gt;記事のタイトル&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt; ・・・(略)・・・ &lt;/li&gt;
  &lt;li&gt; ・・・(略)・・・ &lt;/li&gt;
  &lt;li&gt; ・・・(略)・・・ &lt;/li&gt;
  &lt;li&gt; ・・・(略)・・・ &lt;/li&gt;
&lt;/ul&gt;

前回の記事で紹介した「人気記事の表示」と同じ形になりますので、並べて表示するときもレイアウト調整が簡単です。

表示サンプルは、このサイトの右側に表示している「最新記事」をご覧ください。

 

この記事が、WordPressサイト構築の参考になれば幸いです。

RSSフィードを購読する

ITポケットでは、ビジネスや生活が向上するTipsを発信しています。
よろしければRSSフィードをご購読ください。

シェアする

このエントリーをはてなブックマークに追加
Clip to Evernote

関連記事

コメント

お仕事のご依頼について

コーポレートサイト、ECサイト、CMS、ブログなど、あらゆるWebサイトの制作をお手伝いいたします。

企画からデザイン、その後の運営や保守まで対応することが可能です。

自らECサイト運営を行っていることもあり、顧客目線でのサイトづくりが得意です。

得意なこと

HTML5 / CSS3 / JavaScript

WordPress

ECサイト(EC-CUBE / Zen Cart / カラーミーショップ)

各ブログのカスタマイズ

 

クライアントのご要望にお答えし、予算やケースにあった選択で、臨機応変に対応いたします。

ご相談・ご質問や、お見積もりのご依頼など、お気軽にお問い合わせください。

プロフィール

菊地翼

菊地翼(きくちつばさ)
WEBクリエイター。株式会社ウイングフォレスト代表取締役。マカー歴16年。IT・ガジェット・ライフハックと甘いものが大好き!

詳しくはこちら 

サイト内検索

Facebookページ

Twitter