LINEと連携させるWordPressプラグイン「LINE Connect」

Wordpress
WordpressユーザーとLINE公式アカウントユーザーの連携

WordPressユーザーとLINEユーザーを連携させるプラグイン「LINE Connect」の解説ページです。

「LINE Connect」はLINE Messaging APIを利用して、LINE 公式アカウントに友達登録してくれているユーザーと、Wordpressの登録ユーザーのアカウントを連携させるプラグインです。

連携済みユーザーや、特定のロールのユーザーのみに記事の投稿通知を送ったり、連携済みユーザーとそうでないユーザーとでリッチメニューを違うものに設定することが可能です。

WordPressとLINEを連携させるコードの書き方はこちらの記事で解説しています。プラグインに組み込むなど自分でコードを書く場合はこちらの記事が参考になると思います。

LINE Messaging APIを利用したユーザーアカウント連携について詳しくはLINE Developers公式ドキュメントをご覧ください。

できること

  • LINEの友達登録ユーザーとWordpressのユーザーの連携
  • 全ての友達/連携済みの友達/連携済みで特定ロールの友達への記事投稿通知
  • 連携済みユーザーと未連携ユーザーでリッチメニューIDを個別に設定

スクリーンショット

連携画面

連携の流れ(ユーザー側)
  1. LINE公式アカウントに友達登録をするか、アカウント連携キーワードの入力で表示される連携用リンクをタップ
  2. WordPressサイトにWordpressアカウントでログイン
  3. 連携完了

管理画面

LINE Developersの設定

LINE公式アカウントの用意

言うまでもなくLINE公式アカウントが必要になりますので、お持ちでない場合は作成しておいてください。作成は無料で行えます。

また、LINE Developersにて使用したいLINE公式アカウントのMessaging APIチャネルも作成しておく必要があります。

チャネルシークレットとチャネルアクセストークンを取得

チャネルシークレットを発行し、値をメモしておく。
同じくチャネルアクセストークン(長期)を発行し、値をメモしておく。

チャネルシークレットと、チャネルアクセストークン(長期)を発行し、メモしておきます。この情報はプラグインの設定画面で入力します。

Webhook URLの設定

Webhook URL

Webhook URLを「編集」し、プラグインのbot.phpへのURLを入力してください。通常は下記のようなURLになるはずです。
https://your-domain/wp-content/plugins/lineconnect/bot.php

your-domainの部分をご自分のドメイン名に変更してください。もしWordpressのURLがドメイン直下でない場合はWordpressディレクトリのパスを追加してください。

Webhookの利用
オンにしてください。

応答モードの設定

LINE Official Account Managerにログインし、「設定」-「応答設定」ページを開きます。

応答モードBOTに設定します。(チャットモードでは連携機能が使用できません)

プラグインのインストール

こちらから最新の「lineconnect.zip」をダウンロードしてください。

Releases · shipwebdotjp/lineconnect
Wordpress plugin that account link between wordpress user and LINE ID - shipwebdotjp/lineconnect

管理画面のプラグイン追加からZIPファイルをアップロードしてインストールするか、もしくは解凍してできる「lineconnect」フォルダをWordpressのプラグインフォルダにFTPやSCPでアップロードします。

管理画面のプラグイン一覧から「LINE Connect」を有効にします。

管理画面の設定からLINE Connect設定ページを開き、チャネルタブを選択します。

新規チャネル追加をクリックし、チャネル情報を入力します。
チャネル名
チャネルアクセストークン
チャネルシークレット
この三項目をまずは入力し保存します。

設定が終わったらLINE DeveloppersのMessaging APIチャネルのページで先ほど設定したWebhook URLの「検証」ボタンをクリックし「成功」メッセージが表示されることを確認してください。

「検証」が失敗する場合、インストールが正常にできているか、.htaccessでwp-contentディレクトリへのアクセスを禁止していないかなどを確認してください。

ログイン画面URLを変更している場合

デフォルトではログインはWordpressのデフォルトログイン画面「wp-login.php」を使用します。

もしもログイン画面URLをデフォルトの「wp-login.php」から他のURLに変更している場合は設定画面の連携タブのログインページURLを変更してください。

ログインページURLは相対URLで入力してください。

動作確認

アカウント連携

LINE公式アカウントをフォロー(友達登録)するか、アカウント連携・解除開始キーワードをトーク画面で送信すると、自動的に連携がスタートします。

連携リンクの有効期限は10分です。

WordPressにログインします。

ログインすると、連携完了画面が表示されます。

