• 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。(詳細

このWikiはいつでも誰でも編集できます

「設定ページの作成」の版間の差分

提供: WordPress Codex 日本語版
移動先: 案内検索
(ページ Creating Options Pages設定ページの作成 へ移動: Codex‐ノート:ページ名対応表#C での議論に従い日本語ページ名に改名。)
(原文更新のため)
1行目: 1行目:
{{Rename|C}}
+
<span style="color:red">This article is in transition to meet [[Settings API]], which was introduced in [[Version 2.7]]. For information prior to 2.7 see [http://codex.wordpress.org/index.php?title=Creating_Options_Pages&oldid=97268 this revision.]</span>
== はじめに ==
+
  
WordPressにカスタムの設定パネルを作ることは比較的簡単です。
+
== Introduction ==
  
メニューアイテムと新しいページを作るには、まず[[Adding Administration Menus|管理メニューの追加]]を見てください。
+
Creating custom options panels in WordPress is relatively easy.
  
この構造に従う限りは、WordPressがあなたの代わりに作成、更新、保存、リダイレクトといった設定を行ってくれます。パーミッションをチェックし、裏側で起きているすべてを魔法のように執り行うのです。
+
First, to create the menu item and the new page, see [[Adding Administration Menus]].
  
== ページを開く ==
+
So long as you stick to this structure, WordPress will handle all of the option creation, update, saving, and redirection for you. It will check permissions, and do all that other magic behind the scenes.
  
プラグインのPHPファイルにコードを直接書いても構いませんし、例えばoptions.phpなどの追加ファイルを作成して、phpのinclude関数で読み込んでも構いません。- http://www.w3schools.com/PHP/php_includes.asp 〔訳注:日本語情報では http://jp2.php.net/manual/ja/function.include.php が参考になります。〕
+
Several new functions were added in WordPress 2.7. These new functions are optional in WordPress 2.7 but will be required in the future. They are required for WordPress MU 2.7. See [[Migrating Plugins and Themes to 2.7]] and [[Settings API]] for more information.
  
既存のWordPress設定ページと印象を合わせたければ、次のように始めてください:
+
This article only covers the markup of the Settings page itself. For more information regarding how to add the Settings page, refer to [[Administration Menus]]
<pre>
+
<div class="wrap">
+
<h2>Your Plugin Name</h2>
+
</pre>
+
  
== formタグ ==
+
== Where to Save the Code ==
  
ページを作ったら、HTMLフォームを作る必要があります。このコードを使ってください:
+
You can either put the code for your options page in your plugin php file (or, for Themes, in functions.php), or you can create a second file called options.php, for example, and include it using the php include function - http://php.net/manual/en/function.include.php
<pre>
+
<form method="post" action="options.php">
+
</pre>
+
  
== nonceの魔法 ==
+
== Opening the Page ==
  
formタグを開始したら、このPHPコードを挿入してください:
+
If you'd like to match the look and feel of existing WordPress options pages, open with the following:
 +
&lt;div class="wrap">
 +
&lt;h2>Your Plugin Page Title</h2>
  
<pre>
+
== Form Tag ==
<?php wp_nonce_field('update-options'); ?>
+
</pre>
+
  
このコードは二つのhiddenフィールドを挿入することで、自動的にユーザが設定を更新できるかどうかをチェックし、ユーザを正しい管理ページ(formのaction先は違うページだからです)にリダイレクトします。
+
Once you have your page, you need to create an HTML form. Use this code:
 +
<form method="post" action="options.php">
  
== フォームテーブル ==
 
  
ほとんどの設定ページは設定を表示するために"form-table"クラスのテーブルを利用します。このページの見栄えを統一するために、新しいテーブルを作ってください:
+
=== settings_fields Function ===
  
<pre>
+
The setting fields will know which settings your options page will handle.
<table class="form-table">
+
</pre>
+
  
新しく作った設定(optionsテーブルに保存されています)を呼び出したければ、それを同じ名前をフィールドに使用してください。以下のようになります:
+
After the opening form tag, add this function
  
<pre>
+
settings_fields( 'myoption-group' );
<tr valign="top">
+
<th scope="row">New Option Name</th>
+
<td><input type="text" name="new_option_name" value="<?php echo get_option('new_option_name'); ?>" /></td>
+
</tr>
+
</pre>
+
  
<code><input></code>要素も見てみましょう:
+
where <tt>myoption-group</tt> is the same name used in the [[Function Reference/register_setting|register_setting]] function.
  
<pre>
+
This function '''replaces''' the '''nonce magic''', '''action field''', and '''page_options field''' required prior to Version 2.7.
<input type="text" name="new_option_name" value="<?php echo get_option('new_option_name'); ?>" />
+
 
</pre>
+
=== do_settings_fields Function ===
 +
 
 +
After the settings_fields() call, add this function
 +
 
 +
do_settings_sections( 'myoption-group' );
 +
 
 +
This function '''replaces''' the form-field markup in the form itself.
 +
 
 +
== Closing Tags ==
 +
 
 +
Then obviously close the form tag after your other options, and if you like, include another "Update Options" button, this is the WordPress default.
 +
<?php submit_button(); ?>
 +
</form>
 +
</div>
 +
 
 +
You can personalize the button created by [[Function_Reference/submit_button|submit_button]] function.
 +
 
 +
Note the use of the _e() function to handle translation of the text, see [[Localizing WordPress]] for more info.
 +
 
 +
=== Register Settings ===
 +
 
 +
The [[Function Reference/register setting|register_setting]] and [[Function Reference/unregister setting|unregister_setting]] functions add and remove options from a whitelist of allowed options that the form is able to save. They can also name a sanitize callback function as a security measure to check each option's value.
  
フィールドのvalue属性値としてget_option()関数を使う時は、設定が保存されるときに自動的に更新されるということに注意してください。
+
The register_setting function should be called in an [[Plugin API/Action Reference#Administrative Actions|admin_init]] action, which runs before every admin page and in particular, <tt>options.php</tt>, which receives this form.
  
設定の列を追加したら、tableを閉じましょう:
+
Your plugin probably has a section with an add_action that adds a new menu item to the administration menus. This line will be in the same section to add an action to admin_init.
  
 
<pre>
 
<pre>
</table>
+
if ( is_admin() ){ // admin actions
 +
  add_action( 'admin_menu', 'add_mymenu' );
 +
  add_action( 'admin_init', 'register_mysettings' );
 +
} else {
 +
  // non-admin enqueues, actions, and filters
 +
}
 
</pre>
 
</pre>
  
== actionフィールド ==
+
Then you create a new function that registers each option.
  
続いて、value属性値にupdateを持つactionと呼ばれるhiddenフィールドを作りましょう。
 
 
<pre>
 
<pre>
<input type="hidden" name="action" value="update" />
+
function register_mysettings() { // whitelist options
 +
  register_setting( 'myoption-group', 'new_option_name' );
 +
  register_setting( 'myoption-group', 'some_other_option' );
 +
  register_setting( 'myoption-group', 'option_etc' );
 +
}
 
</pre>
 
</pre>
  
== page_optionsフィールド==
+
The name of <tt>myoption-group</tt> doesn't matter but it has to match the name used in the settings_fields function above.
  
最後に、page_optionsと呼ばれるhiddenフィールドを作りましょう。これは保存時に上書きされるページ設定のリストをカンマ区切りで持っています。
 
  
<pre>
 
<input type="hidden" name="page_options" value="new_option_name,some_other_option,option_etc" />
 
</pre>
 
  
== タグを閉じる ==
+
=== See It All Together ===
 +
Please note: Some of the code in this example (particularly do_settings) is deprecated. [http://ottopress.com/2009/wordpress-settings-api-tutorial/ View Otto's tutorial here for better examples of workable code].  In addition, there's another [http://planetozh.com/blog/2009/05/handling-plugins-options-in-wordpress-28-with-register_setting/ article] available by [http://planetozh.com/blog/about/ ozh].
  
それでは、その他の設定を入力して、formタグを閉じましょう。WordPressのデフォルトである"設定を更新"ボタンを使うこともできます。
+
To add icon to for your options page use the following code [this will work on version 3.4.2 and later] In following example, icon is stored in "images" folder in theme directory.
 +
 
 +
<pre><?php add_menu_page('BAW Plugin Settings', 'BAW Settings', 'administrator', __FILE__, 'baw_settings_page', get_stylesheet_directory_uri('stylesheet_directory')."/images/media-button-other.gif"); ?></pre>
 +
 
 +
The below example uses the new Settings API to create and save your plugin options
 
<pre>
 
<pre>
<p class="submit">
+
<?php
<input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" />
+
// create custom plugin settings menu
</p>
+
add_action('admin_menu', 'baw_create_menu');
 +
 
 +
function baw_create_menu() {
 +
 
 +
//create new top-level menu
 +
add_menu_page('BAW Plugin Settings', 'BAW Settings', 'administrator', __FILE__, 'baw_settings_page',plugins_url('/images/icon.png', __FILE__));
 +
 
 +
//call register settings function
 +
add_action( 'admin_init', 'register_mysettings' );
 +
}
 +
 
 +
 
 +
function register_mysettings() {
 +
//register our settings
 +
register_setting( 'baw-settings-group', 'new_option_name' );
 +
register_setting( 'baw-settings-group', 'some_other_option' );
 +
register_setting( 'baw-settings-group', 'option_etc' );
 +
}
 +
 
 +
function baw_settings_page() {
 +
?>
 +
<div class="wrap">
 +
<h2>Your Plugin Name</h2>
 +
 
 +
<form method="post" action="options.php">
 +
    <?php settings_fields( 'baw-settings-group' ); ?>
 +
    <?php do_settings_sections( 'baw-settings-group' ); ?>
 +
    <table class="form-table">
 +
        <tr valign="top">
 +
        <th scope="row">New Option Name</th>
 +
        <td><input type="text" name="new_option_name" value="<?php echo get_option('new_option_name'); ?>" /></td>
 +
        </tr>
 +
       
 +
        <tr valign="top">
 +
        <th scope="row">Some Other Option</th>
 +
        <td><input type="text" name="some_other_option" value="<?php echo get_option('some_other_option'); ?>" /></td>
 +
        </tr>
 +
       
 +
        <tr valign="top">
 +
        <th scope="row">Options, Etc.</th>
 +
        <td><input type="text" name="option_etc" value="<?php echo get_option('option_etc'); ?>" /></td>
 +
        </tr>
 +
    </table>
 +
   
 +
    <?php submit_button(); ?>
 +
 
 
</form>
 
</form>
 
</div>
 
</div>
 +
<?php } ?>
 
</pre>
 
</pre>
  
テキストを翻訳対応にするためには、_e()関数を使うようにしてください。詳しくは[[WordPress の翻訳]]を参照のこと。
+
==== Example #2 ====
  
 
+
This example works on WP 3.5.1.  Much simpler and simply works.  This is an updated version of [http://ottopress.com/2009/wordpress-settings-api-tutorial/ Otto's tutorial].
== 総復習 ==
+
  
 
<pre>
 
<pre>
<div class="wrap">
+
<?php
<h2>Your Plugin Name</h2>
+
class MySettingsPage
 +
{
 +
    /**
 +
    * Holds the values to be used in the fields callbacks
 +
    */
 +
    private $options;
  
<form method="post" action="options.php">
+
    /**
<?php wp_nonce_field('update-options'); ?>
+
    * Start up
 +
    */
 +
    public function __construct()
 +
    {
 +
        add_action( 'admin_menu', array( $this, 'add_plugin_page' ) );
 +
        add_action( 'admin_init', array( $this, 'page_init' ) );
 +
    }
  
<table class="form-table">
+
    /**
 +
    * Add options page
 +
    */
 +
    public function add_plugin_page()
 +
    {
 +
        // This page will be under "Settings"
 +
        add_options_page(
 +
            'Settings Admin',
 +
            'My Settings',
 +
            'manage_options',
 +
            'my-setting-admin',
 +
            array( $this, 'create_admin_page' )
 +
        );
 +
    }
  
<tr valign="top">
+
    /**
<th scope="row">New Option Name</th>
+
    * Options page callback
<td><input type="text" name="new_option_name" value="<?php echo get_option('new_option_name'); ?>" /></td>
+
    */
</tr>
+
    public function create_admin_page()
+
    {
<tr valign="top">
+
        // Set class property
<th scope="row">Some Other Option</th>
+
        $this->options = get_option( 'my_option_name' );
<td><input type="text" name="some_other_option" value="<?php echo get_option('some_other_option'); ?>" /></td>
+
        ?>
</tr>
+
        <div class="wrap">
 +
            <?php screen_icon(); ?>
 +
            <h2>My Settings</h2>          
 +
            <form method="post" action="options.php">
 +
            <?php
 +
                // This prints out all hidden setting fields
 +
                settings_fields( 'my_option_group' );  
 +
                do_settings_sections( 'my-setting-admin' );
 +
                submit_button();
 +
            ?>
 +
            </form>
 +
        </div>
 +
        <?php
 +
    }
  
<tr valign="top">
+
    /**
<th scope="row">Options, Etc.</th>
+
    * Register and add settings
<td><input type="text" name="option_etc" value="<?php echo get_option('option_etc'); ?>" /></td>
+
    */
</tr>
+
    public function page_init()
+
    {       
</table>
+
        register_setting(
 +
            'my_option_group', // Option group
 +
            'my_option_name', // Option name
 +
            array( $this, 'sanitize' ) // Sanitize
 +
        );
  
<input type="hidden" name="action" value="update" />
+
        add_settings_section(
<input type="hidden" name="page_options" value="new_option_name,some_other_option,option_etc" />
+
            'setting_section_id', // ID
 +
            'My Custom Settings', // Title
 +
            array( $this, 'print_section_info' ), // Callback
 +
            'my-setting-admin' // Page
 +
        ); 
  
<p class="submit">
+
        add_settings_field(
<input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" />
+
            'id_number', // ID
</p>
+
            'ID Number', // Title
 +
            array( $this, 'id_number_callback' ), // Callback
 +
            'my-setting-admin', // Page
 +
            'setting_section_id' // Section         
 +
        );     
  
</form>
+
        add_settings_field(
</div>
+
            'title',
 +
            'Title',
 +
            array( $this, 'title_callback' ),
 +
            'my-setting-admin',
 +
            'setting_section_id'
 +
        );     
 +
    }
 +
 
 +
    /**
 +
    * Sanitize each setting field as needed
 +
    *
 +
    * @param array $input Contains all settings fields as array keys
 +
    */
 +
    public function sanitize( $input )
 +
    {
 +
        $new_input = array();
 +
        if( isset( $input['id_number'] ) )
 +
            $new_input['id_number'] = absint( $input['id_number'] );
 +
 
 +
        if( isset( $input['title'] ) )
 +
            $new_input['title'] = sanitize_text_field( $input['title'] );
 +
 
 +
        return $new_input;
 +
    }
 +
 
 +
    /**
 +
    * Print the Section text
 +
    */
 +
    public function print_section_info()
 +
    {
 +
        print 'Enter your settings below:';
 +
    }
 +
 
 +
    /**
 +
    * Get the settings option array and print one of its values
 +
    */
 +
    public function id_number_callback()
 +
    {
 +
        printf(
 +
            '<input type="text" id="id_number" name="my_option_name[id_number]" value="%s" />',
 +
            isset( $this->options['id_number'] ) ? esc_attr( $this->options['id_number']) : ''
 +
        );
 +
    }
 +
 
 +
    /**
 +
    * Get the settings option array and print one of its values
 +
    */
 +
    public function title_callback()
 +
    {
 +
        printf(
 +
            '<input type="text" id="title" name="my_option_name[title]" value="%s" />',
 +
            isset( $this->options['title'] ) ? esc_attr( $this->options['title']) : ''
 +
        );
 +
    }
 +
}
 +
 
 +
if( is_admin() )
 +
    $my_settings_page = new MySettingsPage();
 
</pre>
 
</pre>
  
{{原文|Creating Options Pages|67602}}<!-- 15:02, February 20, 2009 Ronnie268 版 -->
+
This will create something like this:
 +
 
 +
[[File:creating-options-pages-ex-2b.png]]
  
[[Category:プラグイン]]
+
==== Pitfalls ====
[[Category:WordPress の開発]]
+
The '''Settings''' name, the second parameter in the ''register_setting()'' function, MUST match the name of the option being updated in the database!
[[Category:上級トピック]]
+
<br />
 +
For example, say you have '''add_option( 'foo_bar', 'isfoo' )''', you MUST use '''foo_bar''' as the second parameter for the '''register_setting()''' function.  Otherwise WordPress does not know which setting it is suppose to update and it will fail to update.
  
[[en:Creating Options Pages]]
+
To show the menu in '''Multisite''' network screen, it would be a matter of doing:<br />
 +
<tt>add_action( is_multisite() ? 'network_admin_menu' : 'admin_menu', 'callback_function' );</tt><br />
 +
But the form save action leads to a 404 page: <tt>/wp-admin/network/options.php</tt>.<br />
 +
To solve it, use the solution in [http://wordpress.stackexchange.com/a/72503 this WordPress Answers post], or alternatively the one in [http://code.hyperspatial.com/1250/save-plugin-options-multisite-3-1/ this blog post].
 +
[[Category:Plugins]]
 +
[[Category:WordPress Development]]
 +
[[Category:Advanced Topics]]

2014年8月11日 (月) 10:22時点における版

This article is in transition to meet Settings API, which was introduced in Version 2.7. For information prior to 2.7 see this revision.

Introduction

Creating custom options panels in WordPress is relatively easy.

First, to create the menu item and the new page, see Adding Administration Menus.

So long as you stick to this structure, WordPress will handle all of the option creation, update, saving, and redirection for you. It will check permissions, and do all that other magic behind the scenes.

Several new functions were added in WordPress 2.7. These new functions are optional in WordPress 2.7 but will be required in the future. They are required for WordPress MU 2.7. See Migrating Plugins and Themes to 2.7 and Settings API for more information.

This article only covers the markup of the Settings page itself. For more information regarding how to add the Settings page, refer to Administration Menus

Where to Save the Code

You can either put the code for your options page in your plugin php file (or, for Themes, in functions.php), or you can create a second file called options.php, for example, and include it using the php include function - http://php.net/manual/en/function.include.php

Opening the Page

If you'd like to match the look and feel of existing WordPress options pages, open with the following:

<div class="wrap">
<h2>Your Plugin Page Title</h2>

Form Tag

Once you have your page, you need to create an HTML form. Use this code:

<form method="post" action="options.php"> 


settings_fields Function

The setting fields will know which settings your options page will handle.

After the opening form tag, add this function

settings_fields( 'myoption-group' );

where myoption-group is the same name used in the register_setting function.

This function replaces the nonce magic, action field, and page_options field required prior to Version 2.7.

do_settings_fields Function

After the settings_fields() call, add this function

do_settings_sections( 'myoption-group' );

This function replaces the form-field markup in the form itself.

Closing Tags

Then obviously close the form tag after your other options, and if you like, include another "Update Options" button, this is the WordPress default.

<?php submit_button(); ?>
</form>
</div>

You can personalize the button created by submit_button function.

Note the use of the _e() function to handle translation of the text, see Localizing WordPress for more info.

Register Settings

The register_setting and unregister_setting functions add and remove options from a whitelist of allowed options that the form is able to save. They can also name a sanitize callback function as a security measure to check each option's value.

The register_setting function should be called in an admin_init action, which runs before every admin page and in particular, options.php, which receives this form.

Your plugin probably has a section with an add_action that adds a new menu item to the administration menus. This line will be in the same section to add an action to admin_init.

if ( is_admin() ){ // admin actions
  add_action( 'admin_menu', 'add_mymenu' );
  add_action( 'admin_init', 'register_mysettings' );
} else {
  // non-admin enqueues, actions, and filters
}

Then you create a new function that registers each option.

function register_mysettings() { // whitelist options
  register_setting( 'myoption-group', 'new_option_name' );
  register_setting( 'myoption-group', 'some_other_option' );
  register_setting( 'myoption-group', 'option_etc' );
}

The name of myoption-group doesn't matter but it has to match the name used in the settings_fields function above.


See It All Together

Please note: Some of the code in this example (particularly do_settings) is deprecated. View Otto's tutorial here for better examples of workable code. In addition, there's another article available by ozh.

To add icon to for your options page use the following code [this will work on version 3.4.2 and later] In following example, icon is stored in "images" folder in theme directory.

<?php add_menu_page('BAW Plugin Settings', 'BAW Settings', 'administrator', __FILE__, 'baw_settings_page', get_stylesheet_directory_uri('stylesheet_directory')."/images/media-button-other.gif"); ?>

The below example uses the new Settings API to create and save your plugin options

<?php
// create custom plugin settings menu
add_action('admin_menu', 'baw_create_menu');

function baw_create_menu() {

	//create new top-level menu
	add_menu_page('BAW Plugin Settings', 'BAW Settings', 'administrator', __FILE__, 'baw_settings_page',plugins_url('/images/icon.png', __FILE__));

	//call register settings function
	add_action( 'admin_init', 'register_mysettings' );
}


function register_mysettings() {
	//register our settings
	register_setting( 'baw-settings-group', 'new_option_name' );
	register_setting( 'baw-settings-group', 'some_other_option' );
	register_setting( 'baw-settings-group', 'option_etc' );
}

function baw_settings_page() {
?>
<div class="wrap">
<h2>Your Plugin Name</h2>

<form method="post" action="options.php">
    <?php settings_fields( 'baw-settings-group' ); ?>
    <?php do_settings_sections( 'baw-settings-group' ); ?>
    <table class="form-table">
        <tr valign="top">
        <th scope="row">New Option Name</th>
        <td><input type="text" name="new_option_name" value="<?php echo get_option('new_option_name'); ?>" /></td>
        </tr>
         
        <tr valign="top">
        <th scope="row">Some Other Option</th>
        <td><input type="text" name="some_other_option" value="<?php echo get_option('some_other_option'); ?>" /></td>
        </tr>
        
        <tr valign="top">
        <th scope="row">Options, Etc.</th>
        <td><input type="text" name="option_etc" value="<?php echo get_option('option_etc'); ?>" /></td>
        </tr>
    </table>
    
    <?php submit_button(); ?>

</form>
</div>
<?php } ?>

Example #2

This example works on WP 3.5.1. Much simpler and simply works. This is an updated version of Otto's tutorial.

<?php
class MySettingsPage
{
    /**
     * Holds the values to be used in the fields callbacks
     */
    private $options;

    /**
     * Start up
     */
    public function __construct()
    {
        add_action( 'admin_menu', array( $this, 'add_plugin_page' ) );
        add_action( 'admin_init', array( $this, 'page_init' ) );
    }

    /**
     * Add options page
     */
    public function add_plugin_page()
    {
        // This page will be under "Settings"
        add_options_page(
            'Settings Admin', 
            'My Settings', 
            'manage_options', 
            'my-setting-admin', 
            array( $this, 'create_admin_page' )
        );
    }

    /**
     * Options page callback
     */
    public function create_admin_page()
    {
        // Set class property
        $this->options = get_option( 'my_option_name' );
        ?>
        <div class="wrap">
            <?php screen_icon(); ?>
            <h2>My Settings</h2>           
            <form method="post" action="options.php">
            <?php
                // This prints out all hidden setting fields
                settings_fields( 'my_option_group' );   
                do_settings_sections( 'my-setting-admin' );
                submit_button(); 
            ?>
            </form>
        </div>
        <?php
    }

    /**
     * Register and add settings
     */
    public function page_init()
    {        
        register_setting(
            'my_option_group', // Option group
            'my_option_name', // Option name
            array( $this, 'sanitize' ) // Sanitize
        );

        add_settings_section(
            'setting_section_id', // ID
            'My Custom Settings', // Title
            array( $this, 'print_section_info' ), // Callback
            'my-setting-admin' // Page
        );  

        add_settings_field(
            'id_number', // ID
            'ID Number', // Title 
            array( $this, 'id_number_callback' ), // Callback
            'my-setting-admin', // Page
            'setting_section_id' // Section           
        );      

        add_settings_field(
            'title', 
            'Title', 
            array( $this, 'title_callback' ), 
            'my-setting-admin', 
            'setting_section_id'
        );      
    }

    /**
     * Sanitize each setting field as needed
     *
     * @param array $input Contains all settings fields as array keys
     */
    public function sanitize( $input )
    {
        $new_input = array();
        if( isset( $input['id_number'] ) )
            $new_input['id_number'] = absint( $input['id_number'] );

        if( isset( $input['title'] ) )
            $new_input['title'] = sanitize_text_field( $input['title'] );

        return $new_input;
    }

    /** 
     * Print the Section text
     */
    public function print_section_info()
    {
        print 'Enter your settings below:';
    }

    /** 
     * Get the settings option array and print one of its values
     */
    public function id_number_callback()
    {
        printf(
            '<input type="text" id="id_number" name="my_option_name[id_number]" value="%s" />',
            isset( $this->options['id_number'] ) ? esc_attr( $this->options['id_number']) : ''
        );
    }

    /** 
     * Get the settings option array and print one of its values
     */
    public function title_callback()
    {
        printf(
            '<input type="text" id="title" name="my_option_name[title]" value="%s" />',
            isset( $this->options['title'] ) ? esc_attr( $this->options['title']) : ''
        );
    }
}

if( is_admin() )
    $my_settings_page = new MySettingsPage();

This will create something like this:

creating-options-pages-ex-2b.png

Pitfalls

The Settings name, the second parameter in the register_setting() function, MUST match the name of the option being updated in the database!
For example, say you have add_option( 'foo_bar', 'isfoo' ), you MUST use foo_bar as the second parameter for the register_setting() function. Otherwise WordPress does not know which setting it is suppose to update and it will fail to update.

To show the menu in Multisite network screen, it would be a matter of doing:
add_action( is_multisite() ? 'network_admin_menu' : 'admin_menu', 'callback_function' );
But the form save action leads to a 404 page: /wp-admin/network/options.php.
To solve it, use the solution in this WordPress Answers post, or alternatively the one in this blog post.