當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

pacf和acf_如何通过Wordpress API，ACF和Express.js使Wordpress更加令人兴奋

發(fā)布時(shí)間：2023/11/29 编程问答 40 豆豆

生活随笔收集整理的這篇文章主要介紹了 pacf和acf_如何通过Wordpress API，ACF和Express.js使Wordpress更加令人兴奋小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

pacf和acf

by Tyler Jackson

泰勒·杰克遜(Tyler Jackson)

如何通過Wordpress API，ACF和Express.js使Wordpress更加令人興奮 (How to make Wordpress more exciting with the Wordpress API, ACF, & Express.js)

I’ve been working with Wordpress since it’s proliferation as a content management system. I hardly get excited when clients or co-workers mention it anymore. I’ve “found the light” in more robust frameworks and learned much more about the different parts of custom web applications.

我一直在與Wordpress合作，因?yàn)樗呀?jīng)發(fā)展成為內(nèi)容管理系統(tǒng)。當(dāng)客戶或同事再提及它時(shí)，我?guī)缀醪粫?huì)感到興奮。我已經(jīng)在更強(qiáng)大的框架中“找到了亮點(diǎn)”，并且了解了更多有關(guān)自定義Web應(yīng)用程序不同部分的知識。

So, in an effort to rejuvenate my passion for Wordpress, I’ve started looking at different ways to implement the framework. One of those ways is to separate the front-end from the back-end and avoid some of the pain points of using the Wordpress Template Tags and theming system. Let’s take a look.

因此，為了振興對Wordpress的熱情，我開始尋找實(shí)現(xiàn)框架的不同方法。其中一種方法是將前端與后端分開，并避免使用Wordpress模板標(biāo)簽和主題系統(tǒng)的某些痛點(diǎn)。讓我們來看看。

整體與分布式應(yīng)用 (Monolithic vs. Distributed Apps)

Wordpress is a monolithic framework, meaning the different parts of the framework (database, file storage, presentation structure & asset files, business logic files) are all packaged together. This is a large part of why Wordpress is so easy to get up and running. Install MAMP, copy over the latest Wordpress files, create a database, and change the wp-config.php file. Good to go.

WordPress是一個(gè)整體框架，意味著框架的不同部分(數(shù)據(jù)庫，文件存儲，表示結(jié)構(gòu)和資產(chǎn)文件，業(yè)務(wù)邏輯文件)都打包在一起。這就是為什么Wordpress如此容易啟動(dòng)和運(yùn)行的很大一部分。安裝MAMP，復(fù)制最新的Wordpress文件，創(chuàng)建數(shù)據(jù)庫，然后更改wp-config.php文件。好去。

We are going to go against the monolithic convention and break this Wordpress site up into two different parts: front-end and back-end, presentation and administration.

我們將違反整體慣例，并將此Wordpress網(wǎng)站分為兩個(gè)不同部分：前端和后端，演示和管理。

We are going to use Wordpress for the data administration of our app and leverage a plugin to help with the creation and management of attributes (fields) for our custom post type. For the presentation side of things, we are going to forego a theme entirely and consume API endpoints from an Express.js application.

我們將使用Wordpress進(jìn)行應(yīng)用程序的數(shù)據(jù)管理，并利用插件來幫助創(chuàng)建和管理自定義帖子類型的屬性(字段)。對于表示方面，我們將完全放棄主題，并使用Express.js應(yīng)用程序中的API端點(diǎn)。

例 (Example)

In this example, we are going to build a simple product listing. The idea is that you already have a website powered by Wordpress, and would like to manage a list of products for sale through the same interface. But you want to create a completely different website for the store.

在此示例中，我們將構(gòu)建一個(gè)簡單的產(chǎn)品清單。這個(gè)想法是，您已經(jīng)有一個(gè)由Wordpress支持的網(wǎng)站，并且希望通過相同的界面來管理要出售的產(chǎn)品列表。但是您想為商店創(chuàng)建一個(gè)完全不同的網(wǎng)站。

WordPress API (Wordpress API)

Since version 4.7, Wordpress is automatically exposing your published posts (and other data) via its REST API, presented in a JSON format. If you’ve developed a website using Wordpress 4.7+, simply add /wp-json to the root URL and marvel at the wall of text that’s returned.

從4.7版開始，Wordpress將通過其REST API自動(dòng)以JSON格式顯示您發(fā)布的帖子(和其他數(shù)據(jù))。如果您使用Wordpress 4.7+開發(fā)了一個(gè)網(wǎng)站，只需將/wp-json添加到根URL并驚嘆于返回的文本墻。

