创建自定义菜单/小工具区域

时间:2012-12-09 作者:f11

我希望创建一个/菜单/小部件区域,如以下站点:

http://www.microsoft.com/en-gb/default.aspx

请参阅下载、安全、支持、关于

这也是页脚菜单吗?我的主题的页脚菜单只是主题右下角的一个标准菜单,就像示例站点一样,但我想在其上方创建一个类似的区域。

谢谢

2 个回复
SO网友:Will Lanni

我假设您使用的是211主题,或者其他支持子主题的主题。如果您使用的是自定义主题,那么只需编辑现有函数即可。php并在那里添加附加功能,然后编辑现有样式。css。但是,如果您的情况不同,请发回,我会更新以处理您使用的任何主题。

截至2012年12月,该网站的页脚就是一个例子:http://dev.artbeforehygiene.com/

在您的/wp-content/themes/called目录中创建子主题twenteleven-child (或者不管你想叫它什么,为了这些步骤,我将使用这个名称)

  • 创建两个文件:函数。php和一种风格。该目录中的css

    /*
    Theme Name: Twentyeleven Child: Triple Footer Addition
    Description: Child theme for the twentyeleven theme with footers 
    that look like http://www.microsoft.com/en-gb/default.aspx
    Author: [Your Name Here], Will Lanni
    Template: twentyeleven
    */
    
    @import url("../twentyeleven/style.css");
    /* Style Twentyeleven Footer to resemble Microsoft site */
    #colophon {
        background: #eee;
    }
    #site-generator,
    #supplementary {
        background: transparent;
    }
    #supplementary h3 {
        font-family: "wf_SegoeUI","Tahoma","Verdana","Arial","sans-serif";
        font-size: 1.2em;
        font-weight: normal;
        line-height: 1.25em;
        margin-bottom: 0.65em;
        color: #1a1a1a;
        text-transform: none;
    }
    #supplementary ul.menu {
        list-style-type: none;
        margin: 0 0 1.5em;
        padding: 0.25em 0 0.5em;
    }
    #supplementary ul.menu li {
        padding-bottom: .7em;
        font-size: .9em;
    }
    
    #supplementary ul.menu li a {
        font-weight: normal;
        color: #1570A6;
        transition: color 0.1s linear 0s;
    }
    #supplementary ul.menu li a:hover {
        color: #083947;
    }
    
    函数中的。php,添加以下代码(这将创建一组额外的导航菜单,您可以在WP Dashboard>Appearance>menus中控制这些菜单)。Twentyeleven已经提供了三个页脚小部件区域。但是,如果您的主题只有一个,您可以通过取消注释下面的添加页脚代码来添加其他页脚区域。

    <?php
    
    // register additional custom menu slots
    function childtheme_register_menus() {
        if ( function_exists( \'register_nav_menu\' )) {
            register_nav_menu( \'footer-1st-menu\', \'1st Additional Footer Menu\' );
            register_nav_menu( \'footer-2nd-menu\', \'2nd Additional Footer Menu\' );
            register_nav_menu( \'footer-3rd-menu\', \'3rd Additional Footer Menu\' );
            register_nav_menu( \'footer-4th-menu\', \'4th Additional Footer Menu\' );
            register_nav_menu( \'footer-5th-menu\', \'5th Additional Footer Menu\' );
        }
    }
    add_action(\'init\', \'childtheme_register_menus\');
    
    /*
    Create additional footer areas ONLY IF THEY DON\'T EXIST!!!
    Just uncomment out the add_action... but...
    If you\'re using twentyeleven, these are already there, just leave this alone!
    */
    //add_action( \'widgets_init\', \'childtheme_widgets_init\' );
    function childtheme_widgets_init() {
        register_sidebar( array(
            \'name\' => __( \'Footer Area One\', \'twentyeleven\' ),
            \'id\' => \'sidebar-3\',
            \'description\' => __( \'An optional widget area for your site footer\', \'twentyeleven\' ),
            \'before_widget\' => \'<aside id="%1$s" class="widget %2$s">\',
            \'after_widget\' => "</aside>",
            \'before_title\' => \'<h3 class="widget-title">\',
            \'after_title\' => \'</h3>\',
        ) );
    
        register_sidebar( array(
            \'name\' => __( \'Footer Area Two\', \'twentyeleven\' ),
            \'id\' => \'sidebar-4\',
            \'description\' => __( \'An optional widget area for your site footer\', \'twentyeleven\' ),
            \'before_widget\' => \'<aside id="%1$s" class="widget %2$s">\',
            \'after_widget\' => "</aside>",
            \'before_title\' => \'<h3 class="widget-title">\',
            \'after_title\' => \'</h3>\',
        ) );
    
        register_sidebar( array(
            \'name\' => __( \'Footer Area Three\', \'twentyeleven\' ),
            \'id\' => \'sidebar-5\',
            \'description\' => __( \'An optional widget area for your site footer\', \'twentyeleven\' ),
            \'before_widget\' => \'<aside id="%1$s" class="widget %2$s">\',
            \'after_widget\' => "</aside>",
            \'before_title\' => \'<h3 class="widget-title">\',
            \'after_title\' => \'</h3>\',
        ) );
    }
    
    ?>
    
    在外观>菜单中创建页脚菜单。您将在页脚中为每个子菜单创建一个菜单。确保保存!

    将这些菜单中的一个添加到左侧的一个下拉窗口中。保存小部件

  • SO网友:jb510

    仅供参考,您应该查找/搜索的内容通常被称为“超大菜单”。

    CodeCanyon上有几个插件可以帮助它,我不知道wordpress上有哪个插件。为it组织。

    不支持任何解决方案,但作为示例:http://codecanyon.net/item/mega-menu-reloaded/1593152

    您也可以查看WPMU上的这篇文章http://wpmu.org/create-highly-customized-and-beautiful-mega-menus-for-wordpress/

    结束

    相关推荐

    Register_nav_menus()不会注册菜单

    请帮助进行菜单注册:我遵循了这个指南(http://codex.wordpress.org/Navigation_Menus)一步一步。向函数中添加了以下代码。php:function register_my_menus() { register_nav_menus( array(\'header-menu\' => __( \'Header Menu\' ) ) ); } add_action( \'init\', \'regist