検索

ホームページ >CMS チュートリアル >＆＃＆プレス >OptionTree-高度なオプション

OptionTree-高度なオプション

William Shakespeare
William Shakespeareオリジナル
2025-02-19 11:54:12876ブラウズ

OptionTree-高度なオプション

前の記事では、OptionTreeのインストール方法とテーマと統合する方法について説明しました。また、OptionTreeが箱から出して提供する最も基本的な、しかし非常に有用なオプションタイプの多くを調査しました。これらのオプションは、OptionTreeの簡単なUIテーマオプションビルダーを使用して数分で実装できます。

キーテイクアウト

    OptionTreeは、日付ピッカーや測定単位などの高度なテーマオプションの統合を簡素化し、広範なコーディングなしでカスタマイズを強化します。 「デートピッカー」、「デートタイムピッカー」、「測定」タイプなどの高度なオプションは、詳細なユーザー入力を可能にし、UIテーマオプションビルダーを介して簡単に管理できます。
  • 「数値スライダー」と「オン/オフ」スイッチは、数値を設定し、テーマ内で設定を切り替えるためのユーザーフレンドリーなインターフェイスであり、ユーザーエクスペリエンスを合理化します。
    • OptionTreeは、測定用の配列や日付と時刻の文字列などの多様なデータ型をサポートし、テーマオプションの処理の柔軟性を確保します。
  • カスタマイズは、日付形式や測定単位の変更などの既存のオプションタイプの変更に拡張され、特定のニーズに合わせて機能性を調整する機能を開発者に提供します。
    • より高度なオプションのいくつかを探索します
    • 数回のクリックでテーマに含めることができる最も高度なオプションのいくつかを調査し続けます。 「Advanced Options」という用語に警戒しないでください。OptionTreeはそれらをすべて統合しやすくしますが、これらをゼロからコードする必要があるため、「高度」と見なされます。ここに行きます！
    • 日付ピッカー
    • 「日付ピッカー」オプションタイプは、入力フィールドにフォーカスが与えられるときにユーザーが日付を選択できるカレンダーポップアップを表示する標準のフォーム入力フィールドに結び付けられています。返された値は、日付フォーマットされた文字列（yyyy-mm-dd）です。

日付時刻ピッカー

「デートタイムピッカー」オプションタイプは、ユーザーが入力フィールドにフォーカスが与えられた日付と時刻を選択できるカレンダーポップアップを表示する標準のフォーム入力フィールドに結び付けられています。返された値は、日付と時刻のフォーマットされた文字列（yyyy-mm-dd hh：mm）です。

測定

「測定」オプションタイプは、入力と選択フィールドの組み合わせです。テキスト入力は値を受け入れ、選択フィールドを使用すると、その値に追加する測定単位を選択できます。現在、デフォルトユニットはPX、％、EM、およびPTです。ただし、これらを<span>array( </span> <span>'id' => 'spyr_demo_date_picker', </span> <span>'label' => __( 'Date Picker', 'text-domain' ), </span> <span>'desc' => __( 'Your description', 'text-domain' ), </span> <span>'type' => 'date-picker', </span> <span>'section' => 'your_section', </span><span>) </span> <span>// Get the value saved on Theme Options Page </span><span>$spyr_demo_date_picker = ot_get_option( 'spyr_demo_date_picker' ); </span> <span>// Get the value saved for a Page, Post or CPT ( Within the loop ) </span><span>$spyr_demo_date_picker = get_post_meta( $post->ID, 'spyr_demo_date_picker', true ); </span> <span>// Checking if the date has passed </span><span>$date = new DateTime( ot_get_option( 'spyr_demo_date_picker' ) ); </span><span>$now = new DateTime( "now" ); </span> <span>// Compare the 2 dates </span><span>// Not that this example assumes you have not changed the date format </span><span>// through the ot_type_date_picker_date_format filter like shown below </span><span>if( $now > $date ) { </span> <span>echo 'Date is in the past'; </span><span>} else { </span> <span>echo 'Date has not passed yet'; </span><span>} </span> <span>// Change displayed format and returnd value </span><span>// Defaults to yy-mm-dd </span><span>// Not recommended but it's possible </span><span>add_filter( 'ot_type_date_picker_date_format', 'spyr_modify_date_picker_date_format', 10, 2 ); </span><span>function spyr_modify_date_picker_date_format( $format, $field_id ) { </span> <span>if( 'spyr_demo_date_picker' == $field_id ) { </span> <span>return 'mm-dd-yy'; </span> <span>} </span><span>}</span>フィルターで変更できます

