wordpress主题结构剖析之一

我本来是打算最近不更新的，但是由于Sakurairo主题更新后的一堆问题，没有办法解决，总是陷入内循环，导致服务器高使用率和高负载。而我和Jack两个人都没解决。

没办法，只能选择自己写主题，但是在此之前，由于之前没有写过WordPress主题，使得我决定在本章剖析一下WordPress的结构再谈开发主题的事情，顺便做一个笔记，免得自己，慢慢忘记了。

之后再二开一个主题吧，至于是啥主题，暂时保密。

WordPress的主题结构涉及到主题文件和目录的组织方式，

主要分为四个部分，分别是：主题根目录、核心文件、模板文件、子目录和文件，

首先是主题根目录:

主题根目录：这是主题文件的最高级别目录，通常以主题名称命名。wp-content/themes/your-theme/

在主题根目录中，除了核心文件（如style.css、index.php、functions.php）之外，还可以包含其他自定义文件和目录。

在某些情况下，一些主题还包含子主题或样式化框架（如Bootstrap等）（Bootstrap确实蛮方便的）

其次是核心文件：

index.php：通常会使用WordPress函数（如get_header()和get_footer()）调用其他相关模板文件。
functions.php：可以包含主题的自定义功能，如注册自定义菜单、添加自定义小工具区域、注册自定义文章类型等

style.css：除了元数据和自定义样式外，还可以包含其他CSS文件的导入和引用。

[precode]<?php
/**
* 主页模板
* 这是默认的模板文件，用于显示网站的主页内容。
* @package YourThemeName
*/

get_header(); // 调用页眉模板

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<?php get_template_part('template-parts/content', get_post_format()); ?>

<?php endwhile; ?>

<?php the_posts_navigation(); ?>

<?php else : ?>

<?php get_template_part('template-parts/content', 'none'); ?>

<?php endif; ?>

</main>
</div>

<?php
get_sidebar(); // 调用侧边栏模板
get_footer(); // 调用页脚模板[/precode]

这个是一个标准的index.php文件

分别使用了WordPress的模板函数get_header()、get_template_part()、the_post()、the_posts_navigation()、get_sidebar()和get_footer()

这些函数分别用于获取页眉模板、获取模板部件、获取文章信息、显示文章导航、获取侧边栏模板和获取页脚模板。

其次是functions.php 文件

[precode]

<?php
/**
* 主题功能和自定义代码
*
* 在这里可以添加主题的自定义功能、注册自定义菜单、添加小工具区域等。
*
* @package YourThemeName
*/

// 在主题初始化时执行的动作
function your_theme_name_setup() {
// 启用文章特色图像支持
add_theme_support('post-thumbnails');

// 注册自定义菜单
register_nav_menus(
array(
'primary' => '主导航菜单',
'footer' => '页脚菜单',
)
);
}
add_action('after_setup_theme', 'your_theme_name_setup');

// 注册侧边栏
function your_theme_name_widgets_init() {
register_sidebar(
array(
'name' => '侧边栏',
'id' => 'sidebar-1',
'description' => '这是一个侧边栏小工具区域。',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
)
);
}
add_action('widgets_init', 'your_theme_name_widgets_init');

// 添加自定义短代码
function your_theme_name_custom_shortcode() {
// 声明一个简单的短代码，用于显示当前年份
function custom_year_shortcode() {
$year = date('Y');
return $year;
}
add_shortcode('current_year', 'custom_year_shortcode');
}
add_action('init', 'your_theme_name_custom_shortcode');

[/precode]

在这些代码中，可以根据我的注释看到

引用了一些自定义功能：

在 your_theme_name_setup() 函数中，我们启用了文章特色图像支持，并注册了两个自定义菜单。你可以根据需要修改或添加更多的菜单区域。

在 your_theme_name_widgets_init()函数中，我们注册了一个侧边栏小工具区域，我们可以在这里添加其他小工具区域，并根据需要进行自定义。

最后，在your_theme_name_custom_shortcode() 函数中，添加了一个自定义短代码。该短代码用于显示当前的年份。

其次是我们的css样式文件，

[precode]/*
Theme Name: Your Theme Name // 主题名称
Theme URI: http://www.yourthemename.com // 主题官网链接
Description: This is a custom theme for demonstration purposes. // 主题描述
Author: Your Name // 作者姓名
Author URI: http://www.yourwebsite.com // 作者链接
Version: 1.0 // 主题版本号
License: GNU General Public License v2 or later // 主题许可证
License URI: http://www.gnu.org/licenses/gpl-2.0.html // 许可证链接
Tags: responsive-layout, custom-colors, custom-header, custom-background // 主题标签

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, code, em, img, small, strong, ol, ul, li, fieldset, form, label,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside,
canvas, details, figcaption, figure, footer, header, hgroup,
menu, nav, section, summary, time, mark, audio, video {
margin: 0; // 边距归0
padding: 0; // 内边距归0
border: 0; // 边框归0
outline: 0; // 轮廓线归0
font-size: 100%; // 字体大小重置为浏览器默认大小
vertical-align: baseline; // 垂直对齐归位
background: transparent; // 背景透明
}

body {
line-height: 1; // 行高设置为1
}

body {
font-family: Arial, sans-serif; // 全局字体
color: #333; // 全局颜色
}

h1, h2, h3, h4, h5, h6 {
margin-bottom: 20px; // 标题下边距
}

a {
color: #0066cc; // 链接颜色
text-decoration: none; // 链接无下划线
}

a:hover {
text-decoration: underline; // 鼠标悬停链接加下划线
}

.site-header {
background-color: #f5f5f5; // 页眉背景颜色
padding: 20px; // 页眉内边距
}

.site-title {
font-size: 24px; // 标题字体大小
font-weight: bold; // 标题粗体
}

.content-area {
width: 80%; // 主内容区域宽度
margin: 0 auto; // 水平居中
padding: 20px; // 主内容内边距
}

.sidebar {
width: 20%; // 侧边栏宽度
float: right; // 右浮动
background-color: #f5f5f5; // 侧边栏背景颜色
padding: 20px; // 侧边栏内边距
}

.widget {
margin-bottom: 20px; // 小工具下边距
}

.site-footer {
background-color: #f5f5f5; // 页脚背景颜色
padding: 20px; // 页脚内边距
text-align: center; // 居中对齐
}

.site-info {
font-size: 14px; // 页脚信息字体大小
}

[/precode]

这只是一个基本的 style.css 示例，包含了一些常见的样式规则和选择器。

在文件开头的注释部分，能根据自己的主题信息进行修改，包括主题名称、作者、版本等。

紧接着是一些常见的 CSS 重置规则，用于清除默认样式。

接下来是全局样式规则，定义了全局字体、颜色等属性。

然后是一些特定部分的样式规则，包括页眉、主要内容区域、侧边栏和页脚的样式。

未完待续。。。。。