コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > バックエンド開発 > PHPチュートリアル > JSON 構造に基づいた WordPress プラグイン オプションの作成

JSON 構造に基づいた WordPress プラグイン オプションの作成

Barbara Streisand
リリース： 2024-12-11 15:48:11
オリジナル
417 人が閲覧しました

先日、WordPress プラグインのオプションを JSON ファイルで制御して、コード自体を調整することなく、将来的により簡単に設定を追加できるようにするにはどうすればよいか考えていました。

この記事では、2 つのセクションと 3 つのフィールド/オプションで構成される 1 つの設定ページを備えた、非常にシンプルな WordPress プラグインの例を示します。

完全なコードは Github にあります。

ベースのセットアップ

プラグインは最初は 3 つのファイルで構成されています。

  • adventures.json
  • adventures.php
  • class.adventures.php

基本的なプラグイン登録を含むadventures.php:

<?php
/*
Plugin Name: Adventures
Plugin URI: https://mortenhartvig.dk
Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra nisi eu varius pellentesque. Aenean posuere, velit mollis sodales convallis, ipsum lectus feugiat nunc, ac auctor sapien enim eu metus.
Version: 1
Requires at least: 6.1
Requires PHP: 8.3
Author: Morten Hartvig
Author URI: https://mortenhartvig.dk
License: Do whatever you want
*/

define('ADV__PLUGIN_DIR', plugin_dir_path(__FILE__));
define('ADV__PLUGIN_VIEW', ADV__PLUGIN_DIR . 'views');
define('ADV__PLUGIN_SLUG', 'adv');

require_once ADV__PLUGIN_DIR . 'class.adventures.php';

(new Adventures());
ログイン後にコピー

空のクラスを含むclass.adventures.php:

<?php

class Adventures {
    public function __construct() {

    }
}
ログイン後にコピー

adventures.json には、プラグイン設定の JSON 構造が含まれています:

{
    "settings": {
        "pages": [
            {
                "title": "Adventures",
                "capability": "manage_options",
                "slug": "adv"
            }
        ],
        "sections": [
            {
                "id": "portal_base",
                "title": "Base configuration",
                "description": "Lorem 1, ipsum dolor sit amet consectetur adipisicing elit. Cumque nulla in officiis. Laborum quisquam illo eaque, deserunt facere mollitia sint doloremque maiores, obcaecati reiciendis voluptate itaque iure fugiat quia architecto!",
                "view": "section"
            },
            {
                "id": "portal_appearance",
                "title": "Appearance",
                "description": "Lorem 2, ipsum dolor sit amet consectetur adipisicing elit. Cumque nulla in officiis. Laborum quisquam illo eaque, deserunt facere mollitia sint doloremque maiores, obcaecati reiciendis voluptate itaque iure fugiat quia architecto!",
                "view": "section"
            }
        ],
        "fields": [
            {
                "id": "adv_portal_key",
                "title": "Portal Key",
                "section": "portal_base",
                "type": "text",
                "placeholder": "Enter your portal key",
                "view": "field.text"
            },
            {
                "id": "adv_api_host",
                "title": "Host API",
                "section": "portal_base",
                "type": "text",
                "placeholder": "Enter API host",
                "default": "https://api.mortenhartvig.dk",
                "view": "field.text"
            },
            {
                "id": "adv_portal_theme",
                "title": "Theme",
                "section": "portal_appearance",
                "type": "select",
                "options": {
                    "rounded.v1": "Round (V1)",
                    "squared.v1": "Square (V1)",
                    "standard": "Standard"
                },
                "default": "standard",
                "view": "field.select"
            }
        ]
    }
}
ログイン後にコピー

JSONデータの読み込み

設定のプロパティを作成し、set_settings():
を呼び出します。 

private $settings;

public function __construct() {
    $this->set_settings();
}
ログイン後にコピー

set_settings() と get_json_data() を作成します:

private function set_settings() {
    $data = $this->get_json_data();

    $this->settings = $data['settings'];
}

private function get_json_data() {
    $file = ADV__PLUGIN_DIR . 'adventures.json';

    if (!file_exists($file)) {
        die('adventures.json not found');
    }

    return json_decode(file_get_contents($file), true);
}
ログイン後にコピー

die(print_r($this->settings)) を __construct に追加すると、設定が実際にロードされたことを確認できます。

Creating WordPress plugin options based on a JSON structure

設定ページ

コンストラクターから init_hooks() を呼び出します:

public function __construct() {
    $this->set_settings();
    $this->init_hooks();
}
ログイン後にコピー

init_hooks() を作成します:

