Zenn
📚

カラーミーショップにWordPressの投稿記事を出力し、Sliderのレイアウトに入れ込む

2022/10/17に公開
jQuery
#
カラーミーショップ
#
サイト製作
tech

やりたいこと

  1. カラーミーショップにWordpressの投稿記事を自動で出力されるようにしたい
  2. 記事のサムネイルとタイトルを表示して1つのカードとし、slickでスライダーにしたい

WP REST APIで記事を取得してみた
 の記事を参考にさせて頂きました。

手順

slickを利用する箇所にクラスを記載

<div class="slick-slider">
	<div class="wp-post-list">					
	<!-- ここに記事が投稿記事がスライド形式で出力されるようにする -->
	</div>
</div>

scriptの作成・記載

WP REST APIを利用して投稿のデータを取得する。
上記で記載したWP REST APIで記事を取得してみた
の記事から今回利用しないデータ(記事の日付など)を削除し、クラス名を変更する。
できたコード

$(function(){
    var post = {
        site_url: 'https://seno-production.com',  // 記事を取得してくるwpのサイトurlを記載します
        num: 5, // 取得する投稿記事の件数
    };
    api = post.site_url + "/wp-json/wp/v2/posts?per_page="+post.num+"&_embed";
        
    $.getJSON( api, function(results) {
        $.each(results, function(i, item) {
            var title = item.title.rendered;
            var link = item.link;
            var thum = item._embedded["wp:featuredmedia"][0].media_details.sizes.medium.source_url;
            $('.wp-post-list').append("<div class='wp-post-item'><div class='wp-post-item-wrap'><a class='wp-post-link' href='" + link + "'><img src='" + thum + "'></a></div><p class='wp-post-title'>" + title + "</p></div>");
        });
        $(".slick-slider").slick({
            autoplay: false,
            autoplaySpeed: 4000,
            arrows: true,
            dots: false,
            infinite: true,
            slidesToShow: 3,
            slidesToScroll: 1,
            responsive: [
                {
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 1,
                    }
                }
            ]
        });
    });
});

上記のscriptをカラーミーショップの設置したいページに記載します。

ハマった所

slickに関する下記コードはappendの下ではなく、違う所に記載していました。

$(".slick-slider").slick({
    autoplay: false,
    autoplaySpeed: 4000,
    arrows: true,
    dots: false,
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    responsive: [
	{
	    breakpoint: 768,
	    settings: {
		slidesToShow: 2,
		slidesToScroll: 1,
	    }
	}
    ]
});

その結果、先にslickが動いてしまうようで記事の情報は出力されるがsliderにならない状態となっていました。
slickのレスポンシブ設定をしている事から、画面幅を変更するとslickのレイアウトが適応されるのですが、画面にアクセスした時やリロードするだけではスライドにならずという状態。
appendが終わって全てのhtmlが表示された後にslickが動けば良いと仮説を立てて調べた結果、
jqueryの $.whenとdoneに行きつきました。
下記のように書いてみたのですが特に変わらず。

$.when(
    // ブログ記事を出力するコード
).done(function(){
    // slickの処理
});

そもそもslickの読み込みコードの位置を変えたり、ブログの出力コードを$(window).load()の中に記載したりといろいろ試し、最終的にあれslickのコード違う所に書く必要ないのではと思い至り今回のコードの書き方になりました。

所管

WP REST APIを初めて調べたのですが、便利すぎて驚きました。
色々な所でwpのデータが使えるようになるのは凄い。API便利。

APIを叩いて取得したデータを実際に利用したいと考えていたので丁度良い機会でした。
ただ、参考にさせて頂いたサイトのコードに、slickの設定を追加しただけなので、コードが本当にこれで最善の書き方になっているかは分からない..

Discussion