WordPress テーマTwenty Sixteenでメンバー紹介や選手一覧などを作ってみた④

 

11.メンバー一覧表示のカスタマイズ

 

メンバー個人個人の登録が終わったら、今度は一覧表示を作ってみます。

あまりごちゃごちゃ触りたくないので、以下のファイルだけ中身を少し変更します。

Twenty Sixteen: content-memberlist.php (template-parts/content-memberlist.php)

content-memberlist.phpの中身の上から１０行目あたりにある下記のコードを見つけてください。

<?php
/**
* The template part for displaying content
*
* @package WordPress
* @subpackage Twenty_Sixteen
* @since Twenty Sixteen 1.0
*/
?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

↓

下記の様に変更

<?php
/**
* The template part for displaying content
*
* @package WordPress
* @subpackage Twenty_Sixteen
* @since Twenty Sixteen 1.0
*/
?>
<div class="member-panel"><!-- member-panel -->
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

 

※赤字の部分を追加しました。

理由は、横並びにしたかったから<div>で囲みました。

続いて、

同じく、content-memberlist.phpの中身の上から１０数行目あたりにある下記のコードを見つけてください。

<?php twentysixteen_excerpt(); ?><?php twentysixteen_excerpt(); ?>
<?php the_post_thumbnail('member'); ?>
<div class="entry-content">

↓

下記の様に変更

<?php twentysixteen_excerpt(); ?><?php twentysixteen_excerpt(); ?>
<?php the_post_thumbnail('member'); ?>
<!-- カスタムフィールドを出力 -->
<span class="member-panel-text"><?php echo esc_html( $post->名前 ); ?></span>
<div class="entry-content">

 

※赤字の部分を追加しました。

これによって、カスタムフィールドの「名前」を取得できるようになりました。

続いて、

同じく、content-memberlist.phpの中身の一番下にある下記のコードを見つけてください。

</footer><!-- .entry-footer -->
</article><!-- #post-## -->

↓

下記の様に変更

</footer><!-- .entry-footer -->
</article><!-- #post-## -->
</div><!-- //member-panel -->

 

※赤字の部分を追加しました。

これは、横並びにするために<div>を付けたので、最後に閉じておきます。

 

最後に、CSSで調整します。

では、見てみることにします。

 

やっとできました 🙂

あと次にすることは、メニューのところに「メンバー一覧」のボタンやテキストを付けてリンクすることです。

 

まとめ

以上、４記事に分けて説明しましたが、今回使用した「Twenty Sixteen」ですが、WordPressの公式テーマということで使ってみましたが、便利なところもあるのですが、カスタマイズするには嫌いなテーマでした。

私的には、カスタマイズに向いていると言われている以下のブランクWordPress無料テーマの方がいいかな？

「Simplicity」

「Stinger」

「Gush」

などがあります。

 

今度は、別のテーマを使って同じことをしてみようかな？（暇ではないよ 😎 ）