WordPressテーマSANGOの質問

記事一覧のカード一つ一つにその記事を書いたユーザー名とアイコンを表示させたい

2018/12/03

SANGOのおかげで楽しいWordPressライフが送れています。いつもありがとうございます。お忙しいところ大変恐縮ですが質問させてください。

記事一覧のカード一つ一つにその記事を書いたユーザー名とアイコンを表示させたいのですが、それは可能でしょうか？

SANGOトップページのタブ切替機能の設定方法まとめ

コメントへの回答

サルワカくん

2018/12/05

カスタマイズにより可能です。子テーマのfunctions.phpに以下のコードを追加します。

/*記事一覧のカードをアレンジ*/
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>
			<div class="cardtype__user-data">
				<div class="cardtype__user-avatar"><?php echo get_avatar(get_the_author_meta('ID'), 100); ?></div>
				<a class="cardtype__user-name" href="<?php echo esc_url(get_author_posts_url(get_the_author_meta('ID'))); ?>">
					<?php esc_attr(the_author_meta('display_name'));  ?>
				</a>
			</div>
        <?php
if (!is_archive()) {
        output_catogry_link();
    }
//カテゴリーを出力
        newmark(); //newマーク
        ?>
    </article>
<?php
}
/*END 記事一覧のカードをアレンジ*/

次にCSSを追加します。

/*カードにアバターを表示*/
.cardtype__user-data {
  margin: 0 1em .5em;
  padding-bottom: 1em;
  font-size: 15px;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cardtype__user-name {
  width: calc(100% - 50px);
  color: gray;
}
.cardtype__user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: silver;
}

細かなスタイルはご調整くださいませ。