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

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

関連記事

seo対策

WordPressのSEO対策は簡単にプラグインで出来る

SEOとは、Search Engine Optimizationの略で、検索エンジン最適化のことです。 検索することによって表示される順位をより高い順位にすることを目的としています。 まず始めに、Go …

リストメニューを順番に表示

メニューリストを横から順番に表示させる jsとcss

  前回の記事では、『メニューリストを横から順番に表示させる cssのみ』ということで、 cssだけで動きのあるメニューを作成しました。   今回は、jsファイルに書き込んで同じよ …

sliderコピー

ヘッダーのスライドショーをページ毎に変える方法

前回の記事で、「ヘッダー画像やスライダーをページ毎に変える方法」を紹介しましたが、 今回は引き続き、スライドショーができるプラグインを使った方法をやってみましたので紹介します。   Smar …

ポップアップ・ライトボックス風

画像クリックで 違う画像やテキストの入ったBOXを表示させる

  プラグインなしで、別の画像やテキストをlightboxのように表示させる   html   <a class="item-demo"> …

slick

IEでスライダーslickのフェードはチカチカする

  fade:trueはやめたほうがいい WordPressに導入するのに、とても使い勝手がいいjQueryの【slick】なんですが、オプションでフェードを選択するとIEでは、隠れていた部 …