做一个WordPress主题需要哪些准备

Posted 2020-07-03

1.配置wordpress的开发环境

运行环境

首先本地主机上得安装了wordpress的运行环境。可以是WAMP或者MAMP，这样可以实时看到更新，而不需要经常下载或者上传文件到服务器上来检查更新。并且，有一个本地的安装环境意味着不需要有网络的链接来测试你的作品。然后，你就从underscores这个网站上下载一个scratch模板放到你的wordpress安装目录-> wp-content -> themes 下面，比如我创建了一个名为photographic-baby的主题。在wordpress网站中激活这个主题，可以看到非常原始的界面。

集成开发环境 - IDE

一个好用的IDE，可以是eclipse，netbeans，sublime text，phpstorm等等，在本文中将使用netbeans来开发。

单元测试

不管你打算做什么样的网站，你都需要进行单元测试。比如说内容的类型，html的tag，图像的对齐等等。测试那些内容可能要花很长时间，但是幸运的是，你不要自己去做那些测试内容。你只需要下载一个Theme Unit Test data for WordPress 。然后再进入WordPress的工具->导入->WordPress， 导入刚才下载的Unit Test data。

浏览器

使用尽量多的浏览器来测试你的页面，比如Chrome，Firefox，IE，Mac上的Safari等等。

插件

WordPress的插件库里有很多好用的帮助你debug的插件。有一个很好用的插件叫做Developer, 在插件->安装插件->搜索“Developer”，可以下载安装。激活之后，会有一个提示框问你在开发什么类型的网站。因为我们讲的是开发WordPress 主题，所以选择第二个。

之后会弹出一个插件列表。之所以安装“Developer”这个插件是因为里面集成了很多其他开发插件可供选择。我们先装“Debug Bar”，“Monster Widget”，“Pagegenerate Thumbnails”和“Theme Check”。其他的插件以后用到再安装。这样，在工具下面，就可以看到多了一个“developer”这个选项。里面的配置跟一开始的简易配置是一样的。在Constants里，检查“WP_DEBUG”有没有设置成“SET”，如果没有的话在wp-config.php这个文件里更改。在菜单栏右上角，就多了“Debug”和“Developer”这两个链接。

2.设计开发的过程

理解wordpress的主题的结构。有个插件叫做“Show Current Template”，可以知道现在工作的这个页面用的什么主题页面。建议从插件库里搜索并安装。

WordPress模板架构

新的css和javascript

如果想注册新的css和javascript，比如说加入第三方提供的javascript链接，或者字体，找到themes下面的function.php, 然后可以更新下面一段代码：

/**
 * Enqueue scripts and styles.
 */
function photographic_baby_scripts() {
	wp_enqueue_style( ‘photographic-baby-style‘, get_stylesheet_uri() );

	wp_enqueue_script( ‘photographic-baby-navigation‘, get_template_directory_uri() . ‘/js/navigation.js‘, array(), ‘20151215‘, true );

	wp_enqueue_script( ‘photographic-baby-skip-link-focus-fix‘, get_template_directory_uri() . ‘/js/skip-link-focus-fix.js‘, array(), ‘20151215‘, true );

	if ( is_singular() && comments_open() && get_option( ‘thread_comments‘ ) ) {
		wp_enqueue_script( ‘comment-reply‘ );
	}
}
add_action( ‘wp_enqueue_scripts‘, ‘photographic_baby_scripts‘ );

　　

知道怎么添加css和javascript，你就可以发挥你的创造力来做自己心目中的模板了。