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

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

関連記事

カスタムフィールド カテゴリー

Advanced Custom Fieldsをカテゴリに使用したときの画像の取得出力

  いろいろ試してみた結果、やっとできたので覚書として記事にしました。   カスタムフィールドのカテゴリー画像作成   Advanced Custom Fieldsのプラ …

ワードプレス

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

  WordPressでスポーツチームやサークルまたは、企業やショップなどの人物紹介などのページを作るときに行う方法として、Web製作者それぞれやり方はあると思いますが、独学で学んだ私が作っ …

画面サイズ取得

ヘッダー以外の画面サイズ取得をやってみた

  ワードプレスを使っていて、最初に表示されるページのデザインで使えそう。 全画面表示にするために、ディスプレイのサイズ(高さ)を自動で取得して表示させる方法は試したことがありましたが、 今 …

ダウンロード

簡単にファイルをダウンロードできるWordPressプラグイン

  WordPressで作成したwebサイトにファイルをダウンロードする機能を追加するために、プラグインを利用して簡単にやってしまおう!ってことで、「WordPress Download M …

ヘッダー固定

【簡単】wordpress スクロールするとヘッダーが固定される

  ①一番最初に見えるヘッダーをカスタマイズ header.phpファイルに使っているテーマにより若干違いはありますが、下記のようなコードが記述されていると思います。 <div id= …