ホームページ > CMS チュートリアル > &#&プレス > 設定APIを使用してWPテーマ設定ページを作成する

設定APIを使用してWPテーマ設定ページを作成する

Lisa Kudrow
リリース: 2025-02-17 12:25:09
オリジナル
768 人が閲覧しました

設定APIを使用してWPテーマ設定ページを作成する

キーテイクアウト

  • WordPress Settings APIは、PHPまたはCSSファイルを直接編集せずに機能、動作、スタイルのカスタマイズを可能にするテーマ設定ページを作成するための人気のあるツールです。これにより、テーマの更新が容易になり、ユーザーによる変更の喪失を防ぎます。
  • 設定APIでは、ソーシャルプロファイルURL、静的レイアウトまたはレスポンシブレイアウトの選択、ロゴのアップロードなどのカスタマイズオプションが可能になります。これらの機能は、add_settings_section、add_settings_field、register_settingなどの関数を使用して追加できます。
  • 設定APIを使用して作成された設定は、get_option()関数を使用してフロントエンドで取得できます。これは、設定APIがオプションAPIを使用して値を内部的に保存するためです。これにより、テーマのカスタマイズされた設定に簡単にアクセスして利用できます。
  • ほとんどのWordPressテーマには、機能、動作、スタイルをカスタマイズするテーマ設定ページがあります。テーマを使用してテーマ設定ページを提供すると、PHPまたはCSSファイルを直接編集する代わりに、ユーザーがテーマを簡単にカスタマイズできます。これにより、ユーザーが行った変更を失うことはないため、テーマを簡単に更新できます。 このチュートリアルでは、「WordPress」という推奨されるテーマ設定ページ、つまりWordPress Settings APIを使用する方法を学習します。 WordPress設定APIはWordPress 2.7に追加され、それ以来、最も人気のあるWordPress APIの1つになりました。このチュートリアルは、WordPressプラグインに設定ページを追加する予定がある場合にも便利です。始めましょう。
テーマ設定ページに何を含めますか?

テーマ設定ページのオプションは、テーマがサポートする機能とカスタマイズによって異なります。とはいえ、すべてのテーマ設定ページに含まれる一般的なものがいくつかあります。一般的なオプションには、ソーシャルURL、静的またはレスポンシブレイアウト、ヘッダーロゴがいくつかあります。このチュートリアルでは、これらの4つのオプションをテーマ設定ページに含める方法を紹介します。

テーマ設定の作成ページメニュー項目

まず、管理パネルにメニュー項目を作成して、テーマ設定ページにアクセスする必要があります。

WordPressメニューAPIを使用してメニュー項目を作成できます。メニュー項目を作成するコードは次のとおりです

ここで、テーマパネルはメニュー項目を表す一意のIDです。 theme_settings_pageは、メニューAPIによって作成されたページのコンテンツを表示するためのコールバックです。次にこの関数をコーディングします。

これがどのように見えるかです。

設定api

の概要

設定APIは、メニュー項目APIによって作成されたページを入力するために使用されます。設定ページは、セクションとフィールドに分割されます このチュートリアルのために、単一のセクションを作成するだけで、そのセクション内にすべてのフィールドを配置します。

ここにTheme_settings_Page関数のコードがあり、セクションを作成して送信ボタンを追加します。

<span>function theme_settings_page(){}
</span>
<span>function add_theme_menu_item()
</span><span>{
</span>	<span>add_menu_page("Theme Panel", "Theme Panel", "manage_options", "theme-panel", "theme_settings_page", null, 99);
</span><span>}
</span>
<span>add_action("admin_menu", "add_theme_menu_item");</span>
ログイン後にコピー
ログイン後にコピー
ここでは、IDセクションを持つsettings_fieldを使用してセクションを登録しています。テーマオプションは、セクションに属するすべてのフィールドのグループIDです。最後に、submit_button()関数は、テーマ設定ページの送信ボタンをエコーし​​ます。

それがどのように見えるかは次のとおりです。

ソーシャルプロファイルURLSの追加

設定APIを使用してWPテーマ設定ページを作成するここで、設定ページにフィールドを追加して、FacebookおよびTwitterプロファイルURLを保存しましょう。ほぼすべてのWordPressテーマにはソーシャルプロファイルオプションがあるため、便利で実用的な例です。

