JavaScript / TypeScript / jQuery

【MakeShop】WordPress連携の際に記事情報をMakeShop側に表示する

カレー

MakeShopにてWordPress連携オプションを利用した際に
あれこれしたときのメモ

MakeShopにWordPress連携

MakeShopではWordPress連携オプションがある

例えばMakeShopのURLがhttp://shopsample.comだった場合、
http://shopsample.com/blogにWordPressの記事が表示される

これによりWordPressの記事が同一ドメインになるので、SEOにも強いメリットがある

MakeShopのショップ画面にWordPressの記事を表示

連携したWordPressの記事一覧などを、
/blogではなくMakeShopサイト上で表示したい場合

  • 下記ソースをMakeShop側の好きな場所に配置する
    モジュール化してあげると色んな画面から簡単に呼び出せるからおすすめ
<!-- ここにWordPressの記事を表示 -->
<div class="js-posts"></div>

<!-- WordPressの記事取得JS -->
<script src="//code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script type="text/javascript">
  const post = {
    // WordPressサイトURL
    site_url: '//{MakeShopのURL}/blog', 
    // 表示件数
    num: 10,
  };
  const api = post.site_url + "?rest_route=/wp/v2/posts&_embed&per_page="+post.num+"&_embed";

  $.getJSON( api, function(results) {
    $.each(results, function(i, item) {
      // 各項目を変数へ格納
      const title = item.title.rendered;
      let content = item.content.rendered.replace(/<[^>]+>/g, '')
      if(content.length > 150) content = content.substring(0,150) + "...";
      const link = item.link;
      const thum = item._embedded["wp:featuredmedia"][0].media_details.sizes.medium.source_url;

      //指定のクラスへ投稿を追加
      $('.js-posts').append(
       `<div class="post-item">
          <img src="${thum}" alt="${title}"/>
          <a href="${link}">${title}</a>
          <div>${content}</div>
          <a href="${link}">もっと読む</a>
        </div>`
      )
    });
  });
</script>

site_url: '//{MakeShopのURL}/blog',の部分は自身のURLに応じて書き換える

例えばMakeShopのURLが sampleshop.com の場合は
site_url: '//sampleshop.com/blog',
になる

\ 案件のご依頼・ご相談はこちらから /