WeChatミニプログラムが人気になってきましたが、私たちが使っているWordPressでもWeChatミニプログラムを構築できるのでしょうか？答えはもちろん「はい」です。さらに、オープンソースのWordPressミニプログラムソースコードを使って、無料で自分のブログミニプログラムを構築することもできます。
まずはデモをご覧ください。以下のQRコードをWeChatでスキャンしてください。
WordPress ミニアプリ構築の必要条件
登録済みドメインと、すでに構築済みの WordPress サイト
ドメインとサイトをお持ちでない場合は、Naiba が以前に書いた記事を参考にドメイン登録とサイト構築を行ってください。注意点として、サイトは必ず ICP 登録（中国での公的登録）が必要です。
サイト全体での SSL アクセス有効化
宝塔パネルまたは LNMP ワンクリックパッケージを使用すれば、サイトへの SSL 追加は非常に簡単です。設定方法がわからない場合は、Naiba に連絡してサポートを受けてください。WeChat: vv15_zhi
サーバー環境
WordPress ミニアプリのインストールには、PHP バージョンが最低 5.6 必要です。PHP 7.2 を推奨します。初心者は宝塔パネルでワンクリックインストールが可能です。#サイト構築#初心者に優しい宝塔パネル構築チュートリアル
WeChat ミニアプリアカウント
直接 https://mp.weixin.qq.com/ にアクセスしてアカウントを登録してください。
WordPress WeChat ミニアプリサポートプラグイン
在WordPress管理画面のプラグインから「REST API TO MiniProgram」を検索してインストールしてください。
WordPress ミニアプリプラグインとサイト設定
サイトパーマリンク設定
まずサイト設定について、WordPress ミニアプリの作者は /%category%/%postname%.html 形式の疑似静的パーマリンクの使用を推奨しています。
このパーマリンク形式を使用することで、ミニアプリ内でのサイト内部リンク遷移が可能になります。他の形式は現時点ではサポートされていません。
もしサイトがすでに長期間運用されている場合は、パーマリンクを変更しないでください。、サイトのSEO効果に影響します。
ミニアプリプラグイン設定
AppID と AppSecret は、微信公众平台の管理画面で取得できます。具体的な場所は、「開発-開発設定-開発者ID」です。
Merchant IDは企業でなければ使用できないため、個人ユーザーは記入しません。
ミニアプリトップページスライド記事IDの取得
ミニアプリトップページスライド記事IDとは、ミニアプリトップページのスライドショーに表示したい記事のIDです。下図の赤枠部分を参照してください：
記事IDの取得方法は、WordPress管理画面の「投稿-すべての投稿」で、使用したい記事タイトルの編集ボタンにマウスを合わせると、アドレスバーのURL内の数字が記事IDです。
複数の記事を設定する場合は、記事IDを英語のカンマで区切ってください。
コメントとデフォルトポスターURL
コメントを有効にする場合は、コメント承認機能も同時に有効にすることをお勧めします。
デフォルトのポスター画像は、投稿にアイキャッチ画像が設定されていない場合に呼び出されるポスター画像です。
サイトにアイキャッチ画像がない記事が多い場合は、以下をインストールすることをお勧めします。WordPressランダムアイキャッチ画像プラグイン
WeChat 公式アカウント管理画面の設定
サーバードメイン設定
開発-開発設定のサーバードメインに、使用するドメインを入力します。
注意：downloadFile合法ドメインには、あなたのサイトドメイン、サイトで使用しているCDNドメイン（ある場合）、およびwx.qlogo.cnを入力してください。
メッセージテンプレート設定
WeChat公式管理画面の左メニュー：機能→テンプレートメッセージ→個人テンプレートライブラリ→追加。
„コメント返信通知“と„投げ銭成功通知“の2つのメッセージテンプレートをそれぞれ追加します。
WordPress ミニアプリソースコードの修正
ミニアプリソースコードのインポート
WeChatミニアプリ開発ツールをダウンロードし、ダウンロードリンクダウンロード後、インストールしてください。
WordPressミニプログラムのソースコードをダウンロードします。ダウンロードリンク、ダウンロード後解凍します。
新しいミニプログラムプロジェクトを作成する際は、プロジェクトのインポートを選択し、プロジェクト名は自分で記入し、ディレクトリは先ほど解凍したミニプログラムのソースコードフォルダを選択します。
AppIDは自分のものを記入してください。
開発ツールインターフェースの説明
デフォルトでは、ミニアプリソースコードを開くと以下のような画面になります。
左側はプレビュー画面、右側上半分はソースコードウィンドウ、下半分はエラーメッセージです。エラーウィンドウの表示に注意してください。
ミニアプリ設定情報の修正
ソースコードウィンドウでutils-config.jsファイルを開き、下図の赤色部分の内容を修正する必要があります。
各項目の役割については作成者がコメントしているので、自分のニーズに合わせて変更してください。
var ABOUTID = 1136;
サイトに「About」ページがない場合は、自分で新しく作成する必要があります。方法は、WordPress管理画面で「新規追加」→「ページ」を選択し、コンテンツに自分のサイトの紹介を入力して公開します。ページIDを取得します（方法は上記の記事ID取得と同じですが、ページ内で探します）。
プロンプトメッセージと返信メッセージのテンプレートには、先ほど自分で作成したものを記入してください。
downloadFile合法ドメインの設定
ここが重要で、WeChat公式アカウント管理画面で入力した内容と一致させる必要があります。形式は以下の通りです：
var DOWNLOADFILEDOMAIN = [
{ id: 1, domain: 'blog.naibabiji.com'},
{ id: 2, domain: 'img.wordpressjc.com' },
{ id: 3, domain: 'wx.qlogo.cn' },
];ドメインは実際の状況に応じて記入してください。ここではCDNアクセラレーションドメイン（IDが2のもの）があります。
コードを保存（Ctrl + S）すると、左側にサイトのミニプログラムのプレビューが表示されるはずです。
ホームページアイコンナビゲーションの微慕、エンタープライズ版などの情報を変更
上記のナビゲーションアイコンも、config.jsファイル内で、先ほど設定したdownloadFileドメインのコードの下で変更します。
名前は自分でname: ‚微慕‘の値を変更し、画像はローカルフォルダ内の対応する画像を変更するだけです。
リンク作成者のコメントに説明があります。Naibaサイト構築ノートのミニプログラムのようにクリックでカテゴリページにジャンプさせたい場合のコードは以下の通りです。
{ 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: '' },
注意：上記コードの画像は私が変更したものです。カテゴリIDの抽出方法は、前の記事のID抽出方法を参照してください。作者のデフォルトでは5つのアイコンがありますが、私は2つ削除して3つだけ使用しています。実際の状況に合わせて変更してください。
ランキングリストとWeChatミニアプリの2つの画像ナビゲーションを変更
修正するファイルは pages-index-index.wxml の72行目以降です。
名前は自分で変更し、リンクURLを特定の記事にジャンプさせたい場合は、/pages/detail/detail?id=864（IDは自分の記事ID）を入力します。
背景画像はpages-index-index.wxssの184行目と195行目で、微博の画像ホスティングを参照しています。自分のリンク画像に変更することをお勧めします。
LOGO画像の変更
ローカルのソースコードフォルダ内の対応する画像を直接変更するだけです。
ミニアプリのタイトルテキストを変更、デフォルトは„守望軒“
WeChatミニアプリ開発ツールバーには虫眼鏡アイコンがあり、検索です。クリックして„守望軒“と入力し、表示される結果から*が付いていない内容を変更します。*が付いているものは変更しても表示されず、コメントアウトされています。
その他の内容を変更
その他、スタイルなどの修正が必要な場合は、検索機能で検索して修正できます。より高度なテンプレートの再編集などは、ウェブテンプレート作成の基礎知識がないと難しいため、初心者は無闇に試さないことをお勧めします。
最後に、守望轩がWordPressミニプログラムをオープンソース化してくれたことに感謝します。企業でより機能の充実したWeChatミニプログラムが必要な場合は、こちらをクリック商用版 WordPress ミニプログラムを入手すると、より多くの機能と充実したインターフェースが利用できます。
画像付きチュートリアルが理解できない場合は、こちらをご覧ください。WordPress WeChatミニアプリ構築ビデオチュートリアル