ログイン後、連携完了画面へと遷移しない場合は、ログインアクションが発行されないプラグインを利用している可能性があります。プラグイン名をコメントでお知らせください。

記事公開時に通知を送信

投稿通知タブの投稿タイプより、通知したい投稿タイプを選択して設定しておきます。カスタム投稿タイプにも対応しています。

投稿画面にLINE Connectメタボックスが表示されるので
☑LINE送信するにチェックを入れ送信対象を選択します。
未連携を含めたすべての友達、連携済みの友達、または各ロールの連携済みの友達を選択できます。

☑LINE送信するにチェックが入った状態で記事を公開・更新すると対象の友達に通知がなされます。

アカウント連携解除

アカウント連携/解除開始キーワードを入力し、連携解除ボタンをタップするとアカウント連携が解除されます。

LINE公式アカウントをブロック(友達登録解除)した場合は、自動的に連携が解除されます。

ポストバックアクションを返すアクションを設定したリッチメニューを用意して設定しておくと、メニューをタップするだけで連携が行えるようになります。

管理画面の設定項目

チャネル

複数のチャネルに対応しています。どのチャネルから通知するかをLINE通知メタボックスで投稿時に選択できます。

ここでいうチャネルは、LINE公式アカウントのMessaging APIチャネルのことを指します。

チャネル名チャネルを区別するための名前
チャネルアクセストークンチャネルアクセストークン(長期)
チャネルシークレットチャネルシークレット
デフォルトの送信対象LINE送信メタボックスでの初期値
通知の対象となる人数選択されているロールや設定で通知対象となる人数
連携済みユーザー用リッチメニューID連携済み友達用のリッチメニューID
未連携ユーザー用リッチメニューID未連携の友達用のリッチメニューID

リッチメニューID

LINE Official Account Managerで作成したリッチメニューは使用できないため、LINE Messaging APIを使用してリッチメニューを作成し、そのIDを設定してください。

APIを利用したリッチメニューの作成はリッチメニューエディタなどを利用すると比較的簡単に行えます。

連携済みの友達と未連携の友達用の2種類のリッチメニューを作成登録しておき、それぞれの欄にリッチメニューIDを設定することで、連携状態に応じて異なるリッチメニューを表示することができます。

利用可能なポストバックアクション

リッチメニューでは以下のポストバックアクションが利用可能です。それぞれ連携開始、連携解除が行われます。

  • action=link
  • action=unlink

連携

ログインページURLや、連携開始・解除のキーワード、開始・解除時のメッセージなどを変更することができます。

投稿通知

投稿タイプ

LINE送信メタボックスを表示させる投稿タイプを選択します。Wordpressデフォルトで存在する「投稿」「固定ページ」に加えて、Custom Post Type UIなどで追加したカスタム投稿タイプも選択できます。

通知するにはタイトル、本文、アイキャッチ画像(オプション)、投稿へのパーマリンクが必要です。

リンクラベル

投稿通知の下部に表示されるリンクの表示文字列です。「もっと読む」「Read more」などURLの代わりに表示されるラベルです。

通知スタイル

投稿があったことを通知するメッセージのスタイルを変更できます。

画像表示スタイル

  • 領域全体に表示・・・画像の領域に合わせて縦横比を維持したまま画像が拡大縮小されます。はみ出した画像の周囲は切り捨てられます。
  • 画像全体を表示・・・画像全体が表示されるよう縦横比を維持したまま画像が拡大縮小されます。画像の周囲に余白が追加されます。
領域全体に表示
画像全体を表示

画像領域アクペクト比

画像領域の縦横比を「幅:高さ」の半角数字の形で指定します。例)16:9、4:3、3:2
高さを幅の3倍を超える設定にはできません。

よく使うアイキャッチ画像のアスペクト比に合わせておくことで、余白の切り取りが行われなくなります。

背景色

メッセージ全体の背景色です。画像、タイトル、本文、リンク領域を個別に指定することは現在のバージョンではできません。

タイトル文字色、本文文字色、リンク文字色

それぞれの文字色です。色以外のフォントサイズや書体、太字などは設定できません。

タイトル最大行数

タイトルの最大行数です。これを超える場合は省略記号(…)が付き省略されます。(Android/iOSのみに有効)

本文最大行数

本文の最大行数です。タイトル最大行数と同じくこれを超える場合は省略記号(…)が付き省略されます。(Android/iOSのみに有効)

最大行数以内であっても、500文字を超える部分は省略されて送信されます。

開発者向け他プラグインとの連携方法

