プラグインをReactを使って作成する
じゃーにゃりすとはじめにプラグインの作り方から こちらのサイトを参考にしながら作った
①ファイルを作ってプラグインと認識させる
②phpに好きな処理を書く
③cssとjsを読み込む
最低限の機能はこれで作れる
じゃーにゃりすと上の方法ではプラグインの出し入れが有効化するかしないかでしかできないので、管理画面を作る こちらわかりやすい
function sample_plugin_add_admin_menu(){
add_submenu_page('plugins.php','サンプルプラグインの設定','サンプルプラグインの設定', 'administrator', __FILE__, 'sample_plugin_admin_page');
}
add_action('admin_menu', 'sample_plugin_add_admin_menu');
これで管理画面はできる
こちらでデータベースと連携する
じゃーにゃりすといよいよReactでプラグインの設定画面を作っていく
こちらがわかりやすい
この記事の通りSTEP1-10をやればReactで構築した設定画面を作れる。
じゃーにゃりすとデータベースのoptionsテーブルから値を取得方法
サイトURLを取得するには
$str = get_option('siteurl');
この方法でoptionsテーブルに保存した設定画面の値を取り出す
phpファイルでechoで出力すればOK
じゃーにゃりすとon/off機能作成
ToggleControlを使用する
useStateとonClickで状態を操作する
optionsテーブルに状態(true/false)を保存して上記の方法で値を取り出す
add_action( 'wp_footer', function() {
$str = get_option('letter_decoration2_text');
$onoff = get_option('letter_decoration2_on_off');
if ($onoff == true) {
echo $str;
} else {
}
});
これでfooterにonのときはletter_decoration2_textを表示し、offのときは何も表示されないようにできる。
じゃーにゃりすと背景の色を変える機能を追加
まず設定画面をどうするか ラジオボタンにするか、チェックボックスにするか、プルダウンにするか
コンポーネント検索はこちら
https://wordpress.github.io/gutenberg/?path=/story/docs-introduction--page
ここで探しながら実際にどのようなものか見るものができる。便利！
よく使うものをまとめてくださってる方も
https://qiita.com/synchro_vision/items/b6f9d89b000549d0c197
今回は3つほどの選択肢を想定しているのでセレクトコントロール(SelectControl)を使うことにした。
プルダウンで表示される。
(公式によると選択肢が少ないならラジオボタンも検討せよとのこと)
const [ color, setColor ] = useState( '' );
<SelectControl
help= "白、黒、赤から選んでね"
label = "背景の色"
value = { color }
options={[
{
disabled: true,
label: '背景の色',
value: ''
},
{
label: '白',
value: 'white'
},
{
label: '黒',
value: 'black'
},
{
label: '赤',
value: 'red'
}
]}
onChange={ ( value ) => setColor( value ) }
/>
こんな感じ
各optionのvalue(whiteとか)は数字にしてる方もいたが、今の所数字にするメリットが見えない(強いて言えば文字数が減る)ので一旦色の名前にしておく
optionsにvalueがあるが
value = { color }
こちらも大事！
これがないと保存したあと再読み込みしても画面上に保存されてるのがどれかわからない状態になってしまうので、気をつける
じゃーにゃりすとコンボボックスコントロールとセレクトコントロールの違い
ComboboxControl は、検索入力を使用してオプションを検索できる機能が追加された、SelectControl の拡張バージョンです
とのこと
世界中の国の中から日本を探すときは ComboboxControlに Jと打つとJAPANが出てくるのでSelectControlより使いやすいということ
じゃーにゃりすとアクションフックとフィルターフック
アクションフックはWordPressの特定のタイミングで独自の処理を登録するためのもの
フィルターフックはWordPressの処理の途中で出力するためのもの
値を受け渡すのがフィルターフック！
アクションフック一覧
フィルターフック一覧