今日は、お仕事で実装した「カスタムフィールドの内容を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,
},
},
],
});
});
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はこちら
★最初のクライアントのあきらさん(@akira0727x)がYouTubeをはじめました!
Web制作で結果を出すためのノウハウを公開されています✨