最近更新をサボりがちでしたが、仕事の合間をぬってReact18を勉強しておりました！

今回は、「自分が作りたい物を作れたらとりあえず上々」的なプログラミングあるあるにもとづいて、Wordpressプラグインを作成しています。

ちなみにプラグインの内容はこんな感じです。

# プラグインの機能

  • 管理画面
    • キャストのスケジュールの登録・編集・削除
    • 営業時間と時間の刻み方（何分刻みなど）の設定
    • 日付とキャストからスケジュールを検索
    • ユーザーのプロフィール写真フィールドの作成
  • WP REST API
    • スケジュールのエンドポイント追加
    • エンドポイントにキャスト・日付（today, week, month, {num}）から検索できる機能

 

フロント側への出力は未完ですが、個人的にWP REST APIが好きなのでめちゃくちゃ達成感です！

いつもだと事細かくコードの説明を書くのですが、今回は内容がかなりヘビーなので必要そうなところだけ後日に紹介してきます！

 

事前事項

特記事項

今回作成したプラグインは、私が別で作成したUserをWP REST APIで出力するプラグインと合わせて使用するものになります。

【WP User to REST API】WP REST APIにユーザー一覧を出力するプラグイン
【WPUsertoRESTAPI】WPRESTAPIにユーザー一覧を出力するプラグイン
セキュリティ上心配なWPRESTAPIのユーザー一覧を、独自のエンドポイントで非投稿者も含め全て取得するプラグイン
[ brandnew ][ brandnew ]
続きを読む

上記プラグインはセキュリティ上、管理者の出力は出来ないようにしてあります。（出力する権限を変更できるので、管理者も可：極力避けてほしい）

また、今回作成したプラグインもセキュリティ上、管理者をキャストとして扱うことはできません。

使用言語

今回使用した言語は下記のとおりです。

  • React
  • Vanilla Js
  • PHP
  • SQL
  • Jquery（Wordpressの仕様上）

機能紹介

キャストのスケジュールの登録・編集・削除

キャストはWordpressに登録されたユーザーとなり、プラグインの専用ページから登録・削除・編集が行なえます。

ユーザー名は display_name が使用されます。（DBへの登録はuser_idです）

Fetchは、PHPで作成したAPI的なものに対してReactからpost送信する流れになります。

日付とキャストからスケジュールを検索

非同期で目的のキャストや日付からスケジュールを検索することができます。

営業時間と時間の刻み方（何分刻みなど）の設定

お店によって営業時間はもちろん、出勤の分刻みも異なるのでそれに対応できるような機能も実装しています。

スケジュールのエンドポイント追加

個人的にWP REST APIが大好きなので、フロント側でREST APIで情報を取得できるように、エンドポイントを追加しました。

エンドポイント：{$url}/wp-json/wp/v2/myc

エンドポイントの日付検索

具体的な日付で検索する場面が想定できなかったので、今日から何日分の情報を取得するという検索方法を採用しています。

param remark
?day=today 今日
?day=week 今日から7日
?day=month 今日から30日
?day={num} 今日から{num}日

ユーザーごとのスケジュールのエンドポイント

特定ユーザーのスケジュール一覧は重宝するだろうと思ったので作成しています。

また、日付検索と複合することも可能です。

※管理者ユーザーのIDをいれても一覧には出力されません。

param remark
{$base_url}/user_id 該当のユーザーIDのスケジュール一覧
{$base_url}/user_id?day=xxx 日付と複合検索

最後に

一旦上記が完成している機能となり、これからフロント部分も作っていけたらなと考えています。

フロント部分にて実装予定の機能は下記となります。

# フロント実装予定機能

  • キャスト一覧のショートコード化
  • 週間スケジュールのショートコード化
  • キャストランキングのショートコード化
  • キャスト詳細ページ
    • レビュー
    • 評価
    • Twitter表示
    • フィールド追加

 

キャスト一覧なんかはそのままarchiveにしても良さそうですが、表示させたい箇所を指定したい場合もあるので、ショートコード化しようと思います。

レビューや評価、Twitter表示はほとんど必要なさそうなのでかなり先の実装になりそうです。

フィールドに関しても、このプラグインで制御する必要性があまり見えないので、最低限必要な分を除いて実装するかはわかりません。

現状Reactの勉強がてら、こんな感じのプラグインを作っています！

興味を持たれた方は、ぜひTwitterのフォローをよろしくお願いします！！

では、よいReactライフを！