数値スライダー

「数値スライダー」オプションタイプには、jQuery UIスライダーが表示されます。カスタム関数またはループで使用するための単一の数値値を返します。
<span>array(
</span>    <span>'id'          => 'spyr_demo_date_picker',
</span>    <span>'label'       => __( 'Date Picker', 'text-domain' ),
</span>    <span>'desc'        => __( 'Your description', 'text-domain' ),
</span>    <span>'type'        => 'date-picker',
</span>    <span>'section'     => 'your_section',
</span><span>)
</span>
<span>// Get the value saved on Theme Options Page
</span><span>$spyr_demo_date_picker = ot_get_option( 'spyr_demo_date_picker' );
</span>
<span>// Get the value saved for a Page, Post or CPT ( Within the loop )
</span><span>$spyr_demo_date_picker = get_post_meta( $post->ID, 'spyr_demo_date_picker', true );
</span>
<span>// Checking if the date has passed
</span><span>$date = new DateTime( ot_get_option( 'spyr_demo_date_picker' ) );
</span><span>$now  = new DateTime( "now" );
</span>
<span>// Compare the 2 dates
</span><span>// Not that this example assumes you have not changed the date format
</span><span>// through the ot_type_date_picker_date_format filter like shown below
</span><span>if( $now > $date ) {
</span>    <span>echo 'Date is in the past';
</span><span>} else {
</span>    <span>echo 'Date has not passed yet';
</span><span>}
</span>
<span>// Change displayed format and returnd value
</span><span>// Defaults to yy-mm-dd
</span><span>// Not recommended but it's possible
</span><span>add_filter( 'ot_type_date_picker_date_format', 'spyr_modify_date_picker_date_format', 10, 2 );
</span><span>function spyr_modify_date_picker_date_format( $format, $field_id ) {
</span>    <span>if( 'spyr_demo_date_picker' == $field_id ) {
</span>        <span>return 'mm-dd-yy';
</span>    <span>}
</span><span>}</span>

オン/オフ

「オン/オフ」オプションタイプには、「オン」または「オフ」を回すために使用できる簡単なスイッチが表示されます。保存された返品値は、「オン」または「オフ」のいずれかです 

<span>// OptionTree Date Time Picker Option Type
</span>
<span>// Example code when being used as a Metabox or
</span><span>// Exported OptionTree file to be used in Theme Mode
</span>
<span>array(
</span><span>'id'          => 'spyr_demo_date_time_picker',
</span><span>'label'       => __( 'Date Time Picker', 'text-domain' ),
</span><span>'desc'        => __( 'Your description', 'text-domain' ),
</span><span>'std'         => '',
</span><span>'type'        => 'date-time-picker',
</span><span>'section'     => 'your_section',
</span><span>)
</span>
<span>// Get the value saved on Theme Options Page
</span><span>$spyr_demo_date_time_picker = ot_get_option( 'spyr_demo_date_time_picker' );
</span>
<span>// Get the value saved for a Page, Post or CPT ( Within the loop )
</span><span>$spyr_demo_date_time_picker = get_post_meta( $post->ID, 'spyr_demo_date_time_picker', true );
</span>
<span>// Checking if the date has passed
</span><span>$date = new DateTime( ot_get_option( 'spyr_demo_date_time_picker' ) );
</span><span>$now  = new DateTime( "now" );
</span>
<span>// Compare the 2 dates
</span><span>// Not that this example assumes you have not changed the date format
</span><span>// through the ot_type_date_time_picker_date_format filter like shown below
</span><span>if( $now > $date ) {
</span>    <span>echo 'Date is in the past';
</span><span>} else {
</span>    <span>echo 'Date has not passed yet';
</span><span>}
</span>
<span>// Change displayed format and returnd value
</span><span>// Defaults to yy-mm-dd
</span><span>// Not recommended but it's possible
</span><span>add_filter( 'ot_type_date_time_picker_date_format', 'spyr_modify_date_time_picker_date_format', 10, 2 );
</span><span>function spyr_modify_date_time_picker_date_format( $format, $field_id ) {
</span>    <span>if( 'spyr_demo_date_time_picker' == $field_id ) {
</span>        <span>return 'mm-dd-yy';
</span>    <span>}
</span><span>}</span>
ギャラリー

