wordpress

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

投稿日:

9.メンバー登録

メンバー登録

上図のような画面になって、投稿ができるようになります。

では、さっそく1人目を登録します。

「ここにタイトルを入力」のところに「日本 太郎」としてみます。

アイキャッチ画像のところをクリックして、ファイルをアップロードして選択してください。

カスタムフィールドを追加していきます。(この部分が少し手間ですががんばりましょう!)

このカスタムフィールドについては、便利な機能が付いているプラグインもありますが、ここはあえてプラグインなしでいきます。

1.「カスタムフィールドを追加:」の下にある「名前」に「新規追加」があるのでクリックします。

2.上図では「-選択-」ってなっているところが空白になるので、そこに例えば「名前」と入力します。

3.右の「値」というところに例えば「NIPPON TARO」と入力します。

4.入力が終えたら、下にある「カスタムフィールドを追加」ボタンをクリックします。

5.1.~4.を繰り返して、表示したい項目を作っていきます。

これで、1人目登録完了!

こんな感じで、カスタムフィールドを作ってみました。

カスタムフィールド

 

2人目の登録は、

 <9.メンバー登録します> を繰り返します。

 

メンバー登録

同じことの繰り返しで、5名を登録してみました。

それでは、見てみます。

カスタムフィールドがない

 

そうなんです。

アイキャッチ画像はうまくいったのに肝心の項目が出てない!

次に、カスタムフィールドを表示させます。

 

10.カスタムフィールドの表示

選手個人のページを表示してくれる以下のファイルを変更していきます。

Twenty Sixteen: content-member.php (template-parts/content-member.php)

content-member.phpの中身の上から10数行目あたりにある下記のコードを見つけてください。

</header><!-- .entry-header --></header><!-- .entry-header -->
<?php twentysixteen_excerpt(); ?>
<?php the_post_thumbnail('content-member'); ?>
<div class="entry-content">

下記の様に変更

</header><!-- .entry-header --></header><!-- .entry-header -->
<?php twentysixteen_excerpt(); ?>
<div class="member-person clearfix">
<div class="member-img">
<!-- サムネイル変更部分 -->
<?php the_post_thumbnail('content-member'); ?></div>
<div class="member-details">
<table>
<tr>
<td>名前</td><td><?php echo esc_html( get_post_meta($post->ID, '名前', true ) ); ?></td>
</tr>
<tr>
<td>出身地</td><td><?php echo esc_html( get_post_meta($post->ID, '出身地', true ) ); ?></td>
</tr>
<tr>
<td>血液型</td><td><?php echo esc_html( get_post_meta($post->ID, '血液型', true ) ); ?></td>
</tr>
<tr>
<td>趣味</td><td><?php echo esc_html( get_post_meta($post->ID, '趣味', true ) ); ?></td>
</tr>
<tr>
<td>担当</td><td><?php echo esc_html( get_post_meta($post->ID, '担当', true ) ); ?></td>
</tr>
<tr>
<?php if(get_post_meta($post->ID,'Twitter',true)){
echo '<td><a href="'.get_post_meta($post->ID,'Twitter',true).'"><span class="lsf">Twitter</span></a></td> ';
} ?>
</tr>
<tr>
<?php if(get_post_meta($post->ID,'facebook',true)){
echo '<td><a href="'.get_post_meta($post->ID,'facebook',true).'"><span class="lsf">facebook</span></a></td> ';
} ?>
</tr>
<tr>
<?php if(get_post_meta($post->ID,'web',true)){
echo '<td><a href="'.get_post_meta($post->ID,'web',true).'"><span class="lsf">web</span></a></td> ';
} ?>
</tr>
</table>
</div></div><!-- member-person -->
<div class="entry-content">

 

※緑色のところは、横並びにしたかったので自由にクラス名をつけてください。

※緑色と赤色の部分を追加しています。

これは、カスタムフィールドのそれぞれの値を取得して表示するようにしています。

下の方にある「Twitter」以下は項目(値)があれば、表示するようにしています。

これについても記述の仕方がそれぞれ違ったり、もっとすばらしい書き方があるかもしれませんが・・・

 

これで、見てみることにします。

カスタムフィールド

とりあえず一安心 😮

 

あとは、テーブルやレイアウトなど好きなようにCSSで調整してください。

 

次は、メンバー一覧表示について

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

-wordpress
-,


comment

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

関連記事

スマホで予約システム

スマホで予約システムが無料で作れる

  今流行りの予約システム   以前から、サロン系やフィットネス系のオンライン予約を頼まれたことがあり、何度か作成してきましたが、 今回は、コロナの影響からも言えると思いますが、 …

画像を上下中央に配置

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

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

カスタム投稿

【サンプル】プラグインなしでカスタム投稿タイプを複数作る

  あまりWordPressをテクっていない私が、今回はプラグインなしでカスタム投稿タイプを作ってみました。 たぶん、詳しい人からするとかなり簡単にできてしまうんだと思いますが、 詳しい人ほ …

ブログとは

ブログとは

ブログ (blog) は、ウェブサイトの一種で、「WebをLogする」という意味でウェブログ (weblog) と名付けられ、それが略されてブログ(Blog)と呼ばれるようになった。 作者の個人的な日 …

div横並び

DIV横並びで回り込みも

Webサイトを作るときに、画像やメニューなどを横並びにして、しかもレスポンシブ対応にしたい! そんなことを思ったことがあると思います。(きっと 😛 ) いろんな方法がありますが、簡単にできる方法をご紹 …