カテゴリー: WordPress

WordPressの「Ultimate Member」プラグインで会員サイト構築していて、ログインページ表示時に処理を行いたいことが発生！！

さて、どのように処理したらよいのか…よーく、考えたら、フォームを表示するときに難かしらのフックがあるのでは？って考えてみた。

 

function.phpに下記のコードを記述。$args[‘mode’]でどのフォームを表示するのか取得ができるとのこと。

add_action( 'um_before_form_is_loaded', 'my_pre_shortcode', 10, 1 );
function my_pre_shortcode( $args ) {
	if($args['mode'])
	{
		switch ( $args['mode'] ) {
			case 'login':
				//ここに処理を記述
				
				break;
		}		
	}

}

参考：https://docs.ultimatemember.com/article/1060-umbeforeformisloaded

 

これでログインフォーム表示時のフックができあがり。あとはやりたい処理を記述。

 

会員IDを初期値で入れたいと思ったら、あれ、入らない！

↓のように設定しているが初期値が入らない！！。ちなみに、プロフィール、新規登録はOK

 

ってことでプラグインのコアファイルを追っていった。

「ultimate-member/includes/core/class-fields.php」の「function field_value( $key, $default = false, $data = null ) {～略～}」で初期値を表示するとかごにょごにょ処理しているようだ。

 

