WordPressメニュー項目へのフィールドの追加–プラグインの設定ページ

公開: 2021-07-08

WordPressプラグインを使用しているときに、作成者がプラグインの機能をカスタマイズするために使用できるいくつかの設定を提供していることに気付いたと思います。 技術的には、作成者はメニュー項目と、このメニュー項目がリダイレクトする設定ページを作成しました。 この記事では、自分のプラグインで同じことを行うために実行する必要のある手順を実行します。

この記事では、WordPressメニュー項目へのフィールドの追加–カスタムプラグインの記事の例で提供されているコードをすでに適用している必要があります。 そこから再開し、管理領域に設定ページを追加してプラグインをよりユーザーフレンドリーにする方法を確認します。これにより、管理ユーザーはプラグインの動作方法に関する設定を行うことができます。

初期ステップ

この記事の目的のために、私たちは素敵なシンプルな設定メニューを作成します。 前回の記事で見たように、プラグインを使用することで、管理者ユーザーは任意のメニュー項目に字幕を追加できます。 次の手順では、ユーザーが字幕フィールドをラップするHTML要素のタイプを選択できるようにするオプションを提供します。

この時点で、プラグインのメインPHPファイルは次のようになります。

 <?php /* Plugin Name: Menu Item Field Creator Description: My custom plugin to create menu item fields */ class MyCP_Menu_Item_Field_Creator { public function __construct() { add_action( 'wp_nav_menu_item_custom_fields', array( $this, 'menu_item_sub' ), 10, 2 ); add_action( 'wp_update_nav_menu_item', array( $this, 'save_menu_item_sub' ), 10, 2 ); add_filter( 'wp_nav_menu_args', array( $this, 'menu_item_sub_custom_walker' ) ); } public function menu_item_sub( $item_id, $item ) { $menu_item_sub = get_post_meta( $item_id, '_menu_item_sub', true ); ?> <div> <span class="subtitle"><?php _e( 'Subtitle', 'menu-item-sub' ); ?></span><br /> <input type="hidden" class="nav-menu-id" value="<?php echo $item_id; ?>" /> <div class="logged-input-holder"> <input type="text" name="menu_item_sub[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $menu_item_sub ); ?>" /> </div> </div> <?php } public function save_menu_item_sub( $menu_id, $menu_item_db_id ) { if ( isset( $_POST['menu_item_sub'][ $menu_item_db_id ] ) ) { $sanitized_data = sanitize_text_field( $_POST['menu_item_sub'][ $menu_item_db_id ] ); update_post_meta( $menu_item_db_id, '_menu_item_sub', $sanitized_data ); } else { delete_post_meta( $menu_item_db_id, '_menu_item_sub' ); } } public function menu_item_sub_custom_walker( $args ) { if ( class_exists( 'My_Custom_Nav_Walker' ) ) { $args['walker'] = new My_Custom_Nav_Walker(); } else { echo 'DOES NOT EXIST'; } return $args; } } $mycp_menu_item_field_creator = new MyCP_Menu_Item_Field_Creator(); if ( ! class_exists( 'My_Custom_Nav_Walker' ) ) { class My_Custom_Nav_Walker extends Walker_Nav_Menu { public function start_el( &$output, $item, $depth=0, $args=[], $id=0 ) { $menu_item_sub = get_post_meta( $item->ID, '_menu_item_sub', true ); $output .= '<li class="' . implode( ' ', $item->classes ) . '">'; if ( $item->url && $item->url != '#' ) { $output .= '<a href="' . $item->url . '">'; } else { $output .= '<span>'; } $output .= $item->title; if ( $item->url && $item->url != '#' ) { $output .= '</a>'; } else { $output .= '</span>'; } if ( ! empty( $menu_item_sub ) ) { $output .= '<div class="menu-item-sub">' . $menu_item_sub . '</div>'; } } } }

次に行うことは、プラグインの設定ページのメニュー項目と、設定ページにコンテンツとして含めることができるものの簡単な例を作成することです。

Pressidiumであなたのウェブサイトをホストする

60日間の返金保証

私たちの計画を見る

