WordPressで設定ページを作成する方法
公開: 2020-06-25WordPressプラグインを作成している場合、その設定ページを作成する方法を疑問に思うかもしれません。 WordPressはこのためのある種の「標準」メカニズムを提供していますか？ 最新の設定ページを作成するための新しいツールやフレームワークはありますか？ 設定ページを作成するのは良い考えですか？ さて、今日はこれらすべてについて話し、あなたの質問に答えます。
オプションではなく決定
WordPressは、ウェブの民主化を目的としたプラットフォームです。 この声明は非常にいいように聞こえますが、同時に非常に抽象的なものであり、「誰でもWordPressを使用できるようにしたい」という言い方です。 そして、信じられないかもしれませんが、設定ページはその障壁になる可能性があり、実際、多くの場合、その障壁になります。 私を信じないの？ まあ、WordPress自体はそれを言います：
決定を下すとき、これらは私たちが最初に考慮するユーザーです。 この考慮事項の良い例は、ソフトウェアオプションです。 ユーザーにオプションを与えるたびに、ユーザーに決定を求めることになります。 ユーザーがオプションを気にかけたり理解したりしない場合、これは最終的にフラストレーションにつながります。 開発者として、すべてにオプションを提供することは良いことだと感じることがありますが、選択肢が多すぎることはありませんよね？ 最終的に、これらの選択肢は技術的なものになり、平均的なエンドユーザーが関心を持たない選択肢になります。開発者としての私たちの義務は、賢明な設計上の決定を下し、エンドユーザーに技術的な選択肢の重みをかけないようにすることです。
WordPressの哲学
したがって、設定ページを作成する前に、ユーザーに提供するオプション、ユーザーにそれらのオプションへのアクセスを許可する理由、およびそのために必要か有用かを慎重に検討してください。
代替としてのフィルター
ユーザーにあまり多くのオプションを提供することになっていないことを知っていても、開発者として、オプションを提供する代わりに決定を下すのは必ずしも簡単ではないことを告白しなければなりません。 公開しているオプションが複雑であることは承知していますが、ユーザーに選択機能を持たせたい場合があります。 では、これらの場合はどうすればよいですか？ WordPressの推奨事項に従い、上級ユーザーを制限しますか？
幸いなことに、WordPressはこのジレンマに対する完璧なソリューションを提供します：フィルター。 プラグインを設計し、（上級の）ユーザーがその動作を調整できるようにする場合は、設定ページなどを作成しないでください。 代わりに、WordPressのフィルタリングメカニズムを使用してプラグインをカスタマイズ可能にします。
フィルタを使用する場合、ほとんどのユーザーはデフォルトの動作（「決定」を覚えていますか？）を利用できます。これは、フィルタにデフォルト値が設定されたプラグインを使用するためですが、上級ユーザーはこれらを変更できます。フックによる決定（したがって、「オプション」もあります）。 両方の長所！
WordPressの設定
さて、ユーザーの意思決定の重要性を認識し、フィルターを介してこの制限を回避する方法（必要な場合）を確認したので、WordPressで設定ページを作成する方法を見てみましょう。 Cuz、うん：ユーザーの好みに応じて決定を下すオプションをユーザーに提供する必要がある場合があります。
WordPressの設定API
設定APIはWordPressバージョン2.7で追加されました。 これは、設定ページの作成を標準化する一連の関数であり、使用可能なオプション、それらの各オプション（基本的にはフォームのフィールド）を編集するためのユーザーインターフェイス、および検証、保存の方法を定義できます。 、およびそれらの値を取得します。
学習するのに最適な方法は例を使用することだと思うので、設定APIを使用して最初の設定ページを段階的に作成しましょう。
新しい設定ページの作成
設定ページを作成するために最初に行う必要があるのは、設定を表示するページを作成することです（驚き、驚きです！）。 これを行うには、 admin_menuアクション中にadd_options_page関数を使用して、ページを登録します。
function nelio_add_settings_page() { add_options_page( 'Nelio Plugin Settings', 'Nelio', 'manage_options', 'nelio-example-plugin', 'nelio_render_settings_page' ); } add_action( 'admin_menu', 'nelio_add_settings_page' ); ご覧のとおり、この機能で行うのは、WordPressの[設定]メニューに表示される新しいページを、そのタイトル、メニュー内の名前、ユーザーがアクセスできるようにするために必要な権限とともに登録することだけです。 、およびoson。 最後の引数nelio_render_settings_pageは、上記のページのレンダリングを担当する関数の名前です。
<?php function nelio_render_settings_page() { ?> <h2>Nelio Plugin Settings</h2> <form action="options.php" method="post"> <?php settings_fields( 'nelio_example_plugin_settings' ); do_settings_sections( 'nelio_example_plugin' ); ?> <input type="submit" name="submit" class="button button-primary" value="<?php esc_attr_e( 'Save' ); ?>" /> </form> <?php } 設定ページ自体は比較的簡単に作成できます。 WordPressによってコンテンツが半自動で生成されるformを追加するだけです。 一方では、 settings_fields関数を呼び出します。この関数は、基本的にフォームにナンスを追加して「安全」にします。 次に、 do_settings_sections関数を使用してプラグイン用に作成したすべての設定をレンダリングするようにWordPressに依頼します。 そして最後に、フォームを送信するためのボタンを追加するだけです。
設定ページの実際の設定
次に、設定ページの一部となる各オプションを登録する必要があります。 これを行うには、2つの関数を使用します。データベースに設定を保存する名前を指定できるregister_settingと、個々のオプションを追加するadd_settings_fieldです。
function nelio_register_settings() { register_setting( 'nelio_example_plugin_settings', 'nelio_example_plugin_settings', 'nelio_validate_example_plugin_settings' ); add_settings_section( 'section_one', 'Section One', 'nelio_section_one_text', 'nelio_example_plugin' ); add_settings_field( 'some_text_field', 'Some Text Field', 'nelio_render_some_text_field', 'nelio_example_plugin', 'section_one' ); add_settings_field( 'another_number_field', 'Another Number Field', 'nelio_render_another_number_field', 'nelio_example_plugin', 'section_one' ); } add_action( 'admin_init', 'nelio_register_settings' ); 前のコードスニペットには、特別な注意が必要なことがいくつかあります。 一方では、 register_setting関数の3番目の引数としてnelio_validate_example_plugin_settingsがあることに注意してください。 これは、ユーザーが選択した値を検証するために呼び出されるコールバック関数の名前です（フォームフィールドを常に検証およびサニタイズする必要があることに注意してください）。 この関数は次のようなものです。
function nelio_validate_example_plugin_settings( $input ) { $output['some_text_field'] = sanitize_text_field( $input['some_text_field'] ); $output['another_number_field'] = absint( $input['another_number_field'] ); // ... return $output; } ここで、送信された各フィールドを$inputから取得し、それを$outputにサニタイズして、データベースに保存する結果が何であれ、有効で正しいことを確認します。
次に焦点を当てたいのは、定義する各フィールドには、各フィールドのレンダリング方法をWordPressに指示する関数参照も含まれているという事実です。 たとえば、この例のフィールドのコールバックは次のようになります。
function nelio_section_one_text() { echo '<p>This is the first (and only) section in my settings.</p>'; } function nelio_render_some_text_field() { $options = get_option( 'nelio_example_plugin_settings' ); printf( '<input type="text" name="%s" value="%s" />', esc_attr( 'nelio_example_plugin_settings[some_text_field]' ), esc_attr( $options['some_text_field'] ) ); } function nelio_render_another_number_field() { $options = get_option( 'nelio_example_plugin_settings' ); printf( '<input type="number" name="%s" value="%s" />', esc_attr( 'nelio_example_plugin_settings[another_number_field]' ), esc_attr( $options['another_number_field'] ) ); } 本質的に、これらのコールバックはすべて、レンダリングすることになっているフィールドの現在の値を取得し（ get_optionを使用）、ユーザーがいずれかの値を設定できるようにするHTMLをレンダリングしinput （この例では、 textまたはnumber入力してください）。
最終結果は何ですか、あなたは尋ねますか？ これ：
最終的な考え
ご覧のとおり、設定ページの作成は比較的簡単です。 プロセス全体は非常に反復的であり、同じ定型コードを何度も何度も作成する必要があるため、個人的にはあまり好きではありませんが、それでも簡単です。
ただし、このプロセスをさらに簡素化するために、いくつかのオンラインコードジェネレーターがあり、シンプルなユーザーインターフェイスを介して、設定ページで必要なさまざまなフィールドを定義できます。 いくつかの例を次に示します。
- WP設定API
- WordPressOptionページジェネレータ
そしてもちろん、Reactのような技術を使って設定ページを作成する可能性は常にあります…しかし、これは別の時代の話ですよね？
UnsplashのRimaKrucieneによる注目の画像。