【SANGOカスタマイズ】記事一覧グリッドのカードにユーザー名とサムネイルを表示する方法

こんにちは、UVERworld布教クリエイターのゆうやです!

当ブログで使用しているWPテーマ「SANGO」(以下、sango)ではトップページやアーカイブページなどでグリッド形式で記事カードが表示されるようになっています。

記事カードブロックにはそれぞれ、

  • アイキャッチ画像
  • タイトル
  • カテゴリー
  • 公開日時

がデフォルトで表示されています↓↓

SANGO記事一覧カード

当ブログの記事カード一覧例(デフォルト状態)

もはや何も手を加える必要のない美しいコンポーネントだとは思いますが、

いやいや、私はLIGさんの記事カードみたいに記事を書いたユーザーのサムネイルと名前も表示させたいんです!

LIGの記事カード

いいねボタンも可愛らしくて最高ですね!LIG公式サイトより

という方のために本記事ではその方法を紹介していきます!

記事一覧グリッドのカードにユーザー名とサムネイルを表示する方法

完成イメージ

今回のカスタマイズの仕様は以下になります!

  • 記事タイトル下に
  • サムネイル + ユーザー名 表示
  • ユーザー名にはユーザーが書いた記事一覧ページヘのリンク付与

完成したら記事一覧カードはこうなります↓↓

SANGOカード一覧カスタマイズ

編集するファイル

今回のカスタマイズで編集していくファイルは子テーマの

functions.php

style.css

です!

注意
子テーマに上記ファイルがない場合はそれぞれ作成しておいてくださいまし。わからない場合はググっていただけますと幸いです!

記事一覧グリッドを表示している関数に追記する

■STEP1

親テーマから記事一覧グリッドを表示している関数をコピーしてきます。

該当ファイルは、library/functions/sng-function.phpです(^o^)

sng-function.phpの521行目から545行目あたりに該当コードがあるのでコピーしましょう!

怠惰な方は以下をお使い下さい笑

library/functions/sng-function.php
/*********************
記事一覧グリッドのカード(関数にして使いまわせるように)
*********************/
if( ! function_exists( 'sng_normal_card' ) ) {
  function sng_normal_card(){ ?>
    <article class="cardtype__article">
        <a class="cardtype__link" href="<?php the_permalink() ?>">
          <p class="cardtype__img">
            <img src="<?php echo featured_image_src('thumb-520'); ?>" alt="<?php the_title(); ?>">
          </p>
          <div class="cardtype__article-info">
            <?php if(!get_option('remove_pubdate')):?>
            <time class="updated entry-time dfont" datetime="<?php the_time('Y-m-d'); ?>"><?php echo get_post_time('Y.m.d D');?></time>
            <?php endif; ?>
            <h2><?php the_title(); ?></h2>
          </div>
        </a>
        <?php
        if(!is_archive()) output_catogry_link();//カテゴリーを出力
        newmark();//newマーク
        ?>
    </article>
<?php
  }
}/*end sng_normal_card*/

■STEP2

先程コピーしてきたコードを子テーマのfunctions.phpにペーストします!

■STEP3

ペースト完了したら次はfunctions.phpにサムネイルとユーザー名表示用のコードを追加していきます!

<div class=”cardtype__article-info”>〜中身は省略〜</div>のあとに以下コードを貼り付けて下さい(^o^)

functions.php
<div class="tb-left top-grid">
  <div class="author_img top-grid">
    <?php $iconimg = get_avatar( get_the_author_meta( 'ID' ), 100 ); if($iconimg) echo $iconimg; //サムネイル ?>
  </div>
  <a class="dfont top-grid" href="<?php echo esc_url(get_author_posts_url( get_the_author_meta( 'ID' ) )); ?>">
    <?php esc_attr(the_author_meta('display_name'));//ユーザー名 ?>
  </a>
</div>
SANGOカスタマイズ functions

atomで見た時のカスタマイズ部分 白枠内が追加部分

CSSでレイアウトを整える

仕上げにCSSでレイアウトを整えていきましょう!

深いことは考えず子テーマのstyle.cssに以下コピペしていただければと思います笑

style.css
/*--------------------------------------
サムネイルとユーザー名を追加
--------------------------------------*/
.tb-left.top-grid {
  display: flex;
  margin-left: 13px;
  margin-right: 13px;
}
.tb-left.top-grid.single-page {
  margin-left: 0px;
  margin-right: 0px;
}
@media screen and (max-width: 768px) {
	.tb-left.top-grid.single-page {
	  margin-left: 13px;
	  margin-right: 13px;
	}
}
.dfont.top-grid {
  margin-left: 8px;
  padding-top: 6px;
}
.author_img.top-grid {
  width: 48px;
  height: 48px;
}
.author_img.top-grid img {
  border: solid 3px #dfe2e8;
}
.top-grid .cardtype__link {
  padding-bottom: 13px;
}
.cardtype__link {
	padding-bottom:13px;
}

新しいクラスはつくらずにsangoにもともと記述されているクラスを使ってそれを適宜上書きする形で実装しています!

お疲れさまでした、これで今回のカスタマイズは完成です!!

まとめ

いかがでしたでしょうか。

今回紹介したfunctions.phpのコードを利用すれば、「記事詳細ページ」の記事タイトル下に同様にサムネイルとユーザー名を表示させることも可能ですのでぜひ挑戦してみてください(^o^)

最後までご高覧いただきありがとうございました!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です