资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

WordPress下拉框 wordpress底部

wordpress 导航下拉怎么做

是实现wordpress导航下拉菜单,总共需要修改3个文件:header.php、functions.php和style.css。

十余年建站经验, 成都网站建设、网站设计客户的见证与正确选择。创新互联公司提供完善的营销型网页建站明细报价表。后期开发更加便捷高效,我们致力于追求更美、更快、更规范。

1、修改header.php。

加入如下代码:

div id="topnav"

?php wp_nav_menu( array( 'theme_location' = 'primary' ) ); ?

/div

2、修改functions.php函数

加入如下代码:

if ( function_exists('register_nav_menus')) {register_nav_menus(array('primary'='b style="font-style:normal; color:#F00;"自定义顶部菜单/b'));}

3、添加css:

#topnav{clear:both;width:900px;margin:auto;height:34px;background:url(images/menu_bg.gif) repeat-x;}

.home {

float: left;

width:117px;

height:35px;

}

.home a:hover {

width:117px;

height:36px;

background: url(images/index_meun.gif) 0 -38px;

}

#topnav.current_page_item , #topnav .current-menu-item {

background: url(images/menu_bg.gif) repeat-x 0 -110px;

}

#topnav .current-menu-item a,#topnav .current_page_item a {

color: #fff !important;

text-shadow: 0px 1px 0px #000 !important;

}

#topnav .current-menu-item li a,#topnav .sub-menu a ,#topnav .current_page_item li a {

color: #F30505;

}

.sub-menu a:hover {

color: #F6F7F8 !important;

}

#topnav li {

height:36px;

border-right:1px solid #D4CDCD;

float: left;

font-weight:bold;

}

#topnav li a, #topnav li a:link, #topnav li a:visited {

display: block;

padding: 0 25px 0 25px;

line-height:36px;

color: #ffffff;

text-shadow: 0px 1px 0px #d1d1d1;

}

#topnav li a:hover, #topnav li a:active {

background: url(images/bg.png) repeat-x 0 -74px;

color: #fff;

display: block;

text-decoration: none;

line-height:36px;

padding: 0 25px 0 25px;

text-shadow: 0px 1px 0px #000 !important;

}

#topnav li li {

height:30px;

float: left;

}

#topnav li li a {

line-height:30px !important;

}

#topnav li ul {

position: absolute;

left: -999em;

width: 150px;

margin: 0;

border-width: 1px 1px 0px;

z-index: 999;

}

#topnav li ul li {

border-top: 1px solid #989898;

border-bottom: 1px solid #343434;

border-right: none;

border-left: none;

}

#topnav li ul li a {

background: #1F5A91;

width: 100px;

height:30px;

color: #fff !important;

font-weight: normal;

opacity: .80;

filter: alpha(opacity=80);

text-shadow: 0px 1px 0px #000 !important;

}

#topnav li ul li a:hover {

text-shadow: 0px 1px 0px #fff !important;

}

#topnav .sf-sub-indicator {

display: none;

}

#topnav li ul li a.sf-with-ul {

padding: 7px 12px;

}

#topnav li ul li a:hover {

background: #000;

color: #fff !important;

text-shadow: 0px 1px 0px #000 !important;

text-decoration: none;

}

#topnav li ul ul {

margin: -31px 0px 0px 150px;

}

#topnav li ul ul li a {}

#topnav li ul li ul li a {}

#topnav li:hover,#topnav li.hover {

position: static;

}

#topnav li:hover ul ul, #topnav li.sfhover ul ul,

#topnav li:hover ul ul ul, #topnav li.sfhover ul ul ul,

#topnav li:hover ul ul ul ul, #topnav li.sfhover ul ul ul ul {

left: -999em;

}

#topnav li:hover ul, #topnav li.sfhover ul,

#topnav li li:hover ul, #topnav li li.sfhover ul,

#topnav li li li:hover ul, #topnav li li li.sfhover ul,

#topnav li li li li:hover ul, #topnav li li li li.sfhover ul {

left: auto;

}

如何为WordPress主题制作下拉菜单

Step — 在functionsphp中添加以下代码使我们的主题支持自定义菜单功能

add_theme_support(‘navmenus’);

Step — 添加一个顶部菜单

if ( function_exists( ‘register_nav_menus’ ) ) {

register_nav_menus(

array(

‘header_menu’ = ‘Header Navigation’

);

}

Step — 把wp_nav_menu()函数放到一个自定义函数当中

function wper_so_menu(){

if(function_exists(‘wp_nav_menu’) has_nav_menu(‘header_menu’))

wp_nav_menu(

array(

‘menu’ = ‘Header Navigation’

‘container’ = ‘div’

‘container_class’ = ‘warp’

‘container_id’ = ‘’

‘menu_class’ = ‘ddsmoothmenu’

‘menu_id’ = ‘nav’

‘echo’ = true

‘fallback_cb’ = ‘fallback_no_menu’

‘before’ = ‘’

‘after’ = ‘’

‘link_before’ = ‘’

‘link_after’ = ‘’

‘depth’ =

‘walker’ = new Walker_Nav_Menu()

‘theme_location’ = ‘’

‘show_home’ = true

);

endif;

}

wordpress主题,怎么添加下拉菜单?

首先呢 看下是不是 需要这样的这样的一个下拉菜单如果是的话 那么往下看如何一个操作步骤(如果想看我的wp博客菜单具体效果呢 可以百度“李飞seo博客”)

操作步骤

添加分类目录(添加你所需要的所有目录,下面有步骤具体调整哪个是哪个的上一级目录)

找到博客主题菜单(选择分类目录全选添加到菜单)

鼠标进行拖放下拉菜单顺序效果可以查看图片

菜单设置,根据自己的要求设置 导航菜单,主导航 ,顶部导航

保存菜单进行查看那么  wp博客的一个下拉菜单就做好了

当然如果还有看不懂的话 不会操作的可以 百度 李飞seo博客 进行学习

wordpress手机端不显示下拉菜单

这可能是插件或主题冲突。请尝试禁用所有插件,并切换到默认主题,然后一个个添加插件,排查问题。

Wordpress调用二级导航的方法:

1、新建 functions.php 函数文件并添加以下代码:

__( ‘导航自定义菜单’ ), ) );?

2、把导航位置的li标签都删除掉,换上调用代码:

地,’menu_class’ = ‘navigation’,’menu_id’ = ‘nav_sgBhgn’) ); ?

3、添加一个jquery库,放在body开始和结束的适合的位置即可:

4、使用jquery库文件加载,大家可以测试一下模板打开的速度,哪个快用那个:

谷歌加载:

百度加载:

新郎加载:

5、添加CSS样式:

/* 二级菜单 */

.sub-menu{

display:none;/初始状态下隐藏子目录/

position:absolute;/显示最顶层/

}

.sub-menu li{

width:100%;/*显示子目录宽度/针对IE6/

clear:both;/垂直显示/

background:#000;/子目录背景颜色/

}


本文标题:WordPress下拉框 wordpress底部
文章网址:http://cdkjz.cn/article/doegogj.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220