Home >  > 4小时学会WordPress模板制作(二)

4小时学会WordPress模板制作(二)

0

一、导航菜单
1.函数(开启导航菜单功能)
原来是没有菜单功能的。

/*
register_nav_menu( $location, $description )
函数功能:开启导航菜单功能
@参数 string $location, 导航菜单的位置
@参数 string $description, 导航菜单的描述
*/
register_nav_menus(array(
  'zhudaohang' => '网站的顶部导航',
  'footer-nav' => '底部快速通道菜单',
));

将上面的代码放到functions.php,就会显示“菜单”选项。

备注:
左边是别名,右边是名称。别名会用在导航栏的调用上,名称则显示在菜单后台页面上。

(二)顶部导航菜单
1.创意导航菜单

2.显示导航条

<?php
/*
wp_nav_menu( $args )
@参数 array $args, 传递此参数时用array(成员参数名=>成员参数值)
特别说明:
调用导航菜单时,可以直接复制以下代码。然后根据需要删除成员参数,是放到模板文件,不是function文件
*/
wp_nav_menu( array(
  'theme_location'	=> 'footer-nav',						        //[保留]
  'menu'		=> '',									//[可删]
  'container'		=> 'div',							        //[可删]
  'container_class'     => '',									//[可删]
  'container_id'	=> '',									//[可删]
  'menu_class'		=> 'menu',						                //[可删]
  'menu_id'		=> '',									//[可删]
  'echo'		=> true,							        //[可删]
  'fallback_cb'		=> 'wp_page_menu',		                                        //[可删]
  'before'		=> '',									//[可删]
  'after'		=> '',									//[可删]		
  'link_before'		=> '',									//[可删]
  'link_after'		=> '',									//[可删]
  'items_wrap'		=> '<ul id="%1$s" class="%2$s">%3$s</ul>',	                        //[可删]
  'depth'		=> 0,								        //[可删]
  'walker'		=> ''									//[可删]
) );
?>

顶部导航栏加上之后变成了这样。

3.通过修改代码:

'menu_class'	=> 'nav navbar-nav',	

就显示正常了。

4.终极的方法
比如原来的导航代码是:

<nav class="inner" id="menu">	
	<div class="menu"><ul><li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-6"><a href="http://www.kwko6.cn/">首页</a></li>
<li id="menu-item-2766" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2766"><a href="http://www.kwko6.cn/sample-page-2">关于我们</a></li>
<li id="menu-item-2743" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2743"><a href="http://www.kwko6.cn/cpzs">产品展示</a></li>
<li id="menu-item-9" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9"><a href="http://www.kwko6.cn/lxwm">联系我们</a></li>
</ul></div></nav>

就在items_wrap这里进行设定。

<?php 
/*
wp_nav_menu( $args )
@参数 array $args, 传递此参数时用array(成员参数名=>成员参数值)
特别说明:
调用导航菜单时,可以直接复制以下代码。然后根据需要删除成员参数
*/
wp_nav_menu( array(
  'theme_location'              => '',                //[保留]导航别名
  'menu'                        => 'test1',           //[可删]期望显示的菜单,即后台的菜单名称
  'container'                   => 'navbtn',          //[可删]  容器标签
  'container_class'             => 'menu',            //[可删]   ul父节点class值
  'container_id'                => '',                //[可删]  ul父节点id值
  'menu_class'                  => '',                //[可删]  ul节点class值
  'menu_id'                     => 'menu',            //[可删]   ul节点id值
  'echo'                        => true,              //[可删]  是否输出菜单,默认为真
  'fallback_cb'                 => 'wp_page_menu',    //[可删]   菜单不存在时,返回默认菜单,设为false则不返回
  'before'                      => '',                //[可删]  链接前文本
  'after'                       => '',                //[可删]      
  'link_before'                 => '',                //[可删]  链接文本前
  'link_after'                  => '',                //[可删]
  'items_wrap'                  => '<nav class="inner" id="menu"><div class="%2$s"><ul>%3$s</ul></div></nav>',                           
  'depth'                       => 0,                 //[可删]   菜单深度,默认0
  'walker'                      => ''                 //[可删]
) );
?>

