WordPress主题开发-第一节-基础篇
本文最后更新于 151 天前,如有失效或谬误请评论区留言。

1 环境搭建

1.1 运行环境

1.1.1 Web服务器

为本地开发方便,我们需要跑一个本地的Web服务器用于在上面跑WordPress,这里为了方便,使用phpstudy,它自带WNMP环境

1.1.2 WordPress程序

WordPress官网下载最新的WordPress程序,解压

1.1.3 创建网站

首先启动WNMP服务,然后创建网站

Pasted image 20250121134843

因为是本地测试,域名可以随便填写,一定要勾选同步hosts,选择一个PHP版本,7.x $\to$ 8.x均可,根目录选择上面解压好的WordPress源码的目录

创建完成后就可以打开填写的域名进行WordPress的安装,数据库可以在面板里安装一个SQL_Front进行创建并管理

1.2 开发环境

1.2.1 基本环境

我们使用VScode进行开发,右键WordPress根目录,通过Code打开

1.2.1.1 所需插件

  • Live Server:修改完代码自动刷新浏览器使修改生效
  • PHP Debug:用于调试代码

1.2.2 调试环境

为了我们能打断点进行更爽的调试,我们需要配置PHP的Xdebug功能

1.2.2.1 把PHP添加到环境变量

找到PHP的根目录,把它添加到系统环境变量里

1.2.2.2 PHP设置

打开phpstudy-软件管理-PHP(你使用的版本),打开设置,打开扩展组件里的XDebug调试组件,并记住端口号(如果端口号占用的话自行修改)

Pasted image 20250121140023

再打开设置-配置文件-php.ini,打开对应版本的配置文件

Pasted image 20250121140112

添加如下代码:

xdebug.remote_enable = 1
xdebug.remote_autostart = 1

1.2.2.3 VSC设置

文件-首选项-设置,搜索PHP,有PHPPHP Debug两个类别,更改其中的两个Executable Path,如下

"php.validate.executablePath": "你的PHP可执行文件路径,注意把斜杠改成双斜杠",
"php.debug.executablePath": "你的PHP可执行文件路径,注意把斜杠改成双斜杠",

回到项目,在运行与调试中点击创建一个launch.json,这个文件不作其他修改,仅注意其中的两个Port是否与上面设置的XDebug扩展的端口一致,不一致修改即可

至此我们就完成了环境的配置,可以开始做主题开发了

2 基础知识

2.1 调试模式

为开发方便,我们需要打开WordPress的Debug模式,在WordPress根目录下找到wp-config.php,找到以下设置

define( 'WP_DEBUG', false );

false改成true即可

2.2 创建主题

wp-content/themes下创建一个新文件夹,这就是我们的主题目录

2.2.1 文件style.css

在主题目录下创建文件style.css

这个文件用于配置主题的各种基本信息,包括名称、描述、作者、版本号等,并且它也用于编写各种css样式,其基本的写法如下

/*
Theme Name: 主题名字
Author: 主题作者
Author URI: 作者网址
Description: 主题描述
Version: 版本号
License: 主题开源许可证
License URI: 许可证URI
Tags: 主题标签
*/

/*
其他CSS代码
*/

2.2.2 文件index.php

在主题目录下创建文件index.php

这个文件就是主题的入口文件,用于显示默认的内容

2.3 主题的文件结构

  • style.css:主题样式文件,包含主题元数据和样式信息
  • index.php:主题入口文件
  • header.php:网站的头部,包括导航菜单和页眉内容
  • footer.php:网站的尾部,包括页脚信息
  • single.php:用于显示一篇文章的模板文件
  • page.php:用于显示页面的模板文件
  • functions.php:功能文件,在这里添加自定义功能和钩子
  • assets:静态资源

3 首页分离

我们需要把index.php拆分开,在不同文件里编写网站不同部分的内容

3.1 模板标签

模板标签是WordPress的内置函数,相当于requireinclude的作用,如下

get_header();//获取头部部分
get_footer();//获取尾部部分
get_sidebar();//侧边栏
get_title();//显示文章或页面标题
...

那我们就可以在编写完footer.phpheader.php之后,这样来写index.php

<?php get_header(); ?>
/*
其他内容
*/
<?php get_footer(); ?>

这样就实现了首页分离

以上仅代表个人观点,如有不当之处,欢迎与我进行讨论
版权声明:除特殊说明,博客文章均为Mareep原创,依据CC BY-SA 4.0许可证进行授权,转载请附上出处链接及本声明。
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