【WordPress】プラグイン開発の基本 – 校正支援プラグインを作る3

wordpress-logo

前回の続き

少し使いやすいように修正しました。

スポンサーリンク

 取得したデータを見やすく表示する

前回は取得したデータをコンソールに表示するので終わってしまいました。

今回はYahoo!から取得したデータを加工して、モーダル画面で表示するように修正していきます。

表示用にデータを加工するのはPHPで行い、JavaScriptではそれを表示させるだけにする方針です。

表示させるものは二種類

  • 校正支援APIで指摘のあった単語を色付きで表示するもの
  • 校正支援APIの指摘情報一覧

検索ボタンを押したらAjaxでデータを取得、二種類の情報を上下二段に表示するようにします。

サーバー側の修正

本文に指摘情報を挿入する

前回のものを少し修正します。

遙か彼方に小形飛行機が見える。」をYahoo!の校正支援APIに渡すと以下のレスポンスが得られます。

前回はこれを以下の様に配列に直しました。

今回は表示用に「surface」を追加し、挿入操作をしやすくするために「length」をやめて「end」を持つようにします。

この配列の情報を後ろから適用していきます。

前から適用してしまうと「start」や「end」もずれていってしまうためです。

それぞれの校正情報に対しても後ろである「end」から処理していきます。

今回は指摘された単語を「span」で囲み、「data-text」に表示内容をもたせるようにしました。

ここで「str_insert」は自作関数で以下になります。

文字列「$string」の「$pos」番目のところに「$insert」を挿入する関数です。

ここまでで受け取った本文に指摘された情報を挿入できました。

指摘情報の一覧を生成する

受け取る校正情報は同じ単語、同じ指摘内容のものが複数出てくる場合があります。

その重複を除いたものを一覧にして返したいと思います。

先ほどの配列作成に少し手を加えます。

「surface」と「word」と「info」をつなげてハッシュキーにして重複したものが「$items」に入らないようにします。

さらにこの「$items」を使用してテーブルを生成します。

結果を返す

前回「wp_send_json」を使用しましたが、正常時と異常時それぞれのためのものがあるので、今回はそちらを使用します。

異常時は「wp_send_json_error」を使用します。

それぞれ返り値に「success」が追加され、正常時はtrue、異常時はfalseになります。

フロント側の修正

PHP側で生成した結果をモーダル画面で表示するように修正します。

モーダル画面はleanModal.jsを使用しました。

やることは3つあります。

  • leanModal.jsを読み込むための記述の追加
  • Ajaxで取得した結果を流しこむHTMLの追加
  • Ajaxで取得した結果を流し込む処理の追加

jsスクリプトの読み込み

管理画面でのjs、cssの読み込みは「admin_enqueue_scripts」をフックして、さらにその中で追加する記述を書きます。

jsファイルは「yproofreading/public/js」フォルダ内に配置しました。

モーダル画面用のHTML追加

今回は「admin_footer」に追加しました。

取得した結果を表示

「$(element).leanModal()」で、elementが押された時にモーダル画面が表示されます。

Ajaxのレスポンスが正常なときに、上で追加したHTMLにデータを流し込みます。

動作の調整、デザインの調整

いろいろ修正が必要です。

そしていろいろ修正したものをGithubに上げました。

yproofreading

ロード中の処理や指摘単語の色表示などを追加しています。

手を加えたりして使ってみてください。

コメント