テーマカスタマイザ内のセッションを、発行ボタンをクリックしたときにソートおよび保存可能にすることはできますか。

Question

Kirki（テーマカスタマイザツールキット）sortable fieldがあります。しかし、ソート可能なフィールドを持つ別のセクションを作成するのではなく、セクション自体に同じロジックを適用したいのです。私はちょうど今よりよい視覚化のために、テーマの改造の代わりにオプションを使用しています。これまでに試したこと：functions.phpでは、オプション表にオプション行を作成するためのコードを以下に示します。

$sortable_sections = get_option('sortable_sections');
  if(!isset($sortable_sections) OR empty($sortable_sections)){
  add_option('sortable_sections', array('eat', 'pray','love'));
}

以下のようにkirki-config.phpで必要とされるfunctions.phpという名前のファイルにセクションを作成するためのコード

$sortable_sections = get_option('sortable_sections');
foreach($sortable_sections as $sortable_section){
 Kirki::add_section( $sortable_section, array(
    'title'          => esc_attr__( strtoupper($sortable_section), 'airspace' ),
    'description'    => esc_attr__( 'Insert content', 'airspace' ),
    'panel'          => 'frontpage_panel',
) );
}

上記のコードはそれぞれid eat、pray、loveで3つのセクションを作成します。

jsのコードは以下のとおりです。（ファイルはadmin_enqueue_scriptsにフックされています）

jQuery( document ).ready(function($) {

  $('#sub-accordion-panel-frontpage_panel').sortable({
    items: '.control-section-kirki-default',
    axis : 'y',
    cursor: 'move,
   update: function(){
      //here i want the code which gets the updated reordered array and passed to a  
      //php file using .sortable('serialize'), only after clicking the publish
     // button. the problem is the publish button is disabled even after
    // sections got new positions.
   }
  });
});

そしてphpファイルで、私は以下のようなコードが欲しいです。

$new_array = $_POST['accordion-section'];
update_option('sortable_sections', $new_array);

2つのステップがありますが、問題があります。 1.公開ボタンを有効または無効にする2.ボタンjsをクリックした後、phsファイルに移動してオプションを更新します。

それを達成する方法、そしてそれを達成するためのより良い方法はありますか？

Answer 1

簡単なチュートリアル-パネル内のカスタマイザーセクションを並べ替えて、テーマに順序を追加する方法。

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がなくても機能しますが、簡単にカスタマイズできます。