使用 Nuxt 和 Netlify 轻松搭建无头 WordPress
第一部分 - 设置 WordPress
第二部分涵盖了 Vue、Nuxt 和少量 Tailwind。
第三部分介绍了如何使用 Netlify 进行部署，以及如何向我们的 CMS 添加构建钩子。
最近，我受命为AIGA首届中西部设计周搭建活动网站。
去年，我用Gatsby和一些Markdown 文件搭建了 AIGA 路易斯维尔设计周的网站。当时，网站内容实际上只有我自己或其他开发人员才能编辑，这在当时来说已经足够了。（我在这里和这里写了两篇关于这段经历的文章。）
然而，今年有来自 4 个不同城市分会的成员参与其中，他们需要能够轻松地添加和编辑内容，因此需要某种内容管理系统 (CMS)。
我所在的公司Relay Design Co.也作为创意赞助商参与其中。由于 Relay 使用的技术栈同时包含Vue JS 和 WordPress，我选择尝试使用 WordPress 作为无头 CMS ，并使用Vue 的静态站点生成器Nuxt构建前端。
本地 WordPress
当然，第一步是在本地搭建一个 WordPress 网站，这样你就可以进行开发了。我个人喜欢用Flywheel 的 Local插件。如果你还没试过，我强烈建议你试试，因为整个过程只需要点击三次，输入三个文本框即可。
在这个演示中，我将网站域名分配给headless，它将通过以下方式访问headless.local：。根据您使用的方式，它可能是localhost:####：。
无头主题
WordPress 网站启动并运行后，导航到/wp-content/themes/并创建一个名为headlesstheme（或任何你喜欢的名字）的新文件夹。
在该文件夹内创建以下文件：
functions.php
<?php
if (!defined('ABSPATH')) {
exit;
} // Exit if accessed directly
style.css
/*
Theme Name: Headless Theme
Theme URI: https://github.com/username/reponame
Author: Your Name
Author URI: https://yoursite.com/
Description: headless theme for using WP as a REST API only
Version: 0.1.0
Requires at least: 4.7
Requires PHP: 5.6
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: headlesstheme
*/
index.php
<script type="text/javascript">
window.location = 'https://yourfrontend.com';
</script>
如果您不希望访问此 WordPress 站点的 URL重定向到您的前端应用程序，请将index.php 空白处留空。
为了让你的主题看起来更正式，请在新主题文件夹中添加一个文件——一个 800x600 像素的 PNG 图片文件——并将其命名为“screenshot.png主题”。这张图片将显示在控制面板的“主题”部分。
此时，您可以激活您的新主题了。
第三方插件
接下来，我们需要安装一些插件，以便更方便地使用 WordPress 作为内容管理系统。
经典编辑器
禁用新的 Gutenberg 区块编辑器。
高级自定义字段
我实在不明白为什么这个插件至今还没被集成到 WordPress 核心功能里，但正如其名，它可以让用户在文章和页面中添加自定义字段。如果没有它，我们就只能使用默认的标题、正文和特色图片字段。
SVG 支持
默认情况下，WordPress 媒体库不允许使用 SVG 图片，因为它们基于 XML，可能存在安全风险。只要确保授予编辑权限的人值得信赖，就不会有问题。
如果您不想使用插件，也可以通过将以下代码添加到您的functions.php文件中来启用 SVG 支持。
function allow_svg($mimes)
{
$mimes['svg'] = 'image/svg+xml';
$mimes['svgz'] = 'image/svg+xml';
return $mimes;
}
add_filter('upload_mimes', 'allow_svg');
function fix_mime_type_svg($data = null, $file = null, $filename = null, $mimes = null)
{
$ext = isset($data['ext']) ? $data['ext'] : '';
if (strlen($ext) < 1) {
$exploded=explode('.', $filename);
$ext=strtolower(end($exploded));
}
if ($ext==='svg') {
$data['type']='image/svg+xml' ;
$data['ext']='svg' ;
} elseif ($ext==='svgz') {
$data['type']='image/svg+xml' ;
$data['ext']='svgz' ;
}
return $data;
}
add_filter('wp_check_filetype_and_ext', 'fix_mime_type_svg', 75, 4);
我通常尽可能避免使用插件和依赖项，但这次我发现，使用这段代码片段后，SVG 图片虽然能在前端正常上传和显示，但在 WordPress 后台却无法正确显示，而且要让它们始终显示正常，实在太费劲了。因此，我选择使用 SVG Support 插件。
JSON API
WordPress 默认提供两种内容类型：文章和页面。WordPress JSON API 也提供了访问这两种内容类型的 接口。http://headless.local/wp-json/wp/v2/postshttp://headless.local/wp-json/wp/v2/pages
添加操作?page=1&per_page=100&_embed=1将返回所有可用数据。
自定义 API 插件
可以使用类似的接口创建和查询其他内容类型。创建这些新文章类型的代码最好放在插件中。
要创建自定义插件，请在其中创建一个新文件夹/wp-content/plugins/，并为其命名headless-plugin（或者任何你喜欢的名字）。
在该文件夹内创建一个与文件夹同名的php文件：
headless-plugin.php
<?php
/*
Plugin Name: Headless Plugin
Description: Custom setup for JSON API
Author: Your Name
Version: 0.1.0
Text Domain: headless-plugin
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
*/
if (!defined('ABSPATH')) {
exit;
} // Exit if accessed directly
// ADD CODE FOR CUSTOM POST TYPES HERE
以下代码将创建一个名为“Events”的文章类型：
// create events post type
add_action('init', 'create_post_type_events');
function create_post_type_events()
{
$labels = array(
'name' => _x('Events', 'post type general name', 'headless-plugin'),
'singular_name' => _x('Event', 'post type singular name', 'headless-plugin'),
'menu_name' => _x('Events', 'admin menu', 'headless-plugin'),
'name_admin_bar' => _x('Event', 'add new on admin bar', 'headless-plugin'),
'add_new' => _x('Add New', 'Event', 'headless-plugin'),
'add_new_item' => __('Add New Event', 'headless-plugin'),
'new_item' => __('New Event', 'headless-plugin'),
'edit_item' => __('Edit Event', 'headless-plugin'),
'view_item' => __('View Event', 'headless-plugin'),
'all_items' => __('All Events', 'headless-plugin'),
'search_items' => __('Search Events', 'headless-plugin'),
'parent_item_colon' => __('Parent Events:', 'headless-plugin'),
'not_found' => __('No Events found.', 'headless-plugin'),
'not_found_in_trash' => __('No Events found in Trash.', 'headless-plugin')
);
$args = array(
'labels' => $labels,
'description' => __('Description.', 'headless-plugin'),
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'show_in_menu' => true,
'query_var' => true,
'rewrite' => array('slug' => 'event'),
'capability_type' => 'post',
'has_archive' => true,
'hierarchical' => false,
'menu_position' => 5,
'show_in_rest' => true,
'rest_base' => 'events',
'rest_controller_class' => 'WP_REST_Posts_Controller',
'supports' => array('title', 'editor', 'custom-fields'),
);
register_post_type('events', $args);
}
请确保使用与您在本文件顶部注释中指定的相同的文本域。
现在我们可以使用此端点查询事件。http://headless.local/wp-json/wp/v2/events?page=1&per_page=100&_embed=1
您还可以为新的文章类型创建自定义端点。以下代码将创建一个可通过以下地址访问的事件端点http://headless.local/wp-json/mwdw/v1/events：。
function events_endpoint($request_data)
{
$args = array(
'post_type' => 'events',
'posts_per_page' => -1,
'numberposts' => -1,
'post_status' => 'publish',
);
$posts = get_posts($args);
foreach ($posts as $key => $post) {
$posts[$key]->acf = get_fields($post->ID);
}
return $posts;
}
add_action('rest_api_init', function () {
register_rest_route('mwdw/v1', '/events/', array(
'methods' => 'GET',
'callback' => 'events_endpoint'
));
});
就我个人而言，我更喜欢使用默认的端点。
ACF
由于我们将使用高级自定义字段来添加内容，因此我们需要将这些字段添加到 API 返回的数据中。我们可以编写一个函数来添加端点，然后rest_prepare_post_type在每个文章类型的钩子中调用该函数add_filter。
// add ACF object to default posts endpoint
add_filter('rest_prepare_post', 'acf_to_rest_api', 10, 3);
// adds ACF object to events endpoint
add_filter('rest_prepare_events', 'acf_to_rest_api', 10, 3);
function acf_to_rest_api($response, $post, $request)
{
if (!function_exists('get_fields')) {
return $response;
}
if (isset($post)) {
$acf = get_fields($post->id);
$response->data['acf'] = $acf;
}
return $response;
}
WordPress 的设置基本就完成了。在第二部分中，我们将使用 Vue/Nuxt查询数据，并使用 Netlify设置自动部署。
来看看我的主题和插件的源代码吧。👀
感谢阅读！
文章来源：https://dev.to/ninjasoards/easy-headless-wordpress-with-nuxt-netlify-5c4a