With this API automatically integrated into the Wordpress installation, a lot of the work of a distributed application is already done for us. API creation can be a roadblock when getting started with this new way of thinking about applications. Wordpress has created a fantastic, basic API for consuming our data any way we prefer.

通過將此API自動(dòng)集成到Wordpress安裝中，我們已經(jīng)為分布式應(yīng)用程序完成了許多工作。開始使用這種新的應(yīng)用程序思考方式時(shí)，API的創(chuàng)建可能會(huì)成為一個(gè)障礙。 WordPress已創(chuàng)建了一個(gè)出色的基本API，可以按我們喜歡的任何方式使用我們的數(shù)據(jù)。

At this point, I would only be cluttering the internet by writing a tutorial on how to locally install Wordpress. So instead, I’m going to point you towards a trusted source on the subject.

在這一點(diǎn)上，我只會(huì)寫一篇關(guān)于如何本地安裝Wordpress的教??程來使互聯(lián)網(wǎng)混亂。因此，我將帶您前往該主題的可信賴來源。

No matter what path you take to get a Wordpress instance up and running, you should be able to access it via http://localhost or some other URL. Once we have a URL, let’s do a quick test to make sure we have data coming back. I prefer a tool like Postman, but we’ll keep it simple and visit the following URL in our browser (changing the URL accordingly, of course).

無論您采用什么方式啟動(dòng)和運(yùn)行Wordpress實(shí)例，都應(yīng)該能夠通過http://localhost或其他URL對其進(jìn)行訪問。有了URL后，讓我們進(jìn)行快速測試以確保我們有返回的數(shù)據(jù)。我更喜歡Postman之類的工具，但我們將使其保持簡單并在瀏覽器中訪問以下URL(當(dāng)然，相應(yīng)地更改URL)。

http://localhost/mysite/wp-json

This should return a list of all the available endpoints for your Wordpress installation’s REST API.

這應(yīng)該返回您的Wordpress安裝的REST API的所有可用端點(diǎn)的列表。

But for real, Postman…

但實(shí)際上，郵遞員…

PostmanPostman is the only complete API development environment, for API developers, used by more than 5 million developers…www.getpostman.com

Postman Postman是API開發(fā)人員的唯一完整的API開發(fā)環(huán)境，已有超過500萬開發(fā)人員使用。

自定義帖子類型 (Custom Post Types)

Since Wordpress limits us to two data types (Posts & Pages) we are going to need to create a custom post type for our Products. This will create a clear separation from the Product posts and any other posts we have.

由于Wordpress將我們限制為兩種數(shù)據(jù)類型(“帖子和頁面”)，因此我們需要為“產(chǎn)品”創(chuàng)建自定義帖子類型。這將與產(chǎn)品帖子以及我們擁有的任何其他帖子明確區(qū)分開。

There are a number of different ways to create custom post types. Here, we are going to create a single file Wordpress Plugin to register the Products post type.

創(chuàng)建自定義帖子類型的方法有多種。在這里，我們將創(chuàng)建一個(gè)文件Wordpress Plugin來注冊Products帖子類型。

<?php/*Plugin Name: Product Custom Post Type*/function create_product_cpt() { $labels = array( 'name' => __( 'Products', 'Post Type General Name', 'products' ), 'singular_name' => __( 'Product', 'Post Type Singular Name', 'products' ), 'menu_name' => __( 'Products', 'products' ), 'name_admin_bar' => __( 'Product', 'products' ), 'archives' => __( 'Product Archives', 'products' ), 'attributes' => __( 'Product Attributes', 'products' ), 'parent_item_colon' => __( 'Parent Product:', 'products' ), 'all_items' => __( 'All Products', 'products' ), 'add_new_item' => __( 'Add New Product', 'products' ), 'add_new' => __( 'Add New', 'products' ), 'new_item' => __( 'New Product', 'products' ), 'edit_item' => __( 'Edit Product', 'products' ), 'update_item' => __( 'Update Product', 'products' ), 'view_item' => __( 'View Product', 'products' ), 'view_items' => __( 'View Products', 'products' ), 'search_items' => __( 'Search Product', 'products' ), 'not_found' => __( 'Not found', 'products' ), 'not_found_in_trash' => __( 'Not found in Trash', 'products' ), 'featured_image' => __( 'Featured Image', 'products' ), 'set_featured_image' => __( 'Set featured image', 'products' ), 'remove_featured_image' => __( 'Remove featured image', 'products' ), 'use_featured_image' => __( 'Use as featured image', 'products' ), 'insert_into_item' => __( 'Insert into Product', 'products' ), 'uploaded_to_this_item' => __( 'Uploaded to this Product', 'products' ), 'items_list' => __( 'Products list', 'products' ), 'items_list_navigation' => __( 'Products list navigation', 'products' ), 'filter_items_list' => __( 'Filter Products list', 'products' ), );$args = array( 'label' => __( 'Product', 'products' ), 'description' => __( '', 'products' ), 'labels' => $labels, 'menu_icon' => 'dashicons-products', 'supports' => array('title', 'editor', 'excerpt', 'thumbnail'), 'taxonomies' => array('products'), 'public' => true, 'show_ui' => true, 'show_in_menu' => true, 'menu_position' => 5, 'show_in_admin_bar' => true, 'show_in_nav_menus' => true, 'can_export' => true, 'has_archive' => true, 'hierarchical' => false, 'exclude_from_search' => false, 'show_in_rest' => true, 'rest_base' => 'products', 'publicly_queryable' => true, 'capability_type' => 'post', );register_post_type( "product", $args );}%>

