允许用户在wordpress自定义程序中更改导航栏徽标图像

时间:2015-02-24 02:17:05

标签: wordpress twitter-bootstrap wordpress-theming

我正在尝试创建一个主题,允许用户在wordpress自定义程序中为其主导航栏选择徽标图像。我正在使用bootstrap3构建主题,并希望能够允许博客管理员选择一个"品牌"图像放置在导航栏上而不必硬编码。

代码是:

<nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <!-- Brand and toggle for navbar -->
                <div class="navbar-header">
                    <button type="button" data-toggle="main-navbar" class="navbar-toggle collapsed">
                        <span class="sr-only">Toggle Navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="<?php echo home_url(); ?>" class="navbar-brand">
                        <!-- Where the image will be placed -->
                    </a>
                </div>

1 个答案:

答案 0 :(得分:1)

我还没有尝试过,但我认为这样可行。

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <!-- Brand and toggle for navbar -->
        <div class="navbar-header">
            <button type="button" data-toggle="main-navbar" class="navbar-toggle collapsed">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <?php if( get_theme_mod( 'themeslug_logo') ) : ?>
            <div class='site-logo'>
                <a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> 'rel='home' class="navbar-brand">
                    <img src='<?php echo esc_url( get_theme_mod( 'themeslug_logo' ) ); ?>'alt='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>'>
                </a>
            </div>
            <?php
            /* in case no logo is set, show site title and description */
            else: ?>
            <div>
                <h1 class='site-title'><a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='home'><?php bloginfo( 'name'); ?></a></h1>
                <h3 class='site-description'><?php bloginfo( 'description'); ?></h3>
            </div>
            <?php endif; ?>
        </a>
    </div>

@ functions.php

function mytheme_customize_register( $wp_customize ) {
    $wp_customize->add_section( 'themeslug_logo_section' , array(
        'title'         => __( 'Logo', 'themeslug' ),
        'priority'      => 30,
        'description'   => 'Upload a logo to replace the default site name and description in the header',
    ));
    $wp_customize->add_setting( 'themeslug_logo' );
    $wp_customize->add_control( new WP_Customize_Image_Control(
        $wp_customize, 'themeslug_logo', array(
            'label'     => __( 'Logo', 'themeslug' ),
            'section'   => 'themeslug_logo_section',
            'settings'  => 'themeslug_logo',
        )
    ));
}
add_action( 'customize_register', 'mytheme_customize_register' );

来源:http://www.cloudways.com/blog/how-to-add-custom-widget-area-and-theme-customizer-api-on-your-wordpress-theme/