可以使部分在主题定制器排序和保存在发布按钮上点击？

时间：2018-07-12 作者：seeker

我们有kirki（主题定制工具包）sortable field. 但是我想在节本身上应用相同的逻辑，而不是创建另一个具有可排序字段的节。我现在使用选项而不是主题mods，只是为了更好的可视化。到目前为止我尝试过的事情：在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、praye和love。

中的代码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);
所以有两个步骤我很难完成。1、启用和禁用发布按钮2。单击按钮后，js变量转到php文件并更新选项。

如何实现它，有没有更好的方法来实现它？

1 个回复
最合适的回答,由SO网友:Michael 整理而成

简单教程-如何对面板中的自定义程序部分进行排序，并为主题添加顺序。

1. 您必须使用前缀来执行此操作，因为customizer不支持自定义类。

  • 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__( \'Section layout\', \'textdomain\' ),
            \'section\'  => \'ctmss_hidden_sectionname1\',
        )
    )
);
    4. 使用可用节创建数组（）。如果保存的值可用，请获取它，否则请设置默认节和顺序。

    $default_sections = array (
    \'ctmss_section_sectionname1\' => array (
        \'title\'       => esc_html__( \'Section 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\' => array (
        \'title\'       => esc_html__( \'Section 3\', \'textdomain\' ),
        \'description\' => esc_html__( \'Section 3 Description\', \'textdomain\' ),
    ),
    \'ctmss_section_sectionname4\' => array (
        \'title\'       => esc_html__( \'Section 4\', \'textdomain\' ),
        \'description\' => esc_html__( \'Section 4 Description\', \'textdomain\' ),
    ),
);

$sortable_sections = get_theme_mod(\'ctmss_sections_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__( \'Section layout\', \'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__( \'Section layout\', \'textdomain\' ),
            \'section\'  => \'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\'  => array(
                \'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\');
    我的自定义程序。css

    li[id*="ctmss_hidden_"],
ul[id*="ctmss_hidden_"],
.ctmss_hidden {
    display: none !important;
}

.ctmss_section .accordion-section-title:active {
    cursor: move !important;
}
    我的自定义程序。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\');

        // Init sortable.
        panel.sortable( {
            item: \'li.ctmss_section\',
            axis: \'y\',

            // Update value when we stop sorting.
            stop: function() {
                updateValue();
            }
        });

        // Updates the sorting list.
        function updateValue() {
            var inputValues = panel.find( \'.ctmss_section\' ).map( function() {
                var id = $(this).attr(\'id\'),
                    id = id.replace(\'accordion-section-\',\'\');

                return id;
            }).get().join(\',\');

            // Add the value to the hidden field
            $( \'#\' + panelSectionHidden ).find( \'.customize-control-text input\' ).prop( \'value\', inputValues );

            // Important! Make sure to trigger change event so Customizer knows it has to save the field
            $( \'#\' + 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;">Section 1</div>\';
                break;

            case \'ctmss_section_sectionname2\':
                $output .= \'<div style="width: 100%; height: 200px; padding: 40px; background: #e3e3e3;">Section 2</div>\';
                break;

            case \'ctmss_section_sectionname3\':
                $output .= \'<div style="width: 100%; height: 200px; padding: 40px; background: #e5e5e5;">Section 3</div>\';
                break;

            case \'ctmss_section_sectionname4\':
                $output .= \'<div style="width: 100%; height: 200px; padding: 40px; background: #e7e7e7;">Section 4</div>\';
                break;

            default:
                break;
            }

        }

        return $output;

    }
endif;
    8. 在需要的地方运行代码。

    echo ctmss_get_sections( get_theme_mod(\'ctmss_sections_order\') );
    此解决方案不需要Kirki，但很容易定制。

结束
标签： jquery   theme-customizer   jquery-ui   options   小码农  

相关推荐

为什么我的WordPress jQuery-AJAX调用不起作用？

您好，我目前正在开发wordpress应用程序。我已经能够完成应用程序所需的几乎所有内容。我甚至能够使用Jquery Ajax将数据插入到我的自定义数据库表中，并获得提交的背景反馈。但我现在的目标是根据下拉选择自动填充文本字段。我在网上读了几篇文章，我在这里看到了答案Why is my AJAX call not working? 但我仍然无法解决问题，以下是我的代码：/* Fetching file from the database*/ wp_enqueue_script(\'jquery\