wordpress模板文件结构超详解
wordpress网站建设中，主题的制作是最为核心的环节。了解模板文件结构是模板制作的第一步，本文所讲的模板文件结构包括两部分，一是指以文件名为概念的文件结构，二是指文件内容的代码结构。
一、如何使模板文件起作用 ↑
wordpress模板文件夹放置于/wp-content/themes/下，开发者只需将自己的模板文件全部置于一个文件夹中，将文件夹置于该目录下，wordpress系统就会自动检测，发现模板文件可用时就会在后台“主题”中列出该模板。
我们创建一个文件夹，命名为mytheme，在mytheme中创建两个文件，分别是style.css,index.php,functions.php，用文本编辑器编辑这两个文件。在style.css首置入如下代码：
/*
Theme Name: utubon.com
Theme URI: http://www.phpstudio.info/
Description: PHP网站建设工作室
Author: PHP网站建设
Version: 1.0
License:
License URI:
Tags: 工作室
*/
保存即可。然后将mytheme文件夹放入到wordpress主题目录中，进入后台查看，是否有了一个新的主题。
其实wordpress对主题的检测紧限于style.css,index.php，有了这两个文件和上面的声明，即可在后台检测到新的主题。现在开始你可以在index.php中写网页结构，在style.css中写样式，在functions.php中添加新的函数和功能了。
你会问，其他的主题中，为什么会有这么多文件呢，如sidebar.php,page.php,single.php,category.php等。wordpress使用模板通过函数的调用，让模板之间形成完整的整体，例如在index.php中你会看到get_header()即调用文件名为header.php的模板文件， get_footer()亦然。get_template_part( 'loop', 'index' );则是调用模板loop-index.php。wordpress并非傻瓜的像include()函数一样包含这些文件，而是对文件的存在与否要进行判断，如果不存在该文件将用对应的相关文件代替，这需要你查看开发文档中该函数的具体解释。
二、一般情况下模板文件列表和对应的函数 ↑
我们查看所有的模板都会获悉该主题所拥有的模板文件，一般情况下，模板文件拥有下面的这些文件，他们分别对应了自己的调用函数，一并列出：
| 文件名 | 一般作用 | 对应的函数 | 备注（使用技巧） |
| style.css | 样式表 | <?php bloginfo( 'stylesheet_url' ); ?>调用地址 | |
| index.php | wordpress识别首页 | 自动识别 | |
| functions.php | 包含增函数和新功能 | 自动识别 | |
| header.php | 头部 | get_header() | |
| footer.php | 尾部 | get_footer() | |
| sidebar.php | 边侧栏 | get_sidebar('foot')（无参数则调用sidebar.php） | 参数foot指文件sidebar-foot.php类推 |
| loop.php content.php | 内容循环 | get_template_part( 'loop', 'index' )和sidebar一样 | 参数的意思是调用模板loop-index.php类推如果get_template_part( 'content','single' ); |
| 404.php， search.php， page.php， single.php | 分别是404页，搜索页，单独页面，文章内容页 | 自动识别，和index.php一样，使用上述函数，没有该文件的话用index.php | |
| archive.php， category.php， tag.php， author.php | 分别是归档页，分类页，标签页，作者页 | 同上，但如果只有archive.php或category.php没有其他页，其他页用archive.php代替或category.php代替 |
除了上面这些页面之外，当然还会有主题特殊的文件，如主题自身的图片，js代码screenshot.png是主题预览图片，自动检测并在后台显示。上面没有提到的文件不一定不存在，如loop-tag-cloud.php,你可以用get_template('loop','tag-cloud')来调用，这是一类上述衍生文件。其他特殊文件如果没有特定的说明或功能，也可用include()等php函数将其包含。上面的文件除了style.css,index.php都是可选文件，例如模板中没有很多文件。
三、文件代码结构：写一个最简单的模板 ↑
正如文章开头提到，最简单的模板就只有style.css和index.php这两个文件，接下来就用这个最简单的模板来讲解模板文件代码结构。如果你懂得html网页设计，并对wordpress函数有一些了解，制作自己的模板并不困难，完全可以仿照别人的模板，慢慢完成自己的模板。
这里强烈建议你采用标准的网页设计方法，放弃table布局，认真学习css，采用div+css布局。
请先自己设计出html代码（一个页面，首页），加入一些测试的文章、图片、特效等，然后按照本文的方法进行修改。然后将所有代码拷贝到index.php中，这时你甚至可以不用理会style.css。在index.php中，我给出的基本框架如下：
<html>
<head>
<title>wordpress</title>
<style type="text/css" media="screen">
html { margin-top: 28px !important; }
* html body { margin-top: 28px !important; }
</style>
</head>
<body>
<div id="wapper">
<div id="header"></div>
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
上面的只是最基本的框架，通过css样式控制页面的宽度、呈现颜色、表现形式等。
我们将头部定义到<div header>的地方，头部中既包含了网页的css、meta声明，也包含了网页顶部的一些元素，如导航条、logo、公告等。在头部中，我们需要修改一些内容：
1、引入style.css：<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
2、引入wordpress本身需要添加的代码：
<?php
if ( is_singular() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' );
wp_head();
?>
3、用下面的代码替换<title>的内容，以显示网页标题
<?php
global $page, $paged;
wp_title( '|', true, 'right' );
bloginfo( 'name' );
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) );
?>
以上是网站声明部分，这些内容作为wordpress应该拥有的内容，最好不要缺少，当然你也可以根据自己的需要和想法替换为自己想要的内容。例如在wp_title()后面添加echo '你想要添加的内容';从而增加你的网页标题的信息。
4、修改你的<div header>的内容，导航可以使用wordpress后台菜单用wp_nav_menu()函数来实现，要想使用该功能，还需要在functions.php中预先初始化主题，让主题支持后台菜单功能。或用分类列表代替用wp_list_categories()函数来实现，这些函数需要你慢慢学习他们的使用方法。
接下来是内容的部分，我们将文章在首页的呈现列表放在<div left>中，用下面的代码来实现文章列表的呈现。
<?php while(has_posts()) : the_post(); ?>
<div id="post">
<div id="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
<div id="post-content"><?php the_content(); ?></div>
</div>
<?php endwhile; ?>
以上是最最简单的文章循环了，将列出对应条数的最新文章标题和内容。作为开发者，你需要根据自己的想象和需要，结合js效果、css样式，实现自己最终想要的结果。
接下来是sidebar,我们将sidebar放在<div right>中，使用下面这段代码，实现在后台放置widget:
<?php if(is_active_sidebar('sidebar-widget-area-primary')): ?>
<div id="primary">
<?php dynamic_sidebar( 'sidebar-widget-area-primary' ); ?>
</div><!--//end of primary-->
<?php endif; // end primary widget area ?>
不过目前这还是无法实现的，我们需要在functions.php中定义一个widget，这样才能实现后台小工具的使用，并在这里表现出来。
网页footer尾部可以由你自由发挥，等你慢慢熟练了wordpress模板的写作之后，可以实现很多调用和特效，例如在底部放入友情链接等。
四、functions.php的初始化定义 ↑
虽然style.css和index.php就可以让主题工作，但这样的主题是没有任何功能的，在前文中你已经发觉这个问题。怎样让主题拥有一些功能呢，如小工具widget的使用，菜单的使用，特色图片的使用等等。你可以在网络上其他文章中发现这些功能如何激活，本文只是做一个最简单的解释，丰富的功能需要你自己慢慢学习。
add_action( 'after_setup_theme', 'twentyten_setup' );
if (!function_exists( 'twentyten_setup')):
function twentyten_setup() {
add_editor_style();
add_theme_support( 'post-formats', array( 'aside', 'gallery' ) );
add_theme_support( 'post-thumbnails' );
add_theme_support( 'automatic-feed-links' );
load_theme_textdomain( 'twentyten', TEMPLATEPATH . '/languages' );
$locale = get_locale();
$locale_file = TEMPLATEPATH . "/languages/$locale.php";
if ( is_readable( $locale_file ) )
require_once( $locale_file );
register_nav_menus( array(
'primary' => __( 'Primary Navigation', 'twentyten' ),
) );
add_custom_background();
if ( ! defined( 'HEADER_TEXTCOLOR' ) )
define( 'HEADER_TEXTCOLOR', '' );
if ( ! defined( 'HEADER_IMAGE' ) )
define( 'HEADER_IMAGE', '%s/images/headers/path.jpg' );
define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyten_header_image_width', 940 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyten_header_image_height', 198 ) );
set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true );
if ( ! defined( 'NO_HEADER_TEXT' ) )
define( 'NO_HEADER_TEXT', true );
}
endif;
if(function_exists('register_sidebar')){
register_sidebar(array(
'name'=>'上部边栏',
'id' => 'sidebar-widget-area-primary',
'description' => '',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h3><span>',
'after_title' => '</span></h3>',
));
register_sidebar(array(
'name'=>'下部边栏',
'id' => 'sidebar-widget-area-secondary',
'description' => '',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h3><span>',
'after_title' => '</span></h3>',
));
register_sidebar(array(
'name'=>'边栏右边',
'id' => 'sidebar-widget-area-right',
'description' => '一般放分类列表',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h3><span>',
'after_title' => '</span></h3>',
));
}
这段代码是我从tweentyten主题中抄袭和稍加修改过来的，你可以将这段代码拷贝到你的functions.php中，进入后台看看是否已经激活了不少功能。
接下来的工作就是要添加新的函数了，用新的函数来实现很多新的wordpress系统没有的功能。由于wordpress模板开发是一个巨大的工程，无法用一篇文章讲完，因此，本文只是稍加点讲，无法深入，你可以看其他文章，以获取新的信息。
五、构建完整的模板体系 ↑
通过上文的讲解加上你坚持不懈的学习，应该对wordpress模板的初浅知识有了较为深刻的体会。接下来你就将拥有一个庞大复杂但逻辑合理成系统体系的模板了。
我们利用之前制作好的index.php文件将其分割，将我所指的头部全部剪切到一个新的header.php文件中，置于mytheme下，在index.php被剪切的地方用<?php get_header(); ?>代替，将<div container>全部剪切到新的loop.php中用<?php get_template_part('loop','index'); ?>代替，将尾部全部剪切到footer.php中用<?php get_footer(); ?>代替。这样一来你就发现你的index.php只留下了三条php语句了，在运行你的博客试试，是否跟刚才的效果一模一样呢？再将loop.php中的<div right>剪切到sidebar.php中用<?php get_sidebar(); ?>代替。这下是不是觉得你的主题文件夹内就丰富了好多。
新建一个category.php，将index.php中的内容拷贝过来，修改<?php get_template_part('loop','index'); ?>为<?php get_template_part('loop','category'); ?>，新建一个loop-category.php并在里面编写分类页想要呈现的表现形式。
按照这个思路，很快你的模板文件就会有很多，而且随着你对模板文件之间调用关系的理解，很快可以自由编写文件了。
六、总结 ↑
编写wordpress模板是一个比较繁杂的过程，对于初学者是很难一下获得成功的，只有慢慢学习和敢于挑战才能获取成功。wordpress模板的关键主要体现在：
1、模板样式：模板的外观决定了模板的成败，一个好的模板首先体现在另读者很舒服的外观上，而作为程序员，往往被设计难倒；要向拥有令人眼前一亮的wordpress模板，学好设计和css是必不可少的网编基础。
2、模板功能：模板的功能是体现模板开发者水平的衡量标准，一个功能丰富的模板，能给用户一种权威的感觉，无论是个人站还是企业站，华丽的网站功能让用户觉得站长是用心做站的人。
3、模板的设计理念：开发者根据自己的目标设计符合自身需要的模板，不盲目追求，不刻意回避，而是以需求为目标，以用户体验为设计动力。
因此，其实开发wordpress到后期问题不是在wordpress模板的代码逻辑和函数编写上，而是在于天才的开发思路和高雅的审美观念上。
相关文章：
wordpress模板文件结构超详解
wordpress网站建设中，主题的制作是最为核心的环节。了解模板文件结构是模板制作的第一步，本文所讲的模板文件结构包括两部分，一是指以文件名为概念的文件结构，二是指文件内容的代码结构。 一、如何使模板文件起作用 ↑ wordpres…...
android studio下载安装汉化-Flutter安装
1、下载android studio官方地址：（这个网址可能直接打不开，需要VPN） https://developer.android.com/studio?hlzh-cn mac版本分为X86和arm版本，电脑显示芯片是Inter的就是x86的，显示m1和m2的就是arm的 …...
数据开放共享和平台整合优化取得实质性突破的智慧物流开源了
智慧物流视频监控平台是一款功能强大且简单易用的实时算法视频监控系统。它的愿景是最底层打通各大芯片厂商相互间的壁垒，省去繁琐重复的适配流程，实现芯片、算法、应用的全流程组合，从而大大减少企业级应用约95%的开发成本可通过边缘计算技术…...
如何设置 Nginx 连接超时并进行测试(Nginx优化)
🏡作者主页：点击！ Nginx-从零开始的服务器之旅专栏：点击！ 🐧Linux高级管理防护和群集专栏：点击！ ⏰️创作时间：2025年2月15日14点22分 在高并发场景下，如…...
springboot整合mybatis-plus(保姆教学) 及搭建项目
一、Spring整合MyBatis (1)将MyBatis的DataSource交给Spring IoC容器创建并管理，使用第三方数据库连接池(Druid，C3P0等)代替MyBatis内置的数据库连接池 (2)将MyBatis的SqlSessionFactory交给Spring IoC容器创建并管理，使用spring-mybatis整…...
知识管理成功：关键指标和策略，研究信息的投资回报率
信息过载会影响生产力。没有人工智能的帮助，信息过载会影响生产力。大量的可用信息，知识工作者不仅仅是超负荷工作；他们感到不知所措，他们倾向于浪费时间（和脑细胞）来应付他们被大量的数据抛向他们…...
【算法】链表
零：链表常用技巧 1：引入虚拟头结点 （1）便于处理边界情况 （2）方便我们对链表操作 2：两步尾插，头插 （1）尾插 tail指向最后一个节点，tail.next…...
集成测试总结文档
1. 集成测试的定义 集成测试（Integration Testing）是在单元测试之后，将多个独立的软件模块或组件组合在一起进行测试的过程，目的是验证这些模块之间的接口、数据传递、协作逻辑是否符合设计要求，并发现因集成引发的缺…...
关于Dest1ny:我的创作纪念日
Dest1ny 因为这是csdn任务，我就稍微“写”了一下！ 如果大家真的有什么想聊的或者想一起学习的，欢迎在评论区或者私信中与我讨论！ 2025想说的话 我就把我想说的写在前面！ 不用对未来焦虑，不要觉得自己走…...
Python爬虫-猫眼电影的影院数据
前言 本文是该专栏的第46篇，后面会持续分享python爬虫干货知识，记得关注。 本文笔者以猫眼电影为例子，获取猫眼的影院相关数据。 废话不多说，具体实现思路和详细逻辑，笔者将在正文结合完整代码进行详细介绍。接下来，跟着笔者直接往下看正文详细内容。（附带完整代码） …...
【计算机网络】传输层数据段格式
在计算机网络中，数据段（Segment） 是传输层协议（如 TCP 或 UDP）使用的数据单元。TCP 和 UDP 的数据段格式有所不同，以下是它们的详细说明： 1. TCP 数据段格式 TCP（传输控制协议&…...
nsc account 及user管理
从安全角度，推荐使用sign 模式进行nats account及用户管理 把权限放到account level 用户密码泄露可以通过快速更换用户可以设置过期日期，进行安全轮换 此外通过nsc 管理用户和权限，可以统一实现全局管控，包括subject管控&#…...
晶闸管主要参数分析与损耗计算
1. 主要参数 断态正向可重复峰值电压 ：是晶闸管在不损坏的情况下能够承受的正向最大阻断电压。断态正向不可重复峰值电压 ：是晶闸管只有一次可以超过的正向最大阻断电压，一旦晶闸管超过此值就会损坏，一般情况下 反向可重复峰值电压 ：是指晶闸管在不损坏的情况下能够承受的…...
.net6 mvc 获取网站(服务器端)的IP地址和端口号
注意：是网站的，服务端的 IP地址， 不是当前用户电脑的、本地的IP地址 两个图： 分析： var AbsolutePath HttpContext.Request.Url.AbsolutePath;//"/Meeting/GetLastMeetingOL"var AbsoluteUri HttpContext.…...
坐井说天阔---DeepSeek-R1
前言 DeepSeek-R1这么火，虽然网上很多介绍和解读，但听人家的总不如自己去看看原论文。于是花了大概一周的时间，下班后有进入了研究生的状态---读论文。 DeepSeek这次的目标是探索在没有任何监督数据的情况下训练具有推理能力的大模型&#…...
数据结构与算法——快速排序
快速排序 一、核心原理：分治策略 1、选一个基准元素， 2、两个指针往中间遍历，比基准值小的移到一边，比基准值大的移到另一边， 一轮遍历后，指针相交位置就是基准值应该放置的位置，同时数组也…...
Node.js技术原理分析系列——Node.js调试能力分析
本文由体验技术团队屈金雄原创。 Node.js 是一个开源的、跨平台的 JavaScript 运行时环境，它允许开发者在服务器端运行 JavaScript 代码。Node.js 是基于 Chrome V8引擎构建的，专为高性能、高并发的网络应用而设计，广泛应用于构建服务器端应…...
在Mac arm架构终端中运行 corepack enable yarn 命令，安装yarn
文章目录 1. 什么是 Corepack？2. 运行 corepack enable yarn 的作用3. 如何运行 corepack enable yarn4. 可能遇到的问题及解决方法问题 1：corepack 命令未找到问题 2：Yarn 未正确安装问题 3：权限问题 5. 验证 Yarn 是否启用成功6…...
蓝桥杯试题：计数问题
一、题目描述 试计算在区间 1 到 n的所有整数中，数字 x（0≤x≤9）x（0≤x≤9） 共出现了多少次？ 例如，在 1 到 11 中，即在 1、2、3、4、5、6、7、8、9、10、11 中，数字 1 …...
数学建模与MATLAB实现：数据拟合全解析
引言 数据拟合是数学建模与实验分析中的核心任务，旨在通过数学模型逼近实际观测数据，揭示变量间的潜在规律。本文基于最小二乘法的理论框架，结合MATLAB代码实战，系统讲解线性拟合、非线性拟合的实现方法，并通过电阻温…...
大数据学习栈记——Neo4j的安装与使用
本文介绍图数据库Neofj的安装与使用，操作系统：Ubuntu24.04，Neofj版本：2025.04.0。 Apt安装 Neofj可以进行官网安装：Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...
SkyWalking 10.2.0 SWCK 配置过程
SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外，K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案，全安装在K8S群集中。 具体可参…...
ubuntu搭建nfs服务centos挂载访问
在Ubuntu上设置NFS服务器 在Ubuntu上，你可以使用apt包管理器来安装NFS服务器。打开终端并运行： sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享，例如/shared： sudo mkdir /shared sud…...
centos 7 部署awstats 网站访问检测
一、基础环境准备（两种安装方式都要做） bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats࿰…...
vscode（仍待补充）
写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh？ debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...
数据链路层的主要功能是什么
数据链路层（OSI模型第2层）的核心功能是在相邻网络节点（如交换机、主机）间提供可靠的数据帧传输服务，主要职责包括： 🔑 核心功能详解： 帧封装与解封装 封装： 将网络层下发…...
c#开发AI模型对话
AI模型 前面已经介绍了一般AI模型本地部署，直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型，但是目前国内可能使用不多，至少实践例子很少看见。开发训练模型就不介绍了&am…...
)
Angular微前端架构：Module Federation + ngx-build-plus (Webpack)
以下是一个完整的 Angular 微前端示例，其中使用的是 Module Federation 和 npx-build-plus 实现了主应用（Shell）与子应用（Remote）的集成。 🛠️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...
#Uniapp篇：chrome调试unapp适配
chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器：Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...
处理vxe-table 表尾数据是单独一个接口，表格tableData数据更新后，需要点击两下，表尾才是正确的
修改bug思路： 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑：async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...