Xeory

XeoryBaseのサイドバーに新着記事をサムネイル付きで表示させる方法

xeory-recent-post-thumbnail

このサイトを開設してからというもの、これまで賢威の記事ばかり書いてきましたが、今回はちょっと寄り道して、バズ部さんが無料で提供してくれているWordPressテーマ:XeoryBaseのカスタマイズについて書いてみたいと思います。

内部的にはかなり良さ気なXeoryBaseなんですが、新着記事にサムネイルを付けることが出来ないんですよね。。。
バズ部さんらしいと言えばそれまでなんですけど、SEOに強そうな分、サムネイルを付けることが出来たら・・・と思っている人も多いはずです。

個人的にもバズ部さんのテーマにはかなり興味があるので、今回のカスタマイズでは、Xeoryのサイドバーに新着記事をサムネイル付きで表示する方法を紹介したいと思います。

カスタマイズ前

↓ サイドバーの最新記事一覧にはタイトルのみが表示されています

sidebar-recent-posts-thumbnail-before

カスタマイズ後

↓ サイドバーの最新記事一覧にサムネイルも表示

sidebar-recent-posts-thumbnail-after

今回はPHPファイルを編集するので、バックアップを取ってから作業するようにして下さい。
画面が真っ白になることもあるので、小さいものでもPHPコードのミスには要注意です。

[ad]

1. サイドバーで使用するためのサムネイルを登録

まずはサイドバーで使用するサムネイルを登録しましょう。

以下のコードを functions.php に追加します。
今回はわりと一般的な 90px * 90px のサイズにしました。

add_image_size( 'sidebar-thumbnail', 90, 90, ture );

ちなみに今回は子テーマのファイルを編集していきますが、親テーマを直接編集しても大丈夫です。

2. No Image 画像を用意

サムネイルが無い投稿用に No Image 画像を用意します。
ここでは ECデザインさんからダウンロードさせてもらった画像を使用していきますが、お好みの画像でもちろん大丈夫です。

http://design-ec.com/?p=108

3. sidebar.php を編集

それでは今回のカスタマイズのメインである sidebar.php を編集していきましょう。

これまで子テーマに sidebar.php を作っていない場合には、親テーマ(XeoryBase本体)のsidebar.php を丸ごとコピペして sidebar.php を新規作成します。

sidebar.php の5行目付近に以下のコードがあるので、

sidebar-recent-posts-thumbnail-else
<?php 
if( dynamic_sidebar('sidebar') ):
  dynamic_sidebar();
else:
  $args = array(
    'post_type' => 'post',
    'post_count' => 10
  );
  // クエリ
  $the_query = new WP_Query( $args );

このコードを下のコードで置き換えます。

<?php
if( dynamic_sidebar('sidebar') ):
  dynamic_sidebar();
// else:
endif;
$args = array(
  'post_type' => 'post',
  'posts_per_page' => 5
);
// クエリ
$the_query = new WP_Query( $args );

これで新着記事が5件表示されるようになりました。

ちなみに上のコードの中の 5 という数字を変更すれば、新着記事の表示を5件以外にすることも出来ます。8 とすれば 8 件の新着記事が表示されます。

4. サムネイルを表示させる

次にサムネイルを表示させるコードを追加しましょう。

13行目付近の

//クエリ

から、26行目付近の

wp_reset_postdata();

までを以下のコードで置き換えます。
(子テーマではなく親テーマを使用する場合は、一部編集箇所があります)

// クエリ
$the_query = new WP_Query( $args );
echo '<div id="recent-posts-3" class="widget_recent_entries side-widget wcl-recent-posts"><div class="side-widget-inner">';
echo '<h4 class="side-title"><span class="widget-title-inner">最新の投稿</span></h4>';
echo '<ul>';
// ループ
while ( $the_query->have_posts() ) : $the_query->the_post();

  echo '<li class="clearfix">';
  echo '<a href="' . get_post_permalink() . '" class="wcl-recent-post-thumb">';
  if ( has_post_thumbnail() ):
    // サムネイルがある場合
    the_post_thumbnail( 'sidebar-thumbnail', array( 'class' => 'alignleft' ), array( 'alt' => esc_attr( get_the_title() )));
  else:
    // サムネイルが無い場合
    echo '<img src="' . get_stylesheet_directory_uri() . '/img/no-image.png' . '" alt="No Image" width="90" height="90" title="No Imgage">';
  endif;
  echo '</a>';
  // 投稿のタイトルを表示
  echo '<a href="'.get_post_permalink().'" class="wcl-recnet-post-title">'.get_the_title().'</a>';
  echo '</li>';

endwhile;
echo '</ul>';
echo '</div></div>';

wp_reset_postdata();

レイアウトは崩れていますが、ここまでのコードで新着記事がサムネイル付きで表示されるようになりました。

サムネイル無しの投稿には、 No Image の画像が表示されていますね。また、画像の alt にはその投稿のタイトルが入るようになりました。

sidebar-recent-posts-thumbnail-display-thumbnail

4-1. 親テーマを使用する場合

親テーマを使用する場合は、上のコードの中にある

// サムネイルが無い場合
echo '<img src="' . get_stylesheet_directory_uri() . '/img/no-image.png' . '" alt="No Image" width="90" height="90" title="No Imgage">';

という部分を、以下のコードで置き換えます。
get_stylesheet_directory_uri()get_template_directory_uri() に変更)

// サムネイルが無い場合
echo '<img src="' . get_template_directory_uri() . '/img/no-image.png' . '" alt="No Image" width="90" height="90" title="No Imgage">';

これで親テーマについても、子テーマと同じようにサムネイルが表示されるようになります。

5. CSSでスタイリング

サムネイルを表示することが出来たので、CSSでスタイリングしましょう。

お好みのCSSファイルに以下のコードを追加します。

.wcl-recent-posts .clearfix:before {
    content: "";
    display: table;
}
.wcl-recent-posts .clearfix:after {
    content: "";
    display: table;
    clear: both;
}
.wcl-recent-posts.widget_recent_entries a {
    background: none;
    padding-left: 0;
}
.wcl-recent-post-thumb {
    display: inline-block;
    float: left;
}
.wcl-recent-posts .side-widget img {
    width: 90px;
    height: 90px;
}
.wcl-recnet-post-title {
    margin-left: 100px;
}
.wcl-recent-posts.widget_recent_entries a:hover {
    background: none;
    text-decoration: underline;
}

これでテキストが右寄せされました。

sidebar-recent-posts-thumbnail-after-css

↓ マウスオーバーした状態(タイトルの文字が青くなり、下線が表示)

sidebar-recent-posts-thumbnail-after-css-hover

6. サムネイルの大きさを揃える

最後にサムネイルの大きさを揃えて完成です。
テーマファイルを変更してもサムネイルの大きさは変わらないので、Regenerate Thumbnails というプラグインを使ってサムネイルを作り直します。

Regenerate Thumbnails:
https://ja.wordpress.org/plugins/regenerate-thumbnails/

regenerate-thumbnail

ツールメニュー にある Regenerate Thumbnails ボタンを押すと、サムネイルが作り直され、すべての投稿のサムネイルが同じ大きさに揃います。

もし Regenerate Thumbnails にかけてもうまくいかないという場合は、functions.php に追加した以下のコードに true が入っているか確認してみて下さい。

add_image_size( 'sidebar-thumbnail', 90, 90, ture );

↓ 使い方は管理画面でボタンを押すだけ

regenerate-thumbnail-generating

サムネイルの大きさが揃いましたね!
これで完成です。

sidebar-recent-posts-thumbnail-after