「ギャラリー」オプションタイプは、画像添付ファイルIDのコンマ分離リストを保存します。テーマに画像を表示するために、フロントエンド関数を作成する必要があります。テーマが追加された可能性のある画像サイズを

add_image_size（）。

スライダー
<span>// OptionTree Measurement Option Type
</span>
<span>// Example code when being used as a Metabox or
</span><span>// Exported OptionTree file to be used in Theme Mode
</span>
<span>array(
</span>    <span>'id'          => 'spyr_demo_measurement',
</span>    <span>'label'       => __( 'Measurement', 'text-domain' ),
</span>    <span>'desc'        => __( 'Your description', 'text-domain' ),
</span>    <span>'type'        => 'measurement',
</span>    <span>'section'     => 'your_section',
</span><span>)
</span>
<span>// Get the value saved on Theme Options Page
</span><span>// Returns an array
</span><span>$spyr_demo_measurement = ot_get_option( 'spyr_demo_measurement' );
</span>
<span>// Get the value saved for a Page, Post or CPT ( Within the loop )
</span><span>// Returns an array
</span><span>$spyr_demo_measurement = get_post_meta( $post->ID, 'spyr_demo_measurement', true );
</span>
<span>// Displaying the result side by side
</span><span>echo $spyr_demo_measurement[0] . $spyr_demo_measurement[1];
</span>
<span>// Adding a new measurement option to the list
</span><span>add_filter( 'ot_measurement_unit_types', 'spyr_ot_measurement_unit_types', 10, 2 );
</span><span>function spyr_ot_measurement_unit_types( $measurements, $field_id ) {
</span>    <span>if( 'demo_measurement' == $field_id ) {
</span>        <span>return array_merge( $measurements, array( 'rem' => 'rem' ) );
</span>    <span>} 
</span><span>}
</span>
<span>// Override list of measurements
</span><span>add_filter( 'ot_measurement_unit_types', 'spyr_ot_measurement_override_unit_types', 10, 2 );
</span><span>function spyr_ot_measurement_override_unit_types( $measurements, $field_id ) {
</span>    <span>if( 'demo_measurement' == $field_id ) {
</span>        <span>return array( 'rem' => 'rem' );
</span>    <span>} 
</span><span>}</span>

「スライダー」オプションタイプを使用すると、数分でスライダーを作成できます。その後、これらの繰り返し可能なフィールドを使用して、後で使用する情報を保持することができます。このオプションは、より柔軟な「リスト項目」オプションを支持して、すぐに廃止されます。

リストアイテム

<span>// OptionTree Numeric Slider Option Type
</span>
<span>// Example code when being used as a Metabox or
</span><span>// Exported OptionTree file to be used in Theme Mode
</span>
<span>array(
</span>    <span>'id'          => 'spyr_demo_numeric_slider',
</span>    <span>'label'       => __( 'Numeric Slider', 'text-domain' ),
</span>    <span>'desc'        => __( 'Your description', 'text-domain' ),
</span>    <span>'type'        => 'numeric-slider',
</span>    <span>'section'     => 'your_section',
</span>    <span>'min_max_step'=> '-500,5000,100',
</span><span>)
</span>
<span>// Get the value saved on Theme Options Page
</span><span>$spyr_demo_numeric_slider = ot_get_option( 'spyr_demo_numeric_slider' );
</span>
<span>// Get the value saved for a Page, Post or CPT ( Within the loop )
</span><span>$spyr_demo_numeric_slider = get_post_meta( $post->ID, 'spyr_demo_numeric_slider', true );</span>
「リストアイテム」オプションタイプにより、大量のカスタマイズが可能になります。 「リストアイテム」に設定を追加できます。これらの設定は、新しい「リストアイテム」を追加すると、ユーザーに表示されます。通常、これは、カスタムレイアウト用のスライドコンテンツまたはコードブロックの作成に使用されます。スライダーは、4つの事前定義されたフィールドを備えた「リストアイテム」オプションタイプであるため、数分で画像スライダーを構築できます。 「リストアイテム」オプションタイプを使用すると、独自のフィールド、ID、およびこれらのフィールドを独自のオプションタイプを定義できます。可能性は無限です。

