管理ページフレームワーク| マイケル・ウノ

管理ページフレームワーク| マイケル・ウノ

説明

プラグインとテーマの開発に費やす時間を削減する

WordPressプラグインとテーマの開発で時間のかかる部分の1つは、設定ページの作成です。プラグインやテーマを作成することが増えるにつれて、コードの大部分を再利用できることにすぐに気付くでしょう。管理ページフレームワークは、繰り返しコードを何度も書く必要をなくす再利用可能なコードを提供することを目的としています。

フレームワークを使用してオプションページを構築するためのより組織化された手段があります。ライブラリクラスを拡張し、フォーム要素を定義する配列を事前定義されたクラスメソッドに渡します。ライブラリは、舞台裏ですべての複雑なコーディングを処理し、ページとフォームを作成します。

ユーザーに不可欠なページとフォームのコンポーネントを作成する

  • トップレベルページ、サブページ、およびページはめ込みタブ–ユーザーがプラグインまたはテーマを操作するためにアクセスする場所。
  • フォーム–ユーザーがオプションを保存できるようにします。
  • カスタム投稿タイプ–および投稿リストテーブルのカスタム列。
  • カスタムタクソノミーとフィールド–タクソノミーに関連付けられたオプションをタクソノミー定義ページに保存します。
  • メタボックスとフィールド–設定された投稿タイプの投稿に関連付けられたメタデータを保存します。また、フレームワークで作成されたページにメタボックスを追加することもできます。
  • ウィジェットとフィールド–フロントエンドでのユーザーの設定に基づいてモジュラー出力を表示します。
  • ネットワーク管理ページとフォーム–WordPressマルチサイトのnewtork管理エリアに管理ページを作成します。

シンプルでありながら複雑な設定フォームを作成する

  • セクションタブ–フォームセクションはタブ付きボックスに表示できます。
  • 折りたたみ可能なセクション–フォームセクションは折りたたみおよび展開できます。
  • 繰り返し可能なセクションとフィールド–フォームのセクションとフィールドを動的に追加/削除します。
  • 並べ替え可能なセクションとフィールド–フォームのセクションとフィールドをドラッグアンドドロップして、順序を変更します。
  • ネストされたセクションとフィールド–複雑なフォームを構築するためのネストされたセクションとフィールド
  • インポートおよびエクスポートオプション–ユーザーがテキストファイルをアップロードおよびダウンロードすることで設定をインポートおよびエクスポートできるボタン。
  • リセットボタン–ユーザーが保存されたオプションを初期化できるようにします。
  • 検証およびエラーメッセージ–事前定義された検証コールバックを使用して、ユーザーの送信フォームデータを検証できます。さらに、エラー配列を設定することで、ユーザーにエラーメッセージを表示することができます。
  • コンテキストヘルプペイン–ヘルプ情報は、各画面の右上に表示されるコンテキストヘルプペインに追加できます。
  • カスタムフィールドタイプ–独自のフィールドタイプを登録できます。これにより、チェックボックスとテキストフィールドの組み合わせなど、独自のフィールドを設計できます。
  • お問い合わせフォーム–管理ページに埋め込まれたお問い合わせフォームを介して送信されたユーザーフィードバックと問題レポートの電子メールを受信します。
  • ツールチップ–セクションとフィールドタイトルの横に小さなポップアップボックスを追加して、ユーザーがオプションについて読むことができるようにします。

フレームワークの拡張性を備えた一連の製品を作成する

無制限の数のアドオンで拡張される可能性のある製品を作成することを計画している場合は、フレームワークのネイティブな拡張性を利用してください。作成された管理ページとフォームは、自動的に作成されたフックで高度に拡張可能になります。言い換えれば、他の開発者がプラグインやテーマをカスタマイズできるようにします。それはあなたのプロジェクトを成長させることになります。

また、フレームワークをライブラリとして使用すると、プラグインまたはテーマをインストールするために追加の依存関係を要求する必要はありません。したがって、製品は完全にポータブルになります。

組み込みフィールドタイプ

  • text –テキスト入力を入力するための通常のフィールド。
  • password –マスクされたテキスト入力フィールド。
  • textarea–複数行のテキスト入力フィールド。TinyMCEリッチテキストエディタをサポートしています。
  • radio –ユーザーがオプションを選択できるようにするラジオボタンのセット。
  • checkbox –ユーザーがアイテムを有効/無効にできるチェックボックス。
  • select –ユーザーがリストから1つ以上のアイテムを選択しないようにするドロップダウンリスト。
  • hidden –非表示の値を挿入するのに役立つ非表示フィールド。
  • file –ユーザーがファイルをアップロードできるようにするファイルアップローダー。
  • image –ユーザーが画像のURLを設定できるようにする画像アップローダースクリプトを含むカスタムテキストフィールド。
  • media –ユーザーがファイルのURLを設定できるメディアアップローダースクリプトを含むカスタムテキストフィールド。
  • color –カラーピッカースクリプトを使用したカスタムテキストフィールド。
  • submit –ユーザーがフォームを送信できるようにする送信ボタン。
  • export –ユーザーが保存されたデータをエクスポートできるようにするカスタム送信フィールド。
  • import –ファイルのカスタム組み合わせフィールドと、ユーザーがデータをインポートできるようにする送信フィールド。
  • posttype –タブ付きボックスでサイトで有効になっている分類法のチェックリストのセット。
  • taxonomy –タブ付きボックスでサイトで有効になっている分類法のチェックリスト。
  • size –ユーザーが選択可能な単位でサイズを設定できるようにするテキストと選択フィールドの組み合わせフィールド。
  • section_title –ユーザーがセクションに名前を付けることができるように、セクションタイトルに配置されるテキストフィールド。
  • system –サイトシステム情報を表示します。
  • inline_mixed –フィールドタイプが異なるフィールドのインライン要素で構成されます。

