wordpress主题结构剖析之一
分类：WordPress相关
浏览：147℃
发布于：1年前 (2023-09-12)
Good Luck To You!
我本来是打算最近不更新的，但是由于Sakurairo主题更新后的一堆问题，没有办法解决，总是陷入内循环，导致服务器高使用率和高负载。而我和Jack两个人都没解决。没办法，只能选择自己写主题，但是在此之前，由于之前没有写过WordPress主题，使得我决定在本章剖析一下WordPress的结构再谈开发主题的事情，顺便做一个笔记，免得自己，慢慢忘记了。 之后再二开一个主题吧，至于是啥主题，暂时保密。
get_header()和get_footer()）调用其他相关模板文件。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 // 主题标签
*/
/* Reset CSS */
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
}
/* Global Styles */
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; // 鼠标悬停链接加下划线
}
/* Header */
.site-header {
background-color: #f5f5f5; // 页眉背景颜色
padding: 20px; // 页眉内边距
}
.site-title {
font-size: 24px; // 标题字体大小
font-weight: bold; // 标题粗体
}
/* Main Content */
.content-area {
width: 80%; // 主内容区域宽度
margin: 0 auto; // 水平居中
padding: 20px; // 主内容内边距
}
/* Sidebar */
.sidebar {
width: 20%; // 侧边栏宽度
float: right; // 右浮动
background-color: #f5f5f5; // 侧边栏背景颜色
padding: 20px; // 侧边栏内边距
}
.widget {
margin-bottom: 20px; // 小工具下边距
}
/* Footer */
.site-footer {
background-color: #f5f5f5; // 页脚背景颜色
padding: 20px; // 页脚内边距
text-align: center; // 居中对齐
}
.site-info {
font-size: 14px; // 页脚信息字体大小
}
[/precode]
这只是一个基本的 style.css 示例，包含了一些常见的样式规则和选择器。
在文件开头的注释部分，能根据自己的主题信息进行修改，包括主题名称、作者、版本等。
紧接着是一些常见的 CSS 重置规则，用于清除默认样式。
接下来是全局样式规则，定义了全局字体、颜色等属性。
然后是一些特定部分的样式规则，包括页眉、主要内容区域、侧边栏和页脚的样式。
未完待续。。。。。
本文暂无评论 - 欢迎您