会員登録(無料)
ログイン
スキルアップは今すぐこちら!▶

【WordPress】Googleしごと検索(Google for Jobs)に求人を掲載するpart7【仕事一覧ページのデザインを調整する】

WordPress(ワードプレス)
この記事は約6分で読めます。

「Googleしごと検索(Google for Jobs)に求人を掲載する」というこのシリーズもかなり長くなってきてしまいましたが、前回は仕事一覧ページの表示をさせる部分まで出来ましたので、続きを作っていきます。

仕事一覧ページのデザインを調整する

このままだと、縦に一覧表示されているだけになってしまいますので、仕事一覧ページのレイアウトとデザインを調整してみます。

下記のような感じで作りましたので、こちらで作ったclassを使っていきます。

<?php while ( have_posts() ) : ?>
<?php the_post(); ?>
    <div class="ListContainer">
     <div class="ListTitle">
      <a href="<?php the_permalink(); ?>"><?php the_field('jobTitle'); ?></a>
     </div>
     <div>
       <div><?php the_field('companyName'); ?></div>
       <div><?php the_field('siteUrl'); ?></div>
       <div><?php the_field('postalCode'); ?></div>
       <div><?php the_field('addressRegion'); ?></div>
       <div><?php the_field('addressLocality'); ?></div>
       <div><?php the_field('streetAddress'); ?></div>
       <div><?php the_field('setValue'); ?></div>
       <div><?php the_field('basicValue'); ?></div>
       <div><?php the_field('minValue'); ?></div>
       <div><?php the_field('maxValue'); ?></div>
       <div><?php the_field('unitText'); ?></div>
       <div><?php the_field('employmentType'); ?></div>
       <div><?php the_field('description'); ?></div>
       <div><?php the_field('validThrough'); ?></div>
     </div>
    </div>
<?php endwhile; ?>

ひとまずこのような感じで、枠線を作ってみます。

.ListContainer{
border:1px solid black;
padding:20px;
margin:20px;
}

枠線が表示されました!

カスタムフィールドの画像を表示させる

カスタムフィールドで作成したmainImage画像を表示させます。the_fieldで出力させたメディアのURLを使ってimgタグで画像を表示させます。

<div class="ListImage">
  <img src="<?php the_field('mainImage'); ?>" width="150" />
</div>

表示されました!

divタグ+フレックスボックスで調整する

あとは、divタグとフレックスボックスで位置関係を調整していきます。ざっくりと、このようなイメージで作成してみます。

こんな感じで分けて、上部だけspace-betweenで左右の端に寄せる感じで…?いけるか分かりませんが、とりあえず試してみます。

もしくは、position:absoluteあたりで調整してみます。

classを準備する

class名が無いので、それぞれの場所に準備します。大まかな土台は、このような感じで。

  <div class="ListContainer"> 
     <div class="ListLeft">
     </div>
     <div class="ListRight">
     </div>
  </div> 

ListContainerをdisplay:flexして左右に並べます。

.ListContainer{
border:1px solid black;
padding:20px;
margin:20px;
display:flex;
}

あとは、CSSで調整していきます。

.ListContainer{
border:1px solid black;
padding:20px;
margin:20px;
display:flex;
}
.ListLeft img{
width:300px;
}
.ListRight{
margin:0 0px 0px 20px;
width: 100%;
}
.ListTitle{
position:relative;
}
.detailButton{
background:#2B88D5;
color:#fff;
text-decoration:none;
padding:6px 20px;
position:absolute;
right:0px;
top:0px;
}
.detailButton:hover{
color:#fff;
opacity:0.5;
}

出来ました…!space-betweenだと位置がずれてしまうので、今回はposition:absoluteで調整してみました。

まとめ

これで、おおよその一覧表示の機能ができました!

これで「求人管理で案件登録」→「ページ公開」→「一覧に表示」→「デザイン調整という流れが完成しました!

ただ、このままだと、投稿されているページが全件出力されてしまいますので、前回作成した「Googleしごと検索の有効化」が「する」になっているデータのみ一覧に出力される(ページが公開される)ような仕掛けを作ってみたいと思います。

続きは、また😃

タイトルとURLをコピーしました