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

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

関連記事

masonry column

MasonryをやめてCSSのcolumnにした

  不具合連続のMasonry   2日間くらい「Masonry」に悩まされ、できたと思ったら不具合が発生の繰り返し、 主な不具合は、 ・画像と画像が重なる ・ブラウザを縮小したり …

wordpressテーマ

WordPress無料有料【LIQUID PRESS】子テーマを作ろう

  プロが選ぶWordPressテーマテンプレート【LIQUID PRESS】   レスポンシブWordPressテーマ 「LIQUID PRESS」 累計2千DL突破! 日本語対 …

フォトギャラリー

WordPressでフォトギャラリーを作るのに3つのプラグインを入れてみた

  プラグインを使って簡単にフォトギャラリー   WordPressの固定ページ、投稿ページ、カスタム投稿ページに写真を並べて掲載するフォトギャラリーページは、プラグインを使って簡 …

トグルメニュー

WordPressのメニューをおもしろくしてみた

    トグルメニュー(アコーディオンメニュー)の準備   WordPressのテーマに子テーマを作って、 そこで変更や追加をした方が安心安全なので以下の作業は子テーマを …

オンマウス

マウスオーバーでリンク画像に変化をつける

  自分がしたことを忘れないように記事にしました。 やりたかったのは、マウスオーバー・オンマウスでリンク画像がだんだん大きくなり、上にのせていたマスクがなくなって画像がクリアになること。 い …