在学习了上一节的WordPress主题基础之后,在本章节我们将学习主题制作的基本流程以及一些小功能。

基本流程:

1.创建主题文件夹

2.创建主题模板文件

3.模板文件引入css

小功能:显示作者,时间,评论数量等

主题制作基本流程

创建一个主题,首先我们需要的是一个存放所有主题文件的文件夹。

创建主题文件夹

1.创建一个名字的唯一目录,在wp-content/themes/ 目录下,通过 FileZilla.上传到服务器

2.将你的html/css模型文件和图像文件复制到这个文件夹中

3.再次将index.html重命名为index.php,因为php页面比html页面更加适用,并且能够加入各种函数

4.在css文件最开始的地方添加备注

添加方法如下:

/*
Theme Name: (主题名字)
Theme URI: (主题地址)
Author: (主题作者)
Author URI:(作者地址)
Description: (主题描述)
Beginners Guide
Version:(版本)
Tags: (标签)
*/

5.保存样式表文件

6.在wordpress后台中选择刚刚创建的主题

创建主题模板文件

  • 上传你的模板文件图像和index.html还有css样式表文件到主题目录
  • 在样式表中添加一些符合w3c规范的代码
  • 将index.html重命名为index.php
  • 为模板标签添加php代码,特别是bloginfo标签,它能够显示文章的内容。
  • 主题内容出现,说明html和css正确显示,然后你可以拆分主题的模板文件,例如头部文件,脚部文件,侧边栏文件,php文件等等。
  • 将主题设计分离为不同的模块,你就可以为主题显示不同的需求,例如不同的主页面布局和不同的内部页面布局,以及使用模板标签和api。

创建完成后我们需要反复测试验证各种页面

  • 编辑html/css/javascript/php文件
  • 在浏览器上检查查看效果
  • 反复上述步骤直至达到效果

 

模板文件引入css

为了在网站页面中显示我们需要的css样式,我们需要在模板文件中引入css文件。

1.首先,找到代码

<link media="all" rel="stylesheet" type="text/css" 
href="style.css" />

2.将上述代码改为

<link media="all" rel="stylesheet" type="text/css" href="<?php 
bloginfo('stylesheet_url'); ?>" />

Media=”all”:显示媒介

rel=”stylesheet”:描述了当前页与href所指定文档的关系,stylesheet为样式表

type=”text/css”:文档类型,css文件

Href=”style.css”:文档位置

 

小功能

显示作者,时间

代码显示

<p class="entry-meta">by

<?php the_author();?>in

<?php the_time();?></p>

the_author();(显示作者函数)

the_time();(显示时间函数)

效果显示:

显示评论数量

原代码:

<p class="right"><a class="comments-count" href="#">850</a></p>

评论数是固定的,只是个静态数字

新代码:

<p class='right'><a class='comments-count' href='<?php 
the_permalink() ?>'><?php comments_number('0', '1', '%') 
?></a></p>

the_permalink();显示评论跳转链接

comments_number(‘0’, ‘1’, ‘%’);显示评论数量

可以输出评论数量,不是静态。

原效果

现效果

专业网站开发网页设计公司

深度阅读:

WordPress主题制作教程2.2-WordPress 主题文件 虽然WordPress主题只需要两个文件(index.php和style.css),它们通常由许多文件组成,本节将向您展示如何整理文件。    主题文件和文件结构  默认的二十个主题是主题开发最好的例子。  assets - css ...
WordPress主题制作开发实战教程4.3 – 小部件 小部件可以让我们的主题拥有更多的小功能,比如搜索,文章归档等,使用起来非常实用,所以在网站建设中使用小部件功能是必须的。小部件可以从网站的主题设置里面添加,无需编写代码。小部件主要出现在侧边栏和脚部,你也可以在其他地方使用。添加小部件功能 首先我们需要添加小部件功能...
wordpress主题制作开发实战教程3.7 – 在模板文件中分解代码 目前我们的主题已经步入循环,现在需要将主题分解至各个模板文件,以确保主题所有部分的编辑可用。这里有一个好的规则建议:首先,避免重复的标记其次,懂得标记独一无二的代码标签,使其仅仅出现在特殊的页面,比如首页 Header.php、Footer.php、...
WordPress主题制作教程2.4-WordPress主题功能 许多wordpress新手在进行wordpress主题制作时总会遇到这样的问题,什么是WordPress主题功能,怎样去修改它。functions.php文件是您向WordPress主题添加功能的地方。它用于连接WordPress的核心功能,使您的主题更具模块化,扩展性和功能性。如果你想学习...
WordPress主题制作教程2.6-WordPress的条件标签(一) 很多WordPress新手不懂如何根据当前页面匹配的条件,在模板文件中使用条件标签来更改内容的显示。条件标签通常使用if else条件语句。改代码首先检查语句的真假,如果发现语句为真,则执行第一组代码,如果语句假的,则跳过第一组代码,直接执行第二组代码例如,下面这段代码:&n...
WordPress主题制作开发实战教程4.4- 图片功能 有时我们需要在文章中添加一些图片,让我们更好的理解,并且使得文章更美观,所以在主题中添加图片功能也是必须的添加图片功能 首先我们需要添加图片功能,然后才能使用。打开function.php文件在php结束标签?>之前添加如下代码: add_theme_sup...
wordpress主题制作开发实战教程3.10 – 新建Footer.php文件 新建Header.php文件 我们使用与sidebar和header相同的步骤创建footer的页面模板1.在主题模板中创建一个Footer.php文件2.打开你的Index.php文件,剪切你的footer文件,该文件通常位于
标签中至
wordpress主题制作开发实战教程3.12 – 创建一个page.php模板页面 创建一个page.php模板页面我们通过复制index.php文件来创建page.php文件,并作出一些调整1.创建一个php文件,命名为page.php2.复制index.php文件的所有php代码至page.php文件中3.在page.php中,找到并删除关于Th...

发表评论

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.