2つのWordPressフックを使用する必要があります。 admin_menuフックは管理メニュー項目を登録し、 admin_initフックは後でプラグイン設定ページをそのフォームに追加するときにプラグインオプションを登録します。 もちろん、WordPressが提供するAPIを最大限に活用し、いくつかの組み込み関数を使用します。 もっと深く掘り下げましょう。

オプションページのメニュー項目を作成する

メニュー項目を追加するために、現在追加されているフックの下の__construct()メソッド内に対応するadmin_menuフックを追加します。

 class MyCP_Menu_Item_Field_Creator { public function __construct() { add_action( 'wp_nav_menu_item_custom_fields', array( $this, 'menu_item_sub' ), 10, 2 ); add_action( 'wp_update_nav_menu_item', array( $this, 'save_menu_item_sub' ), 10, 2 ); add_filter( 'wp_nav_menu_args', array( $this, 'menu_item_sub_custom_walker' ) ); add_action( 'admin_menu', array( $this, 'plugin_settings_menu_page' ) ); } . . .

admin_menuフックを使用し、 plugin_settings_menu_page()メソッド（以下で説明します）を定義して、メニュー項目とプラグインの設定ページの情報を指定しました。

 public function plugin_settings_menu_page() { add_menu_page( __( 'Page Title Attribute Text', 'oop-menu-item-sub' ), __( 'Menu Item Field Creator', 'oop-menu-item-sub' ), 'manage_options', 'menu-item-field-creator', array( $this, 'plugin_settings_page_content' ) ); }

メソッドは、メインのプラグインクラス内にも配置する必要があります。 plugin_settings_menu_page()メソッド内で、WordPressが提供するadd_menu_page()関数を使用したことに注意してください。 この関数は、次の引数を受け入れます。

 add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position )
  • $page_titleを定義する必要があります。これは基本的に、このメニュー項目を選択したときにリダイレクトされるページのタイトルタグの最初の部分です。
  • $menu_title （これも必須）は、メニューに使用されるテキストです。
  • $capabilityは、このメニューをユーザーが表示するために必要な機能です。 この例では、スーパーユーザーと管理者にのみ付与されるmanage_options権限を選択しました。 どの役割または機能がニーズに合っているかを理解したい場合は、関連する公式ドキュメントを参照してください。
  • $menu_slugも必須であり、一意である必要があります。 このメニューを参照するのはスラッグ名です。 sanitize_key()と互換性のある小文字の英数字、ダッシュ、およびアンダースコア文字のみを使用する必要があることを忘れないでください。
  • $icon_urlはオプションの引数であり、メニュー項目に使用されるアイコンファイルにリンクするURLです。
  • $function引数は、設定ページのコンテンツを作成するコールバック関数を定義する場所です。 この場合、まだ機能がないのはplugin_settings_page_content()です。 plugin_settings_menu_page()メソッドを使用してコードに追加しました。
 public function plugin_settings_page_content() { $html = "<p>Test content for our custom plugin</p>"; echo $html; }

この時点で、「Menu Item Field Creator」メニュー項目とコンテンツページのテストコンテンツが表示され、引数で定義したメニューURLが認識されます。

また、プラグインのオプションを個別のトップレベルメニュー項目としてではなく、組み込みの[設定]メニューに含めたい場合は、代わりにadd_options_page()関数を使用して簡単に行うことができます。 その場合、これを置き換える必要があります。

 public function plugin_settings_menu_page() { add_menu_page( __( 'Page Title Attribute Text', 'oop-menu-item-sub' ), __( 'Menu Item Field Creator', 'oop-menu-item-sub' ), 'manage_options', 'menu-item-field-creator', array( $this, 'plugin_settings_page_content' ) ); }

これとともに：

 public function plugin_settings_menu_page() { add_options_page( __( 'Page Title Attribute Text', 'oop-menu-item-sub' ), __( 'Menu Item Field Creator', 'oop-menu-item-sub' ), 'manage_options', 'menu-item-field-creator', array( $this, 'plugin_settings_page_content' ) ); }

これにより、ここにメニューの場所が表示されます。

次のセクションでは、管理者ユーザーがプラグインの動作を設定するために使用できるいくつかの簡単なコンテンツを設定ページに配置します。