「リスト項目」のセットアップの例を次に示します。

upload

OptionTree-高度なオプション「アップロード」オプションタイプは、WordPressサポートされたメディアをアップロードするために使用されます。アップロード後、ユーザーは「オプションツリーへの送信」ボタンを押して、そのメディアのURIを入力する必要があります。この機能には1つの注意事項があります。テーマオプションをインポートし、1つのサイトにメディアをアップロードした場合、古いURIは新しいサイトのURIを反映しません。新しいサーバーにメディアを再アップロードまたはFTPし、必要に応じてURIを変更する必要があります。

「アップロード」オプションタイプは、

ot-upload-attachment-id

をクラス属性に追加することで、添付ファイルIDとして保存することもできます。これにより、add_image_size（）を介して任意の画像サイズを登録することができます。返された値は、がCSSクラスフィールドに追加されたかどうかに応じて、添付ファイルIDまたは画像へのソースリンクのいずれかです。

タブ 「タブ」オプションタイプを使用すると、通常はページの下に展開される一連のフィールドをグループ化できます。このオプションを何度も使用していることに気付くでしょう。このフィールドには戻り値はありません。いつものように、このオプションを実装するには数回クリックするだけで、UIはあなたとあなたの顧客にとって驚くほどに見えます。

テーマオプションUIビルダーを介してタブを作成するには、「タブ」オプションタイプがグループ化したいフィールドのグループの上にあることを確認することだけです。グループ化する他のオプションに同じことをすることで、さらに「タブ」を追加できます。 「タブ」は、別の「タブ」または新しいセクションの先頭に遭遇すると終了します。 これを視覚化するのに役立つように、実際の世界でUIビルダーを見てみましょう。

「外観」の下のテーマオプションページにアクセスすると、これはそれらのオプションから得られるものです。

OptionTree-高度なオプションカラーピッカー

「カラーピッカー」オプションタイプは、CSSで使用するための16進コードを保存します。それを使用して、あなたのテーマの何かの色を変更してください。 OptionTree-高度なオプション

結論

これらはOptionTreeの最も高度な機能の一部ですが、まだ最適です。 OptionTreeを使用すると、タイポグラフィを強化することが非常に簡単になり、あなたと顧客がHTML要素を簡単にスタイリングできるようにします。 今後の記事では、CSSとの作業と、WordPressテーマをまったく新しいレベルに引き上げる「背景」および「タイポグラフィ」オプションタイプを作成することをご覧ください。

OptionTree Advanced Optionsについてよく掲載されている質問
<span>array(
</span>    <span>'id'          => 'spyr_demo_date_picker',
</span>    <span>'label'       => __( 'Date Picker', 'text-domain' ),
</span>    <span>'desc'        => __( 'Your description', 'text-domain' ),
</span>    <span>'type'        => 'date-picker',
</span>    <span>'section'     => 'your_section',
</span><span>)
</span>
<span>// Get the value saved on Theme Options Page
</span><span>$spyr_demo_date_picker = ot_get_option( 'spyr_demo_date_picker' );
</span>
<span>// Get the value saved for a Page, Post or CPT ( Within the loop )
</span><span>$spyr_demo_date_picker = get_post_meta( $post->ID, 'spyr_demo_date_picker', true );
</span>
<span>// Checking if the date has passed
</span><span>$date = new DateTime( ot_get_option( 'spyr_demo_date_picker' ) );
</span><span>$now  = new DateTime( "now" );
</span>
<span>// Compare the 2 dates
</span><span>// Not that this example assumes you have not changed the date format
</span><span>// through the ot_type_date_picker_date_format filter like shown below
</span><span>if( $now > $date ) {
</span>    <span>echo 'Date is in the past';
</span><span>} else {
</span>    <span>echo 'Date has not passed yet';
</span><span>}
</span>
<span>// Change displayed format and returnd value
</span><span>// Defaults to yy-mm-dd
</span><span>// Not recommended but it's possible
</span><span>add_filter( 'ot_type_date_picker_date_format', 'spyr_modify_date_picker_date_format', 10, 2 );
</span><span>function spyr_modify_date_picker_date_format( $format, $field_id ) {
</span>    <span>if( 'spyr_demo_date_picker' == $field_id ) {
</span>        <span>return 'mm-dd-yy';
</span>    <span>}
</span><span>}</span>

