プラグインなしで新着記事を表示する方法[Wordpressカスタマイズ]

プラグインなしで新着記事を表示する方法[WordPressカスタマイズ]

新着記事を取得してサイドバーなどに表示するカスタマイズ方法です。

画像とタイトルを組み合わせた、以下のような新着記事リストを作成します。

photo by Lena Vasiljeva

functions.phpの編集
new-entries.phpファイルの作成と編集
sidebar.phpの編集
style.cssの編集
まとめ

functions.phpの編集

functions.phpを編集する前は必ずバックアップを取ってください。

アイキャッチを有効にする

functions.phpに以下の記述があるか確認してください。

add_theme_support('post-thumbnails');

1	add_theme_support('post-thumbnails');

大抵のテーマはあると思いますが、あればそのまま。なかったらfunctions.phpに追記してください。

これは、アイキャッチ画像を有効化する記述です。これがないと、投稿画面でアイキャッチが設定できません。

参考関数リファレンス/add theme support

作成するサムネイルの大きさを指定する

次に、functions.php内に以下の記述があるか確認してください。

add_image_size('thumb75',75,75,true);

1	add_image_size('thumb75',75,75,true);

これは、簡単に言えば、作りたい大きさのサムネイルをWordpress側に作ってもらう関数です。

上のコードでは、75×75pxの大きさで画像の真ん中をくりぬいたサムネイルが作成されます。数値を変更すれば、自由に大きさを変更できます。

上記のコードがfunctions.php内になかったら追記してください。（既にあるサムネイルの大きさを使っても良いです。けど、今回のサンプルでは75×75pxのサムネイルを使用します。）

参考関数リファレンス/add image size – WordPress Codex 日本語版

サムネイルの再生成

もしサムネイルを新たに作成するのであれば（add_image_sizeを追記した場合）、Regenerate Thumbnailsプラグインをインストールして、Wordpressダッシュボードの「ツール→Regenerate Thumbnailsを選択してください。

そして、「Regenerate All Thumbnails」ボタンを押してください。

WordPressのメディアに登録されている画像すべてに新しいサイズのサムネイルが作成されます。画像が多くある場合は、数十分～数時間かかります。

new-entries.phpファイルの作成と編集

single.phpに関連記事を表示するPHPコードを挿入しても良いのですが、コード量が多くめsingle.phpの可読性が下がるため、今回は別にテンプレートファイルを作成します。

カスタマイズするテーマ内にnew-entries.phpというファイルを作成してください。

そのファイルに以下のように記入します。

<?php query_posts('posts_per_page=5&ignore_sticky_posts=1'); ?>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="new-entry">
  
  <div class="new-entry-thumb">
  <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
    <a href="<?php the_permalink(); ?>" class="new-entry-title"><?php the_post_thumbnail( 'thumb75' ); ?></a>
  <?php else: // サムネイルを持っていないときの処理 ?>
    <a href="<?php the_permalink(); ?>" class="new-entry-title"><img src="<?php echo get_template_directory_uri(); ?>/images/no-image.png" alt="NO IMAGE" title="NO IMAGE" width="75px" height="75" /></a>
  <?php endif; ?>
  </div><!-- /.new-entry-thumb -->
  
  <div class="new-entry-content">
    <a href="<?php the_permalink(); ?>" class="new-entry-title"><?php the_title();?></a>
  </div><!-- /.new-entry-content -->

</div><!-- /.new-entry -->
<?php endwhile; endif; ?>
<?php wp_reset_query(); ?>
<br style="clear:both;">

<?php query_posts('posts_per_page=5&ignore_sticky_posts=1'); ?>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>

<a href="<?php the_permalink(); ?>" class="new-entry-title"><?php the_post_thumbnail( 'thumb75' ); ?></a>

<?php else: // サムネイルを持っていないときの処理 ?>

<a href="<?php the_permalink(); ?>" class="new-entry-title"><img src="<?php echo get_template_directory_uri(); ?>/images/no-image.png" alt="NO IMAGE" title="NO IMAGE" width="75px" height="75" /></a>

<?php endif; ?>

</div>

<a href="<?php the_permalink(); ?>" class="new-entry-title"><?php the_title();?></a>

</div>

</div>

<?php endwhile; endif; ?>

<?php wp_reset_query(); ?>

記事を最新のものから5個取り出しリスト表示します。

