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

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

関連記事

ポップアップ・ライトボックス風

画像クリックで 違う画像やテキストの入ったBOXを表示させる

  プラグインなしで、別の画像やテキストをlightboxのように表示させる   html   <a class="item-demo"> …

ワードプレス

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

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

カスタムスクロールバー

スクロールバーをカスタマイズできるプラグインjQuery custom content scrollerを試してみた

  WordPressでスクロールバーをカスタマイズ 別にスクロールバーは変えなくてもいいんじゃない?って思っているかもしれませんが、 実は、あるサイトを作っていて変えたくなったんです。 そ …

秒後に切り替わる

WordPress 指定したページにジャンプさせる方法しかもフェードインで滑らかに表示

【自動で切り替わる】【何秒後に切り替わる】【指定したページにジャンプさせたい】 たぶんこれを使う理由としては、 ・新しくWebサイトを作り直した時に、古い方のURLにアクセスした人に自動で新しいURL …

google アナリティクス

GoogleアナリティクスをWordPressに導入設置

  自分のブログやサイトを持っている方にとって必須ともいえるアクセス解析ツールです。このツールを利用することによって、ブログやサイトの細かなアクセス状況によって分析することができるようになり …