While long-winded, this is pretty standard code for creating a custom post type in Wordpress. Two things to note in our $args array:

盡管過程繁瑣，但這是在Wordpress中創(chuàng)建自定義帖子類型的非常標(biāo)準(zhǔn)的代碼。 $args數(shù)組中需要注意兩件事：

'show_in_rest' => true makes the custom post type accessible via the REST API
'show_in_rest' => t rue可以通過REST API訪問自定義帖子類型
'rest_base' => 'products' sets the name we use to access Products via the REST API endpoints
'rest_base' => 'produc ts'設(shè)置我們用于通過REST API端點(diǎn)訪問產(chǎn)品的名稱

Once you have your custom post type showing in the Wordpress admin, let’s make sure we can get a response via the API (you’ll need to create a product so it doesn’t return empty).

一旦您的自定義帖子類型顯示在Wordpress管理員中，請確保我們可以通過API得到響應(yīng)(您需要?jiǎng)?chuàng)建一個(gè)產(chǎn)品，因此它不會(huì)返回空)。

http://localhost/mysite/wp-json/wp/v2/products

And here’s what we get…

這就是我們得到的...

Sweet!

甜！

高級自定義字段 (Advanced Custom Fields)

I try to limit my usage of plugins as much as possible, but I’ll make an exception for Advanced Custom Fields (ACF). ACF takes all the work out of creating and managing custom fields for post types. Head to your Plugins page, search for Advanced Custom Fields then click “Install” & “Activate”. All done.

我嘗試盡可能限制插件的使用，但是我將對“高級自定義字段(ACF)”作為例外。 ACF將所有工作排除在為帖子類型創(chuàng)建和管理自定義字段之外。轉(zhuǎn)到“插件”頁面，搜索“高級自定義字段”，然后單擊“安裝”和“激活”。全做完了。

It would also be redundant for me to walk you through creating a Field Group using Advanced Custom Fields, so I’ll let their documentation walk you through it if you don’t know how.

對于我來說，引導(dǎo)您使用“高級自定義字段”創(chuàng)建字段組也將是多余的，因此，如果您不知道如何操作，我將讓其文檔指導(dǎo)您完成該過程。

Let’s create a Field Group called “Product Meta” and add fields for “Normal Price”, “Discount Price” and “Inventory Quantity” and position them in the sidebar area.

讓我們創(chuàng)建一個(gè)名為“產(chǎn)品元”的字段組，并為“正常價(jià)格”，“折扣價(jià)”和“庫存數(shù)量”添加字段并將它們放置在側(cè)邊欄區(qū)域中。

Good.

好。

Now comes the tricky part. The fields we just created through ACF aren’t exposed via the REST API by default. We will have to leverage add_filter and rest_prepare_{$post_type} to add the custom field values to the JSON response. Here, I’ve simply added this bit of code to the bottom of our custom post type plugin file for the sake of brevity.

現(xiàn)在是棘手的部分。默認(rèn)情況下，我們通過ACF創(chuàng)建的字段不會(huì)通過REST API公開。我們將不得不利用add_filter和rest_prepare_{$post_type}將自定義字段值添加到JSON響應(yīng)中。在這里，為了簡潔起見，我只是將這段代碼添加到了自定義帖子類型插件文件的底部。

function my_rest_prepare_post($data, $post, $request) { $_data = $data->data; $fields = get_fields($post->ID);foreach ($fields as $key => $value){ $_data[$key] = get_field($key, $post->ID); }$data->data = $_data; return $data;}add_filter("rest_prepare_product", 'my_rest_prepare_post', 10, 3);

Thanks to Cody Sand for the tidbit above.

感謝Cody Sand的上述建議。

