WordPress テーマTwenty Sixteenでメンバー紹介や選手一覧などを作ってみた④
投稿日:
11.メンバー一覧表示のカスタマイズ
メンバー個人個人の登録が終わったら、今度は一覧表示を作ってみます。
あまりごちゃごちゃ触りたくないので、以下のファイルだけ中身を少し変更します。
Twenty Sixteen: content-memberlist.php (template-parts/content-memberlist.php)
content-memberlist.phpの中身の上から10行目あたりにある下記のコードを見つけてください。
<?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の中身の上から10数行目あたりにある下記のコードを見つけてください。
<?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で調整します。
モバイル用に、
.member-panel{
display:inline-block;
width:48%;
border:1px solid #ddd;
margin:0 2% 2% 0;
}
PC用に、
.member-panel{
width:31.333%;
}
では、見てみることにします。
やっとできました 🙂
あと次にすることは、メニューのところに「メンバー一覧」のボタンやテキストを付けてリンクすることです。
まとめ
以上、4記事に分けて説明しましたが、今回使用した「Twenty Sixteen」ですが、WordPressの公式テーマということで使ってみましたが、便利なところもあるのですが、カスタマイズするには嫌いなテーマでした。
私的には、カスタマイズに向いていると言われている以下のブランクWordPress無料テーマの方がいいかな?
「Simplicity」
「Stinger」
「Gush」
などがあります。
今度は、別のテーマを使って同じことをしてみようかな?(暇ではないよ 😎 )
関連記事
-
-
今回も引き続き、「Smart Slider 3」を使って条件分岐をやってみました。 なぜ、このようなことをするのかと言うと、 PCでは、横長の長方形(例えば、横幅1900px,高さ600pxくらい) …
-
-
MTS Simple Booking-Cで指定した日の指定した時間だけ受け付けないようにする
この日のこの時間だけ受け付けないようにしたい 無料版の予約システム【MTS Simple Booking-C】はすごく簡単に予約可能なプラグインですが、 ある程度決まったス …
-
-
簡単にファイルをダウンロードできるWordPressプラグイン
WordPressで作成したwebサイトにファイルをダウンロードする機能を追加するために、プラグインを利用して簡単にやってしまおう!ってことで、「WordPress Download M …