it-swarm-ja.com

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

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ファイルに移動してオプションを更新します。

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

1
seeker

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

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

4
Michael