// 最近更新时间:2015-06-02

事起缘由:想做一个文艺的程序员……

所以自己操刀,准备自写模板。幸好发现不是特别难。下面是我学习过程中的总结,以便他日翻查。

一. 一套完整的Wordpress模板应至少具有如下文件:

  • style.css
  • index.php // 主页模板
  • archive.php // Archive/Category模板
  • comments.php // 留言/ 回复模板
  • footer.php // Footer模板
  • header.php // Header模板
  • sidebar.php // 侧栏模板
  • page.php // 内容页(Page)模板
  • single.php // 内容页(Post)模板
  • searchform.php // 搜索表单模板
  • search.php // 搜索结果模板

具体到特定的某款模板,可能不止这些文件,而一般而言,这些文件是必备的。

二. 模板类型基本条件判断:

  • is_home() // 是否为主页
  • is_single() // 是否为内容页(Post)
  • is_page() // 是否为内容页(Page)
  • is_category() // 是否为Category/Archive页
  • is_tag() // 是否为Tag存档页
  • is_date() // 是否为指定日期存档
  • is_year() // 是否为指定月份存档页
  • is_month() // 是否为指定月份存档页
  • is_day() // 是否为指定日存档页(星期几)
  • is_time() // 是否为指定时间存档6页
  • is_archive() // 是否为存档页
  • is_search() // 是否为搜索结果页
  • is_404() // 是否为i“HTTP 404:Not Found”错误页
  • is_paged() // 主页Category/Archive页是否以多页显示

三. Header部分常用到的PHP函数:

<?php bloginfo(“name”); ?> // 博客名称(Title)

><?php bloginfo(‘description’); ?> // 网站描述

<?php bloginfo(“stylesheet_url”); ?> // CSS文件路径

<?php bloginfo(“pingback_url”); ?> // PingBakc Url

<?php bloginfo(“template_url”); ?> // 模板文件路径

<?php bloginfo(“version”); ?> // wordpress版本

<?php bloginfo(atom_url); ?> // Atom Url

<?php bloginfo(“ree2_url”); ?> // RSS 2.0 Url

<?php bloginfo(“url”); ?> // 博客Url

<?php wp_title(); ?> // 特定内容页(Post/Page)的标题

四. 模板常用的PHP函数命令:

<?php get_header(); ?> // 调用Header模板

<?php get_sidebar(); ?> // 调用Sidebar模板

<?php get_footer(); ?> // 调用Footer模板

<?php the_content(); ?> // 显示内容(Post/Page)

<?php if(have_post()):; ?> // 检查是否存在Post/Page

<?php while(have_post()): the_post; ?> // 如果存在Post/Page,则显示

<?php endwhile; ?> // While结束

<?php endif; ?> // If结束

<?php comments_popup_link(); ?> // 正文中的留言链接。如果使用comments_popup_script(),则留言会在新窗口中打开;反之,则在当前窗口打开;

<?php the_title(); ?> // 内容页(Post/Page)标题

<?php the_permalink() ?> // 内容页(Post/Page)Url

<?php the_category(” “) ?> // 特定内容页(Post/Page)所属的Category,括号内字符表示category列表字符之间的分割符

<?php the_author() ?> // 作者

<?php the_ID() ?> // 特定内容也(Post/Page) ID

<?php the_time(” “) ?> // 填入属性Y、M、D分别表示年份、月份、日期

<?php comments_template(); ?> // 调用留言/回复模板

<?php wp_list_pages(); ?> // 显示Page列表

<?php wp_list_categories(); ?> // 显示Category列表

<?php next_post_link(“%link”); ?> // 下一篇文章链接

<?php previous_post_link(“%link”); ?> // 上一篇文章链接

<?php wp_get_archives(); ?> // 显示内容存档

<?php include(TEMPLATEPATH.”/文件名”); ?> // 嵌入其他文件,可为定制的模板或其他类型文件

<?php wp_register(); ?> // 显示注册链接

<?php wp_loginout(); ?> // 显示登陆/注册链接

<?php echo get_num_queries(); ?> // 网页加载查询量

五. 具体构建实例:

(1). 搭建页面结构

在index.php中,在body元素内新建如下结构化标记元素,各元素都带有不同的id属性:

<div id="page">
    <div id="header"></div>
    <div id="content"></div>
    <div id="sidebar"></div>
    <div id="footer"></div>
</div>

(2). 构建header

<div id=”header”></div>元素中输入下列代码:

<!-- 显示网站标题 -->
<h1><a href=" <?php bloginfo('url'); ?> " title = "<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>
<!-- 显示网站描述 -->
<p><?php bloginfo('description'); ?></p>

(3)构建content

<div id=”content”></div>元素中,我们要循环显示博文,包括每个博文的标题、作者、发表日期以及其他相关信息。并且,可以分页显示博文(取决于WP后台的设置)。

<div id=”content”></div>元素中,输入以下代码:

