WordPress主题制作教程

一、如何在WordPress后台的主题中显示我们的自定义主题。

我们需要新建一个主题文件夹,并在主题文件夹根目录中上传三个文件:index.php,style.css,screenshot.jpg
1,在wp-content/themes/中新建一个主题文件夹并命名,我这里以mydaima为例
2,在主题文件夹根目录上传一个index.php文件(刚开始用记事本新建一个空内容的index.php即可)
3,在主题文件夹根目录上传一个style.css文件。
我们要在style.css的顶部增加一些注释内容。

4,在主题文件夹mydaima根目录中上传一张主题缩略图(截图)screenshot.png
screenshot.png默认大小为300*225,我们可以按倍数给它增大一些,这样在一些高分辨率的显示器中会更清楚,我在这里给它设置为为600*450

好,我们现在进入后台,点击 外观 -- 主题 ,我们会看到我们刚才新建的主题,点击 主题详情 我们会看到一些说明,这些说明就是我们刚才在style.css文件中添加的注释。


二、给模板增加标题标签title_tag

现在我们的首页index.php是一个空的页面。我们来给模板增加一个<title>标题,以前我们增加<title>标题的时候是直接在模板里添加

<title>...</title>。从wordpress4.1版本开始,增加了一个函数:add_theme_support( 'title-tag' ),我们可以通过这个函数来让Wordpress来直接添加我们的<title>标题,不用手动添加了。

add_theme_support( 'title-tag' )使用方法

首先在模板index.php中</head>之前添加<?php wp_head(); ?>,然后在主题根目录functions.php(如果你的主题没有functions.php,那么你可以自己新建立一个,你可以参考:《为wordpress主题创建一个规范的functions.php》)中添加add_theme_support( 'title-tag' );

标准一点的写法:

首先我们自顶一个函数:bxh_setup(),以后我们可能添加很多动作到这个函数里。这个函数最好命名复杂点,不然的话可能和插件中的重复。然后在这个函数中添加add_theme_support( 'title-tag' ); 最后通过after_setup_theme这个钩子来加载函数。整体代码如下:

上述代码是一个标准的规范化代码,当然了,你也可以直接在functions.php中添加add_theme_support( 'title-tag' )

好,现在我们来刷新一下首页,看看是不是自动出来一个<title>标题。


三、在主题中正确加载css和js文件。

在以往,我们在制作WordPress主题的时候,都是在主题模板中手动来添加主题的css和js文件,这样不太灵活,而且很多时候造成一些脚本文件重复加载。

这里我们以加载bootstrap框架为例。bootstrap框架包含一个bootstrap.min.css和一个bootstrap.min.js,同时需要一个jquery脚本。要求是bootstrap.min.js放到底部,既</body>之前。另外我们在加载一个主题样式style.css放到bootstrap.min.css的下边

1)在主题模板中</head>之前添加<?php wp_head(); ?>,在</body>之前添加<?php wp_footer(); ?>

2)在functions.php中新建函数bxh_scripts() --- 当然了,你可以自定义命名。然后通过wp_enqueue_script,wp_enqueue_style来加载脚本和css,详细用法可以参考《WordPress中如何正确加载js脚本和css样式》,这里就不多讲了。

好,我们下载看一下效果。打开网页查看源代码:

简单解析一下:

上述代码中,get_template_directory_uri()代表主题URL,既:http://***.com/wp-content/themes

这段代码中我们用到了wp_enqueue_script函数,

wp_enqueue_script函数用法:

参数解释:

$handle
(字符串)(必需)脚本名称。小写字符串。
默认值:None
$src
(字符串)(可选)WordPress根目录下的脚本路径
示例:"/wp-includes/js/scriptaculous/scriptaculous.js"。该参数只在WordPress不了解脚本情况时使用。
默认值:None
$deps
(数组)(可选)脚本所依靠的句柄组成的数组;加载该脚本前需要加载的其它脚本。若没有依赖关系,返回false。该参数只在WordPress不了解脚本情况时使用。
默认值:array()
$ver
(字符串)(可选)指明脚本版本号的字符串(若存在版本号)。默认为false。该参数可确保即使在启用缓存的状态下,发送给客户端的仍然是正确版本,因此如果版本号可用且对脚本有意义,包含该版本号。
默认值:false
$in_footer
(布尔型)(可选)通常情况下脚本会被放置在<head>区块中。如果该函数为true,脚本则会出现在<body>区块的最下方。要求主题在适当的位置中包含有wp_footer()钩子。(WordPress新功能)
默认值:false

比如我不想把js放到底部,我想放到<head>中,那么我们可以把最后一个值改为false

好了,wp_enqueue_script()详细用法参考《WordPress的wp_enqueue_script()函数

Views: 1,170 Tags: ,
飞鱼

发表评论

电子邮件地址不会被公开。 必填项已用*标注