その中で、下記の判定でフォームロード時の初期値をどうするのか判定している。これによると新規登録とプロフィールはOKとのこと。

			// Default Value for Registration Form and Profile Form editing
			if ( ! isset( $value ) && ( $this->set_mode == 'register' || $this->editing == true ) ) {

 

ちなみに

新規登録：$this->editing→FALSE

ログイン：$this->editing→FALSE

 

だった。コアファイルを変更して「$this->editing=true」としたら初期値がばっちり表示されたがこれは使えない・・・。

 

ちょっと腑に落ちないのだが、ログインフォームを表示したときにjavascriptで処理するかな。

 

 

WordPressで記事公開の承認フローを構築したいのですが「Peter’s Collaboration E-mails」というプラグインをWordPress5で動作するのかテストしてみました。

 

■承認フローに利用するプラグイン

Peter’s Collaboration E-mails：承認公開ワークフロー機能
Peter’s Post Notes：承認依頼メール、公開完了メール機能
User Role Editor：寄稿者にメディアアップロード権限を付与

 

※寄稿者が承認待ちの投稿を行った際に、メールで通知される承認者を設定します。ということなので寄稿者は必ず承認フローを通ることになる。

 

■公開承認ワークフローを設定する

とくにいじらなくても初期値のままで利用することが可能。個別ルールも可能

 

■実際に記事を書いてみる

記事を作成してレビュー待ちとして送信

 

↓メールで下記の内容が送られてくる

 

とりあえず、WordPress5、PHP７でも動作するようです。

 

■WP User Frontendと組み合わせての承認フローは利用しても大丈夫なのか？

ユーザーには管理画面でなく、フロントサイトで投稿を行っていいただく、そして承認と流れを行いたいと思います。

それなのでWP User Frontendプラグインを使ってみます。

PostFromで適当な内容でさくっと作ります。

 

↓こんな感じでフォームを用意

 

↓特に問題なくできました。

 

 

■カスタム投稿＋WP User Frontendでも利用することは可能？

「Custom Post Type UI」で簡単にカスタム投稿を作ります。（サンプル投稿という名称を追加）

WP User Frontendで適当にフォームを作り、post type をCustom Post Type UIで作成した投稿を指定します。

 

「設定」＞「公開承認フロー」の設定を見てみると

「Custom Post Type UI」で追加した「サンプル投稿」があるので大丈夫( ﾟДﾟ)！

 

↓承認フローいけました。

 

■やっぱり、一部の投稿は承認不要で公開したい

WP User FrontendのPostStatusを「公開済み」としてみた

 

記事はそのまま公開された。

「WP User Frontend」＞「Peter’s Collaboration E-mails」という優先順位で動作するようだ。

 

 

■公開した記事の編集を行ったどうなるのか？

WordPressの基本動作：承認後の公開中の記事の編集→スルーで公開

ちょいこれは。。っていう動作です。

 

寄稿者ですから編集できないですよ。

 

[wpuf_dashboard]のショートコードで投稿記事一覧が表示できます。

 

そう、「Edit」とあるが編集はできない。

「User Role Editor」で「edit_published_pages」「edit_published_posts」や「edit_published_(カスタム投稿タイプ)」を有効にします。

 

↓のように公開したら承認スルーパスで公開となります。

 

■公開後の記事を編集しても承認したい

「WP Post Branches」というプラグインが公開中の記事はそのままでbranchを作成して編集できる機能があるとのこと。

↓のようにしてもbranchを作るにすると公開されない。

 

ブランチを作ると下記のように一覧は表示される

 

ブランチを公開すると1本かになる

 

寄稿者の画面上でもブランチを作成するボタンがでるのだが、「更新」ボタンもある。

もちろん「更新」を押すとそのまま公開画面に反映される。更新ボタンがじゃまである。

 

■WP User Frontendの記事編集機能の設定があったじゃないか

「固定ページ」＞「タイトル：記事編集」で本文に下記のショートコードを入れたページを作る

[wpuf_edit]

 

「User Frontend」＞「Settings」＞「Fronted Posting」の「Edit Page」を作成した固定ページに設定する。そうするとフロント画面で記事編集ができるようになる。

 

「WP User Frontend」で対象のフォームのステータスをレビュー待ちにする

※「Edit Settings」の「Set Post Status to」を「レビュー待ち」にする

 

 

記事を修正する

 

 

 

↓承認依頼のメールが届きました。

WP User FrontendでEditも設定すればよいのかと思います。ブランチ機能は利用したいけど。。。WP User Frontendとの組み合わせはエラーになるのでやめとこ。

 

あれ、カスタム投稿で投稿した一覧がないことに今更ながら気づいた

投稿一覧を表示するショートコードにpost_typeでカスタム投稿名を指定する必要があった。

[wpuf_dashboard post_type="post,samplepost"]

 

↓上はpost_type指定なし。下はあり。

 

こんなところでどーにか？

 

いや。「Peter’s Collaboration E-mails」の設定でカスタム投稿を設定しようとしたら「**** エラー: この投稿タイプには指定した分類が存在しません ****」と表示されるようだ。

 

「WP User Frontend」でメール送信先指定があるのでそれでよいのでは？

 

結論として「WP User Frontend」で新規or更新された場合は「レビュー待ち」でOK

いろいろなショッピングがあると思うのですがWordPressでもEC機能があることはご存知かと思います。

今回は、例えばログインしたら「ポイント付与」「記事を公開」したらポイント付与。そのポイントでECサイトの商品を購入できたらということでちょっと模索してみました。

 

EC系は「WooCommerce」

ポイント系は「myCRED」

 

でいけそう。

 

一部のポイントを利用する場合は、プレミアムプラグインの購入が必要です。

 

まあ、なんとなくね。

「WP REST API」を利用して別サイトから情報取得するなどやってみたいと思います。

 

テストしながらなのでざっくりとすすみます。

 

WordPress側にREST　APIを用意する

まず「WP REST API」プラグインはWordPress4.7以上からインストール不要で標準となっている

ということで何もしなくても下記のように記事取得が可能

 

↓投稿の取得（JSON形式で取得）

自サイトURL/wp-json/wp/v2/posts

 

ドキュメントは下記のURL

http://ja.wp-api.org/reference/

 

「WP REST API」プラグインを入れれば、有効化になるのですが、初期は動かない？

 

このプラグインを入れたら、「/wp-json/wp/v2/users」にアクセスするとユーザー一覧が表示されるのできちんと処理しないと危険ですね。

そんなときは「Disable REST API」プラグインでざっくりと止めます。

 

認証はどうなんですか？

↓元

http://ja.wp-api.org/guide/authentication/

 

認証方法は次の３つの方式があるとのこと。

・クッキー認証

・OAuth 認証

・アプリケーションパスワードまたはベーシック認証

 

アプリケーションパスワードまたはベーシック認証の下準備をする

 

１．プラグイン「Application Passwords」をインストールし、有効化する

プラグイン情報ページ：https://ja.wordpress.org/plugins/application-passwords/

 

２．ユーザーにAPI用ユーザーを登録して、「Application Passwords」蘭に任意の名前を入力して「Add New」をクリックします。

 

 

パスワードが発行されるので保存します。（1回だけの表示なのでしっかりとメモします）

 

別ページで認証するためのHTMLを用意する

別に何でもよいのですが簡単にテストしてみたいと思います。

・おさらい

ユーザー名：WordPressのユーザー名

パスワード：Application Passwords で発行されたパスワード

認証するためのURL：あなたのウェブサイトのドメイン/wp-json/wp/v2/posts

 

認証は「Authorization」ヘッダーにbase64でエンコードした「ユーザー名：パスワード：」を認証するためのURLに送信をする

 

 

・結果

JSONで返ってくる

 

実際に適当ですけど、下記のようなコードを準備してHTMLを表示して「WordPressへ投稿する」をクリックすると投稿される。結果はコンソール上に表示しているのでそちらを参照

<a href="#" id="btnLogin">WordPressへ投稿する</a>

 

・スクリプト

    <script>
        var url ='ドメイン名/wp-json/wp/v2/posts';
        var username='ユーザー名';
        var password='パスワード';
        $(function(){
            $(document).on('click', '#btnLogin', function (){
                login();
           });
        });
        function login()
        {
            var authorizationToken = Base64.encode(username + ':' + password);
            $.ajax({
              type: "POST",
              beforeSend: function(request) {
                request.setRequestHeader("Authorization", 'Basic ' + authorizationToken);
              },
              url: url,
              cache: false,
              data:  {
                  'title':'WP REST API サンプル',
                  'content':'投稿するサンプル文章です。',
                  'status' : 'publish',
              },
              success: function(msg) {
                  console.log(msg)
              }
            });  
        }
        var Base64 = {
            encode: function(str) {
                return btoa(unescape(encodeURIComponent(str)));
            },
            decode: function(str) {
                return decodeURIComponent(escape(atob(str)));
            }
        };

        
        
    </script>

 

続きはまたこんど。

 

あとでやり直したらエラーになった。時間がなかったのでPHPでやった方が簡単だった。

アカウント作成、編集はリファレンス通りで問題なかった。

リファレンス：http://v2.wp-api.org/reference/users/

 

アカウント削除の時だけ「force」「reassign」は必須というのがわかりにくかったよ。

forceはtrue、reassignは削除対象アカウントの記事をどれに付け替えるかとかそういうことなので別のアカウントのIDを指定すればOK.

 

wp-jsonが404で返ってくる

パーマリンクが設定されていないだけ。WordPressのパーマリンクを設定しましょう。

 

ブログ上の表示名を設定したい

nameの項目を設定しましょう。

WordPressのコンタクトフォーム7は定番で利用されている問い合わせフォームかと思いますが、確認画面を表示したいという日本式？のフォームがどうしても必要になるときがあるかと思います。

その時は「Contact Form 7 add confirm」を利用して確認画面を簡単に表示させることができます。

ですが

 

今回は、それではダメ！確認画面をポップアップで！！

 

というケースです。

 

ひさびさにどーするか悩んでみました。コンセプトはざっくり簡単に、忘れても後で見ればなんとなく思い出せるように？って感じです。

では、早速料理を始めたいと思います。

 

■必要な材料（プラグイン）

・Contact Form 7：コンタクトフォーム

・Contact Form 7 add confirm：コンタクトフォームの確認画面表示用プラグイン

・Popup Maker：ポップアップを作るプラグイン

・Simple Custom CSS and JS：スクリプトを作るプラグイン

 

上記のプラグインをWordPressにインストールしておきます。

 

■下準備１：コンタクトフォームを用意する

初期の簡単なものでOKです。「確認」のボタンを追加します。

ざざっといい加減なのでこんなところです。

<label> お名前 (必須)
    [text* your-name] </label>

<label> メールアドレス (必須)
    [email your-email] </label>

<label> 題名
    [text your-subject] </label>

<label> メッセージ本文
    [textarea your-message] </label>

[submit "送信"]

[confirm "確認"]

 

あとは、このコンタクトフォームを表示できるようにしておいてください。

■下準備２：ポップアップを作ろう！

「Popup Maker」＞「Add Popup」で新規に作ります。

中身としては

<table>
<tr>
<th>名前</th>
<td id="popup_name"></td>
</tr>
<tr>
<th>メールアドレス</th>
<td id="popup_email"></td>
</tr>
</table>

<input type="submit" value="送信" id="pop-submit">
<input type="submit" value="キャンセル" id="pop-cancel">

※外観などは後ほど変更してくださいね。

https://docs.wppopupmaker.com/article/42-popup-maker-jquery-api

 

作成したら一覧に戻って「popmake-xxx」の「xxx」の数字を控えてください。

 

■メイン作業として

「Custom CSS ＆ JS」＞「Add Custom JS」をクリックして新規に作ります。

下記のコードを貼り付けます。「popupnum_id」に下準備で入手したIDを入れてください

popupnum_id=ここにPOPUPMAKERのIDを記述;
popupcancelflg=true;
document.addEventListener('wpcf7submit', function (event) {
  switch (event.detail.status) {
    case 'wpcf7c_confirmed':
      jQuery('#popmake-'+popupnum_id+' #popup_name').html(jQuery('[name="your-name"]').val());
      jQuery('#popmake-'+popupnum_id+' #popup_email').html(jQuery('[name="your-email"]').val());
	  PUM.open(popupnum_id);
      break;
  }
}, false);


jQuery(document).on('pumBeforeClose', '.pum', function () {
	popupcancel();
});

jQuery(document).on('click', '#pop-cancel', function () {
	popupcancel();
    PUM.close(popupnum_id);
});

function popupcancel()
{
  if(popupcancelflg)
  {
  		wpcf7c_to_step1(jQuery("form"), true);
  }
}

jQuery(document).on('click', '#pop-submit', function () {
    popupcancelflg =false;
    PUM.close(popupnum_id);
	jQuery('.wpcf7-submit').click();
});

 

■ということで完成です。

フォームに内容を入力して、「確認」ボタンを押すとポップアップで確認が表示され、そのまま「送信」も可能！！

 

悩み始めて数時間で何とか料理できました。出来上がってみると大したことないってところ？？？