当前位置: 首页 > news >正文

基于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.php和 style.css),但它们通常由更多模版文件组成。这意味着他们很快就会变得杂乱无章!以下是一个主题的开发示例:

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"文件中添加以下内容:

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

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

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

在"index.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)

相关文章:

  • P8706 [蓝桥杯 2020 省 AB1] 解码--2024蓝桥杯冲刺省一
  • Javascript第八个知识点:函数
  • 华为数通方向HCIP-DataCom H12-831题库(填空题)
  • MySQL运维实战(5.3) MySQL数据乱码的一些情况
  • 【YAML语法规范指南】从入门到精通,揭秘神秘语法,引领配置文件解析指南(基础结构篇)
  • H5 简约四色新科技风引导页源码
  • Vue组件通信讲解[父子组件通信]
  • C++新特性 线程局部存储
  • Ingress
  • 爬取58二手房并用SVR模型拟合
  • 【电路笔记】-线圈的电感
  • 169. Majority Element
  • 洛谷 P3694 邦邦的大合唱站队 【状压DP】
  • Ubuntu权限相关命令
  • 虚拟机Windows Server 2016 安装 MySQL8
  • 网络传输文件的问题
  • 10个最佳ES6特性 ES7与ES8的特性
  • github从入门到放弃(1)
  • Laravel5.4 Queues队列学习
  • nodejs实现webservice问题总结
  • React-生命周期杂记
  • Redis学习笔记 - pipline(流水线、管道)
  • Wamp集成环境 添加PHP的新版本
  • 高程读书笔记 第六章 面向对象程序设计
  • 给Prometheus造假数据的方法
  • 构造函数(constructor)与原型链(prototype)关系
  • 学习ES6 变量的解构赋值
  • 1.Ext JS 建立web开发工程
  • 没有任何编程基础可以直接学习python语言吗?学会后能够做什么? ...
  • ​软考-高级-系统架构设计师教程(清华第2版)【第9章 软件可靠性基础知识(P320~344)-思维导图】​
  • #微信小程序:微信小程序常见的配置传旨
  • ${factoryList }后面有空格不影响
  • (1)(1.13) SiK无线电高级配置(五)
  • (2015)JS ES6 必知的十个 特性
  • (ctrl.obj) : error LNK2038: 检测到“RuntimeLibrary”的不匹配项: 值“MDd_DynamicDebug”不匹配值“
  • (TOJ2804)Even? Odd?
  • (动手学习深度学习)第13章 计算机视觉---微调
  • (附源码)ssm高校升本考试管理系统 毕业设计 201631
  • (机器学习的矩阵)(向量、矩阵与多元线性回归)
  • (三)elasticsearch 源码之启动流程分析
  • (原創) 如何優化ThinkPad X61開機速度? (NB) (ThinkPad) (X61) (OS) (Windows)
  • (转)JAVA中的堆栈
  • (转)Spring4.2.5+Hibernate4.3.11+Struts1.3.8集成方案一
  • *1 计算机基础和操作系统基础及几大协议
  • .bat批处理(十一):替换字符串中包含百分号%的子串
  • .NET Compact Framework 多线程环境下的UI异步刷新
  • .NET Project Open Day(2011.11.13)
  • .NET 将混合了多个不同平台(Windows Mac Linux)的文件 目录的路径格式化成同一个平台下的路径
  • .net 无限分类
  • .net2005怎么读string形的xml,不是xml文件。
  • .net操作Excel出错解决
  • .Net开发笔记(二十)创建一个需要授权的第三方组件
  • .net企业级架构实战之7——Spring.net整合Asp.net mvc
  • []sim300 GPRS数据收发程序
  • []Telit UC864E 拨号上网