WordPress主题制作（三）：牛刀小试

2022-12-15 14:28:31 浏览数 (1)

在准备篇已经提到本系列教程将使用模板yii-candy为例，这里再贴一次下载链接Yii-candy的源码

一个最简单的WordPress主题只需要包含以下两个文件：

  • style.css
  • index.php

创建你的主题文件夹

在你的WordPress目录 wp-contentthemes 下新建一个文件夹，命名为Yii-candy

创建 index.php 和 style.css 文件

style.css

将下载的Yii-candy中style.css的代码复制到本文件后保存

代码语言：javascript复制
/*
Theme Name: yii-candy
Theme URI: https://www.yiiven.cn
Description: It's a theme create by yiven
Version: 1.0
Author: yiven
Author URI: yiven
Tags: custom header, fixed width, two columns, widgets
*/

这是一段CSS注释，WordPress就是利用这段注释来识别我们制作的主题信息的。

  • Theme Name – 主题名称
  • Theme URI – 主题URL
  • Description – 主题描述
  • Version – 版本号
  • Author – 作者
  • Author URI – 作者URL
  • Tags – 主题标签
index.php

将下载的Yii-candy中index.php的代码复制到本文件后保存

此时我们在登录WordPress后台，进入外观就可以看到一个新的主题Yii-candy了。

为什么我们的主题没有预览图呢？现在能不能修改我们的主题名称呢？答案是肯定的，一切我们能想到的，似乎WordPress都已经早就为我们想好了，这也是WordPress多年来的沉淀。那么我们来看看如何让我们的主题拥有预览图以及修改主题信息吧。

为主题增加缩略图

将下载的screenshot.png放到您的Yii-candy目录下，再到WordPress管理后台”外观”栏目下查看，是不是有预览图了呢？我们可以在主题制作完毕后，给主题界面截个图（或者特制一个封面图片），命名为screenshot.png，大小300 * 225，放置到主题目录下作为主题缩略图。

修改主题名称

按照上面的名称，修改主题名称，然后修改主题的文件夹名称，再回到WordPress管理后台“外观”栏目下查看，主题名称就变成你修改后的名称了。

查看主题效果

我们启用Yii-candy主题，然后访问站点首页，OH天啦，这都是些什么，一片凌乱不堪的事物呈现在你面前，很明显，这并不是我们想要的效果。不要紧张，因为我们还没有为站点写好应有的样式，后续我们会逐渐地将样式写入，让页面变得美观起来。

接下来，请将您下载的Yii-candy下所有文件都拷贝到你的主题目录下。以备后续章节使用。

WordPress主题： 4 / 14

  • WordPress主题制作：开始前的准备
  • WordPress主题制作（一）：主题文件结构
  • WordPress主题制作（二）：模板和模板文件
  • WordPress主题制作（三）：牛刀小试
  • WordPress主题制作（四）：制作头部模板header.php
  • WordPress主题制作（五）：制作底部模板footer.php
  • WordPress主题制作（六）：制作侧边栏模板sidebar.php
  • WordPress主题制作（七）：制作基础模板Index.php
  • WordPress主题制作（八）：制作文章单页模板single.php
  • 计划: WordPress主题制作（九）：制作评论区模板comments.php
  • 计划: WordPress主题制作（十）：制作单页（非文章）模板page.php
  • 计划: WordPress主题制作（十一）：制作静态首页front-page.php
  • 计划: WordPress主题制作（十二）：创建您自己的小工具
  • 计划: WordPress主题制作（十三）：创建后台主题选项

本文采用 「CC BY-NC-SA 4.0」创作共享协议，转载请标注以下信息：

原文出处：Yiiven https://cloud.tencent.com/developer/article/2193189

wordpress 网站建设 yii css 网站

0 人点赞