【问题标题】:Wordpress theme custom background feature doesn't edit the background correctlyWordpress 主题自定义背景功能无法正确编辑背景
【发布时间】:2013-07-26 20:25:30
【问题描述】:

我正在构建一个自定义 Wordpress 主题,并尝试添加通过管理面板使用自定义背景的功能。我在 WP codex 中使用了here 给出的示例。 我正在使用 WordPress 3.5.2

我得到了背景选项,在我实际查看页面之前,一切似乎都可以正常工作。我注意到它添加了一个内部样式,它引用了一个类名为“custom-background”的主体,但主体的实际类是“customize-support”。 当我使用 Chrome 的调试调整这些时,它会应用正确的样式,那么它是 Wordpress 函数中某个地方的错误吗? 我试图找到它会给身体那个类但找不到任何东西。

来自主题的functions.php

    <?php
/*
 * Adds the custom header option to the theme
 */
function addthemeoptions(){
    //Default values of the header image
    $header_defaults = array(
    'default-image'          => '%s/images/header.png',
    'random-default'         => false,
    'flex-height'            => false,
    'flex-width'             => false,
    'default-text-color'     => '',
    'header-text'            => false,
    'uploads'                => true,
    'wp-head-callback'       => '',
    'admin-head-callback'    => '',
    'admin-preview-callback' => '',
);
    //Adds the support to use custom header images
    add_theme_support( 'custom-header', $header_defaults );

    $background_defaults = array(
    'default-color'          => '#000000',
    'default-image'          => '',
    'wp-head-callback'       => '_custom_background_cb',
    'admin-head-callback'    => '',
    'admin-preview-callback' => ''
);
add_theme_support( 'custom-background', $background_defaults );
}

//Execute our custom theme functionality
add_action( 'after_setup_theme', 'addthemeoptions' );

?>

在头部生成样式

<style type="text/css" id="custom-background-css">
body.custom-background { background-color: #0a0a0a; }
</style>

来自调试的正文标记

<body class=" customize-support" style>

提前致谢

编辑: 我找到了一个临时修复程序,只需将正确的类值添加到我的 header.php 中,其中打开了 body 标记,但我觉得应该有一个更完整的解决方案,因为我正在硬更正应该由函数正确生成的东西在 WordPress 中?

【问题讨论】:

  • 使用一些框架?
  • 没有框架只是修改了WP codex中给出的示例

标签: wordpress background themes


【解决方案1】:

header.php 中的正文标记应如下所示: &lt;body &lt;?php body_class(''); ?&gt;&gt;

【讨论】:

  • 试过了,不幸的是没有改变任何东西。我觉得我编写的代码是正确的,因为它正确设置了背景样式,它只是应用于错误的类,或者某些东西给了 body 错误的类
  • 您是否尝试添加 body 类使其看起来像上面那样?
【解决方案2】:

我遇到了同样的问题,我在 codex custom background 的最后一行找到了:** 要覆盖此默认行为,您必须提供 _custom_background_cb() 函数的替换。 **

所以我尝试通过编写自己的函数 my_custom_background_cb 来覆盖它,如下所示:

$args_background = array(
        'default-image'          => '',
        'default-preset'         => 'default', // 'default', 'fill', 'fit', 'repeat', 'custom'
        'default-position-x'     => 'center',    // 'left', 'center', 'right'
        'default-position-y'     => 'center',     // 'top', 'center', 'bottom'
        'default-size'           => 'auto',    // 'auto', 'contain', 'cover'
        'default-repeat'         => 'repeat',  // 'repeat-x', 'repeat-y', 'repeat', 'no-repeat'
        'default-attachment'     => 'fixed',  // 'scroll', 'fixed'
        'default-color'          => '#fff',
        'wp-head-callback'       => 'my_custom_background_cb',
        'admin-head-callback'    => '',
        'admin-preview-callback' => '',
    );
    add_theme_support( 'custom-background', $args_background);
    function my_custom_background_cb() {
        echo '<style>';
        //your custom css
        echo '</style>';
    }

我现在正在研究如何从默认颜色部分移除背景颜色控件。

编辑:好的,在customizer.php 中删除默认颜色部分并像这样添加你的:

// removing the default color sections from customizer
    $wp_customize->remove_section('colors');
    // colors Options Section
    $wp_customize->add_section('sec_colors', array(
        'title'         => esc_attr__('Colors Options', 'yourtheme'),
        'description'   => sprintf(__('Colors Options for theme', 'yourtheme')),
        'priority'      => 60,
    ));

然后添加您的自定义颜色设置和控件。 它对我有用,希望对你也有用。 快乐编码

编辑 2: 抱歉第二次编辑:D,但我发现我们需要用我们的自定义函数替换默认的 wp-head-callback 函数 custom_custom_background_cb '因为我发现了一个错误',我还删除了所有相关的代码在我们创建颜色选项时进行着色,如下所示:

function custom_custom_background_cb() {
        // $background is the saved custom image, or the default image.
        $background = set_url_scheme( get_background_image() );
        if ( ! $background )
            return;
        $style ='';
        if ( $background ) {
            $image = " background-image: url('$background');";
            $repeat = get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) );
            if ( ! in_array( $repeat, array( 'no-repeat', 'repeat-x', 'repeat-y', 'repeat' ) ) )
                $repeat = 'repeat';
            $repeat = " background-repeat: $repeat;";
            $position = get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) );
            if ( ! in_array( $position, array( 'center', 'right', 'left' ) ) )
                $position = 'left';
            $position = " background-position: top $position;";
            $attachment = get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) );
            if ( ! in_array( $attachment, array( 'fixed', 'scroll' ) ) )
                $attachment = 'scroll';
            $attachment = " background-attachment: $attachment;";
            $style .= $image . $repeat . $position . $attachment;
        }
        ?>
        <style type="text/css" id="custom-background-css">
        body.custom-background { <?php echo trim( $style ); ?> }
        </style>
        <?php
    }

再次快乐编码

【讨论】:

    【解决方案3】:

    我遇到了这个问题,只打开了一个&lt;script type="text/javascript&gt;,缺少&lt;/script

    【讨论】:

    • 问题中并非如此。
    猜你喜欢
    • 2018-06-19
    • 1970-01-01
    • 1970-01-01
    • 2021-09-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多