バンドルされたカスタムフィールドタイプ

カスタムフィールドタイプを使用すると、より詳細なカスタマイズされたフィールド出力を作成できます。デモコンポーネントには、次のカスタムフィールドタイプの例が含まれています。

  • ace –豊富なコードエディター。
  • sample –JavaScriptスクリプトを使用したサンプルのカスタムフィールドタイプ。
  • github –GitHubボタンを表示します。
  • path –ユーザーがサーバー上のファイルパスを選択できるようにします。
  • toggle –ユーザーがスイッチボタンを切り替えることができます。
  • no_ui_slider –ユーザーがスライダーを使用して範囲間の値を設定できるようにします。
  • select2 –ユーザーが事前定義されたリストからAJAXを入力できるアイテムを選択できるようにします。
  • post_type_taxonomy –ユーザーが選択した投稿タイプの分類用語を選択できるようにします。

ここにリストされていないフィールドタイプが必要な場合は、フィールドタイプパックを確認するか、フォーラムで新しいフィールドタイプをリクエストできます

入門

開始するには、に行くダッシュボード– > [管理者ページフレームワーク– >について– >スタート

デモ

デモページをアクティブにして、フレームワークの可能な機能を確認します。これをアクティブにするには、[ダッシュボード] -> [管理ページフレームワーク] -> [アドオン] -> [デモ]に移動します。

ドキュメンテーション

注:このフレームワークは、それ自体では何もしません。開発者でない場合は、これは必要ありません。

ユニークなページスラッグを使用する

フレームワークは内部的にadd_submenu_page()関数を使用してサブメニューページを登録します。同じページスラッグが複数のルートページに登録されている場合、最後に登録されたコールバックのみがトリガーされます。他のものは無視されます。

つまりabout、プラグイン/テーマの情報ページなどの非常に単純なページスラッグを選択し、同じページスラッグを使用する別のプラグインがある場合、ユーザーはあなたのページまたは他のページのいずれかを取得します。

これを回避するには、必ず一意のページスラッグを使用してください。これを行う1つの方法は、のようなプレフィックスを追加することですapf_about

コンポーネントジェネレータで生成されたファイルを使用する

フレームワークを含めるときに注意する必要があることが1つあります。それは、フレームワークのバージョンの競合です。フレームワークv3.4.6を使用してプラグインを公開し、プラグインユーザーがフレームワークバージョンより下のフレームワークv3.0.0を使用してプラグインをインストールするとします。他のプラグインが自分のプラグインよりも早く読み込まれると、プラグインが正しく機能しない可能性があります。

このような競合を回避する方法があります。含めるフレームワークのPHPクラス名を変更します。すべてのクラス名にはプレフィックスが付いているAdminPageFrameworkので、のように変更してくださいMyPlugin_AdminPageFramework

[ダッシュボード] -> [管理ページフレームワーク] -> [ツール] -> [ジェネレーター]に移動しますオプションフィールドにプレフィックスを設定し、ファイルをダウンロードします。

フレームワーククラス名を変更しない場合は、AdminPageFrameworkファクトリクラスを拡張することになっています

class MyAdminPage extends AdminPageFramework {
    ...
}

フレームワークのクラス名を変更するときは、変更した名前でクラスを拡張してください。

class MyAdminPage extends MyPlugin_AdminPageFramework {
    ...
}

詳細な手順については、[ダッシュボード] -> [管理ページフレームワーク] -> [バージョン情報] -> [はじめに]に移動してください

WordPressの最低限必要なPHPバージョンが5.3以上になるまでに、名前空間を使用できるようになり、この問題は解決されます。

フレームワークのシステムメッセージを変更する

フレームワークによって定義されたデフォルトのメッセージは変更できます。たとえば、フレームワークを使用して設定をインポートすると、設定通知「オプションが更新されました」が表示されます。が表示されます。

他のものに変更したい場合は、oMsgオブジェクトを変更してくださいaMessagesフレームワークが使用するすべてのメッセージを保持するパブリックプロパティ配列があります。

‘attributes’配列引数に慣れてください

各フィールド定義配列でattributesは、フィールドのHTML属性を定義する引数を設定できるため、属性値を渡すことでフィールドの出力を変更できます。

引数は値を配列として受け入れます。各要素は、属性の名前と値を表します。配列キーは属性の名前に対応し、値は属性値に対応します。

例えば、

array(
    'field_id'      => 'interval',
    'title'         => __( 'Interval', 'task-scheduler' ),
    'type'          => 'number',
    'attributes'    => array(
        'min'   => 0,
        'step'  => 1,
        'max'   => 24,
    ),
),

さらに、次のコンテナ要素のキーを設定し、ネストされた属性配列を渡すことで、それらの属性を変更できます。

  • fieldrowtdフィールド出力を含むタグ要素。
  • fieldsetfieldsetフィールド出力を含むタグ要素。
  • fieldsdivサブフィールドとメインフィールドを含むタグ要素。
  • fielddiv各フィールドを含むタグ要素。

この送信ボタンは右に浮きます。

array(
    'field_id'          => 'submit',
    'type'              => 'submit',
    'save'              => false,
    'value'             => __( 'Save', 'task-scheduler' ),
    'label_min_width'   => 0,
    'attributes'        => array(
        'field' => array(
            'style' => 'float:right; clear:none; display: inline;',
        ),
    ),
)

メタボックスおよびウィジェットフォームフィールドの場合(一般的な管理ページとはスタイルがわずかに異なるため)、

array(
    'field_id'          => 'submit_in_meta_box',
    'type'              => 'submit',
    'save'              => false,
    'show_title_column' => false,
    'label_min_width'   => 0,
    'attributes'        => array(
        'field' => array(
            'style' => 'float:right; width:auto;',
        ),
    ),
),

‘image’フィールドタイプのプレビュー画像サイズの変更

imageフィールドタイプのプレビュー要素にカスタムサイズを指定するには、次のような属性配列を設定します。ここで、300pxは最大幅です。

array(
    'field_id'      => 'my_image_field_id',
    'title'         => __( 'Image', 'admin-page-framework-demo' ),
    'type'          => 'image',
    'attributes'    => array(
        'preview' => array(
            'style' => 'max-width: 200px;',
        ),
    ),
),

‘radio’フィールドタイプのアイテムを1行に1つずつ表示します

ラジオボタンの項目を1行に1つずつ表示するには、をに設定label_min_width100%ます。

array(
    'field_id'          => 'my_radio_field_id',
    'title'             => __( 'Radio Button', 'admin-page-framework-demo' ),
    'type'              => 'radio',
    'label_min_width'   => '100%',
    'label'             => array(
        'a' => __( 'This is a.', 'admin-page-framework-demo' ),
        'b' => __( 'This is b.', 'admin-page-framework-demo' ),
        'c' => __( 'This is a.', 'admin-page-framework-demo' )c
    ),
),

デフォルトのフィールド値を設定する

フィールドの初期値を設定するにdefaultは、フィールド定義配列の引数を使用します。

array(
    'field_id'  => 'my_text_field_id',
    'title'     => __( 'My Text Input Field', 'admin-page-framework-demo' ),
    'type'      => 'text',
    'default'   => 'This text will be displayed for the first time that the field is displayed and will be overridden when a user set an own value.',
),

フィールドには常に特定の値を表示します

value定義配列引数は、保存された値を抑制することができます。これは、別のデータソースから値を設定する場合、またはデータをカスタムの場所に保存するウィザードフォームを作成する場合に役立ちます。

array(
    'field_id'  => 'my_text_field_id',
    'title'     => __( 'My Text Input Field', 'admin-page-framework-demo' ),
    'type'      => 'text',
    'value'     => 'This will be always set.',
),

繰り返し可能なフィールドの場合は、数値でインデックス付けされたサブ要素に値を設定します。

array(
    'field_id'      => 'my_text_field_id',
    'title'         => __( 'My Text Input Field', 'admin-page-framework-demo' ),
    'type'          => 'text',
    'repeatable'    => true,
    'value'         => 'the first value',
    array(
        'value' => 'the second value',
    ),
    array(
        'value' => 'the third value',
    ),
),

または、options_{instantiated class name}フィルターを使用してオプションを抑制し、value引数を設定する必要がないようにすることもできます
例を参照してください、https://gist.github.com/michaeluno/c30713fcfe0d9d45d89f、https://gist.github.com/michaeluno/fcfac27825aa8a35b90f、

インストール

  1. アップロードadmin-page-framework.zipを経由してダッシュボード– >プラグイン– >新規追加– >アップロードプラグイン
  2. それをアクティブにします。

使用方法については、[ダッシュボード] -> [管理ページフレームワーク] -> [バージョン情報] -> [はじめに]に移動して、最初のプラグインを作成してください。

プラグインの作者

マイケル・ウノ

プラグインの公式ウェブサイトアドレス

https://wordpress.org/plugins/admin-page-framework/
Admin Page Frameworkプラグインの使用で問題が発生した場合は、以下にコメントしてください。問題の解決に最善を尽くします

コメントを残す