wordpress模板⽂件结构超详解
wordpress模板⽂件结构超详解
wordpress⽹站建设中，主题的制作是最为核⼼的环节。了解模板⽂件结构是模板制作的第⼀步，本⽂所讲的模板⽂件结构包括两部分，⼀是指以⽂件名为概念的⽂件结构，⼆是指⽂件内容的代码结构。
⼀、如何使模板⽂件起作⽤↑
wordpress模板⽂件夹放置于/wp-content/themes/下，开发者只需将⾃⼰的模板⽂件全部置于⼀个⽂件夹中，将⽂件夹置于该⽬录下，wordpress系统就会⾃动检测，发现模板⽂件可⽤时就会在后台“主题”中列出该模板。
我们创建⼀个⽂件夹，命名为mytheme，在mytheme中创建两个⽂件，分别是style.css,index.php,functions.php，⽤⽂本编辑器编辑这两个⽂件。在style.css⾸置⼊如下代码：
其实对主题的检测紧限于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）
html网页免费模板参数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' );
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模板的代码逻辑和函数编写上，⽽是在于天才的开发思路和⾼雅的审美观念上。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。