wordpress 仿站教程菜单导航、文章列表、搜索弄一个

一、菜单导航

效果如下：

1、wordpress后台添加菜单

 2、header.php 文件

1.  
   <?php //方法二（默认菜单调用方法，可更改样式）
2.  
   wp_nav_menu( array(
3.  
   'theme_location' => '', //导航别名
4.  
   'menu' => '', //期望显示的菜单(菜单名称或菜单id)
5.  
   'container' => 'div', //容器标签
6.  
   'container_class' => '', //ul父节点class值
7.  
   'container_id' => '', //ul父节点id值
8.  
   'menu_class' => '', //ul节点class值
9.  
   'menu_id' => '', //ul节点id值
10.  
    'echo' => true, //是否输出菜单，默认为真
11.  
    'fallback_cb' => 'wp_page_menu', //菜单不存在时，返回默认菜单，设为false则不返回
12.  
    'before' => '', //链接前文本
13.  
    'after' => '', //链接后文本
14.  
    'link_before' => '', //链接文本前
15.  
    'link_after' => '', //链接文本后
16.  
    'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>', //如何包装列表
17.  
    'depth' => 0, //菜单深度，默认0
18.  
    'walker' => '' //自定义walker
19.  
    ) );
20.  
     
21.  
    ?>

3、删除导航默认样式，在functions.php中添加

1.  
   // li增加class标签
2.  
   //删除Class选择器
3.  
   //删除Class选择器
4.  
   add_filter('nav_menu_css_class', 'my_css_attributes_filter', 100, 1);
5.  
   add_filter('nav_menu_item_id', 'my_css_attributes_filter', 100, 1);
6.  
   add_filter('page_css_class', 'my_css_attributes_filter', 100, 1);
7.  
   function my_css_attributes_filter($var) {
8.  
   //需要保留的class可以写在这里， ，隔开就行了(保留了current-menu-item 这个选择器,鼠标焦点高亮)
9.  
   return is_array($var) ? array_intersect($var, array('current-menu-item')) : '';
10.  
    }

4、style.css 添加菜单点击后样式

1.  
   /**鼠标点击菜单，高亮显示**/
2.  
   .menu-nav-container ul li{float:left;list-style: none;margin-right: 20px;}
3.  
   .current-menu-item{background-color: aquamarine;}

参考地址：

 二、文章列表

1.  
   <div>
2.  
   <?
3.  
   global $post;
4.  
   // have_posts() 判断是否有文章
5.  
   if(have_posts()){
6.  
   while(have_posts()){
7.  
   the_post();//获得下一篇文章信息，并将信息存入全局变量 $post 中
8.  
    
9.  
   //var_dump($post);//全局变量 $post 中有什么信息
10.  
     
11.  
    ?>
12.  
    <div><a href="<? the_permalink();?>"><? the_title();?></a></div>
13.  
    <?
14.  
    }
15.  
    }else {
16.  
    echo '无文章';
17.  
    }
18.  
    ?>
19.  
    </div>

三、搜索制作

效果：

1、searchform.php 搜索

1.  
   <form id="searchform" name="searchform" method="get" action="<?php bloginfo('home'); ?>/" >
2.  
   <ul>
3.  
   <li>
4.  
   <?php $select = wp_dropdown_categories('class=search_select&show_option_all=全站搜索&orderby=name&hierarchical=0&selected=-1&hide_empty=0&depth=1');?>
5.  
   </li>
6.  
   <li>
7.  
   <input type="text" name="s" id="s" maxlength="34" value="" class="sck"/>
8.  
   </li>
9.  
   <li>
10.  
    <input type="submit" value="搜 索" class="sckal"/>
11.  
    </li>
12.  
    </ul>
13.  
    </form>

2、搜索样式

1.  
   /**搜索框样式**/
2.  
   #searchform ul li{
3.  
   float: left;
4.  
   }
5.  
    
6.  
   #searchform ul input{
7.  
   height: 35px;
8.  
   line-height: 35px;
9.  
   margin-left: 10px;
10.  
    }
11.  
    input{
12.  
    outline:none;
13.  
    }
14.  
    .search_select{height:35px;line-height:35px;width:85px}
15.  
    .sck{height:33px;width:160px;border:1px solid #999;padding:0 10px;background:#FFF;font-size:16px;}
16.  
    .sckal{height:34px;width:50px;border:1px solid #999;line-height:34px;
17.  
    text-align:center; background-color:#36F;color:#FFF;font-size:15px;font-weight:bold}
18.  
     
19.  
    .cleardiv{
20.  
    clear: both;
21.  
    }

3、搜索后结果页面

将 archive.php 列表页，复制一份，并命名为 search.php

4、在需要搜索的页面进行调用

<?php include (TEMPLATEPATH . '/searchform.php'); ?>

这篇好文章是转载于：学新通技术网