wordpress模板开发技巧篇

发表于 更新于 分类于 ， Changyan： 本文字数： 1.5k 阅读时长 ≈ 6 分钟

wordpress作为最流行的博客系统，最大的原因里是离不开庞大的插件市场，基本上你能通过这些插件实现各种想要的网站功能，关于其基本的模板标签这里觉得没必要再记录，本人也只是自己承接网站制作的时候偶尔会选择它，所以今天这里我们不讲很基础的标签，也不讲深入的插件开发，我们就讲下日常制作模板常常会用到的。

模板自定义

很早之前用过其他的系统，大致模板自定义其实做的很人性化，就是建栏目的时候可以直接选择栏目要使用的模板，以及栏目下文章要使用的详情页模板，wordpress则不然，它有一套模板查找顺序，常用模板的话基本上就是archive、category、single、page等。关于页面我们就不用说了，它天生支持使用自定义模板，

只需要在单页模板的头部写上如下注释，即可在单页编辑页面可以选择到这个模板，特别适合专题制作。

1
2
3
4
5
<?php
/*
Template Name: About
*/
?>

关于栏目自定义模板和文章详情自定义模板在我们市场开发中是经常要使用的，最常见的就是企业站动态栏目基本上就是产品、新闻，它们的模板肯定不能使用一套，这个时候有两种方式可以选择。

插件实现自定义模板，我这里推荐下之前使用过的栏目自定义模板插件和文章详情自定义模板插件，其他这个文章详情自定义模板插件用起来感觉像单页的自定义模板功能，也特别适合使用专题，但是如果比如某个栏目下的文章都适用这个模板，这个插件的没那么方便了。

这里简单交大家使用在functions中分配栏目模板的方法，代码很简单，关键代码也做了注释，所以就不一一讲解了，这样看来，不使用插件来实现自定义模板是不是也很简单呢？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
add_action('template_include', 'load_single_template');
function load_single_template($template) {
	$new_template = '';
	// 文章页自定义模板设置
	if( is_single() ) {
		global $post;
		// 如果是类型为产品则使用指定模板
		if($post->post_type == 'product'){
			$new_template = locate_template(array('view.php' ));
		}
    // 如果是归档页，走以下代码
	}elseif(is_archive()){
    // 如果该栏目携带了参数product_cat，我们就让其用指定的模板
		if(isset($_GET['product_cat'])){
			$new_template = locate_template(array('products.php' ));
		}
	}
	return ('' != $new_template) ? $new_template : $template;
}

显示缩略图

这个在wordpress里叫特色图片，我们比如带图片的栏目使用它会非常方便，但是如果是商品等多张图片的话，自带的这个特色图片就满足不了我们了，我们使用有这样功能的插件就行了，这里我推荐一个插件叫做：Pods – Custom Content Types and Fields。

wordpress默认没有开启特色图片，需要我们在functions中加一句话开启它。

1
2
3
if ( function_exists( 'add_theme_support' ) ) {
    add_theme_support( 'post-thumbnails' );
}

wordpress功能很强大，估计是官方比较照顾非开发人员所以很多调用的标签里自带了很多讨厌的html标签，我还不想使用它自带的html结构，这种使用就只有重写了，很是建议wordpress标签可以只渲染数据，不要渲染出html，这样能更方便大家自定义，这句话在你使用wordpress自带的导航时你会深深体会到这种讨厌的方式。

关于特色图片的调用，官方也是自带的html整个img标签，包括各种尺寸的，如果你的img有自己的class用官方的就讨厌了。同样我们在functions定义个获取特色图片的功能，没有则用调用文章内容中的第一张图片，再没有就是用自定义图片。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//调用文章第一章图片
function catch_that_image() {
    global $post, $posts;
    $first_img = '';
    ob_start();
    ob_end_clean();
    $full_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full');
    // 判断是否有特色图片
    if($full_image_url){
        return $full_image_url[0];
    }
  	// 正则匹配内容中的图片
    $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
    $first_img = $matches [1] [0];
    // 如果图片内容中没有图片，则输出默认图片
    if(empty($first_img)){ //Defines a default image
      $first_img = "/uploads/default.jpg";
    }
    return $first_img;
    
  }

自定义导航

我又要说这个功能很强大了，可是真的真的很强大，可以定义无数个导航，而且可以随意拖动导航的顺序及层次结构，就是调用的时候你会感慨为什么不直接给我返回一个数组，又是返回带html结构的菜单，特别是导航结构不一致时更是恶心，强烈吐槽。

functions中开启自定义导航，可以看中数组中我们可以创建多个导航。

1
2
3
4
5
6
7
8
//自定义菜单
if (function_exists('register_nav_menus')) {
    register_nav_menus(
        array(
            'header' => __('头部导航'),
        )
    );
}

接着你就可以在外观导航中拖出来一个想要的菜单的。但是html结构是wordpress默认的，特别是你的导航跟默认导航结构不一致就有的搞了，反正我绝不会向wp妥协，重写就重写，重写继承的类是Walker_Nav_Menu源码好像是在wp-include一个叫nav-template之类的文件中，看看它输出的结构改为自己的就行了。自己建的类卸载functions中继承它就行了。下面说如何使用。

跟网上你百度到的答案类似，唯一不同的就是最后的这个walker，它指向了刚才你自定义的类，你在description_walker中重写了导航的html结构，然后在导航调用参数中将html标签类改成你自己的类名就搞定了。 我反正是这样干的，有更好的办法给小弟也说说呗。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$menuParameters = array(
		    'theme_location'  => 'header',
			'menu'            => 'ees',
			'container'       => 'div',
			'container_class' => 'uk-navbar-nav',
			'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" attr="33" class="%2$s">%3$s</ul>',
			'items_wrap'      => '%3$s',
			'depth'           => 2,
			'walker'          => new description_walker()
		);
		?>
<?php wp_nav_menu($menuParameters);?>