wordpress

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でメンバー紹介や選手一覧などを作ってみた⑤



-wordpress
-, , ,


comment

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

関連記事

vegasスマホとPC

スマホとPCの条件分岐でVEGASを切り替える方法

  スマホとPCの条件分岐でVEGASを切り替える方法   表示したいところに以下を記述します。 <div class="img-movie"> & …

表示件数

意外と忘れていた表示件数

  アーカイブの表示件数   WordPressのテーマをカスタマイズしていて、 記事の一覧表示やカスタム投稿の一覧表示を出力する【アーカイブ.php】で、 1ページに表示される件 …

ワードプレス

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

  11.メンバー一覧表示のカスタマイズ   メンバー個人個人の登録が終わったら、今度は一覧表示を作ってみます。 あまりごちゃごちゃ触りたくないので、以下のファイルだけ中身を少し変 …

プレビュー

WordPressのプレビューで変更されていない時にチェックすること

WordPressで固定ページや投稿ページまたは、カスタム投稿タイプでテキストの色を変更したり、大きさを変更するなどしてプレビュー画面で確認したが、変わってない!ってことはないですか? また、cssや …

リンク先を取得

簡単にリンク先のホームページを取得

  Browser Shots   WordPressのプラグインを利用して、簡単にリンク先のホームページの情報・画像を取得してサムネイルのように表示ができます。   & …