質問: $_post['accordion-section']; update_option('sortable_sections', $new_array); 2つのステップがありますが、問題があります。 1.公開ボタンを有効または無効にする2.ボタンjsをクリックした後、phsファイルに移動してオプションを更新します。それを達成する方法、そしてそれを達成するためのより良い方法はありますか?
回答: 簡単なチュートリアル-パネル内のカスタマイザーセクションを並べ替えて、テーマに順序を追加する方法。1。カスタマイザはカスタムクラスをサポートしないため、これを行うにはプレフィックスを使用する必要があります。 ctmss_panel_-パネル用 ctmss_section_-セクション用 ctmss_hidden_-値を持つ入力を持つ非表示セクション用 2。パネルをカスタマイザーに追加- add_panel() $ wp_customize-> add_panel( 'ctmss_panel_panelname1'、array( 'title' => esc_html __( 'my panel'、 'textdomain')、 'priority' => 150 )); 3。テキスト入力でセクションを追加して、新しいセクションの順序を保存します。 cssでこのセクションを非表示にします。 add_section() 、 add_setting() 、 add_control() $ wp_customize-> add_section( 'ctmss_hidden_sectionname1'、array( 'title' => esc_html __( 'section hidden'、 'textdomain')、 'panel' => ' ctmss_panel_panelname1 '、 ' priority '=> 1 )); $ wp_customize-> add_setting( ' ctmss_sections_order '、array( 'sanitize_callback' => 'wp_kses_post' ) ); $ wp_customize-> add_control( new wp_customize_control( $ wp_customize、 'sections_order'、 array( 'settings' => 'ctmss_sections_order'、 'type' => 'text'、 'label' => esc_html __( 'セクションレイアウト'、 'textdomain')、 'section' => 'ctmss_hidden_sectionname1'、 ) ) ) ; 4。利用可能なセクションでarray()を作成します。保存された値が利用可能な場合は取得し、そうでない場合はデフォルトのセクションと順序を設定します。 $ default_sections = array( 'ctmss_section_sectionname1' => array( 'title' => esc_html __( 'セクション1'、 'textdomain')、 ' description '=> esc_html __(' section 1 description '、' textdomain ')、 )、 ' ctmss_section_sectionname2 '=> array( ' title '=> esc_html __(' section 2 '、' textdomain ')、 ' description '=> esc_html __(' section 2 description '、' textdomain ')、 )、 ' ctmss_section_sectionname3 '=>配列( 'title' => esc_html __( 'セクション3'、 'textdomain')、 'description' => esc_html __( 'セクション3の説明'、 'textdomain')、 )、 'ctmss_section_sectionname4' =>配列( 'title' => esc_html __( 'セクション4'、 'textdomain')、 '説明' => esc_html __( 'セクション4説明 '、' textdomain ')、 )、 ); $ sortable_sections = get_theme_mod(' ctmss_secti ons_order '); if(!isset($ sortable_sections)|| empty($ sortable_sections)){[..____。] set_theme_mod( 'ctmss_sections_order'、implode( '、'、array_keys($ default_sections))); } $ sortable_sections = explode( '、 '、$ sortable_sections); foreach($ sortable_sections as $ sortable_section){[..____。] $ wp_customize-> add_section($ sortable_section、array( ' title '= > $ default_sections [$ sortable_section] ['title']、 'description' => $ default_sections [$ sortable_section] ['description']、 'panel' => 'ctmss_panel_panelname1' )); } 5。セクションにコントロールを追加します。例: $ wp_customize-> add_setting( 'myprefix_section1_layout'、array( 'default' => 'classic'、 'sanitize_callback' => 'wp_kses_post' ) ); $ wp_customize-> add_control( new wp_customize_control( $ wp_customize、 'section1_layout'、 array( 'settings' => 'myprefix_section1_layout'、 'type' => 'radio'、 'label' => esc_html __( 'セクションレイアウト'、 'textdomain')、 'section' => 'ctmss_section_sectionname1'、 'choices' => array( 'classic' => esc_html __( 'classic'、 'textdomain' )、 'grid' => esc_html __( 'grid'、 'textdomain')、 'list' => esc_html __( 'list'、 'textdomain')、 ) ) ) ); $ wp_customize-> add_setting( 'myprefix_section2_layout'、array( 'default' => 'classic'、 'sanitize_callback' => 'wp_kses_post' ) ); $ wp_customize-> add_control( new wp_customize_control( $ wp_customize、 'section2_layout'、 array( 'settings '=>' myprefix_section2_layout '、 ' type '=>' radio '、 ' label '=> esc_html __('セクションレイアウト '、' textdomain ')、 'セクション'=>' ctmss_section_sectionname2 '、 ' choices '=> array( ' classic '=> esc_html __(' classic '、' textdomain ')、 ' grid '=> esc_html __( 'grid'、 'textdomain')、 'list' => esc_html __( 'list'、 'textdomain')、 ) ) ) ); $ wp_customize-> add_setting( 'myprefix_section3_layout '、array( ' default '=>' classic '、 ' sanitize_callback '=>' wp_kses_post ' ) ); $ wp_customize-> add_control( new wp_customize_control( $ wp_customize、 'section3_layout'、 array( 'settings' => 'myprefix_section3_layout' 、 'type' => 'radio'、 'label' => esc_html __( 'section layout'、 'textdomain')、 'section' => 'ctmss_section_sectionname3' 、 'choices' => array( 'classic' => esc_html __( 'classic'、 'textdomain')、 'grid' => esc_html __( 'grid'、 'textdomain')、 'list' => esc_html __( 'list'、 'textdomain')、 ) ) ) ) ; $ wp_customize-> add_setting( 'myprefix_section4_layout'、array( 'default' => 'classic'、 'sanitize_callback' => 'wp_kses_post' ) ); $ wp_customize-> add_control( new wp_customize_control ( $ wp_customize、 'section4_layout'、 array( 'settings' => 'myprefix_section4_layout'、 'type' => ' radio '、 ' label '=> esc_html __(' section layout '、' textdomain ')、 ' section '=>' ctmss_section_sectionname4 '、 ' choices '=>配列( 'classic' => esc_html __( 'classic'、 'textdomain')、 'grid' => esc_html __( 'grid'、 'textdomain')、 'list '=> esc_html __(' list '、' textdomain ')、 ) ) ) ); 6。スタイルとスクリプトを追加します。 function my_customizer_scripts(){ wp_enqueue_script( 'my_customizer_js'、trailingslashit(get_template_directory_uri())。 'assets/js/my-customizer.js'、array()、 '1.0'、 'all '); } add_action(' customize_controls_print_scripts '、' my_customizer_scripts '); function my_customizer_styles(){ wp_enqueue_style(' my_customizer_css ' 、trailingslashit(get_template_directory_uri())。 'assets/css/my-customizer.css'、array()、 '1.0'、 'all'); } add_action( 'customize_controls_print_styles'、 'my_customizer_styles'); my-customizer.css li [id * = "ctmss_hidden _"]、 ul [id * = "ctmss_hidden _"]、 。ctmss_hidden { display:none!important; } 。ctmss_section .accordion-section-title:active { カーソル:移動!important; } my-customizer.js jquery(document).ready(function($){ $( 'ul [id * = "ctmss_panel _"]')。addclass( 'ctmss_panel'); $( 'ul.ctmss_panel')。each(function(){ if(0 === $(this).length){ return true; } var panel = $(this)、 panelsectionhidden = panel.find( 'li [id * = "ctmss_hidden _"]')。attr( 'aria-owns '); panel.find(' li [id * = "ctmss_section _"] ')。addclass(' ctmss_section '); panel.find(' li [id * = "ctmss_hidden _"] ')。addclass(' ctmss_hidden '); //ソート可能な初期化。 panel.sortable({ item:' li .ctmss_section '、 axis:' y '、 //ソートを停止すると値を更新します。 stop:function(){ updatevalue(); } }); //ソートリストを更新します。 function updatevalue(){ var inputvalues = panel.find( '.ctmss_section').map(function(){ var id = $(this).attr( 'id')、 id = id.replace( 'accordion-section-'、 ''); return id; })。get()。join( '、'); //非表示フィールドに値を追加します $( '#' + panelsectionhidden).find( '.customize-control-text input').prop( 'value'、inputvalues); //重要!カスタマイザーがフィールドを保存する必要があることを認識できるように、変更イベントをトリガーしてください。[(_#。+ panelsectionhidden).find( '.customize-control-text input').trigger( 'change'); console.log(inputvalues); } }); }); 7。セクションを表示する機能を追加します。 if(!function_exists( 'ctmss_get_sections')): function ctmss_get_sections($ sections){ $ sections = explode( '、'、$ sections) ; $ output = ''; if(empty($ sections)){ return $ output; } foreach($ sections as $ section){ switch($ section){ case 'ctmss_section_sectionname1' : $ output。= '<div style = "width:100%; height:200px; padding:40px; background:#e1e1e1;">セクション1 </ div>'; break ; case 'ctmss_section_sectionname2': $ output。= '<div style = "width:100%; height:200px; padding:40px; background:#e3e3e3;" >セクション2 </ div> '; break; case' ctmss_section_sectionname3 ': $ output。=' <div style = "width:100% ;高さ:200px; p追加:40px; background:#e5e5e5; ">セクション3 </ div> '; break; case' ctmss_section_sectionname4 ': $ output。=' <divスタイル= "幅:100%;高さ:200px;パディング:40px; background:#e7e7e7; ">セクション4 </ div> '; break; default: break; } } return $ output; } endif; 8。必要な場所でコードを実行します。 echo ctmss_get_sections(get_theme_mod( 'ctmss_sections_order')); このソリューションはkirkiがなくても機能しますが、簡単にカスタマイズできます。