Express.js (Express.js)

Our Express.js app will provide us a framework for consuming the Wordpress API and presenting products in our store website. Since we are simply consuming an API, we could use any framework of our choosing. Vue.js. Angular. Backbone. React. Rails. Django. Middleman. Jekyll. The front-end world is your oyster.

我們的Express.js應(yīng)用將為我們提供一個(gè)使用Wordpress API并在我們的商店網(wǎng)站中展示產(chǎn)品的框架。由于我們只是在使用API??，因此可以使用我們選擇的任何框架。 Vue.js。有角度的。骨干。 React 滑軌。 Django的。中間人。杰基爾前端世界就是您的牡蠣。

I’ll assume you already have Node.js installed. If you don’t, it’s dead simple. Let’s start a new Express.js app.

我假設(shè)您已經(jīng)安裝了Node.js。如果不這樣做，那就太簡單了。讓我們啟動(dòng)一個(gè)新的Express.js應(yīng)用程序。

npm install -g express-generator nodemonexpress --css=sass --view=jade --git mystorecd mystorenpm install --save request request-promise && npm install

Here, we are using the Express Generator package to generate a skeleton for our Express app. We’ll also be using SASS for stylesheets and Jade Template Engine. Choose whatever you’re comfortable with. Nodemon will restart our app automatically for us when a file changes, and the Request library will help us make HTTP requests to the Wordpress API. Let’s serve up our Express app:

在這里，我們使用Express Generator軟件包為Express應(yīng)用程序生成框架。我們還將對樣式表和Jade模板引擎使用SASS。選擇您喜歡的任何東西。文件更改時(shí)，Nodemon將自動(dòng)為我們重新啟動(dòng)我們的應(yīng)用程序，并且請求庫將幫助我們向Wordpress API發(fā)出HTTP請求。讓我們提供Express應(yīng)用程序：

nodemon

Now, when we pull up http://localhost:3000 we should see our Express app running.

現(xiàn)在，當(dāng)我們拉起http://localhost:3000我們應(yīng)該看到Express應(yīng)用程序正在運(yùn)行。

Alright, now let’s pull in our products.

好吧，現(xiàn)在讓我們引入我們的產(chǎn)品。

In our index.js route file, let’s include the Request-Promise library then make a call to the products endpoint within our root route (/).

在我們的index.js路由文件中，讓我們包括Request-Promise庫，然后在根路由( / )中調(diào)用products端點(diǎn)。

If the request is successful, then we render our index view. If there’s an error with the request, we simply log it. Now, the view…

如果請求成功，則我們呈現(xiàn)index視圖。如果請求有錯(cuò)誤，我們只需將其記錄下來。現(xiàn)在，風(fēng)景…

extends layoutblock content h1 MyStore ul each product in products li product.title.rendered product.price

Using Jade, we will simply list the products out. Ok, let’s check out our store site.

使用Jade，我們將簡單列出產(chǎn)品。好的，讓我們看看我們的商店網(wǎng)站。

? There’s your prize. I’ll leave it up to you to continue down the Express road and figure out how to get product listing and index pages working.

？有你的獎(jiǎng)品。我將由您決定繼續(xù)沿Express道路前進(jìn)，并弄清楚如何使產(chǎn)品列表和索引頁面正常工作。

超越 (Beyond)

This is a fairly simple example of how distributed apps work using Wordpress. We could have continued to separate the app into even more parts by integrating a CDN for media storage or moving the database to a separate server. We also didn’t cover authentication for the Wordpress API which is something you would absolutely need in production.

這是一個(gè)使用Wordpress的分布式應(yīng)用程序工作方式的非常簡單的示例。通過集成用于媒體存儲的CDN或?qū)?shù)據(jù)庫移至單獨(dú)的服務(wù)器，我們可以繼續(xù)將應(yīng)用程序分成更多部分。我們也沒有介紹Wordpress API的身份驗(yàn)證，這是您在生產(chǎn)中絕對需要的。

From here, you could implement Stripe or another payment processor and have a fully functional store site. I hope this has inspired some of you to leverage Wordpress in different ways and continue using one of the most ubiquitous CMS solutions out there. Happy coding!

從這里，您可以實(shí)現(xiàn)Stripe或其他付款處理器，并擁有功能齊全的商店站點(diǎn)。我希望這啟發(fā)了你們中的一些人以不同的方式利用Wordpress，并繼續(xù)使用其中一種最普遍的CMS解決方案。編碼愉快！

翻譯自: https://www.freecodecamp.org/news/how-to-make-wordpress-more-exciting-with-the-wordpress-api-acf-express-js-9dc33b8fb133/