基于WordPress开发微信小程序2:决定开发一个wordpress主题

上一篇:基于WordPress开发微信小程序1:搭建Wordpress-CSDN博客

很快发现一个问题,如果使用别人的主题模板,多多少少存在麻烦,所以一咬牙,决定自己开发一个主题模板,并且开源在gitee上:牧旭尧/福兴小程序wordpress配套主题 (gitee.com)

好了,开始研究一下wordpress主题开发

什么是主题?

WordPress主题负责站点的外观,包括布局、配色、功能模块等等。更改主题会更改网站的外观设计,即用户在浏览网站时看到的内容和版式。

主题可以做什么?

WordPress主题中数据库中获取数据,然后在浏览器中显示。创建WordPress主题时,我们可以决定该内容的外观和显示方式。例如:

  • 使用一列、两列、多列布局、是否为响应式等。
  • 把内容展示在站点中的任意位置。
  • 指定您的内容在哪些设备或哪些操作中可见。
  • 使用 CSS 自定义其排版和设计元素。
  • 在主题的任何位置包含其他设计元素(如图像和视频)。

WordPress主题非常强大。但是,与其他网页设计项目一样,主题不仅仅是颜色和布局。优秀的主题不仅有一个美丽的外表,还可以提高网站的参与度 。

主题是什么?

从本质上说,WordPress主题是一些模版文件的集合,这些模版文件相互协同,创建了用户所看到的内容,控制着网站的外观和交互方式。

主题所需文件

最基本的 WordPress 主题中只 需要两个文件

  1. index.php -- 主模板文件
  2. style.css -- 主样式文件

以下文件不是必需的,但是我们很可能会在各种主题中看到:

  • PHP 文件 -- 包括模板文件
  • 本地化文件
  • CSS 文件
  • 图像
  • JavaScript 文件
  • 文本文件 -- 通常是许可证信息 readme.txt说明和更新日志文件

如何正确的开发主题?

虽然WordPress主题在技术上只需要两个文件( index.phpstyle.css),但它们通常由更多模版文件组成。这意味着他们很快就会变得杂乱无章!以下是一个主题的开发示例:

java 复制代码
assets (dir)
      - css (dir)
      - images (dir)
      - js (dir)
inc (dir)
template-parts (dir)
      - footer (dir)
      - header (dir)
      - navigation (dir)
      - page (dir)
      - post (dir)
404.php
archive.php
comments.php
footer.php
front-page.php
functions.php
header.php
index.php
page.php
README.txt
rtl.css
screenshot.png
search.php
searchform.php
sidebar.php
single.php
style.css

我们可以看到,模板文件位于根目录中,而 JavaScript,CSS,图像放在 assets目录中,模板片段放在对应的子目录中,在主题中使用的核心功能放在 inc 目录中。

目前,在WordPress主题没有必需的文件夹。但是,默认情况下,WordPress会识别以下文件夹。

style.css 应该位于主题的根目录中,而不是 CSS 目录中。

好了,阅读完以上的内容,我们接下来开始正式进入主题的开发吧...

创建第一个主题

让我们从头开始创建一个简单的WordPress主题。首先,创建一个新的文件夹,命名为"lowrie"。在这个文件夹中,创建一个名为"style.css"的文件,这是主题的样式文件。

在"style.css"文件中添加以下内容:

css 复制代码
/*
Theme Name: lowrie
Description: 福兴小程序配套主题
Author: 牧旭尧
Version: 1.0
*/

这些是主题的基本信息,包括主题名称、描述、作者和版本号。

接下来,创建一个名为"index.php"的文件。这将是主题的入口文件,用于显示网站的内容。

在"index.php"文件中添加以下内容:

php 复制代码
<?php
get_header(); // 获取头部
?>

<main>
  <h1>Hello, World!</h1>
  <p>Welcome to lowrie</p>
</main>

<?php
get_footer(); // 获取尾部
?>

论证了,主题可以使用...

前端访问

现在,已经开始编写wordpress主题的代码了...

已更新最新代码:lowrie: 福兴小程序的wordpress配套主题 (gitee.com)

了解更多详情,请移步:电商系统开发-B2B商城系统开发-APP开发一站式落地服务「福兴信息科技」 (aptus.xin)

相关推荐
2501_915918416 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
2501_915106327 小时前
iOS 使用记录和能耗监控实战,如何查看电池电量消耗、App 使用时长与性能数据(uni-app 开发调试必备指南)
android·ios·小程序·uni-app·cocoa·iphone·webview
じòぴé南冸じょうげん15 小时前
小程序的project.private.config.json是无依赖文件,那可以删除吗?
前端·小程序·json
2501_9160137416 小时前
HTTPS 抓包难点分析,从端口到工具的实战应对
网络协议·http·ios·小程序·https·uni-app·iphone
2501_9159184118 小时前
uni-app 项目 iOS 上架效率优化 从工具选择到流程改进的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张18 小时前
如何在不同 iOS 设备上测试和上架 uni-app 应用 实战全流程解析
android·ios·小程序·https·uni-app·iphone·webview
微三云-轩19 小时前
区块链:重构企业数字化的信任核心与创新动力
人工智能·小程序·区块链·生活·我店
阿隆_趣编程21 小时前
为了方便相亲,我用AI写了一款小程序
前端·javascript·微信小程序
2501_915918412 天前
iOS 开发全流程实战 基于 uni-app 的 iOS 应用开发、打包、测试与上架流程详解
android·ios·小程序·https·uni-app·iphone·webview
黑马源码库miui520862 天前
JAVA同城打车小程序APP打车顺风车滴滴车跑腿源码微信小程序打车源码
java·微信·微信小程序·小程序·uni-app