【SANGOカスタマイズ】WordPress Popular Postsのサムネイル画像を横長長方形にする方法

【SANGOカスタマイズ】WordPress Popular Postsのサムネイル画像を横長長方形にする方法

こんにちは。

ゆうや(@yuyaphotograph)です!

この記事では、

  • SANGOテーマでプラグイン「WordPress Popular Posts」を使用してサイドバーに挿入した人気記事一覧のサムネイル画像を正方形から横長長方形に変えたい
  • コピペで「WordPress Popular Posts」の人気記事一覧のサムネイル画像を横長長方形に変更できるコードを探している

という方のお悩みを解決します!

カスタマイズ前のサムネイル画像とカスタマイズ後の見た目は?

カスタマイズ前のサムネイル画像の見た目は以下の添付画像のように正方形となっていますね。

SANGOデフォルトのサムネイル画像見た目

この記事で紹介するカスタマイズ法を実践すると、
以下の添付画像のような見た目の横長長方形のサムネイル画像に変更することができます!

sangoカスタマイズ WPP サムネイル画像

カスタマイズの概要・手順

今回のカスタマイズは以下の手順で行います!

  1. 子テーマのfunctions.phpに
    サムネイル画像サイズを横長長方形に変更するコードと
    サムネイルのHTML構造を変更するコードを追記する
  2. 子テーマのstyle.cssに
    サムネイル画像をいい感じに整えるコードを追記
  3. FTPで上記修正ファイル2点をアップロード
  4. うまく反映されているか確認する

【コピペ】サムネイル画像を横長長方形に整えるコード

functions.phpに追記するコード

子テーマのfunctions.phpに以下をぺぺっと貼り付けましょう〜!

functions.php
// サムネイルサイズを変更
 function my_change_thumb_size() {
   add_image_size( 'thumb-160', 160, 92, true );
 }
 add_action( 'after_setup_theme', 'my_change_thumb_size', 11);

// WordPress Popular Postsの見た目カスタマイズ
function my_wpp_custom_html( $mostpopular, $instance ){
  $output .= '<ul class="my-widget show_num">' ;

    foreach( $mostpopular as $popular ) {
     	// リンクを取得
    	$output .= '<li><div><a href="' . get_the_permalink( $popular->id ) . '">';
        // アイキャッチ画像を取得
        $output .= ' <figure class="my-widget__img">' . get_the_post_thumbnail( $popular->id, 'thumb-160' ) . '</figure></a></div>';
        // タイトルを取得
        $output .= '<div class="my-widget__text"><a href="' . get_the_permalink( $popular->id ) . '">' . esc_html( $popular->title ) . '</a>';
        // ページビュー数を取得
        $output .= '<span class="dfont views">' . esc_html( $popular->pageviews ) . 'views</span>';
        $output .= '</div></li>';
	}
	$output .= '</ul>' ;
	return $output;
}
add_filter( 'wpp_custom_html', 'my_wpp_custom_html', 10, 2 );

style.cssに追記するコード

同じく子テーマのstyle.cssに以下を貼り付けましょう〜!

style.css
/* WPPカスタマイズ */
.execphpwidget .my-widget li span a {
  padding: 0;
}
.execphpwidget .my-widget.show_num li {
  padding: 7px 0;
  display: table;
}

.execphpwidget .my-widget li a .my-widget__img {
  display: block;
}

.execphpwidget .my-widget__img img {
  width: 100%;
  border: solid 2px #f3f3f3;
  transition: .3s ease-in-out;
}

.execphpwidget .my-widget li a .my-widget__img {
  display: block;
  width: 130px;
  height: 88px;
  padding-right: 6px;
  vertical-align: middle;
}

.execphpwidget .my-widget li a {
  display: block;
  padding: 0;
}
.execphpwidget .my-widget.show_num li div {
  display: table-cell;
}
.execphpwidget .my-widget__text {
  width: 180px;
  width: calc(100% - 88px);
  font-size: .9em;
  vertical-align: middle;
  line-height: 1.5;
}

まとめ

今回紹介した方法を実践すればプラグイン「WordPress Popular Posts」でサイドバーに挿入した人気記事一覧のサムネイル画像を横長長方形に綺麗に変更することができます!

記事のアイキャッチ画像は横長長方形で作られることがほとんどですのでサイドバーに表示するサムネイルもそれに合わせて綺麗に表示させたいですよね!

コピペで一瞬で実装できるのでぜひお試しあれ〜

SANGOカスタマイズ記事まとめ

SANGOカスタマイズに役立つ記事まとめ