软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > Web前端 > 工具与技巧 > 教你如何给wordpress主题添加导航栏

教你如何给wordpress主题添加导航栏

  烈火建站学院转载 不是所有的wordpress主题都自带导航栏的,我早就想自行添加一个。昨天的标题前有“GOOGLE是个好老师”这个句子,今早赶紧删了,倒不是不认同,而是觉得在添加导航栏这个事情上还真不是那么回事情。

  以前我就说过:是否会有一天我们太依赖手术引擎,而传统获取信息的能力会逐步退化?比如资料检索、比较研究等等。况且,google不是万能的,或者说即使是万能的,你得有那个时间面对大海找出针尖,因为大多数时候他返回的结果还是很多,即便已经进行了关键词组合。我就体会到了。搜索半天,无功而返。

  所以,我想强调的是人的自学能力很重要,不是自夸。

  很多主题已经集成了导航栏,在添加页面后会自动出现,但是万一你喜欢的主题偏偏没有集成呢?比如系统默认的那个就没有,我一直用的这个也没有。开放性工具的好处体现出来了,自我加工成 可能。想一下:导航栏是在主页(index)、单篇日志页(single)、存档页(archive)等都出现,那么显然是修改共同点,只有页眉(hearder)、页脚(foot)和侧边栏(sidebar)可以修改,放在页眉,那就修改header.php。问题在于,对于一个不会写代码的菜鸟来说,代码哪里来?google百度不到。变通一下,找一个集成了导航栏的主题研究下它的header.php好了。很显然,是以“<div class=”nav”>”(NAVI也有可能是navigasyon-wrap这类的名称,但是一般都会含NAV三个字母)开始的这段,记得代码一定要有始有终保持格式的完整。复制到自己主题的header.php相应位置内,style.css是样式表,简单地说是控制输出效果的,再到刚才那个主题找到STYLE.CSS查到#nav或者#navigasyon-wrap开头的代码,复制到要修改的主题STYLE.CSS最后。然后逐步修改背景色、字体颜色、字号、左右间距之类的即可。

  所以,忙了一会儿,就如你所见,连我这样的技术盲都能在原先主题的基础上,修修改改添加一个还算满意导航栏。原来不想写这么看似有点技术的东西的,因为我实在不是很懂这个。后来想想,我遇到的困难一定有人一样会碰到,那么就扯一次。以后断是不能写类似教程的东西了,实在没有那个知识积累,这篇权当班门弄斧吧。具体代码见内页。

header.php相应位置添加:

以下为引用的内容:
<div id=”navigasyon-wrap”> <ul> <li<?php if(is_home() || is_404() || is_single() || is_category() || is_day() || is_month() || is_year() || is_search() ) { ?> class=”current_page_item”<?php } ?>></li> <?php wp_list_pages(’sort_column=menu_order&exclude=149&depth=1&title_li=’); ?> </ul> </div>

STYLE.CSS相应位置添加:

以下为引用的内容:

#navigasyon-wrap{ width:980px; clear:both; height:33px; margin:20 auto; } #navigasyon-wrap ul { padding:0px 0 20px 20px; }

#navigasyon-wrap li { line-height:0.88em; display:inline; }

#navigasyon-wrap li a,#navigasyon-wrap li a:visited { color:#050606; background:#fc6; font-size:13px; margin-right:3px; float:right; padding:7px 15px; }

#navigasyon-wrap li a:hover { text-decoration:underline; }

#navigasyon-wrap li.current_page_item a, #navigasyon-wrap li.current_page_item a:visited, #navigasyon-wrap li.current_page_item a:hover { background:#F9F8F7; color:#444; text-decoration:none; }

    相关阅读
    网友评论
    栏目导航
    推荐软件