在学习了上一节的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.3-WordPress 模板标签 主题中使用模板标签从数据库中检索内容,内容可以是博客标题或侧边栏的内容。模板标签是将内容放入主题的首选方法,因为:他们可以打印动态内容; 他们可以用于多个主题文件; 他们可以将主题分为更小,更易理解的部分。    什么是模板标签?  ...
wordpress的网站设置与插件及主题之间的联系 许多wordpress站长在开发网站的初期会使用多个主题并来回切换,选择其中较好的风格样式锁定主题。但在网站设计开发过程中,突然反悔,临时想换一个主题进行开发,这样的情况并不少见。但一个wordpress站点只能使用一种主题。如果随意切换其他主题是否站点中的设置和数据就都消失了呢,答案是并不尽然。那...
WordPress主题制作教程2.6-WordPress的条件标签(二) 页面模板  is_page_template()检测是否使用了页面模板 is_page_template(‘post.php’)检测是否使用页面模板‘post’,页面模板与其他标签有所不同,用户需要使用文件名(如post.php或my...
wordpress主题制作开发实战教程3.1(1)- 主题基础 在本章节中,我们将学习到WordPress的一些主题基础主题基础主要有:1.WordPress的模块文件知识2.模板文件工作流程以及优先级3.主题里的基本循环  主题基础 Wordpress主题包含了许多文件,其中有模板页面。模板页面是层级结构,...
WordPress主题制作教程2.5-WordPress的CSS和JavaScript 在创建主题时,当你将文件主题启用后,你会发现页面中的所有css/js代码加载失败,如下图所示。这是由于wordpress本身加载样式表/js文件有它自己的规则。 下面WP花园洋葱将带领大家使用标准的WordPress方法加载脚本和样式表。向WordPress添加脚本和样式非常简单。你...
如何处理wordpress中JavaScript文件冲突问题 在编写WordPress主题中,如果第三方提供的HTML/JS/CSS文章中,包含了很多.js文件,在引入这些JavaScript文件过程中会这样那样的错误,比如什么“$ is not a function”之类的,这时候可以通过以下方式来一一排查。 1.正确在functi...
WordPress主题制作开发实战教程4.1- 站点设置,固定链接设置 在本章节中,我们将带领大家去学习WordPress主题的站点设置,固定链接设置 站点设置 有时我们需要将我们网站的一些基本信息在网站上显示出来,比如网站标题,网站介绍,邮箱地址等,让人更加的了解这个网站,所以我们需要添加站点设置功能。在后台设置网站信息,在前台页面显示则需要在想显示的页面...
wordpress主题制作开发实战教程3.8 – 新建Header.php文件 新建Header.php文件 1.在主题下创建一个名为Header.php的文件2.打开你的Index.php文件,剪切
标签或

发表评论

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

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