工具：XAMPP (安装方式，可以去看一下第一篇文章) wordpress-小白式上手“一站式建站”- 这一系列的模板我会逐步更新，手把手小白式自定义式主题开发

wordpress中有很多可以选择的模板，但是如果没有适合的模板。前端可自己创建自定义的模板。本文将手把手带你进入wordpress模板主题的开发，从0到1的模板开发

自主开发wordpress开发，就需要你有一定的html，js，css相关知识。如果你有vue，react的开发经验，上手会更快，都是模块化式的开发。其实主题开发就是写模板

创建自定义模板

1、进入你的XAMAPP 文件夹中（确保你的XAMAPP已经启动）
D:\xamapp\htdocs\wordpress\wp-content\themes

2、创建一个空模板名为test，创建index.php, style.css 文件，这两个文件是模板必须存在的入口文件然后在浏览器输入以下路径就可以进入你的wordpress后台 http://localhost/wordpress/wp-admin

在这里可以看到你新创建的test新模板

如果要配置模板图片，在test路面下新增一个命名为screenshot.png的图片，

通过实时预览，就可以看到你的定义模板，你的自定义模板就创建成功

关于wordpress的使用

如果要自定义模板开发，我们是要清楚以下几点:

1、数据如何产生，如何在你的自定义模板中，获取到数据
做过前端研发的人，都接触过一些功能框架，在wordpress也是一样，你可以把wordpress当做一个js库，里面会封装了很多API提供给到我们使用

2、清楚模板的开发规则
就犹如，你在平时开发中接入的一些UI框架一样，都是需要遵循框架的的一些规则。在wordpress中的模板的制定也会有他相对应的规则。同时你也可以在这过程制定你的规则

还是一样的，通过实战去熟悉一个框架是最快。代码运行起来，我们就是成功了一半。
下面我会根据实战来逐步讲解一些wordpress主题开发中需要的一些问题。

实例开发

预先设定好你所需要的模板

开发前，是要清除你的界面结构，这样才能更好地进行下去：
是要弄清楚你项目所需的为模板。这里我以一个企业官网为例，罗列的一个模板清单

共同头部<head>
共同的底部文件<footer>
顶部导航栏<nav>
新闻资讯模板<new>
帮助中心搜索模板<search>
页面内容展示模板<container>
特殊样式页面样式就需要自定义处理

清楚模板开发代码目录

-asstes (静态文件存放文件夹)
    -images
    -css
    -js
-template-parts(模板文件的存放文件夹)
    footer.php
    header.php
    nav.php
    ...
index.php(页面入口文件)
style.css(页面样式入口文件)
...以及其他的页面文件

1、以封装一个header.php为例子 php的写法很简单，就类似于undescore.js
<?php 里面就执行PHP的API函数 ?> 头部文件主要是引入一些固定的样式，注意<html>在header.php是不闭合的，但是会在footer.php写入中协商闭合标签</html>

header.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="<?php bloginfo('charset'); ?>">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
        <meta name="keywords" content="关键字，如做SEO，提炼出合适的关键字很重要，大概在80字左右差不多" />
        <meta name="description" content="描述，SEO，200字描述" />
        <!--引入一些公共文件：如公共样式，以及公共的js插件-->
         <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/assets/layui/css/layui.css" type="text/css" />
    <head>

footer.php

<footer>
    ...底部公共代码
</footer>
<?php wp_footer() ?>
</html>

这里要知道一些常用的API:
引入文件，引入公共组件的API

API	参数	默认值	返回值	说明	示例
get_template_directory_uri()	-	-	-	获取主目录的路径，是引入静态文件事所必须的	`<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/assets/layui/css/layui.css" type="text/css" />`
get_header()	$name(可选/String)	-	-	引入公共头部header.php文件 header-one.php,则$name=one	`<?php get_header($name)?>`
get_footer()	$name(可选/String)	-	-	引入公共头部footer.php文件 footer-one.php,则$name=one	`<?php get_footer($name)?>`
get_sidebar()	$name(可选/String)	-	-	引入公共头部sidebar.php文件 sidebar-one.php,则$name=one	`<?php get_sidebar($name)?>`
get_template_part()	$slug(必填/String)$ name(可选/null)	-	-	获取组件模板 test.php ( $slug=test) / test-subName.php ($ slug=test, $name=subName)	get_template_part('templateName')
get_search_form	$echo(Boolean)	true	为false时，就是返回这个表单的代码	直接引用为false时是不展示的；赋值输出即可展示： `<?php $form=get_search_form(false); echo $form ?>` 他本身就有自己的searchform表单，可以自定义一个searchform.php来自定义	get_search_form()
$echo	-	-	-	相当于是输出代码到html页面上

以上几个基础的API，就可以在index.php或者自定义的页面中custom.php中

<?php get_header(); ?>

// 帮助中心模板
get_template_part('template-parts/single', 'help');

<?php get_footer(); ?>

每个页面有自己的样式的时候，可以通过以下方式在你的单独页面，或者单独组件中头部，引入你的自定义样式：

<?php wp_enqueue_style('help.css', get_template_directory_uri().'/assets/css/help.css');?>

在js中，字符串的拼接是依靠的是
var str = '1' + '2' // 12
或者
str = `12` // 12
在php中是通过 "."
str = '1'.'2'  // 12

到这里的时候，完成静态页面是没有什么问题的：下一节，会总结一下，如何在模板中使用数据

参考文献:
wordpress主题开发手册
 wordpress中文API文档

wordpress-第二弹：wordpress主题开发 - <创建模板静态文件>

创建自定义模板

关于wordpress的使用

实例开发

预先设定好你所需要的模板

清楚模板开发代码目录