wordpress主题模板制作教程(网站建设入门系列)

猫叔平时喜欢钻研技术， 比如掌握了 SEO技术之后，我就没有停止过，对网站建设，运维，安全，还有服务器的维护都有了一定级别的深造，相信比专科的他们差不到哪里去。 

还要wordpress 网站主题的开发，这一块也比较喜欢， 自己花猫大叔网站模板 被自己改了很多次。 有些地方感觉很完美，有些地方不是太理想。 总之，自己动手丰衣足食。

但是我不建议刚入门的朋友也学习自己搞，这样太浪费你的时间了。 有些东西还要外包比较好。 

 

Wp主题模板制作教程  制作出一个漂亮的主题

 

 

 

Wp百科网主题模板制作教程 1

1、wordpress模板结构分析 1

2、制作一个可以运行的wordpress主题，修改style.css 1

3、制作出主题结构，index.php，header.php，footer.php，sidebar.php 2

4、修改header.php，footer.php 2

5、制作sidebar.php 2

6、制作index.php， 3

7、制作single.php页面，加入评论 3

8、制作page.php，archive.php，404.php 4

9、制作小工具 4

10、细节问题处理 4

 

1、wordpress模板结构分析

索引页模版：index.php

顶部：header.php

文章页面模板：single.php

边栏模板：sidebar.php

底部：footer.php

页面模版：page.php

搜索结果：search.php

文章归档：archive.php

评论：comments.php

404 页面模版：404.php

主题支持函数：functions.php

样式表：style.css

 

2、制作一个可以运行的wordpress主题，修改style.css

制作一个最简单的主题，只需要两个文件，index.php和style.css

 

第一步，准备静态页面

第二步，制作index.php和style.css

第三步，给style.css添加版权信息

第四步：把主题上传到空间中wordpress安装路径，wp-content/themes/下面，这里主题的文件夹名字必须是英文

第五步，在wordpress后台启用主题

 

先给style.css添加版权信息

/*

Theme Name: wordpress theme 01   

Theme URI: http://www.wpbaike.com

Description: a simple bolg theme

Author: xixi 

Author URI: http://www.wpbaike.com

Version: 1.0 

Tags: white, blog, liweihui, blue

*/

 

Style.css路径调用：<?php bloginfo( ‘stylesheet_url’ ); ?>

主题缩略图名字：screenshot.png

 

3、制作出主题结构，index.php，header.php，footer.php，sidebar.php

把index.php拆分成header.php，footer.php和sidebar.phhp

<?php get_header();?>

<?php get_footer();?>

<?php get_sidebar();?>

 

4、修改header.php，footer.php

获取博客名字：<?php bloginfo(‘name’); ?>

获取博客描述：<?php bloginfo(‘description’); ?>

获取主页路径：<?php echo get_option(‘home’); ?>

获取主题存放路径：<?php bloginfo(‘template_directory’); ?>

<meta http-equiv=”Content-Type” content=”text/html; charset=<?php bloginfo( ‘charset’ ); ?>” />

<?php wp_head(); ?>

<title><?php if (is_home()||is_search()) { bloginfo(‘name’); } else { wp_title(”); print ” – “; bloginfo(‘name’); } ?> </title>

 

页面调用：

<?php wp_list_pages(‘sort_column=menu_order&title_li=&depth=2&include=’); ?>

分类目录调用:

<?php wp_list_categories(‘title_li=0&orderby=name&show_count=0&depth=2’); ?>

 

5、制作sidebar.php

最新文章：<?php wp_get_archives(‘type=postbypost&limit=20’); ?>

 

<?php $rand_posts = get_posts(‘numberposts=10&orderby=date’);foreach($rand_posts as $post) : ?>

    <li><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></li>

<?php endforeach;?>

 

日志标题太长超出，修改style.css，用到的代码：

text-overflow:ellipsis; white-space:nowrap; overflow:hidden;

随机文章：

