WordPress最新的主题Twenty Twelve已经发布很久了,今天仔细的看了看,发现了很多令人欣喜的变化,和之前的版本有很大区别,变化是值得肯定的,如果你还没有看过Twenty Twelve,一定要看一看。如果你想开始一个新主题,不妨从Twenty Twelve出发。

twentytwelve

更灵活的Title标签

过去,默认主题的输出title的代码是长长的一串,在Twenty Twelve中,则是如此简单

<title><?php wp_title( '|', true, 'right' ); ?></title>

在Twenty Twelve的变化中,简化似乎是一个方向,没有多余的功能,没有累赘的样式。标题简化到只有一个函数,通过插件可以完全控制标题的输出,而且与之前的主题相比SEO方面没有任何退步。简单,我喜欢。

引入脚本和样式

Twenty Ten或者Twenty Eleven中,主样式表style.css和评论嵌套功能的comment-reply.js是直接在header.php中嵌入的,在某种程度上可以说是硬编码。用了这么长时间,没发现这种硬编码有任何问题,但最近竟然遇到了。

某个主题通过代码控制Google Web Font的加载,所以谷歌字体的样式表是在wp_head()函数里加载的,而主样式表直接嵌入到wp_head()之前,导致页面加载时,字体先显示为普通的字体,再显示成谷歌字体。

现在,不会有这个问题了,因为样式表和comment-reply.js都通过程序引入,在functions.php中

add_action( 'wp_enqueue_scripts', 'twentytwelve_scripts_styles' );
/**
 * Enqueues scripts and styles for front-end.
 *
 * @since Twenty Twelve 1.0
 */
function twentytwelve_scripts_styles() {
	
	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) )
		wp_enqueue_script( 'comment-reply' );

	wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );

		wp_enqueue_style( 'twentytwelve-fonts', add_query_arg( $query_args, "$protocol://fonts.googleapis.com/css" ), array(), null );
	}

	wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );
}

使用了wp引入脚本和样式表的推荐函数wp_enqueue_script和wp_enqueue_style,这样,可以控制它们输出的位置,也可以轻松在child theme中将它们dequeue,很久以前就在想为什么wp不这样引入脚本和样式表,现在不用想了。

引入谷歌字体的独特方式

Twenty Twelve主题默认加载了Open Sans字体,这个字体很漂亮,也很受欢迎。加载字体的方式很独特,在functions.php中,

add_action( 'wp_enqueue_scripts', 'twentytwelve_scripts_styles' );

function twentytwelve_scripts_styles() {
        /*
	 * Loads our special font CSS file.
	 *
	 * The use of Open Sans by default is localized. For languages that use
	 * characters not supported by the font, the font can be disabled.
	 *
	 * To disable in a child theme, use wp_dequeue_style()
	 * function mytheme_dequeue_fonts() {
	 *     wp_dequeue_style( 'twentytwelve-fonts' );
	 * }
	 * add_action( 'wp_enqueue_scripts', 'mytheme_dequeue_fonts', 11 );
	 */

	/* translators: If there are characters in your language that are not supported
	   by Open Sans, translate this to 'off'. Do not translate into your own language. */
	if ( 'off' !== _x( 'on', 'Open Sans font: on or off', 'twentytwelve' ) ) {
		$subsets = 'latin,latin-ext';

		/* translators: To add an additional Open Sans character subset specific to your language, translate
		   this to 'greek', 'cyrillic' or 'vietnamese'. Do not translate into your own language. */
		$subset = _x( 'no-subset', 'Open Sans font: add new subset (greek, cyrillic, vietnamese)', 'twentytwelve' );

		if ( 'cyrillic' == $subset )
			$subsets .= ',cyrillic,cyrillic-ext';
		elseif ( 'greek' == $subset )
			$subsets .= ',greek,greek-ext';
		elseif ( 'vietnamese' == $subset )
			$subsets .= ',vietnamese';

		$protocol = is_ssl() ? 'https' : 'http';
		$query_args = array(
			'family' => 'Open+Sans:400italic,700italic,400,700',
			'subset' => $subsets,
		);
}

这种加载方式的独特之处在于,用户可以通过语言文件来控制是否加载Open Sans字体,如果不想加载,将on翻译成off即可,通过同样的方式也可以控制是否加载字体的子集,加载那些子集。

过去,用Cufon来绘制漂亮的字体,现在,有了Google Web Font,Cufon或许可以退休了,谷歌字体有很多漂亮的样式,例如阴影、描边、发光、火焰,甚至还有动态火焰样式。

Responsive Design

Twenty Twelve同时还是看一款Responsive Design主题,可以在任何设备上完美展示内容。在这个Android和iPhone等智能手机盛行的年代,支持手机比支持IE6更加重要,电脑杀不死IE6,但手机可以杀死电脑。虽然Twenty Eleven在手机上看效果也不错,但Twenty Twelve更胜一筹,对菜单做了处理,当使用手机查看时,菜单会变成更利于触摸点击的样子。

手机上查看时的Menu样式

Page模版可以放在目录下

在Twenty Twelve中,WordPress 3.4的新功能——目录存放page模版得到了体现,在一个page-templates目录下,Twenty Twelve提供了两个模版——首页模版和全宽度模版。首页模版是针对CMS网站的设计,页面分两栏,可以摆放widget。

将模版放在目录中,管理更方便。有些主题可以自带10多个page模版,现在终于可以找个好地方安家,不用到处流浪了。

图片图片你在哪里

Twenty Twelve在设计上可以说非常朴素,你甚至找不到一个images文件夹,没错,这个主题的样式没有使用任何图片,这样,想定制化就更容易了。更简单的样式,需要覆盖掉的东西也就少了。

简单、简单再简单

Twenty Twelve精简掉很多功能,虽然它有WordPress核心的Header和Background功能,但默认不带任何header图片,它甚至没有主题选项。没有主题选项,对我来说是件好事,方便实用的主题选项框架很多,Twenty Eleven自带的似乎用处不大,没了就省心了。

Twenty Twelve很适合做主题框架,精简,结构清晰,拥有wp 3.4的新特性,准备尝试基于这个主题开发新主题,看看可用性如何。

推荐一篇不错的相关文章:

What WordPress Theme Developers Can Learn from Twenty Twelve

 

12条留言

  1. 请教,如何才能让Twenty Twelve主题在文章标题旁边显示作者名呢?谢谢。

  2. 我正在修改与优化主题,感谢站长这篇文章。

  3. Google font的特效很好玩,哈哈,都是用text-shadow完成的。

  4. 请教一个问题,我在使用Twenty Twelve自定义模版的时候为什么不能够获得文章呢?却得到了当前页面,这个问题困扰我有段时间?

    1. 自定义模版可能有错误,看起来症状是全局变量混乱了。千万不要直接去修改$post全局变量,使用query_post之后也要重置全局变量,按照这个思路排查一下吧。

      1. 在Twenty Twelve主题下,能写个简单的页面模版吗?显示所有文章标题就行?我一直无法找到根本原因,源文件基本上没有改动的

        1. 当然可以了,你用get_posts重新写一个循环出来,因为页面默认就是显示一个页的内容,这在WordPress读取page模版之前就决定好了,所以你需要重新写循环。

    1. 我博客用的主题就是用twenty twelve改出来的

评论功能已关闭