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

選手登録メンバー登録

1.アイキャッチ画像をカスタマイズ

テーマによっては、変更しなくてもきれいに表示されることもあります。

メンバー紹介などの個人個人のページでは、300px×400pxの画像

メンバー一覧のページでは、225px×300pxの画像にしてみます。

子テーマの「function.php」に追加

左メニューの【外観】→【テーマの編集】から「function.php」を探してクリックしてください。

開いたら、一番下まで行って、下記の部分をコピーして貼り付けてください。

先に説明しますと、アイキャッチ画像のサイズを変更しています。

貼り付ける場所は、いっぱい英語が書かれているのが終わったところで、改行して貼り付けます。


<?php
// 親テーマと子テーマのCSSを読み込み
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'liquid-style', get_template_directory_uri() . '/style.css', array('bootstrap', 'icomoon') );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('liquid-style') );
}

//アイキャッチサムネイル生成　メンバー写真
add_image_size('content-member',300,400,true);
add_image_size('member',225,300,true);

ファイルを更新ボタンをクリックして保存します。

2.single-member.phpをカスタマイズ

アイキャッチ画像とカスタムフィールドを表示させる


<div class="detail_text">

<div class="post_meta">
                <span class="post_time">
                 <i class="icon icon-clock" title="<?php esc_html_e( 'Last update: ', 'liquid' ); ?><?php the_modified_date(); ?>"></i> <?php the_time( get_option( 'date_format' ) ); ?>
                </span>
                <?php if(!empty($cat)){ ?>
                    <span class="post_cat"><i class="icon icon-folder"></i>
                    <?php the_category(', ') ?>
                    </span>
                <?php } ?>
                </div>

                <?php if(has_post_thumbnail()) { the_post_thumbnail('content-member'); } ?>   <!-- アイキャッチ画像変更 -->
		<!-- カスタムフィールド -->
                <?php the_field('name'); ?>
                <?php the_field('place'); ?>
                <?php the_field('height'); ?>
                <?php the_field('blood'); ?>
                <?php the_field('position'); ?>
                <?php the_field('hobby'); ?>

                <?php if(! dynamic_sidebar('liquid_main_head')): ?><!-- no widget --><?php endif; ?>


<div class="post_body"><?php the_content(); ?></div>   <!-- ここは本文 -->

上記の<!– アイキャッチ画像変更 –>というところで先ほど指定したサイズになるように記述します。

<!– カスタムフィールド –>以下の部分で、カスタムフィールドの値を表示させるために記述します。

すると、↓のように表示されました。

カスタムフィールド表示

選手紹介・メンバー紹介の個人個人を表示させるページが作れました。

ただ、カスタムフィールドは表示させただけなので、レイアウトを変更してわかりやすくする必要があります。

cssでレイアウトを調整

single-member.phpも変更して、class名を付与

変更した「single-member.php」は以下です。


<div class="detail_text">

<div class="post_meta">
                <span class="post_time">
                 <i class="icon icon-clock" title="<?php esc_html_e( 'Last update: ', 'liquid' ); ?><?php the_modified_date(); ?>"></i> <?php the_time( get_option( 'date_format' ) ); ?>
                </span>
                <?php if(!empty($cat)){ ?>
                    <span class="post_cat"><i class="icon icon-folder"></i>
                    <?php the_category(', ') ?>
                    </span>
                <?php } ?>
                </div>

<div class="member-image">
		<?php if(has_post_thumbnail()) { the_post_thumbnail('content-member'); } ?></div>  <!-- アイキャッチ画像変更 -->
                <!-- カスタムフィールド -->
     <table class="member-profile">
      <tbody>
       <tr>
	<td>名前</td>
        <td><?php the_field('name'); ?></td>
       </tr>
       <tr>
	<td>出身地</td>
        <td><?php the_field('place'); ?></td>
       </tr>
       <tr>
	<td>身長</td>
        <td><?php the_field('height'); ?></td>
       </tr>
       <tr>
	<td>血液型</td>
        <td><?php the_field('blood'); ?></td>
       </tr>
       <tr>
	<td>ポジション</td>
        <td><?php the_field('position'); ?></td>
       </tr>
       <tr>
	<td>趣味</td>
        <td><?php the_field('hobby'); ?></td>
       </tr>
      </tbody>
     </table>

     <?php if(! dynamic_sidebar('liquid_main_head')): ?><!-- no widget --><?php endif; ?>
     <div class="post_body"><?php the_content(); ?></div>   <!-- ここは本文 -->

cssファイルには以下を記述しました。


.member-image{
	text-align:center;
}
.member-profile{
	text-align:center;
}

cssファイルで自分好みに変更すれば、また違ったイメージができますね。

カスタムフィールド表示

以上で個人個人のページが表示されるようにできました。

WordPress テーマLIQUID PRESSでメンバー紹介や選手一覧などを作ってみた⑤