wordpress

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

投稿日:

選手一覧メンバー一覧

 

1.選手一覧、メンバー一覧表示

 

選手登録を、とりあえず5名登録したら、今度は一覧表示で見てみたいです。

そこで、前回説明した「archive-member.php」を使って表示させることにします。

以下のようにアイキャッチ画像のサイズだけ変更します。

別に変更しなくても良いですが、せっかくなので少し手を加えたいと思います。

the_post_thumbnail(‘member’);のところです。

前回、子テーマのfunctions.phpに記述した画像サイズ’member’を付与しました。

 

<div class="row" id="main">
             <?php if (have_posts()) : while ( have_posts() ) : the_post(); ?>
               <article <?php post_class();?>>
                  <div class="card-block">
                   <div class="post_links">
                   <span class="post_thumb">
                       <?php if(has_post_thumbnail()) { the_post_thumbnail('member'); }else{ echo '<span class="noimage">'.esc_html__( 'no image', 'liquid' ).'</span>'; } ?>
                   </span>

 

これで、表示されたのが以下の通りです。

 

あとは、ご自分好みでサイズ調整をすると素敵なデザインになると思います。

 
メンバー一覧選手一覧
 



 

 

 

-wordpress
-, , ,


comment

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

関連記事

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

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

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

メンバー紹介選手紹介

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

  1.プラグインAdvanced Custom Fieldsをインストール   左メニューのプラグイン→新規追加→検索窓に「Advanced Custom Fields」を入力す …

ワードプレス

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

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

slick

IEでスライダーslickのフェードはチカチカする

  fade:trueはやめたほうがいい WordPressに導入するのに、とても使い勝手がいいjQueryの【slick】なんですが、オプションでフェードを選択するとIEでは、隠れていた部 …

div横並び

DIV横並びで回り込みも

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