🤖
worppress API カスタムフィールドを、SSGサイトで表示する
概要:
wordpress API + Next.jsに、WP カスタムフィールドを表示する内容となります。
- WPプラグインは、Advanced Custom Fields を追加しました
- 前のWP APIに、カスタムフィールドの項目を追加しています。
環境
- next.js: 10.1.3
- node 14
- wordpress 5.7.1
関連
前の参考のページ
参考のコード
追加した api
エンドポイント等
-
/api/post_cf.php
-
/api/postone_cf.php
curl の参考
- post取得, CF対応
curl http://localhost/api/post_cf.php
- post １件取得 , 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
Discussion