private function init_hooks() {
    add_action('admin_menu', [$this, 'register_settings_pages']);
}
ログイン後にコピー

register_settings_pages() と settings_page_callback() を作成します。

public function register_settings_pages() {
    foreach ($this->settings['pages'] as $page) {
        add_options_page($page['title'], $page['title'], $page['capability'], $page['slug'], [$this, 'settings_page_callback']);    
    }
}

public function settings_page_callback() {
    $this->render('settings.php');
}
ログイン後にコピー

render() を作成します:

private function render($filename, $args) {
    if (is_array($args)) {
        $value = get_option($args['id']);

        if (empty($value) && isset($args['default'])) {
            $value = $args['default'];
        }

        $args = array_merge($args, ['value' => $value]);
    }

    $file = ADV__PLUGIN_VIEW . $filename;

    if (!str_ends_with($file,'.php')) {
        $file .= '.php';
    }

    if(!file_exists($file)) {
        die('File not found ' . $filename);
    }

    require $file;
}
ログイン後にコピー

views/settings.php を作成します:

<div>



<p><img src="https://img.php.cn/upload/article/000/000/000/173390329693560.jpg" alt="Creating WordPress plugin options based on a JSON structure" /></p>

<h3>
  
  
  Sections
</h3>

<p>Add another action in init_hooks:<br>
</p>

<pre class="brush:php;toolbar:false">private function init_hooks() {
    add_action('admin_menu', [$this, 'register_settings_pages']);
    add_action('admin_init', [$this, 'register_settings_sections']);
}
ログイン後にコピー

register_settings_sections() と settings_section_callback() を作成します:

public function register_settings_sections() {
    foreach ($this->settings['sections'] as $section) {
        add_settings_section($section['id'], $section['title'], [$this, 'settings_section_callback'], ADV__PLUGIN_SLUG, $section);
    }
}

public function settings_section_callback($args) {
    $this->render($args['view'], $args);
}
ログイン後にコピー

views/section.php を作成します:

<p>
    <?php echo $args['description']; ?>
</p>
ログイン後にコピー

フィールド

init_hooks に 3 番目のアクションを追加します:

private function init_hooks() {
    add_action('admin_menu', [$this, 'register_settings_pages']);
    add_action('admin_init', [$this, 'register_settings_sections']);
    add_action('admin_init', [$this, 'register_settings_fields']);
}
ログイン後にコピー

register_settings_fields() と settings_field_callback() を作成します:

public function register_settings_fields() {
    foreach ($this->settings['fields'] as $field) {
        add_settings_field($field['id'], $field['title'], [$this, 'settings_field_callback'], ADV__PLUGIN_SLUG, $field['section'], $field);

        register_setting(ADV__PLUGIN_SLUG, $field['id']);
    }
}

public function settings_field_callback($args) {
    $this->render($args['view'], $args);
}
ログイン後にコピー

views/field.select.php を作成します:

<?php

$html_options = '';

foreach ($args['options'] as $key => $val) {
    $html_options .= sprintf('<option value="%s" %s >%s</option>', $key, selected($args['value'], $key, false), $val);
}

printf('<select name="%s">



<p>Create views/field.text.php:<br>
</p>

<pre class="brush:php;toolbar:false"><?php

printf('<input name="%s">



<h3>
  
  
  Saving
</h3>

<p>To view and save your options add a form to settings.php:<br>
</p>

<pre class="brush:php;toolbar:false"><div>



<p>Change an option and attempt to <em>Save</em>. The save should be successful.</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173390329893991.jpg" alt="Creating WordPress plugin options based on a JSON structure"></p>

<p>Your settings are now saved and can be accessed throughout the site via:<br>
</p>

<pre class="brush:php;toolbar:false"><?php
echo get_option('adv_portal_theme'); // squared.v1
ログイン後にコピー

新しいフィールドの追加

以下の JSON を Adventures.json に追加します:

{
    "id": "adv_api_token",
    "title": "Host API Token",
    "section": "portal_base",
    "type": "text",
    "placeholder": "Enter API host token",
    "default": "",
    "view": "field.text"
}
ログイン後にコピー

設定に自動的に追加されます:

Creating WordPress plugin options based on a JSON structure

以上がJSON 構造に基づいた WordPress プラグイン オプションの作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース：dev.to
前の記事：PHP を使用して MySQL データベースからオンデマンド CSV ファイルを生成するにはどうすればよいですか? 次の記事：PHP 5.2 から 5.3 への移行: 後期静的バインディングにおける「self」と「static」はどのように異なりますか?
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2171
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2322
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1957
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1834
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1883
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート