css - 定制器 css 值中的选择性刷新不起作用
问题描述
我在开发一个主题时遇到了困难。
我正在使用 Envato,我无法在除wp_add_inline_style();
or之外的任何地方输入 CSS enqueue style
。
我直接使用预览自定义并添加部分刷新。
我有一个包含以下选项的设置菜单:
- 布局 A 或 B 的选择
- 布局背景颜色的选择
问题是当背景颜色改变时布局会改变。
有没有人有办法解决吗?
代码片段:customizer.php
function customizer_nav( $wp_customize ) {
// Section
$wp_customize->add_section( 'navigasi_sett',
array(
'title' => __( 'Navigasi Primary', 'mocita' ),
'priority' => 100,
'panel' => 'primary_panel',
)
);
// Background
$wp_customize->add_setting( 'nav_background',
array(
'default' => '#0663cc',
'transport' => 'postMessage',
'sanitize_callback' => 'sanitize_hex_color',
)
);
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'nav_background',
array(
'label' => __( 'Background Menus', 'mocita' ),
'section' => 'navigasi_sett',
'settings' => 'nav_background',
)
));
// Navigasi layout
$wp_customize->add_setting( 'nav_layout',
array(
'default' => 'tes1',
'transport' => 'postMessage',
'sanitize_callback' => 'mocita_sanitize_radio_img',
)
);
$wp_customize->add_control( new Mocita_Image_Radio( $wp_customize, 'nav_layout',
array(
'label' => __( 'Navigasi Layout', 'mocita' ),
'section' => 'navigasi_sett',
'choices' => array(
'tes1' => array(
'image' => trailingslashit( get_template_directory_uri() ) . 'images/navigasi/tes1.png',
'name' => __( 'tes1', 'mocita' )
),
'tes2' => array(
'image' => trailingslashit( get_template_directory_uri() ) . 'images/navigasi/tes2.png',
'name' => __( 'tes2', 'mocita' )
)
)
)
));
}
// selevtive_refresh
if ( isset( $wp_customize->selective_refresh ) ) {
// Navigasi Layout
$wp_customize->selective_refresh->add_partial( 'nav_layout',
array(
'selector' => '#primary',
'container_inclusive' => false,
'render_callback' => 'nav_layout',
)
);
}
// callback nav_layout
function nav_layout() {
$layout = get_theme_mod( 'nav_layout', 'nav1' );
if ( $layout === 'nav1' ) {
get_template_part( 'template-parts/navigasi/navigasi', 'primary1' );
} elseif ( $layout === 'nav2' ) {
get_template_part( 'template-parts/navigasi/navigasi', 'primary2' );
}
}
?>
customize-preview.js
(function( $ ) {
// ( Navigasi ) Background
wp.customize( 'nav_background', function( value ) {
value.bind( function( to ) {
$( '#menu' ).css( 'background', to );
});
});
} )( jQuery );
解决方案
推荐阅读
- angular - Angular 前端和 webapi .NET core 5.0 之间的跨域请求被阻止
- c# - 尝试在 C# WPF 中管理基于服务的数据库
- rust - 从 TCPStream Rust 高效读取
- git - 如何让 Eclipse 识别 Git 工作树?
- java - 尝试解析 Locale Numberformatted String 并转换为 BigDecimal 时出错
- javascript - 如何使用 html、vue、js 使下拉选项按字母顺序排列
- java - 使用循环反转字符串
- python-3.x - 在 Tkinter 菜单中禁用复选标记时如何禁用功能?
- python - Tkinter GUI 仅对大量文件无响应
- processing - 如何创建具有渐变颜色的线条?