<?php $rand_posts = get_posts(‘numberposts=10&orderby=rand’);foreach($rand_posts as $post) : ?>

    <li><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></li>

<?php endforeach;?>

 

热门文章：

<?php

$post_num = 10; // 设置调用条数

$args = array(

      ‘post_password’ => ”,

          ‘post_status’ => ‘publish’, // 只选公开的文章.

          ‘post__not_in’ => array($post->ID),//排除当前文章

          ‘caller_get_posts’ => 1, // 排除置頂文章.

          ‘orderby’ => ‘comment_count’, // 依評論數排序.

          ‘posts_per_page’ => $post_num

);

        $query_posts = new WP_Query();

        $query_posts->query($args);

        while( $query_posts->have_posts() ) { $query_posts->the_post(); ?>

         <li><a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>”>

<?php the_title(); ?></a></li>

<?php } wp_reset_query();?>

 

标签云：

<?php wp_tag_cloud(‘smallest=8&largest=36&’); ?>

文章日期归档：

<?php wp_get_archives( ‘type=monthly’ ); ?>

分类目录：

<?php wp_list_cats(‘sort_column=name&optioncount=1&hierarchical=0’); ?>

友情链接：

<?php wp_list_bookmarks(‘title_li=&categorize=0&orderby=rand&limit=24’); ?>

 

6、制作index.php，

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<?php endwhile; ?>

<?php else : ?>

<?php endif; ?>

 

标题：<a href=”<?php the_permalink() ?>”><?php the_title_attribute(); ?></a>

 

调用文章内容：

<?php the_content(“Read More…”); ?>

调用文章内容摘要：

<?php the_excerpt(“Read More…”); ?>

 

作者：<?php the_author_posts_link(); ?>

日期：<?php the_time(‘F d, Y’) ?>

<?php the_time(‘m-d’) ?>

<?php the_date_xml()?>

评论调用：<?php comments_number(‘No Comment’, ‘1 Comment’, ‘% Comments’ );?>

文章所属分类：标签：<?php the_category(‘, ‘) ?>

上一页，下一页调用：

<div style=”float:left”><?php previous_post_link(‘« %link’); ?></div>

<div style=”float:right”><?php next_post_link(‘%link »’); ?></div>

 

7、制作single.php页面，加入评论

在single.php中调用<?php endwhile; ?>和<?php else : ?>中间让入

<?php comments_template(); ?>

 

8、制作page.php，archive.php，404.php

Page.php和single.php一样

archive.php和index.php一样

9、制作小工具

添加functions.php，

<?php

if ( function_exists(‘register_sidebar’) )

    register_sidebar(array(

        ‘before_widget’ => ‘<div class=”sidebox”> ‘,

        ‘after_widget’ => ‘</div>’,

        ‘before_title’ => ‘<h2>’,

        ‘after_title’ => ‘</h2>’,

    ));

?>

 

 

在sidebar.php中模块最上面插入：

   <?php if ( !function_exists(‘dynamic_sidebar’)

        || !dynamic_sidebar() ) : ?>

Sidebar最下面，添加<?php endif; ?>

 

10、细节问题处理

 

上一页，下一页调用：

<?php previous_posts_link(‘<span class=”next”>«上一页 </span>’) ?><?php next_posts_link(‘<span class=”previous”>下一页» </span>’) ?>

 

头部修改：

<meta http-equiv=”Content-Type” content=”text/html; charset=<?php bloginfo( ‘charset’ ); ?>” />

<?php wp_head(); ?>

 

Title调用改成下面这句：

<title><?php if (is_home()||is_search()) { bloginfo(‘name’); } else { wp_title(”); print ” – “; bloginfo(‘name’); } ?> </title>

 

首页文章只显示摘要<?php the_excerpt(“Read More…”); ?>

 

这里需要用到中文工具箱插件

 

1、最新文章

对应函数：<?php get_recent_posts(); ?>

详细说明：

get_recent_posts($no_posts = 5, $before = ‘<li>+ ‘, $after = ‘</li>’, $show_pass_post = false, $skip_posts = 0)