設定ページに機能を追加する

これまでに行ったことは、メニュー項目を追加し、設定コンテンツページを表示する関数を定義することです。 設定ページで機能が必要な場合は、いくつかのフィールドを登録してから、プラグインの設定ページに表示する必要があります。 例として、ユーザーが字幕フィールドをラップするHTML要素のタイプを定義できるフォームを作成します。

出力

plugin_settings_page_contentコードを次のように置き換えます。

 public function plugin_settings_page_content() { ?> <form action="options.php" method="post"> <?php do_settings_sections( 'options_page' ); settings_fields( 'option_group' ); submit_button( __( 'Save Subtitle', 'oop-menu-item-sub' ) ); ?> </form> <?php }

これらの行では、 do_settings_sections()およびsettings_fields()関数を使用します。 do_settings_sections()は、登録されているすべての設定セクションとフィールドを出力します。 settings_fields()は、設定ページのnonce、action、およびoption_pageの非表示の入力フィールドを出力します。

それでは、先に進んで設定を登録しましょう。

設定を登録する

必要なフィールドを登録するには、管理画面が初期化されているときに起動するadmin_initフックを使用します。

 class MyCP_Menu_Item_Field_Creator { public function __construct() { add_action( 'wp_nav_menu_item_custom_fields', array( $this, 'menu_item_sub' ), 10, 2 ); add_action( 'wp_update_nav_menu_item', array( $this, 'save_menu_item_sub' ), 10, 2 ); add_filter( 'wp_nav_menu_args', array( $this, 'menu_item_sub_custom_walker' ) ); add_action( 'admin_menu', array( $this, 'plugin_settings_menu_page' ) ); add_action( 'admin_init', array( $this, 'plugin_register_settings' ) ); } . . .

次のように、 plugin_register_settings()メソッドをクラス内に挿入します。

 public function plugin_register_settings() { register_setting( 'option_group', 'option_name' ); add_settings_section( 'section_id', __( 'Settings Page Title', 'oop-menu-item-sub' ), array( $this, 'render_section' ), 'options_page' ); add_settings_field( 'html_element', __( 'Choose HTML Element:', 'oop-menu-item-sub' ), array( $this, 'render_field' ), 'options_page', 'section_id' ); }

それでは、一歩下がって、これまでに行ったことをもう一度見てみましょう。

  • 設定とそのデータを登録するために、ドキュメントによると次のように構成されたregister_setting （）関数を使用しました。
 register_setting( $option_group, $option_name, $args )
  • $option_groupは必須パラメーターであり、 settings_fields()で使用されるグループ名と一致する必要があります。
  • $option_nameも必須であり、サニタイズして保存するオプションの名前です。 これは、オプションデータベーステーブルのoption_name列の下の値です。
  • $argsはここでは必要ありません。 登録時に設定を記述するオプションのデータ配列です。 ここで指定できるのは、そのタイプ、説明、オプションの値のsanitize_callback()関数、現在のデータをREST APIに含めるかどうかを定義する「 show_in_rest 」オプション、およびデフォルト値を定義できるデフォルトオプションです。 get_option()を呼び出すとき。
  • また、このステップを完了するのに役立つadd_settings_section add_settings_section()およびadd_settings_field()関数も導入しました。
  • add_settings_section()関数は、特定のスラッグ名を持つセクションをWordPressに登録するために使用されます。 ここで、 $idはセクションを識別するためのスラッグ名であり、タグの「id」属性で使用されます。
 add_settings_section( $id, $title, $callback, $page )
  • $titleは、セクションの見出しとして表示されるセクションのフォーマットされたタイトルです。 $callbackは、セクションの上部にコンテンツをエコーする関数であり、 $pageは、必要なページのスラッグ名です。 do_settings_sections()の$page引数（この場合は「options_page」）と一致します。

上記のすべてのパラメーターが必要です。

  • WordPressが提供するadd_settings_field （）関数を使用すると、セクションに新しいフィールドを追加できます。
 add_settings_field( $id, $title, $callback, $page, $section, $args )
  • $id 、 $title 、 $callback 、および$pageは、前に説明したように使用されます。 $sectionは、ボックスを表示する設定ページのセクションのスラッグ名であり、フィールドを出力するときに$argsが使用されます。 $sectionと$argsはどちらもオプションです。

この記事の目的のために、私たちは私たちの価値観を無害化するための追加の機能を紹介しません。 ただし、フォームフィールドは常にサニタイズすることを強くお勧めします。

これで、導入する必要のある2つのパブリックメソッド、 render_section()とrender_field()ができました。

render_section()メソッドの場合、セクションの見出しだけを出力します。

 public function render_section() { ?> <h2><?php _e( 'Section #1', 'oop-menu-item-sub' ); ?></h2> <?php }

render_field()メソッドの場合、HTML要素の選択肢を含む3つのラジオボタンを出力します。

 public function render_field() { $stored_option = get_option( 'option_name' )['html_element']; ?> <input type="radio" name="option_name[html_element]" value="div" <?php checked( $stored_option, 'div' ); ?> /> div <input type="radio" name="option_name[html_element]" value="p" <?php checked( $stored_option, 'p' ); ?> /> p <input type="radio" name="option_name[html_element]" value="span" <?php checked( $stored_option, 'span' ); ?> /> span <?php }

これはあなたが今見ている結果であるはずです：

たとえばスパンなどの別の要素を選択して保存すると、その要素も正しく機能するはずです。

オプションページの変更をWebサイトに反映する

説明するために残っている最後のステップは、管理者ユーザーがWebサイトのフロントエンドのメニュー項目の下にあるサブタイトル要素に選択するHTML要素を適用する方法です。

必要なのは、データベースオプションテーブルから選択したフィールドを取得し、コードの「 My_Custom_Nav_Walker 」クラスを変更することだけなので、この手順は非常に簡単です。 具体的には、 menu_item_subエントリを$output変数に追加するコードの部分を置き換える必要があります。

 $output .= '<div class="menu-item-sub">' . $menu_item_sub . '</div>';

まず、 get_option( 'option_name' )['html_element'];を使用して要素を取得します。 それを$stored_option変数に保持してから、上記の行に適用します。 最終的なクラスは次のようになります。

 if ( ! class_exists( 'My_Custom_Nav_Walker' ) ) { class My_Custom_Nav_Walker extends Walker_Nav_Menu { public function start_el( &$output, $item, $depth=0, $args=[], $id=0 ) { $menu_item_sub = get_post_meta( $item->ID, '_menu_item_sub', true ); $output .= '<li class="' . implode( ' ', $item->classes ) . '">'; if ( $item->url && $item->url != '#' ) { $output .= '<a href="' . $item->url . '">'; } else { $output .= '<span>'; } $output .= $item->title; if ( $item->url && $item->url != '#' ) { $output .= '</a>'; } else { $output .= '</span>'; } $stored_option = get_option( 'option_name' )['html_element']; if ( ! empty( $menu_item_sub ) ) { $output .= '<'. $stored_option .' class="menu-item-sub">' . $menu_item_sub . '</'. $stored_option .'>'; } } } }

プラグインのコードを見ながら設定ページを作成するときに、WordPressの機能がどのように機能するかを視覚化すると役立つ場合があります。 この例では、次のようになります。

結論

ご存知のとおり、WP設定APIは、プラグインのオプションページのボーンを作成するためのメインツールです。 それ以外に、クラスでよりオブジェクト指向のアプローチを使用するか、メインプラグインのPHPファイルに関数とフックを貼り付けるだけの単純なルートを使用するかを決定するのはあなたの選択です。

ここで、プラグインを再構築するためにたどったルートは実際にはOOPではなく、間違いなくその方向に一歩進んだことを指摘しましょう。 OOPに関する今後の一連の記事では、プラグインの管理を強化できる他の機能について詳しく説明します。

カスタムプラグインの設定ページを作成するのは少し混乱するかもしれませんが、この記事を読んだ後、何が必要かを理解できれば幸いです。 ハッピーコーディング！

また読む

  • WordPressメニュー項目へのカスタムフィールドの追加
  • WordPressメニュー項目へのフィールドの追加–カスタムプラグイン