wordpress

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」

などがあります。

 

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

 

 

 

 

-wordpress
-,


comment

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

関連記事

Google FontがEdgeで表示されない

Google FontsがEdgeで表示されない場合

  <link>で読み込んだのにEdgeで正しく表示されない   <link href=”https://fonts.googleapis.com/css2?fa …

スマートスライダー

Smart Sliderのプラグインで画像に網掛け

  スライダー画像に網掛けをする   簡単にフェードアウトやスライダーができるWordPressのプラグインで有名な【Smart Slider】を使って、画像に網掛けをしたいと思い …

画像を上下中央に配置

指定した範囲内に画像を上下中央に配置

  divなどで指定した部分に、画像を配置 上下中央にする方法は他にもありますが、 今回は、『position』を使ってみます。   html <div class=&quo …

スクロールボタン

スクロールボタン コピペでできる

    WordPressでスクロールボタンを設置   php部分 <div class="scroll" href="#first- …

表示件数

意外と忘れていた表示件数

  アーカイブの表示件数   WordPressのテーマをカスタマイズしていて、 記事の一覧表示やカスタム投稿の一覧表示を出力する【アーカイブ.php】で、 1ページに表示される件 …