設定APIを使用して入力テキストフィールドを追加するコードを次に示します。

管理パネルが初期化された後、セクションとフィールド表示コールバックを登録します。ここでは、3つの重要な機能を使用しています

add_settings_sectionは、セクションの見出しと説明を表示するために使用されます。

add_settings_fieldは、フィールドのHTMLコードを表示するために使用されます。
function theme_settings_page()
{
    ?>
	    <span><span><span><div</span> class<span>="wrap"</span>></span>
</span>	    <span><span><span><h1</span>></span>Theme Panel<span><span></h1</span>></span>
</span>	    <span><span><span><form</span> method<span>="post"</span> action<span>="options.php"</span>></span>
</span>	        <span><span><?php
</span></span><span>	            <span>settings_fields("section");
</span></span><span>	            <span>do_settings_sections("theme-options");      
</span></span><span>	            <span>submit_button(); 
</span></span><span>	        <span>?></span>          
</span>	    <span><span><span></form</span>></span>
</span>		<span><span><span></div</span>></span>
</span>	<span><span><?php
</span></span><span><span>}</span></span>
ログイン後にコピー
register_settingは、フィールドの値を自動化するために呼び出されます。

これが私たちの設定ページのように見えるべきものです。
  1. 設定ページを使用して入力テキストフィールドを追加する方法を確認しました。静的レイアウトまたはレスポンシブレイアウトを選択するオプションを提供して、チェックボックスを追加する方法を見てみましょう。
  2. レイアウトを選択するオプションを追加
  3. display_theme_panel_fields関数を展開する方法を見てみましょう。レイアウトを選択するチェックボックスを表示します。 これを達成するためのコードは次のとおりです。

add_settings_fieldを使用して新しい設定フィールドを追加し、通常どおりRegister_settingsを使用して登録しました。注意すべきことの1つは、ユーザーがチェックボックスをチェックしたかどうかを見分けたい場合は、checked()関数を使用しています。

checked()関数は、値を別の値と比較します。等しい場合は、チェック属性をエコーし​​ます。 設定APIを使用してWPテーマ設定ページを作成する今すぐ設定ページがどのように見えるかを次に示します。

ロゴのアップロード

register_setting関数はコールバックである3番目の引数を取ります。このコールバックは、設定をデータベースに保存する前に起動されます。このコールバックを利用して、アップロードを処理できます。

ここに、設定ページにロゴをアップロードするコードがあります。

function display_twitter_element()
{
	?>
    	<span><span><span><input</span> type<span>="text"</span> name<span>="twitter_url"</span> id<span>="twitter_url"</span> value<span>="<span><?php echo get_option('twitter_url'); ?></span>"</span> /></span>
</span>    <span><span><?php
</span></span><span><span>}
</span></span><span>
</span><span><span>function display_facebook_element()
</span></span><span><span>{
</span></span><span>	<span>?></span>
</span>    	<span><span><span><input</span> type<span>="text"</span> name<span>="facebook_url"</span> id<span>="facebook_url"</span> value<span>="<span><?php echo get_option('facebook_url'); ?></span>"</span> /></span>
</span>    <span><span><?php
</span></span><span><span>}
</span></span><span>
</span><span><span>function display_theme_panel_fields()
</span></span><span><span>{
</span></span><span>	<span>add_settings_section("section", "All Settings", null, "theme-options");
</span></span><span>	
</span><span>	<span>add_settings_field("twitter_url", "Twitter Profile Url", "display_twitter_element", "theme-options", "section");
</span></span><span>    <span>add_settings_field("facebook_url", "Facebook Profile Url", "display_facebook_element", "theme-options", "section");
</span></span><span>
</span><span>    <span>register_setting("section", "twitter_url");
</span></span><span>    <span>register_setting("section", "facebook_url");
</span></span><span><span>}
</span></span><span>
</span><span><span>add_action("admin_init", "display_theme_panel_fields");</span></span>
ログイン後にコピー

ここでは、wp_handle_uploadを使用して画像ファイルを保存し、そのURLを取得してオプションとして保存しています。