query_postsの「&ignore_sticky_posts=1」は、先頭に固定される記事を除外しています

sidebar.phpの編集

sidebar.phpの記事下などで、作成したテンプレートを呼び出します。

挿入したい場所に、以下のコードを記入してください。

<div id="new-entries">
  <h4>新着記事</h4>
  <?php include( TEMPLATEPATH . '/new-entries.php' ); ?>
</div><!-- /#new-entries -->

<?php include( TEMPLATEPATH . '/new-entries.php' ); ?>

</div>

style.cssの編集

最後に、スタイルを整えて終わりです。

/* 新着記事 */
#new-entries{
  line-height:150%;
  margin-bottom:20px;
}

#new-entries h4{
  margin-bottom:15px;
}

#new-entries .new-entry{
  clear:both;
}

#new-entries .new-entry-thumb {
  float: left;
  margin-bottom:10px;
  padding-bottom:5px;
}

#new-entries .new-entry-content {
  margin-left:85px;
  margin-bottom:10px;
}

/* 新着記事 */

#new-entries{

line-height:150%;

margin-bottom:20px;

}

#new-entries h4{

margin-bottom:15px;

}

#new-entries .new-entry{

clear:both;

}

#new-entries .new-entry-thumb {

float: left;

margin-bottom:10px;

padding-bottom:5px;

}

#new-entries .new-entry-content {

margin-left:85px;

margin-bottom:10px;

}

HTMLタグや、スタイルなどはサイトに合わせて変更してください。

まとめ

WordPressで最初から使える「最新の投稿」ウイジェットではタイトルリンクしか表示されません。

記事のアイコンとなるサムネイルが表示されることによって、読み手の注意を引くことができ、多少はサイト回遊率も上がるかもしれません。

『プラグインなしで新着記事を表示する方法[WordPressカスタマイズ]』へのコメント

名前:まゆみん投稿日：2015/05/29(金) 22:26:06 ID：9cc5579bb

はじめまして

プラグインを使わないで、最近の記事をサムネイル付にする方法を探していて、このサイトに出会って、ここに書いてあるようにやってみたら、
反映されないので、
ウィジットに直接
sidebar.phpの編集のコードを書き込んでみたら、
それ以来、サイドバーが表示されなくなってしまって困っております…

でしたので、
このサイトで書き込むところは全部削除したのですが、
それ以来表示されないままになってしまいました…

これは、何が原因なのか、今ちょっと調べた感じではわかりませんでした…

ここで聞くのは筋違いなことはわかっているのですが、
ネットのことに詳しくないので、お手上げ状態になってしまいまして…

今後の希望としては、
プラグインは、自分もサイトを見ているときに結構固まってしまうこともあったので
入れないで、サムネイル付記事をサイドバーに表示したいです。

すみません…
では、失礼いたします。

名前:わいひら投稿日：2015/05/30(土) 15:47:59 ID：c990be6f1

今、Wordpress管理画面のウィジェット設定にある「サイドバーウィジェットエリア」は、どのような状態になっているのでしょうか？
何かウィジェットは入っていますか？

名前:まゆみん投稿日：2015/05/29(金) 22:26:06 ID：9cc5579bb

はじめまして

プラグインを使わないで、最近の記事をサムネイル付にする方法を探していて、このサイトに出会って、ここに書いてあるようにやってみたら、
反映されないので、
ウィジットに直接
sidebar.phpの編集のコードを書き込んでみたら、
それ以来、サイドバーが表示されなくなってしまって困っております…

でしたので、
このサイトで書き込むところは全部削除したのですが、
それ以来表示されないままになってしまいました…

これは、何が原因なのか、今ちょっと調べた感じではわかりませんでした…

ここで聞くのは筋違いなことはわかっているのですが、
ネットのことに詳しくないので、お手上げ状態になってしまいまして…

今後の希望としては、
プラグインは、自分もサイトを見ているときに結構固まってしまうこともあったので
入れないで、サムネイル付記事をサイドバーに表示したいです。

すみません…
では、失礼いたします。
名前:わいひら投稿日：2015/05/30(土) 15:47:59 ID：c990be6f1

今、Wordpress管理画面のウィジェット設定にある「サイドバーウィジェットエリア」は、どのような状態になっているのでしょうか？
何かウィジェットは入っていますか？