$no_posts：显示文章数，缺省为5条；
$before：每条记录前显示的文字，缺省<li>
$after：每条记录后显示的文字，缺省</li>
$show_pass_post：是(true)/否(false)显示保护了的文章，缺省否(false)
$skip_posts：跳过多少篇文章，缺省为0；

2、最新留言

对应函数：<?php get_recent_comments(); ?>

详细说明：

get_recent_comments($no_comments = 5, $before = ‘<li> ‘, $after = ‘</li>’, $show_pass_post = false)

$no_comments：显示回响数，缺省为5条；
$before：每条记录前显示的文字，缺省<li>
$after：每条记录后显示的文字，缺省</li>
$show_pass_post：是(true)/否(false)显示保护了的文章，缺省否(false)

如果希望在最新留言里不显示自己的回复。在get_recentcomments() 这个函数里找到这一句

post_status = ‘publish’

在后面 加上

AND comment_author != ‘管理员的昵称’

就可以了。（注意：引号是半角的）

拓展函数：

仅显示留言，不包括引用的函数<?php get_recent_comments_only (); ?>
仅显示引用（但包括trackback和pingback）<?php get_recent_trackbacks(); ?>

3、评论最多的文章

对应函数：<?php get_mostcommented(); ?>

详细说明：

// Get Top Commented Posts

get_mostcommented($limit = 5)

提示可以使用这个函数来实现热门文章的功能，即评论最多的文章。

4、发表评论最多的朋友

对应函数：<?php get_commentmembersstats(); ?>

详细说明：

get_commentmembersstats($threshhold = 5)

把代码里面的blogmaster改成你自己的名字，可以滤掉你自己的名字。下面加粗的那一项。

// Get Comments’ Members Stats
// Treshhold = Number Of Posts User Must Have Before It Will Display His Name Out
// 5 = Default Treshhold; -1 = Disable Treshhold
function get_commentmembersstats($threshhold = 5) {
global $wpdb, $tablecomments;
$comments = $wpdb->get_results(”SELECT comment_author, comment_author_url, COUNT(comment_ID) AS ‘comment_total’ FROM $tablecomments WHERE comment_approved = ‘1′ AND (comment_author != ‘网页教学网’) AND (comment_author != ”)GROUP BY comment_author ORDER BY comment_total DESC”);
$no = 1;

5、随机文章

对应函数： <?php random_posts(); ?>

详细说明：

random_posts ($limit = 5, $length = 400, $before = ‘<li>’, $after = ‘</li>’, $show_pass_post = false, $show_excerpt_in_title = true)

$limit：显示文章数，缺省5篇；
$length：摘要长度，缺省400；
$before：每条记录前显示的文字，缺省<li>
$after：每条记录后显示的文字，缺省</li>
$show_pass_post：是(true)/否(false)显示保护了的文章，缺省否(false)
$show_excerpt_in_title：是(true)，摘要显示于文章链接的title；否(false)，直接显示于页面；缺省是(true)

6、显示摘要

这一功能不需要在主题上调用函数，但需要模板文件支持！

某些情况下需要输出摘要，比如搜索结果、档案，还有 rss 输出，这样可以节省流量资源。但是，如果你的文章是中文的话，官方 WordPress 输出的其实并不是摘要，它只是把文章里的 html 代码过滤掉了，但所有文字都还是原样输出了。

但需要注意的是，你的主题里面应该有archive.php这个模板文件，而且这个模板文件使用的是the_excerpt()来调用内容而不是the_content().如果没有archive.php这个模板文件的话,你可以自己建立一个。具体方法为：

创建一个新文件：archive.php
把你主题里 index.php 中所有东西复制到 archive.php
保存 archive.php
在 archive.php 文件，把 the_content 改成 the_excerpt.
再次保存 archive.php 文件就可以了！
如果有archive.php模板文件的话，但是输出的是全文，你可以把the_content()替换为the_excerpt()就可以了！