ITトラブル支援

「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();
});

 

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

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

 

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

WordPressの投稿で記事を作成するときにセレクト文を記述したいと思うときがあるかと思います。（何の時ってなにかプルダウンで選択させてたいとき）

 

記述の注意としては

 

テキストモードで編集

セレクトテスト：<select>
<option></option>
</select>

セレクトテスト２：<select></select>

 

↓問題なく下記のように表示された。

 

コードをそのままでエディタをビジュアルモード →テキストモードタブの切り替えを行っていると。。。

セレクトテスト：<select>
<option></option>
</select>

セレクトテスト２：

 

そうすると「select」のコードが消えた。

<option>がある場合は残るみたいだが、optionが無い場合は消えてしまう。

 

標準のエディタでこのようになるので仕様っぽいですね。WordPressは4.9系

 

javascript等でoptionを自動で記述したい場合は気を付けいたい点ですね。