未加星标

Using WordPress as a Headless CMS

字体大小 | |
[开发(php) 所属分类 开发(php) | 发布者 店小二03 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

--ADVERTISEMENT--

In the simplest of terms, a headless CMS is one that has no front end. As such, it includes just the API and the back end that is required to store and manage content, organize data and handle the workflow. There’s no front end display of the said content. Naturally, this means any front-end templates tend to become unnecessary in a headless CMS.

Thus, in stark comparison to a traditional CMS, a headless CMS offers just a content management back end and API. Since there’s an absence of a front end, a headless CMS can’t be used for content “publishing” in the true sense of the term. On the other hand, traditional CMSs such as WordPress often model their entire existence around the content publishing features. This is, by and large, the biggest difference between a headless CMS and a traditional one.

Now, naturally getting rid of the front end can pose a decent set of challenges for the everyday user. The biggest drawback is that in the absence of a true front end, there’s hardly any proper method to figure out how content or output may look when rendered.

Furthermore, in the absence of proper security measures, a headless CMS can pose some serious security issues. This is because, on the back end, it’s necessary to ensure that different user roles have only the right amount of privileges in order to prevent unwanted access to sensitive data.

With that said, what are the major advantages associated with headless CMSs? More importantly, when should you consider using one?

Advantages of Headless CMSs

Perhaps the biggest and most obvious advantage associated with headless CMS architecture is the fact that it offers great flexibility and control to developers. You can control virtually every aspect of development, handle how data is managed, how content is stored in the back end and even decide on the best possible front-end solution for your needs.

With such flexibility, coupled with the fact that every headless CMS comes with its own API for managing calls to and from the back end, you can save a good deal of development time. It’s easier to reuse existing modules, push updates and bug fixes and perform other similar tasks when working with a headless CMS.

Additionally, it’s worth noting that applications and websites built atop a headless CMS architecture tend to be easier to scale. A high level of scalability is an obvious advantage. The back end is already separated from the front end, so the downtime for the end users is minimized.

Beyond that, a headless CMS is generally compatible with most platforms, as the front end in itself is missing and can be integrated as per the user’s needs. Since there’s no content publishing solution native to a headless CMS, chances of DDoS attacks are reduced as well.

Why You Might Use WordPress as a Headless CMS

We’ve seen the various advantages that headless CMSs bring to the table.

In general, a headless CMS is preferable in cases where a traditional CMS may not fit in, or be too restrictive in nature. Take, for example, the case of mobile development. You can easily use API calls in a headless CMS to deliver content to an iOS or Android platform. Similarly, you can make use of javascript frameworks in your apps and rely on headless CMS architecture for pushing content to various platforms.

Obviously, for smaller and simplified projects, a traditional CMS is still the way to go. However, for cases where you need greater control over the back end, and wish to employ API calls to push your content to various platforms, or even wish to integrate a custom front-end mechanism totally independent of the back end (or just do not wish to have a front-end solution at all), a headless CMS is an ideal fit.

In terms of using WordPress as a headless CMS, it already has REST API built in, which means we have the API part sorted. Furthermore, we can make use of the familiar WordPress back end to manage the content.

Obviously, this means with just a few basic steps, we can have our own headless CMS in the form of WordPress. Considering the fact that WordPress is highly popular, using it as a headless CMS also implies that our CMS can perform well on a varied range of hardware and software combinations and also be under regular maintenance and security updates.

While there are various headless CMS platforms and options out there, and many of them are really amazing in their own right, WordPress still has one very common aspect in its favor. It has been around for a good while now, and requires just a simple mysql andphp stack to run. You can cut down on overhead costs and cloud storage bills by making use of WordPress over other headless CMSs that may otherwise have a bulkier set of requirements.

Using WordPress as a Headless CMS

WordPress has three major parts:

the database, where the content is stored the admin panel to manage the content (API) the HTML view, or front end, to display the content.

Naturally, as a headless CMS, the last option is of little use to us. When using WordPress as a headless CMS, content is treated merely as data.

Step One: Setting up WordPress

It’s important that you use a fresh installation of WordPress. Considering the fact that there are various tutorials out there on how to install WordPress, and the official documentation too is rather detailed on this step, we will be skipping the installation details here.

Furthermore, most web hosting providers nowadays offer one-click install feature for WordPress. Just bear in mind: change the database and table prefixes from the default wp_ values to something else, and use strong passwords!

Step Two: the Blank Theme

Remember that we mentioned the front end has little role to play in a headless CMS? WordPress has a big ecosystem that’s famous for its amazing themes. But we don’t need any of that. With that said, though, WordPress does need a theme to run, even if the front end isn’t going to be used. A good idea, therefore, is to just use a blank theme.

When working on WordPress as a headless CMS, all that’s needed is to add an index.php file and a style.css file specifying the theme name, author details, etc. for WordPress to work with.

Your theme’s index.php file should redirect users to the static site’s home page, thereby ensuring that the back end is untouched and the front end is done away with. Here’s a sample JS redirect code that you can put in the index.php file (or you can choose to use any code snippet of your own):

<script type="text/javascript">
window.location = 'http://homepage.com';
</script>

Once the blank theme is ready and uploaded to the themes directory, activate it in WordPress admin. That’s it, we’re one step closer to using WordPress as a headless CMS.

Step Three: Working with API Requests

Now, as a final step, we just need to make AJAX requests to consume the API calls. We’ve already placed a blank theme in place, so now we can make data requests in order to work with content the way we wish to.

There are various ways of doing so. The easiest is to probably use the Fetch API that can handle asynchronous data requests. You can learn more about the Fetch API here .

However, certain older web browsers still don’t play well with the Fetch API, so it’s a good idea to use a polyfill that can create the fetch API function in case the browser doesn’t natively support it.

Here’s what our code may look like:

<!DOCTYPE html>
<html>
<head>
<title>Using WordPress as Headless CMS</title>
</head>
<body>
<div id="posts-list"></div>
<!-- polyfill -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.min.js" charset="utf-8"></script>
<script type="text/javascript">
const pContain = document.getElementById('posts-list')
fetch('http://localhost:8080/wp/wp-json/wp/v2/posts')
// response
.then(r => r.json())
.then(posts => {
posts.map(post => {
const pDiv = document.createElement('div')
pDiv.innerHTML = post.title.rendered
pContain.appendChild(pDiv)
})
})
</script>
</body>
</html>

In the above code, we’re simply working the content via RESTful API calls.

Doing More with Headless WordPress

For most practical purposes, you may need to add additional content fields when working with WordPress as a headless CMS. In order to do that, using the popular Advanced Custom Fields (ACF) plugin is a good solution.

ACF, as any WordPress developer would tell you, lets you easily add custom fields to your content, which you can then call via and API. You can refer to the ACF documentation for plugin-specific guidelines.

However, note that when you’re calling custom fields via a RESTful API, you may need to employ the ACF to REST API plugin as well so as to properly structure the calls. This plugin can be used to expose ACF endpoints for use with the WordPress REST API.

A lesser-known and rarely used WordPress plugin also deserves a special mention here ― WordPress Headless . This plugin lets you create a headless WordPress CMS within minutes. It removes the front end and ensures that post permalinks go to the editor, not the view (logged in users only). If you’re trying to quickly get started with development and wish to convert a WordPress installation into a headless CMS, WordPress Headless plugin can do just that without you having to set things up yourself. Obviously, the API calls and other development tasks will still need to be handled by you.

Conclusion

When using WordPress as a headless CMS, the general usage scenario involves cases in which you might need to work with content management, such as teams handling their own data in the back end, etc. Should you ever wish to display content on the front end as a dedicated page, or have search engines properly index your site’s content, you’ll have to re-convert WordPress back to a traditional CMS.

For all other headless-usage purposes, this particular model works rather efficiently and you can further tweak it by means of custom fields and other data structures so as to get the desired results.


Using WordPress as a Headless CMS

Meet the author

Sufyan bin Uzayr

Sufyan bin Uzayr writes for multiple publications and has also authored a book named Sufism: A Brief History . His primary areas of interest include open source, mobile development, web CMS and vector art. He is also the Founder and Editor-in-Chief of an e-journal named Brave New World . His website is sufyanism.com .

本文开发(php)相关术语:php代码审计工具 php开发工程师 移动开发者大会 移动互联网开发 web开发工程师 软件开发流程 软件开发工程师

代码区博客精选文章
分页:12
转载请注明
本文标题:Using WordPress as a Headless CMS
本站链接:https://www.codesec.net/view/610791.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 开发(php) | 评论(0) | 阅读(83)