ブログ画面 ブログ画面

BLOG

ブログ

カラーミーにWordPressのブログ最新記事をRSSを使わずに表示する方法

カラーミーショップでのECサイト構築と、WordPressでのブログサイト構築のご依頼をいただいたお客様から、カラーミーショップのトップページにWordPressで投稿したブログ記事を表示させたいというご要望をいただきました。

ググったらけっこう情報がでてきたので、気軽に引き受けさせていただきましたが、これが大ハマりする事態に・・・

ググってでてくるカラーミーにWordPressのブログ記事を表示させる方法の情報のほぼ全てがRSSを活用した情報。

おそらくググってでてくる情報のものは全て試し、2日間あーでもない、こーでもないと試行錯誤しながら何をどうやっても一切表示されず。

そこでRSSを使った方法はあきらめ、別な方法を模索。

そこで見つけたのがREST APIを使った方法。これ一発で解決しました。

プログラミングはこの悪戦苦闘の末に正解に辿り着いた瞬間がなんとも言えず気持ちいい 笑

今回は備忘録と、同じ壁にぶつかった方に向けて、情報を共有いたします。

前提条件

今回はカラーミーショップのサービス「カラーミーWPオプション」を使ってWordPressのアカウントを作成しました。

そのため、URLが「https://〇〇(ドメイン名).com/apps/note」のように、末尾に「apps/note」がついています。

カラーミーWPオプションの詳細はこちらのページをご参照ください。

サンプルコード

<script>
$(document).ready(function() {
    $.ajax({
        url: 'https://〇〇(ドメイン名).com/apps/note/wp-json/wp/v2/posts?per_page=4', ←表示する記事数を入れる
        method: 'GET',
        dataType: 'json',
        success: function(data) {
            data.forEach(function(post) {
                var featuredImage = post.featured_image_src ? post.featured_image_src : 'path/to/default/image.jpg';
                $("#blog-list").append('<li class="blog-card"><a href="' + post.link + '"><img loading="lazy" src="' + featuredImage + '" alt="' + post.title.rendered + '" class="blog-img"><div class="blog-date">' + new Date(post.date).toLocaleDateString() + '</div><div class="blog-title">' + post.title.rendered + '</div></a></li>');
            });
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log('Error: ' + textStatus);
        }
    });
});
</script>

HTML/CSSは以下の通りです。こちらは状況に合わせて調整してください。

<section id="blog" class="container">
		<div class="blog-contents">
			<h2 class="title1"><span class="en">BLOG</span><span class="ja">ブログ</span></h2>
			<ul id="blog-list"></ul>
			<div class="btn-block">
		 <a class="btn-transparent"  href="https://〇〇.com/apps/note/">ブログ一覧を見る</a>
		 </div>
		</div>
	</section>
#blog-list {
  display: flex;
  margin-bottom: 30px;
}
@media screen and (max-width: 767px) {
#blog-list {
  flex-direction: column;
 }
}

#blog-list li {
  width: calc(95% / 4);
  margin: 0 15px;
}
@media screen and (max-width: 767px) {
#blog-list li {
 width: 90%;
  margin-bottom: 20px;
 }
}

@media screen and (max-width: 767px) {
#blog-list .blog-card a {
  display: flex;
  align-items: center;
 }
}

#blog-list li a img{
  border-radius: 20px;
}
@media screen and (max-width: 767px) {
#blog-list li a img {
  width: 55%;
 }
}

@media screen and (max-width: 767px) {
  .blog-meta {
  margin-left: 10px;
  }
}

.blog-date {
  margin-top: 5px;
}

.blog-title {
  margin-top: 5px;
 font-weight: 600;
}

おわりに

カラーミーショップでのショップ構築は何度も経験がありますが、今回のWordPressのブログ記事表示はおそらく過去一手こずりました。

今回の記事が同じ壁にぶつかった方への参考になっていただけると嬉しいです。

それではまた!

CONTACT

お問い合わせ

制作のご相談・お見積り(無料)を受け付けています。

何をどうしたらよいかわからない、など初期のご相談でももちろん大丈夫です。
お見積りは無料です。お気軽にご連絡ください。