WordPressサイトにオプションツリーをインストールするにはどうすればよいですか？

WordPressサイトにオプションツリーをインストールするのは簡単です。まず、WordPressダッシュボードの「プラグイン」セクションに移動します。 「新しい追加」をクリックして、検索バーで「オプションツリー」を検索します。プラグインを見つけたら、[今すぐインストール]をクリックしてから「アクティブ化」します。プラグインはサイトで使用できるようになりました。

オプションツリーUIビルダーを使用するにはどうすればよいですか？

オプションツリーUIビルダーは、カスタムテーマオプションを作成できる強力なツールです。それを使用するには、WordPressダッシュボードの「オプションツリー」セクションに移動します。 「設定」をクリックしてから「UIビルダー」をクリックします。ここから、テーマにセクション、設定、オプションを追加できます。完了したら変更を保存することを忘れないでください。

オプションツリーでデータを更新するにはどうすればよいですか？ WordPressダッシュボードの「オプションツリー」セクションに移動します。 [設定]をクリックしてから、更新するオプションをクリックします。変更を加えてから「更新」をクリックして保存します。

オプションツリーの変数の実際の値をどこに見つけることができますか？ WordPressダッシュボードのOptionTree 'セクション。 「設定」をクリックしてから、興味のあるオプションをクリックします。変数の値は、画面の右側に表示されます。

オプションツリーテーマにカスタムCSSを追加するにはどうすればよいですか？

オプションツリーテーマにカスタムCSSを追加するには、WordPressダッシュボードの「オプションツリー」セクションに移動します。 「設定」をクリックしてから「カスタムCSS」をクリックします。ここでは、カスタムCSSコードを追加できます。完了したら変更を保存することを忘れないでください。

オプションツリーを子供のテーマで使用するにはどうすればよいですか？ WordPressサイトのテーマ。次に、WordPressダッシュボードの「オプションツリー」セクションに移動します。 「設定」をクリックしてから「子テーマ」をクリックします。ここから、子供のテーマの設定を構成できます。

オプションツリーの問題をトラブルシューティングするにはどうすればよいですか？

オプションツリーの問題が発生している場合、最初のステップはプラグインは最新です。そうでない場合は、更新してください。問題が続く場合は、プラグインを非アクティブ化および再アクティブ化してみてください。まだ問題が発生している場合は、さらなる支援のためにプラグインのサポートチームに連絡する必要があるかもしれません。 WordPressダッシュボードに。インストールされているプラ​​グインのリストで「オプションツリー」を見つけ、[非アクティブ化]をクリックします。プラグインが非アクティブ化されたら、[削除]をクリックしてサイトから削除できます。

非wordpressサイトでオプションツリーを使用できますか？したがって、ワードプレス以外のサイトでは使用できません。ただし、同様の機能を提供する他のコンテンツ管理システムに使用できる同様のツールがあります。

オプションツリーは、すべてのWordPressテーマと互換性がありますか？ただし、一部のテーマは、OptionTreeのすべての機能をサポートしていない場合があります。互換性の問題が発生している場合は、サポートのためにテーマの開発者に連絡する必要がある場合があります。

以上がOptionTree-高度なオプションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

jquery css html String define if switch for select date include try Calendar Filter continue using class Attribute delete function default this display background input ui issue WordPress Other
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：イベントのスケジューリングのためのWordPress Cronのマスター次の記事：イベントのスケジューリングのためのWordPress Cronのマスター

関連記事

続きを見る