备注:
container 是指

    items_wrap的标准写法是

      %3$s

    ,如果要定制li的class,那么需要到页面那里进行设置:

    (一)底部导航条

    1.在后台建立一个菜单,并且与“底部快速通道菜单”绑定

    2.加入调用代码。
    3.显示效果

    二、面包导航
    1.函数

    /**
    * lingfeng_breadcrumbs()函数
    * 功能是输出面包屑导航HTML代码
    * @Param null			不需要输入任何参数
    * @Return string		输出HTML代码
    */
    function lingfeng_breadcrumbs() {
    	/* === OPTIONS === */
    	$text['home']     = '网站首页'; // text for the 'Home' link
    	$text['category'] = '%s'; // text for a category page
    	$text['search']   = '"%s"的搜索结果'; // text for a search results page
    	$text['tag']      = '%s'; // text for a tag page
    	$text['author']   = '%s'; // text for an author page
    	$text['404']      = '404错误'; // text for the 404 page
    
    	$show_current   = 1; // 1 - show current post/page/category title in breadcrumbs, 0 - don't show
    	$show_on_home   = 1; // 1 - show breadcrumbs on the homepage, 0 - don't show
    	$show_home_link = 1; // 1 - show the 'Home' link, 0 - don't show
    	$show_title     = 1; // 1 - show the title for the links, 0 - don't show
    	$delimiter      = ' &raquo; '; // delimiter between crumbs
    	$before         = '<span class="current">'; // tag before the current crumb
    	$after          = '</span>'; // tag after the current crumb
    	/* === END OF OPTIONS === */
    
    	global $post;
    	$home_link    = home_url('/');
    	$link_before  = '<span typeof="v:Breadcrumb">';
    	$link_after   = '</span>';
    	$link_attr    = ' rel="v:url" property="v:title"';
    	$link         = $link_before . '<a' . $link_attr . ' href="%1$s">%2$s</a>' . $link_after;
    	$parent_id    = $parent_id_2 = $post->post_parent;
    	$frontpage_id = get_option('page_on_front');
    
    	if (is_home() || is_front_page()) {
    
    		if ($show_on_home == 1) echo '<div class="breadcrumbs"><a href="' . $home_link . '">' . $text['home'] . '</a></div>';
    
    	} else {
    
    		echo '<div class="breadcrumbs" xmlns:v="http://rdf.data-vocabulary.org/#">';
    		if ($show_home_link == 1) {
    			echo '<a href="' . $home_link . '" rel="v:url" property="v:title">' . $text['home'] . '</a>';
    			if ($frontpage_id == 0 || $parent_id != $frontpage_id) echo $delimiter;
    		}
    
    		if ( is_category() ) {
    			$this_cat = get_category(get_query_var('cat'), false);
    			if ($this_cat->parent != 0) {
    				$cats = get_category_parents($this_cat->parent, TRUE, $delimiter);
    				if ($show_current == 0) $cats = preg_replace("#^(.+)$delimiter$#", "$1", $cats);
    				$cats = str_replace('<a', $link_before . '<a' . $link_attr, $cats);
    				$cats = str_replace('</a>', '</a>' . $link_after, $cats);
    				if ($show_title == 0) $cats = preg_replace('/ title="(.*?)"/', '', $cats);
    				echo $cats;
    			}
    			if ($show_current == 1) echo $before . sprintf($text['category'], single_cat_title('', false)) . $after;
    
    		} elseif ( is_search() ) {
    			echo $before . sprintf($text['search'], get_search_query()) . $after;
    
    		} elseif ( is_day() ) {
    			echo sprintf($link, get_year_link(get_the_time('Y')), get_the_time('Y')) . $delimiter;
    			echo sprintf($link, get_month_link(get_the_time('Y'),get_the_time('m')), get_the_time('F')) . $delimiter;
    			echo $before . get_the_time('d') . $after;
    
    		} elseif ( is_month() ) {
    			echo sprintf($link, get_year_link(get_the_time('Y')), get_the_time('Y')) . $delimiter;
    			echo $before . get_the_time('F') . $after;
    
    		} elseif ( is_year() ) {
    			echo $before . get_the_time('Y') . $after;
    
    		} elseif ( is_single() && !is_attachment() ) {
    			if ( get_post_type() != 'post' ) {
    				$post_type = get_post_type_object(get_post_type());
    				$slug = $post_type->rewrite;
    				printf($link, $home_link . $slug['slug'] . '/', $post_type->labels->singular_name);
    				if ($show_current == 1) echo $delimiter . $before . get_the_title() . $after;
    			} else {
    				$cat = get_the_category(); $cat = $cat[0];
    				$cats = get_category_parents($cat, TRUE, $delimiter);
    				if ($show_current == 0) $cats = preg_replace("#^(.+)$delimiter$#", "$1", $cats);
    				$cats = str_replace('<a', $link_before . '<a' . $link_attr, $cats);
    				$cats = str_replace('</a>', '</a>' . $link_after, $cats);
    				if ($show_title == 0) $cats = preg_replace('/ title="(.*?)"/', '', $cats);
    				echo $cats;
    				if ($show_current == 1) echo $before . get_the_title() . $after;
    			}
    
    		} elseif ( !is_single() && !is_page() && get_post_type() != 'post' && !is_404() ) {
    			$post_type = get_post_type_object(get_post_type());
    			echo $before . $post_type->labels->singular_name . $after;
    
    		} elseif ( is_attachment() ) {
    			$parent = get_post($parent_id);
    			$cat = get_the_category($parent->ID); $cat = $cat[0];
    			if ($cat) {
    				$cats = get_category_parents($cat, TRUE, $delimiter);
    				$cats = str_replace('<a', $link_before . '<a' . $link_attr, $cats);
    				$cats = str_replace('</a>', '</a>' . $link_after, $cats);
    				if ($show_title == 0) $cats = preg_replace('/ title="(.*?)"/', '', $cats);
    				echo $cats;
    			}
    			printf($link, get_permalink($parent), $parent->post_title);
    			if ($show_current == 1) echo $delimiter . $before . get_the_title() . $after;
    
    		} elseif ( is_page() && !$parent_id ) {
    			if ($show_current == 1) echo $before . get_the_title() . $after;
    
    		} elseif ( is_page() && $parent_id ) {
    			if ($parent_id != $frontpage_id) {
    				$breadcrumbs = array();
    				while ($parent_id) {
    					$page = get_page($parent_id);
    					if ($parent_id != $frontpage_id) {
    						$breadcrumbs[] = sprintf($link, get_permalink($page->ID), get_the_title($page->ID));
    					}
    					$parent_id = $page->post_parent;
    				}
    				$breadcrumbs = array_reverse($breadcrumbs);
    				for ($i = 0; $i < count($breadcrumbs); $i++) {
    					echo $breadcrumbs[$i];
    					if ($i != count($breadcrumbs)-1) echo $delimiter;
    				}
    			}
    			if ($show_current == 1) {
    				if ($show_home_link == 1 || ($parent_id_2 != 0 && $parent_id_2 != $frontpage_id)) echo $delimiter;
    				echo $before . get_the_title() . $after;
    			}
    
    		} elseif ( is_tag() ) {
    			echo $before . sprintf($text['tag'], single_tag_title('', false)) . $after;
    
    		} elseif ( is_author() ) {
    	 		global $author;
    			$userdata = get_userdata($author);
    			echo $before . sprintf($text['author'], $userdata->display_name) . $after;
    
    		} elseif ( is_404() ) {
    			echo $before . $text['404'] . $after;
    
    		} elseif ( has_post_format() && !is_singular() ) {
    			echo get_post_format_string( get_post_format() );
    		}
    
    		if ( get_query_var('paged') ) {
    			if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ' (';
    			echo __('Page') . ' ' . get_query_var('paged');
    			if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ')';
    		}
    
    		echo '</div><!-- .breadcrumbs -->';
    
    	}
    } // end dimox_breadcrumbs()
    

    在function.php加入上面的代码,在需要调用的地方直接用下面的命令即可。

    <?php lingfeng_breadcrumbs(); ?>
    

    2.调用。

    三、文章详情页
    文章详情页的文件名为single.php,并修改CSS的路径。在创建这个文件前,wordpress是以index.php来显示文章的。

    详情页的keywords、desc

    <title><?php the_title(); ?></title>
     <?php if( have_posts() ) : while( have_posts() ) : the_post(); ?> 
    <meta name="keywords" content="<?php the_title(); ?>" />  
    <meta name="description" content="<?php echo lingfeng_strimwidth(get_the_content(),150); ?>" />
    

    这个函数见:这里

    2.页面标签
    获取文章标签,并显示标签列表:

    <?php
    // 获取当前文章的标签
    $tags = get_the_tags();
    if ($tags) {
        echo '<div class="tags">';
        echo '<span>Tags:</span>';
        foreach ($tags as $tag) {
            echo '<a href="' . get_tag_link($tag->term_id) . '">' . $tag->name . '</a>';
        }
        echo '</div>';
    }
    ?>
    

    四、侧边栏
    1.函数

    register_sidebar( array(
      'name'						=> '文章侧边栏',					//侧边栏的名称
      'id'								=> 'siderbar-01',					//侧边栏的编号
      'description'				=> '在文章详情页显示',					//侧边栏的描述
      'class'						=> '',
      'before_widget'			=> '',
      'after_widget'			=> '',
      'before_title'				=> '<h2 class="widgettitle">',
      'after_title'					=> '</h2>' 
    ) );
    
    
    

    在functions.php添加以上代码之后,在wordpress后台会多一个“小工具”的菜单。
    注意:
    这里的before_widget显示的是在“before_title”,“after_title”外面的东西,即将title和li都包围起来的那个div.

    2.调用侧边栏

    <?php if ( is_active_sidebar( 'siderbar-01' ) ) : ?>
    	 <?php dynamic_sidebar( 'siderbar-01' ); ?>
    <?php else: ?>
    	//提示用户
    	//或者,显示一些默认的边栏效果
    <?php endif; ?>
    

    3.效果预览
    在“小工具”菜单那里给侧边栏添加内容,然后在前端就可以看到效果了。

    4.显示文章内容

    <?php if( have_posts() ) : while( have_posts() ) : the_post(); ?>
    <?php the_content(); ?>
    <?php endwhile; ?>
    <?php endif; ?>
    

    注意:
    这个也要放到主循环里面。

    五、拆分页面
    建立三个文件sidebar.php, footer.php, header.php,并将相应的代码复制过去。

    <?php get_header();?>
    <?php get_sidebar();?>
    <?php get_footer();?>
    

    关于get_header的用法,还可以这样用:建立一个header-menu.php文件,然后将内容放进去,在需要调用的地方用下面的代码:

     <?php get_header(menu); ?>
    

    参考:https://www.jb51.net/article/77735.htm

    六、上一页、下一页
    代码:

    <div class="related">
    	<span class="r-left"><?php next_post_link('«上一篇:%link'); ?> </span>
    	<span class="r-right"><?php previous_post_link('»下一篇:%link'); ?> </span>
    	<div class="clear"></div>
    </div><!-- .related -->
    

    效果展示:

    七、评论框

    <?php comments_template(); ?>
    

    效果演示:

    如果对评论框的样式有要求,需要自己设定评论框的样式,可以看这里

    八、页面模板
    直接使用single.php,然后稍微修改即可。

    九、友情链接
    WordPress其实从3.5版本之后就在后台默认隐藏了链接管理功能,而我们通常需要在设置友情链接的时候需要用到这个功能,所以我们需要重新启用这个功能,直接在function.php添加以下代码:

    add_filter( 'pre_option_link_manager_enabled', '__return_true' );
    

    然后在要插入链接的地方加上下面这行代码即可:

    <div class="inner" id="friendlinks">
    	<ul>
    		<li><strong>友情链接:</strong></li>
    		<?php wp_list_bookmarks('title_li=&categorize=0'); ?>	
    	</ul>
    </div>
    

    九、分类目录
    用的是archive.php。

    如果你想要让某一个分类目录使用单独的模板,比如给id为5的分类目录单独创建模板,可以建立一个category-5.php文件即可。

    获得当前分类的名称:

    <?php single_cat_title(); ?>
    

    十、分页
    直接调用自编的分页函数,显示效果并不是很好。

    直接用插件吧。

    1.安装插件WP-PageNavi。
    2.在需要分页的地方插入以下代码:

    <?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>
    

    3.成果展示

    十一、一级分类、二级分类使用不同的模板
    实测成功!
    1.在模板函数文件functions.php中加入以下的函数。

    function get_category_parent($parent)
    {
    global $cat;
    $parent=get_category($cat);
    if($parent->parent)return ture;
    else
    return false;
    }
    

    2.在分类模板文件archive.php中使用以下语句进行父分类与子分类的判断。(且只需要这段代码就可以了)

    <?php if(get_category_parent($parent)==false){
    include(TEMPLATEPATH . '/category-fu.php'); //父分类
    }
    else {
    include(TEMPLATEPATH . '/category-zi.php'); //子分类
    }
    ?>
    

    十二、一级分类页面显示二级分类文章列表

    <?php
    global $cat;
    $cats = get_categories(array(
    'child_of' => $cat,
    'parent' => $cat,
    'hide_empty' => 0
    ));
    $c = get_category($cat);
    if(empty($cats)){
    ?>                
    
    <?php
    }else{
    foreach($cats as $the_cat){
    $posts = get_posts(array(
    'category' => $the_cat->cat_ID,
    'numberposts' => 10,
    ));
    if(!empty($posts)){
    echo '
    <div class="col-xs-6 col-md-6">
    <div class="mten-exam-list">
    <h3 class="exam-title">'.$the_cat->name.'<a href="'.get_category_link($the_cat).'"><span class="fr col_6">更多</span></a></h3>
    <ul>
    ';
    
    $a = 1;
    foreach($posts as $post){					
    	if ($a==1 ) {
    		echo'
    		<div class="exam-intro">
    			 <a href="'.get_permalink($post->ID).'">
    				<img src="http://127.0.0.1/18wp/wp-content/themes/simplegreen/static/picture/defaultpic.gif" alt="在线英语口语培训" class="fl" width="130"  height="80" />
    				<div class="exam-intro-content fr">
    				<h5>'.$post->post_title.'</h5>
    				<p></p>
    				</div>
    				</a>
    				</div>
    		';
    	} else {
    		echo '
    		<li><a title="'.$post->post_title.'" href="'.get_permalink($post->ID).'">'.$post->post_title.'</a></li>';
    	}
    	$a += 1;
    
    }				
    echo '</ul>
    </div>
    </div>';
    }
    }
    }
    ?>
    

    效果展示:

    十三、
    如果要不同的目录套用不同的模板,只需要设定模板的别名,然后将模板命名为category-别名.php就可以了。

    十四、不同分类下的文章调用不同的模板
    比如我们可以在主题的根目录创建3个文章模板文件,分别命名为 single001.php , single002.php 和 single003.php,然后我们希望 ID 为 2 和 3 的分类使用 single001.php,ID为 7 的分类使用 single002.php ,其他分类使用 single003.php,那么,我们可以在 single.php 文件写入下面的代码:

    <?php 
    if ( in_category(array( 2,3 )) ) {
    	get_template_part('single001' );
    } elseif ( in_category( 7 )) {
    	get_template_part('single002' );
    } else {
    	get_template_part('single003' );
    }
    ?>
    

    更多方法:
    https://www.wpdaxue.com/custom-single-post-template.html

暧昧帖

本文暂无标签

发表评论

*

*