【WordPress】カスタムフィールドの内容をslickの画像上に表示させる

WordPress

今日は、お仕事で実装した「カスタムフィールドの内容をslickの画像上に表示させる」をアウトプットします!

こんにちは。Webコーダーのharuです。

*わたしについて*
3歳1歳の育児をしながら、5~7時・21~0時にプログラミングを独学しています。
2020.5.11~学習スタート
2020.8.10~実務でコーディングしています
HTML/CSS(SCSS)/jQuery/WordPress。
これからもっと知識をつけていきたく、インプット・アウトプットを続けています。
【学習記録やアウトプットのTwitterはこちらです*】

普段から学習していてわかったことや、気付きをログに残しています。
※認識の間違っている箇所があれば、ご教授いただけるとうれしいです!

【WordPress】カスタムフィールドの内容をslickの画像上に表示させる

案件で実装したカスタムフィールドに関するアウトプットです!

今回やりたいことは、カスタムフィールドにチェックの入った記事のサムネイルにだけ、slickの画像上に文字を表示する” です。

語彙力がなくてわかりにくいので図解しますw

①投稿画面に作ったカスタムフィールド(PR)にチェックをいれる(前回の記事でやりました)

こんなです。

②チェックボックスにチェックが入ると、その記事カードに「PR」という文字が入るようになっている

③PRの入った記事のサムネイルをslickで表示するときは、画像右上に「PR」と表示させます

  ④カスタムフィールドにチェックの入っていないサムネイルには、PRの文字は表示させません

以上です。伝わったか微妙ですが、アウトプットしていきます!

プラグイン「slick」の導入

公式サイトよりslickをダウンロード。

「slick.css」と「slick.min.js」のファイルを入れて、htmlで読み込む。

読み込みは割愛します。参考リンクを貼ります!

php

スライダーを表示させたい場所に記述するコード。

<!--ここからスライダー(slick)--> 
 <?php 
 $args = array( 
   'post_type' => 'column',
    'posts_per_page' => -1,
  ); 

  $query = new WP_Query( $args );
   if( $query->have_posts() ):
      echo '<div class="slick01">';
   while( $query->have_posts() ) : $query->the_post(); 
  ?> 

      <!--サムネイルの取得--> 
      <a href="<?php the_permalink(); ?>">
         <div class="img" style="background-image: url(<?php echo get_the_post_thumbnail_url(); ?>);">
     
             <!--カスタムフィールドにチェックが入った場合-->
             <?php if(get_field('pr')){ 
               echo '<span class="pr">PR</span>'; }; 
             ?>

          </div>
      </a>
      <!--//ここまでサムネイルの取得-->

<?php endwhile; echo '</div>'; endif; wp_reset_postdata(); ?>
<!--//スライダーここまで-->

少し分解します。

<?php 
 $args = array( 
   'post_type' => 'column',
    'posts_per_page' => -1,
  ); 

  $query = new WP_Query( $args );
   if( $query->have_posts() ):
      echo '<div class="slick01">';
   while( $query->have_posts() ) : $query->the_post(); 
  ?> 

上記は、WP_Queryを使ったサブループのコードです。

slickで表示させたいカスタム投稿のスラッグ ‘column’ (functions.phpで設定したもの)を取得。

WP_Query以下は、スラッグ ‘column’の投稿がある場合は<div class="slick01">を表示させる意。

サブループについては以下のサイトがとてもわかりやすいです!ぜひ!

<!--サムネイルの取得--> 
      <a href="<?php the_permalink(); ?>">
         <div class="img" style="background-image: url(<?php echo get_the_post_thumbnail_url(); ?>);">
     
             <!--カスタムフィールドにチェックが入った場合-->
             <?php if(get_field('pr')){ 
               echo '<span class="pr">PR</span>'; }; 
             ?>

         </div>
      </a>
<!--//ここまでサムネイルの取得--> 

次に、スライドの画像です。

スライドさせたいサムネイル画像は、背景画像として取得します。

また、投稿画面のカスタムフィールドにチェックが入ったら、サムネイルの右上に「PR」の文字を出すようにしたいので、以下のコードを記述します。
<?php if(get_field('pr')){
echo '<span class="pr">PR</span>'; };
?>

こちらは、前回のブログ記事でアウトプットしてあります。

JS

最初に書いたSlickのプラグインとjQueryを導入しておきます。

その上で、今回は以下を記述しました。

jQuery(function () {
  //Topスライダー(slick使用)
  jQuery(".slick01").slick({
    autoplay: true,
    dots: true,
    autoplaySpeed: 5000,
    speed: 300,
    centerMode: true,
    infinite: true,
    centerPadding: "20%",
    dotsClass: "slide-dots",
    responsive: [{
      breakpoint: 1081,
       settings: {
       slidesToShow: 1,
       slidesToScroll: 1,
       arrows: false,
       centerPadding: 0,
       },
     },
   ],
  });
});
ノーマルのスライドは、jQuery(“.slick01″).slick();だけで動きます。

Slickの詳しいプロパティについては、以下を参考にしました。

CSS

.img {
position: relative;
width: 100%;
height: 0;
padding-bottom: 45%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.pr {
position: absolute;
top: 0;
right: 0;
width: 44px;
font-size: 14px;
color: #fff;
text-align: center;
background-color: #ccc;
font-family: "Montserrat", sans-serif;
font-weight: 500;
padding: 3px 0;
}

関係のあるところだけ抜粋しました。

imgクラスをつけた背景画像にposition:relative
prクラスをつけた「PR」の文字にposition:absolute

とすることで、スライド画像にPRの文字を表示させることができます。

できました!

あとがき

のろのろペースですが、WordPress案件のアウトプットをコツコツ積み上げます!

今日は以上です。

★Thanks:師匠「もりけんさん」(@terrace_tec)

もりけんさんのHPはこちら