カラーミーに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のブログ記事表示はおそらく過去一手こずりました。
今回の記事が同じ壁にぶつかった方への参考になっていただけると嬉しいです。
それではまた！
