🤖

worppress API カスタムフィールドを、SSGサイトで表示する

5 min read

概要:

wordpress API + Next.jsに、WP カスタムフィールドを表示する内容となります。

  • WPプラグインは、Advanced Custom Fields を追加しました
  • 前のWP APIに、カスタムフィールドの項目を追加しています。

環境

  • next.js: 10.1.3
  • node 14
  • wordpress 5.7.1

関連

https://wpdocs.osdn.jp/関数リファレンス/get_post_custom

前の参考のページ

https://zenn.dev/knaka0209/articles/2501be7ad65d29

参考のコード

追加した api

https://github.com/kuc-arc-f/wp_api

エンドポイント等

  • /api/post_cf.php

  • /api/postone_cf.php


curl の参考

  • post取得, CF対応
curl http://localhost/api/post_cf.php
  • post 1件取得 , CF対応
curl http://localhost/api/postone_cf.php?id=1211

準備

  • プラグイン追加、Advanced Custom Fields を追加します

  • カスタムフィールドの設定

管理画面 >カスタムフィールド で、フィールドグループを追加し

  • 項目の追加

例で、cf_price (タイプ=数値) を追加

  • 投稿>新規で、データを追加しておく

  • Next.js のログ, post_cf.php

上記API を、next.jsから呼び出す。実行ログ

post_customに、 CFデータを追加しています

追加した、cf_priceが出力できました。

[
  {
    ID: 160,
    post_title: 'Book-3',
    post_content: '<!-- wp:paragraph -->\n<p>Book-3-bdy</p>\n<!-- /wp:paragraph -->',
    post_date: '2021年4月26日',
    category_id: 1,
    category_name: '未分類',
    post_custom: {
      _edit_lock: [Array],
      _edit_last: [Array],
      _encloseme: [Array],
      cf_price: [Array],
      _cf_price: [Array],
      cf_col_2: [Array],
      _cf_col_2: [Array]
    }
  }
]

参考のコード

  • index.js

pages/index.js

https://gist.github.com/kuc-arc-f/0f03ef7167922ddfde9568a014708791

index.js
function Page(data) {
    var items = data.blogs
    var page_items = data.page_items
    var category_items = data.category_items
    var paginateDisp = data.display
//console.log( items )
    return (
    <Layout>
      <Head><title key="title">{data.site_name}</title></Head>      
      <TopHeadBox site_name={data.site_name} info_text={data.info_text} />
      <div className="body_main_wrap">
        <div className="container">
          <div className="btn_disp_ara_wrap mt-0">
            <div className="pages_wrap">
              <div className="row conte mt-0 mb-2">
              <div className="col-sm-12">
                <h2 className="h4_td_title mt-2" >Pages</h2>
                <div className="page_btn_wrap mb-0">
                {page_items.map((item, index) => {
    // console.log(item.show_id ,item.created_at )
                return (<PagesRow id={item.ID} key={index} 
                  title={item.post_title} />) 
                })}
                </div>
              </div>
              </div>
            </div>
            <div className="category_wrap">
            <div className="row conte mt-2 mb-4">
                <div className="col-sm-12">
                  <h2 className="h4_td_title mt-2" >Category</h2>
                  <div className="category_btn_wrap mb-0">
                  {category_items.map((item, index) => {
  // console.log(item )
                    return (<CategoryRow id={item.ID} key={index} 
                      name={item.name} />
                    )
                  })}                    
                  </div>
                </div>
            </div>
            </div>          
          </div>
          <div className="body_wrap">
            <div id="post_items_box" className="row conte mt-2 mb-4">
              <div className="col-sm-12">
                <div id="div_news">
                  <h2 className="h4_td_title mt-2 mb-2" >Post</h2>
                </div>
              </div>
              {items.map((item, index) => {
                var cf_price = ""
                if(typeof item.post_custom.cf_price != 'undefined'){
                  cf_price = item.post_custom.cf_price[0]
// console.log(item.post_custom)
                }
                return (<IndexRow key={index}
                  id={item.ID} title={item.post_title} cf_price={cf_price}
                  date={item.post_date} category_name={item.category_name} />       
                )
              })}
              <hr />
              <PagingBox page="1" paginateDisp={paginateDisp} />
            </div>
          </div>          
        </div>
      </div>
    </Layout>
    )
  }
export const getStaticProps = async context => {
  var url = process.env.BASE_URL+`/api/post_cf.php?page=1`
  const res = await fetch( url );
  var blogs = await res.json();
  url = process.env.BASE_URL+`/api/pages.php`
  const resPages = await fetch( url );
  var pages = await resPages.json();
  url = process.env.BASE_URL+`/api/category.php`
  const resCat = await fetch( url );
  var categories = await resCat.json();
//console.log(categories)
  LibPagenate.init()
  var display = LibPagenate.is_paging_display(blogs.length)    
  return {
    props : {
      blogs: blogs,
      page_items: pages,
      category_items: categories,
      site_name : process.env.MY_SITE_NAME,
      info_text : "Sample CMSの関連記事を公開予定しております。",        
      display: display
    }
  };
}
export default Page


デモサイトのURL

https://cms-kuc-jamstack-ex9.netlify.app
....

Discussion

ログインするとコメントできます