<!-- 当栏目下有博文,则循环显示博文 -->
<?php if ( have_posts() ): while(have_posts()):the_post(); ?>
    <div class="post" id="post-<?php the_ID() ?>">
    <!-- 显示内容页链接和标题 -->
    <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
    <!-- 发表日期 -->
    <div class="post-date">
    <span class="post-month"><?php the_time("M"); ?>月</span>
    <span class="post-day"><?php the_time("D"); ?></span>
    </div>
    <!-- 作者信息 -->
    <span class="post-author"><?php _e("Author"); ?> : <?php the_author(","); ?></span>
    <!-- 博文所在目录 -->
    <span class="post-cat"><?php _e("Catgories"); ?> : <?php the_category(",") ?></span>
    <!-- 评论数 -->
    <span class="post-comments">
    <?php comments_popup_link("No Comments", "1 Comment", "% Comments"); ?>
    </span>
    <!-- 博文内容 -->
    <div class="content">
    <?php the_content("更多内容 ?"); ?>
    </div>
<?php endwhile; ?> 
<!-- 结束文章列表循环 -->
<!-- 若栏目下无博文 --> 
<?php else: ?>
    <div class="post">
        <h2><?php _e("Not Found"); ?></h2>
    </div>
<?php endif; ?>

<!-- 上/下一篇文章 -->
<div class="navigator">
    <span class="previous-entries"><?php next_posts_link("前一篇"); ?></span>
    <span class="next-entries"><?php previous_posts_link("后一篇"); ?></span>
</div>

其中,_e() 函数是一个包装函数,主要用于语言的转换。如果调用该函数并传递标准的WP术语,则返回你相应语言包中的译文,如"Author"和"Categories",在中文包中分别为"作者"和"类别"。

content效果图分别如下所示:

未发布文章时:

只发布一篇文章时:

发布两篇文章时:

(4)……

(3)构建sidebar

<div id="sidebar"></div>元素中构建sidebar内容。可以包含内容如:分类、页面、搜索、链接、日历等等导航及相关信息。在WP中,sidebar中的内容都已无序(ul)或ol(有序)列表形式输出。因此,都要在<div id="sidebar"></div>中输入以下标记:

<ul>
    <?php if(!function_exists("dynamic_sidebar") || !dynamic_sidebar()): ?>
        <!-- 搜索 -->
        <li id="search">
            <?php include(TEMPLATEPATH."/searchform.php"); ?>
        </li>
        <!-- 日历 -->
        <li id="calendar">
            <h2><?php _e("Calendar") ?></h2>
            <?php get_calendar(); ?>
        </li>
        <!-- 栏目导航 -->
        <?php wp_list_pages("title_li=<h2>页面</h2>"); ?>
            <li class="catnav">
                <h2><?php _e("Categories"); ?></h2>
                <ul>
                    <?php wp_list_cats("sort_column=name&name&optioncount=1&hierachical=0"); ?>
                </ul>
            </li>
            <!-- 文章导航 -->
            <li clas="archivenav">
                <h2><?php _e("Archives"); ?></h2>
                <ul>
                    <?php wp_get_archives("type=monthly"); ?>
                </ul>
            </li>
            <li class=”meta”>
                <h2><?php _e("Meta"); ?></h2>
                <ul>
                    <?php wp_register(); ?>
                    <li><?php wp_loginout(); ?></li>
                    <?php wp_meta(); ?>
                </ul>
            </li>
    <?php endif ?>
</ul>

再在searchform.php中写入搜索表单格式:

<form method="get" id="searchform" class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>" role="search">
    <input type="text" name="s" id="s" placeholder="Your Keywords" >
    <input type="submit"  value="search">
</form>

其中,

<?php if(!function_exists("dynamic_sidebar") || !dynamic_sidebar()): ?>
<?php endif ?>

这个if语句包含sidebar有什么意义呢?这是部件侧边栏的需要,即让sidebar适合Widget插件进行部件化。部件化侧边栏,除了在ul元素中放入这个if语句之外,还必须在该文件夹下建立一个functions.php文件,内容如下:

<?php
    if ( function_exists(’register_sidebar’) )
        register_sidebar(array(
        "before_widget" => "<li id=”%1$s” class=”widget %2$s”>",
        "after_widget" => "</li>",
        "before_title" => "<h2 class='sidebartitle'>",
        "after_title" => "</h2>",
    ));
?>

sidebar效果图如下:

此处输入图片的描述

(4)构建footer

footer中一般放一些版权信息和不太重要的链接。譬如放入一下内容:

<p>Copyright &copy; <?php bloginfo("name"); ?></p>

至此,核心index.php文件就算大功告成。

(5) 拆分index.php

在此文件夹下,新建header.php、sidebar.php和footer.php三个文件。把<div id="header"></div><div id="sidebar"></div><div id="footer"></div>三个元素及其内容分别剪切至这三个新文件中。
然后在index.php原来的位置处分别输入:

<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

(6) 基于index.php派生子模板

新建single.php、page.php、archive.php、search.php和category.php,并把这个拆分后的index.php文件内容全部复制至这些新文件中。这样,WP在显示页面内容时,就能调用相应的页面文件了。最后,要做的工作就是自定义这些子模版文件了。

最后,当然是完善style.css啦。无样式的页面被设计师看到了,估计会抓狂不已吐倒一片……

Here is the Demo(6.22KB)

Demo使用方式:直接安装在你的WP主题中,仪表盘–>外观–>主题–>添加–>上传主题–>选择文件–>现在安装。即可。

如果无法在仪表盘中安装,可以直接上传至网站文件的"/wp-content/themes"文件中,再重启仪表盘,即可看到主题中已经添加了“dzr”这个主题。

Good Luck !

本文作者:子匠_Zijor,转载请注明出处:http://www.dengzhr.com/others/backend/php/126