他プラグインからLINEメッセージ送信を呼び出せるよういくつかアクションフックが用意されています。

アクションフック

send_message_to_wpuser($channel, $wp_user_id, $message)

連携済みのWordpressユーザーにLINEメッセージを送信します。

使い方
//デフォルト(登録されているチャネルが1つならそのチャネル、複数登録されている場合は最初のチャネル)のユーザーIDが2のユーザーへメッセージ送信
do_action('send_message_to_wpuser', null, 2, 'Wordpressからのメッセージ');

//チャンネルシークレットの先頭4文字でチャネルを指定してチャネル情報を取得
do_action('send_message_to_wpuser', lineconnect::get_channel('1fa8'), 3, 'Wordpressからのメッセージ');

//送信するチャネルのアクセストークンとシークレットを連想配列で渡す場合
$channel = array(
    'channel-access-token' => '実際のチャネルアクセストークン',
    'channel-secret' => '実際のチャネルシークレット'
);
do_action('send_message_to_wpuser', $channel, 3, 'Wordpressからのメッセージ');

//LINE BOT SDKを利用してImageMessageBuilderを作成し、画像を送信
require_once(plugin_dir_path(__FILE__).'../lineconnect/vendor/autoload.php');
$originalContentUrl = "https://example.com/img.jpg";
$previewImageUrl = "https://example.com/img.jpg";
$imageMessageBuilder = new \LINE\LINEBot\MessageBuilder\ImageMessageBuilder($originalContentUrl, $previewImageUrl);
do_action('send_message_to_wpuser', null, 3, $imageMessageBuilder);
パラメータ

$channel (array|null) channel-access-tokenchannel-secretを持つチャネル情報の連想配列か、null(デフォルトチャネルを使用)

デフォルトチャネルは、登録されているチャネルが1つならそのチャネル、複数登録されている場合は最初のチャネルです。

$wp_user_id (int) メッセージを送信するユーザーのWordpress ID(LINEユーザーIDではない)

$message (string|LINE\LINEBot\MessageBuilder) 送信するメッセージ。文字列の場合はテキストメッセージを作成して送信します。LINE BOT SDKを利用してMessageBuilderで作成したメッセージを送ることもできます。

send_message_to_role($channel, $role, $message)

ロールを指定して連携済みユーザーへLINEメッセージを送信します。$roleに予約されている値を渡すことで、連携済みユーザー全てに送信することもできます。

使い方
//管理者ロールのユーザーへメッセージを送信
do_action('send_message_to_role', null, "administrator", 'Wordpressからのメッセージ');

//すべての連携済みユーザーへメッセージを送信
do_action('send_message_to_role', null, "slc_linked", 'Wordpressからのメッセージ');
パラメータ

$channel, $message send_message_to_wpuserのパラメータと同じです。

$role (string) 送信対象のロールスラッグ。例)administrator
slc_linkedを指定すると、すべての連携済みユーザーへ送信します。

注意

デフォルトチャネルは、チャネルの削除によって変化します。例えば複数チャネルがある場合、1番目のチャネルを削除すると、2番目のチャネルがデフォルトチャネルになります。確実を期すためにはチャネル情報を配列で指定するか、チャネル情報をシークレットの先頭4文字で取得したものを使用してください。

$channel = lineconnect::get_channel("(シークレットの先頭4文字)");

LINEユーザーIDの保存形式

連携済みユーザーのLINEユーザーID、表示名、プロフィール画像URLはユーザーメタにlineというキー名で保存されています。

メタデータの形式

//ユーザーID:3のLINEユーザーIDを取得
$user_meta_line = get_user_meta(3, 'line', true);
var_dump($user_meta_line);

array(1) {
  ["(シークレットの先頭4文字)"]=>
  array(3) {
    ["id"]=>
    string(33) "(LINEユーザーID)"
    ["displayName"]=>
    string(12) "(表示名)"
    ["pictureUrl"]=>
    string(135) "(プロフィール画像URL)"
  }
}

複数チャネルに対応しているため、チャネルシークレットの先頭4文字をキーとする連想配列がトップレベルにあり、その中にid,displayName,pictureUrlをキーとする連想配列が含まれます。

カスタマイズ・プラグイン作成

制作者はフリーランスプログラマとしてLINE ID連携を利用したWordpressプラグインの作成やカスタマイズをお仕事としても請け負っております。ご依頼いただける方は是非ご連絡ください。

その他、お気軽にお問い合わせください。

Comments

タイトルとURLをコピーしました