WordPressミニアプリオープンソース版インストール使用チュートリアル

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は、WeChat公式プラットフォームの管理画面で取得します。具体的な場所は：開発-開発設定-開発者IDです。 マーチャントIDは企業でのみ使用可能で、個人ユーザーは使用できないため、入力不要です。

ミニアプリトップページスライド記事IDの取得

ミニアプリトップページスライド記事IDとは、ミニアプリトップページのスライドショーに表示したい記事のIDです。下図の赤枠部分を参照してください：記事IDの取得方法は、WordPress管理画面の「投稿-すべての投稿」で、使用したい記事タイトルの編集ボタンにマウスを合わせると、アドレスバーのURL内の数字が記事IDです。複数の記事を設定する場合は、記事IDを英語のカンマで区切ってください。

コメントとデフォルトポスターURL

コメントを有効にする場合は、コメント審査機能も同時に有効にすることをお勧めします。 デフォルトポスターURLは、投稿した記事にアイキャッチ画像が設定されていない場合に使用されるポスター画像です。 サイトの多くの記事にアイキャッチ画像がない場合は、WordPressランダムアイキャッチ画像表示プラグイン

WeChat 公式アカウント管理画面の設定

サーバードメイン設定

開発-開発設定のサーバードメインに、使用するドメインを入力します。注意：downloadFile合法ドメインには、あなたのサイトドメイン、サイトで使用しているCDNドメイン（ある場合）、およびwx.qlogo.cnを入力してください。

メッセージテンプレート設定

WeChat公式プラットフォーム管理画面左メニューの：機能-テンプレートメッセージ-個人テンプレートライブラリ-追加。 „コメント返信通知“と„投げ銭成功通知“の2つのメッセージテンプレートをそれぞれ追加します。

WordPress ミニアプリソースコードの修正

ミニアプリソースコードのインポート

WeChatミニアプリ開発ツールをダウンロードし、ダウンロードリンク、ダウンロード後インストールします。 WordPressミニアプリソースコードをダウンロードし、ダウンロードリンク、ダウンロード後解凍します。  新しいミニアプリプロジェクトを作成する際、「プロジェクトのインポート」を選択し、プロジェクト名は任意に入力、ディレクトリは先ほど解凍したミニアプリソースコードフォルダを選択します。 AppIDには自身のものを入力します。

開発ツールインターフェースの説明

デフォルトでは、ミニアプリソースコードを開くと以下のような画面になります。左側はプレビュー画面、右側上半分はソースコードウィンドウ、下半分はエラーメッセージです。エラーウィンドウの表示に注意してください。

ミニアプリ設定情報の修正

ソースコードウィンドウでutils-config.jsファイルを開き、下図の赤色部分の内容を修正する必要があります。各項目の役割は作者がコメントで説明しているので、自分のニーズに合わせて修正してください。 var ABOUTID = 1136; サイトに「このサイトについて」ページがない場合は、自分で新規作成する必要があります。方法は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行目にあり、Weiboの画像ホスティングを参照しています。自分のリンク画像に変更することをお勧めします。

LOGO画像の変更

ローカルのソースコードフォルダ内の対応する画像を直接変更するだけです。

ミニアプリのタイトルテキストを変更、デフォルトは„守望軒“

WeChatミニアプリ開発ツールバーには虫眼鏡アイコンがあり、検索です。クリックして„守望軒“と入力し、表示される結果から*が付いていない内容を変更します。*が付いているものは変更しても表示されず、コメントアウトされています。

その他の内容を変更

その他、スタイルなどを変更したい場合は、検索機能で検索して変更できます。より高度なテンプレートの再修正などは、ウェブテンプレート制作の基礎がないと難しいので、初心者はむやみに試さないことをお勧めします。最後に、WordPressミニアプリをオープンソースにしてくれた守望軒に感謝します。もし企業でより機能が充実したWeChatミニアプリが必要な場合は、こちらをクリック商用版WordPressミニアプリを入手、機能がより多く、インターフェースがより洗練されています。図文チュートリアルが理解できない場合は、WordPress WeChatミニアプリ構築ビデオチュートリアル