WP主题制作

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 (3)
6、制作index.php， (4)
7、制作single.php页面，加入评论 (5)
8、制作page.php，archive.php，404.php (5)
9、制作小工具 (5)
10、细节问题处理 (5)
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:
Description: a simple bolg theme
Author: xixi
Author URI:
V ersion: 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
新建一个index.php文件，header.php，footer.php，
这步需要用到的标签：
获取博客名字：<?php bloginfo('name'); ?>
获取博客描述：<?php bloginfo('description'); ?>
获取主页路径：<?php echo get_option('home'); ?>
获取主题存放路径：<?php bloginfo('template_directory'); ?>
其他外部文件调用方法：<?php include (TEMPLA TEPA TH . '/ad/ad2.htm'); ?>
<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>
页面调用：修改include=后面的数值如果不想显示某页面则改为exclude=不想显示的ID
<?php wp_list_pages('sort_column=menu_order&title_li=&depth=2&include='); ?>
分类目录调用:如果不想显示某分类则改为exclude=不想显示的ID
<?php wp_list_categories('title_li=0&orderby=name&show_count=0&depth=2&include='); ?>
产品分类目录代码和新闻分类代码的调用：修改child_of后面的数值
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=1&hide_empty=0&child _of=10');?>
分类目录标题调用：
<ul><?php wp_list_categories('&title_li=&include=20'); ?></ul>
分类目录里面的默认参数
<?php wp_list_categories(‘参数‘); ?>
分类目录里面的默认参数设置为：
$defaults = array(
‘show_option_all‘ => ”, 无链接的分类
‘orderby‘ => ‘name‘, 按照分类名排序
‘order‘ => ‘ASC‘, 升序
‘show_last_update‘ => 0, 不显示分类中日志的最新时间戳
‘style‘ => ‘list‘, 用列表显示分类
‘show_count‘ => 0, 0, 不显示分类下的日志数
‘hide_empty‘ => 1, Displays only Categories with posts
‘use_desc_for_title‘ => 1, 显示分类链接中title 标签的分类描述
‘child_of‘ => 0, 子分类无限制
‘feed‘ => ”, 无feed
‘feed_image‘ => ”, 无feed 图片显示
‘exclude‘ => ”, 不在分类列表中显示该分类
‘hierarchical‘ => true, 分层显示父/子分类
‘title_li‘ => __(‘Categories‘), 在列表前作为标题显示分类
‘echo‘ => 1 显示分类
);
5、制作sidebar.php
最新文章：<?php wp_get_archives('type=postbypost&limit=20'); ?> 其中limit=显示的篇数
日志标题太长超出，修改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 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，
产品缩略图调用代码cat是产品的分类showposts是显示的图片数量
<?php if (have_posts()) : ?>
<?php query_posts('cat=3'.$mcatID. '&caller_get_posts=1&showposts=6'); ?>
<?php while (have_posts()) : the_post(); ?>
<li><?php if(function_exists ('wp_thumbnails_for_homepage'))
{wp_thumbnails_for_homepage();} ?>
<br/><p><a href="<？php the_permalink()?>" ><?php the_title();?></a></p>
</li>
<?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 comments_number('No Comment', '1 Comment', '% Comments' );?> 文章所属分类：标签：<?php the_category(', ') ?>
上一页，下一页调用：
<div style="float:left"><?php previous_post_link('&laquo; %link'); ?></div>
<div style="float:right"><?php next_post_link('%link &raquo;'); ?></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、细节问题处理
分页的函数：加到functions.php中
//分页
function pagination($query_string){
global $posts_per_page, $paged;
$my_query = new WP_Query($query_string ."&posts_per_page=-1");
$total_posts = $my_query->post_count;
if(empty($paged))$paged = 1;
$prev = $paged - 1;
$next = $paged + 1;
$range = 4; // only edit this if you want to show more page-links
$showitems = ($range * 2)+1;
$pages = ceil($total_posts/$posts_per_page);
if(1 != $pages){
echo "<div class='pagination'>";
echo ($paged > 2 && $paged+$range+1 > $pages && $showitems < $pages)? "<a href='".get_pagenum_link(1)."'>最前</a>":"";
echo ($paged > 1 && $showitems < $pages)? "<a href='".get_pagenum_link($prev)."'>上一页</a>":"";
for ($i=1; $i <= $pages; $i++){
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )){
echo ($paged == $i)? "<span class='current'>".$i."</span>":"<a href='".get_pagenum_link($i)."' class='inactive' >".$i."</a>";
}
}
echo ($paged < $pages && $showitems < $pages) ? "<a href='".get_pagenum_link($next)."'>下一页</a>" :"";
echo ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) ? "<a href='".get_pagenum_link($pages)."'>最后</a>":"";
echo "</div>\n";
}
}
分页的CSS样式；
/*分页的样式*/
.pagination{ margin:0 10px 10px 15px;line-height:23px;text-align:center;}
.pagination span, .pagination a{font-size:12px;margin: 2px 6px 2px 0;background:#fff;border:1px solid #ccc;color:#787878;padding:2px 5px 2px 5px;text-decoration:none;}
.pagination a:hover{background: #8cb900;border:1px solid #436206;color:#fff;font-size:12px;padding:2px 5px 2px 5px;}
.pagination .current{background: #8cb900;border:1px solid #436206;color:#fff;font-size:12px;padding:2px 5px 2px 5px;}
分页的调用：
<?php pagination($query_string); ?>
分类目录不按<li>标签显示
<?php
$args=array(
'orderby' => 'name',
'order' => 'ASC'
);
$categories=get_categories($args);
foreach($categories as $category) {
echo '<a href="' . get_category_link( $category->term_id ) . '" title="' . sprintf( __( "View all posts in %s" ), $category->name ) . '" ' . '>' . $category->name.'</a>';
}
?>
调用同一类别下的文章：
<?php if(have_posts()):?>
<?php query_posts('cat=1 &showposts=20');?>
<?php while(have_posts()):the_post();?>
<ul>
<li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute();?>"><?php the_title();?></a></li>
</ul>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
文本内容居中的css代码：text-align:center。