WordPress Mini Program Open Source Edition Installation and Usage Tutorial

WeChat Mini Programs are becoming popular. So, can we use WordPress to build a WeChat Mini Program? The answer is definitely yes, and you can even use open-source WordPress Mini Program source code to build your own blog mini program for free. First, a demo: scan the QR code below with WeChat to view.

Prerequisites for building a WordPress Mini Program

A registered domain name and a WordPress website that has already been built

Those without a domain name or website can refer to the articles Naiba wrote earlier about registering a domain name and building a website. Note thatThe website must be registered (ICP filing). How to Choose a Domain Name for Beginners Building a Website Steps and detailed tutorial for beginners to build a website

Enable SSL access for the entire website

You can easily add SSL to your website either in the Baota Panel or using the LNMP one-click installation package. If you don't know how to configure it, you can contact Naiba to help you. WeChat: vv15_zhi

Server Environment

Installing the WordPress mini-program requires a minimum PHP version of 5.6, with PHP 7.2 recommended. Beginners can use the Baota Panel for one-click installation.#WebsiteBuilding# Beginner-friendly Baota Panel Website Building Tutorial

WeChat Mini Program Account

Just go to https://mp.weixin.qq.com/ to register an account.

WordPress WeChat Mini Program Support Plugin

在WordPressSearch for and install 'REST API TO MiniProgram' in the Admin Dashboard plugins.

WordPress Mini Program Plugin and website settings

Website Permalink Settings

First is the website settings. The WordPress mini-program author recommends using the pseudo-static format: /%category%/%postname%.htmlUsing this type of permalink enables internal link navigation within the mini-program. Other formats are not currently supported.If your website has been live and operating for a long time, do not change your permalink structure, as it will affect your website's SEO performance.

Mini Program Plugin Settings

The AppID and AppSecret are obtained from the WeChat Official Account Platform backend. The specific location is: Development -> Development Settings -> Developer ID. Merchant IDs are only used by enterprises, personal users cannot use them, so leave those fields blank.

Obtaining Slider Post IDs for the Mini Program Homepage

The slider post IDs for the mini-program homepage are the posts you want to display in the homepage slideshow, as shown in the red box in the image below:Method to obtain the Post ID: In theWordPressAdmin Dashboard, go to Posts -> All Posts, hover your mouse over the edit button of the post title you want to use, and the number in the address bar URL is the ID.To set multiple posts, separate the Post IDs with English commas.

Comments and Default Poster Address

If you need to enable comments, it is recommended to also enable the comment moderation feature. The default poster address is the poster image used when a published post does not have a featured image set. If many articles on your website lack featured images, it is recommended to install theWordPress Random Featured Image Plugin

WeChat Official Account backend settings

Server Domain Settings

In Development -> Development Settings -> Server Domain, fill in the domain name you need to use.Note: For the downloadFile legal domain, please fill in your website domain, the domain used by your website's CDN (if any), and wx.qlogo.cn

Message Template Settings

In the WeChat Official Account backend left menu: Features -> Template Messages -> Personal Template Library -> Add. Add two message templates: „Comment Reply Notification“ and „Reward Success Notification“.

Modification of WordPress Mini Program source code

Import Mini Program Source Code

Download the WeChat Mini Program Developer Tools,Download Link, install after downloading. Download the WordPress Mini Program source code,Download Link, extract after downloading. When creating a new mini program project, select 'Import Project', write your own project name, and select the directory of the extracted mini program source code folder. Fill in your own AppID.

Developer Tools Interface Introduction

By default, after opening the mini program source code, you will see the following interface.The left side is the preview interface, the upper right half is the source code window, and the lower half is the error message window. Pay attention to the prompts in the error window.

Modify Mini Program Configuration Information

Open the utils-config.js file in the source code window. You need to modify the content highlighted in red in the image below.The author has commented on the function of each item; just modify according to your needs. var ABOUTID = 1136; If your website does not have an About page, you need to create one yourself. The method is: WordPress Admin Dashboard > New > Page. Then enter the introduction of your own website in the content and publish it. Get the Page ID (the method is the same as getting the Post ID above, but look in the Pages section.) Fill in the encouragement message and reply message templates you created earlier.

Set downloadFile Legal Domain

This is a key point. It needs to be consistent with what you filled in the WeChat Official Account backend. The format is as follows:

var DOWNLOADFILEDOMAIN = [
  { id: 1, domain: 'blog.naibabiji.com'},
  { id: 2, domain: 'img.wordpressjc.com' },
  { id: 3, domain: 'wx.qlogo.cn' },

];

Fill in the domain according to your actual situation. Here I have a CDN acceleration domain (the one with id 2). Save the code (CTRL + S), and you should be able to see the appearance of your website's mini program from the left side.

Modify Homepage Icon Navigation, Weimob, Enterprise Edition, and other information

The navigation icons in the image above are also modified in the config.js file, just below the code for setting the downloadFile domain. Modify the name by changing the value of name: 'Weimob', and modify the image by changing the corresponding picture in the local folder. The author's comments explain the links. If you want to achieve a click-to-jump to a Category page like the Naibabiji mini program, the code is as follows:

{ id: '1', name: '建站知识', image: '../../images/websitepng.png', url: '../../pages/list/list?categoryID=141', redirecttype: 'apppage', appid: '', extraData: '' },
  { id: '2', name: '奇技赢巧', image: '../../images/jiqiao.png', url: '../../pages/list/list?categoryID=142', redirecttype: 'apppage', appid: '', extraData: '' },
  { id: '3', name: '软件分享', image: '../../images/softw.png', url: '../../pages/list/list?categoryID=140', redirecttype: 'apppage', appid: '', extraData: '' },

Note: The image in the code above is my own modification. For the method to extract the Category ID, refer to the Post ID extraction method mentioned earlier. The author defaults to 5 icons; I deleted two and only used 3. Modify according to your actual situation.

Modify the Ranking List and WeChat Mini Program two image navigations

The file to modify is located at pages-index-index.wxml, below line 72. Modify the name yourself. If the link url wants to jump to a specific Post, enter \/pages\/detail\/detail?id=864 (ID is your own Post ID). The background images are in pages-index-index.wxss, lines 184 and 195, referencing Weibo image hosting pictures. It is recommended to modify them to your own linked images.

LOGO Image Modification

Directly modify the corresponding image in the local source code folder.

Modify the mini program title text, default is „Shouwangxuan“

The WeChat Mini Program Developer Toolbar has a magnifying glass icon for search. Click it, enter „Shouwangxuan“, and modify the results that appear. Modify the content without an asterisk (*). Content with an asterisk will not be displayed whether modified or not, as it is commented out.

Modify Other Content

For other modifications, such as styles, you can use the search function to find and then modify. More advanced modifications like reworking the template are likely difficult for those without a web template creation foundation; it is not recommended for beginners to attempt arbitrarily. Finally, thanks to Shouwangxuan for open-sourcing the WordPress mini program. If your enterprise needs a WeChat mini program with more complete features,Please click hereto get the commercial version of the WordPress Mini Program, which has more features and a more polished interface. If you don't understand the graphic tutorial, please check theWordPress WeChat Mini Program Setup Video Tutorial