これが私たちの設定ページの見た目です、それはきれいに形作られています!

設定APIを使用してWPテーマ設定ページを作成する

設定の取得

テーマは、フロントエンドの設定値を取得する必要があります。設定APIは、オプションAPIを使用して値を内部的に保存します。したがって、get_option()関数を使用して値を取得できます。

非常に簡単です、ここにコードがあります。

<span>function theme_settings_page(){}
</span>
<span>function add_theme_menu_item()
</span><span>{
</span>	<span>add_menu_page("Theme Panel", "Theme Panel", "manage_options", "theme-panel", "theme_settings_page", null, 99);
</span><span>}
</span>
<span>add_action("admin_menu", "add_theme_menu_item");</span>
ログイン後にコピー
ログイン後にコピー

結論

この記事では、設定APIを使用してテーマ設定ページを簡単に作成する方法を見ました。テキスト、ファイル、およびチェックボックス入力フィールドを作成して、さまざまなデータ形式で入力しました。先に進んで、ページを展開して、自分でフォームコントロールを追加してみてください。

WordPressテーマ設定の作成ページの作成に関するよくある質問(FAQ)

WordPressの設定APIとは何ですか?なぜ重要なのか?それは、データを処理する標準化された安全な方法を提供するため、重要です。また、テーマまたはプラグインがWordPressエコシステムと互換性があることを保証し、ユーザーがWordPress管理エリアから設定を簡単に管理できるようにします。 [>>

WordPressテーマ設定]ページに新しいセクションを追加するには、add_settings_section()関数を使用する必要があります。この関数は、セクションのID、セクションのタイトル、セクションのコンテンツを出力するコールバック関数の3つのパラメーターを採用します。 IDは、他のセクションとの競合を回避するために一意でなければなりません。

WordPressに設定を登録するにはどうすればよいですか?

WordPressで設定を登録するには、Register_Setting()関数を使用できます。この関数には、オプショングループ、オプション名、および設定を定義する一連の引数の3つのパラメーターが必要です。オプショングループは、settings_fields()関数で使用されるグループと一致する必要があり、オプション名はデータベースに保存するオプションの名前です。 >

設定のフォームフィールドを作成するには、add_settings_field()関数を使用できます。この関数は、フィールドのID、フィールドのタイトル、フォームフィールドを出力するコールバック関数、フィールドを表示するページ、フィールドを追加するセクション、および引数の配列を含むいくつかのパラメーターを使用します。フィールドの場合。

設定を検証およびサニタイズするにはどうすればよいですか?

設定を検証およびサニタイズするには、Register_setting()関数でSanitize_Callback引数を使用できます。この引数は、入力データを取得し、検証および消毒するコールバック関数である必要があります。その後、消毒されたデータを返します。これにより、データベースに有効で安全なデータのみが保存されることが保証されます。

設定ページに[設定]を表示するにはどうすればよいですか?

[設定]ページに設定を表示するには、[settings_fields()およびdo_settings_sections()機能をフォームに使用できます。 settings_fields()関数は、設定ページのnonce、action、およびoptionページフィールドを出力し、do_settings_sections()関数はページに追加されたセクションとフィールドを出力します。 ?

WordPressに設定を保存するには、[設定]ページにフォームを送信する必要があります。フォームが送信されると、WordPressはRegister_Setting()関数を使用して設定を自動的に保存します。 update_option()関数を使用して、手動で設定を保存することもできます。関数。この関数は、オプションの名前をパラメーターとして受け取り、オプションの値を返します。オプションが存在しない場合、2番目のパラメーターとして指定できるデフォルト値を返します。 delete_option()関数を使用できます。この関数は、オプションの名前をパラメーターとして受け取り、データベースからオプションを削除します。オプションを永続的に削除するため、この関数を使用する場合は注意してください。

設定ページで問題をトラブルシューティングするにはどうすればよいですか? WordPressによって。たとえば、WP_DEBUG定数を使用してデバッグモードを有効にし、PHPエラー、通知、および警告を表示できます。 Var_dump()関数を使用して、変数の値を出力し、処理されているデータを確認することもできます。

以上が設定APIを使用してWPテーマ設定ページを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート