wordpress网站建设中,主题的制作是最为核心的环节。了解模板文件结构是模板制作的第一步,本文所讲的模板文件结构包括两部分,一是指以文件名为概念的文件结构,二是指文件内容的代码结构。

一、如何使模板文件起作用 ↑

wordpress模板文件夹放置于/wp-content/themes/下,开发者只需将自己的模板文件全部置于一个文件夹中,将文件夹置于该目录下,wordpress系统就会自动检测,发现模板文件可用时就会在后台“主题”中列出该模板。

我们创建一个文件夹,命名为mytheme,在mytheme中创建两个文件,分别是style.css,index.php,functions.php,用文本编辑器编辑这两个文件。在style.css首置入如下代码:

/*
Theme Name: utubon.com
Theme URI: https://www.slongw.net
Description:  聚焦WordPress建站及技术交流,分享优质WordPress主题和插件
Author: 盛龙科技
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.phpwordpress识别首页自动识别 
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模板的代码逻辑和函数编写上,而是在于天才的开发思路和高雅的审美观念上。

发表回复

后才能评论