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.显示导航条

/*
wp_nav_menu( $args )
@参数 array $args, 传递此参数时用array(成员参数名=>成员参数值)
特别说明:
调用导航菜单时,可以直接复制以下代码。然后根据需要删除成员参数
*/
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',	

就显示正常了。

(一)底部导航条

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来显示文章的。

四、侧边栏
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,然后稍微修改即可。

九、分类目录
用的是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

本文暂无标签

发表评论

*

*