wordpress模板文件结构超详解

学习NO.1 · 发表于 2016-1-1 20:24:24

亲注册登录道勤网-可以查看更多帖子内容哦！（包涵精彩图片、文字详情等）请您及时注册登录-www.daoqin.net

您需要登录才可以下载或查看，没有账号？立即注册

x

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:道勤网www.daoqin.net
Author: 道勤网www.daoqin.net
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>
<?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模板的代码逻辑和函数编写上，而是在于天才的开发思路和高雅的审美观念上。

道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户，那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信：q792472177免费电话、后台提交工单这些方式联系道勤主机客服！如果您不是我们的客户也没问题，点击页面最右边的企业QQ在线咨询图标联系我们并购买后，我们为您免费进行无缝搬家服务，让您享受网站零访问延迟的迁移到道勤主机的服务！