WordPress模板制作开发步骤教程
WordPress模板制作视频教程:https://www.xuewangzhan.net/jz/wpmoban/
第一课、CMS静态页面转WP模板
1、下载静态页面 模板制作前的静态页面.rar (349.89 KB, 下载次数: 160) 制作index.php和style.css
如果有多个css文件,并且没有style.css,可以任意对一个css文件进行重命名改成style.css。
2、添加模板版权信息
/*
Theme Name: 学做网站论坛CMS主题
Theme URI: https://www.xuewangzhan.net
Description: 这是一个CMS主题
Author:学做网站论坛
Author URI: https://www.xuewangzhan.net
Version: 1.0
Tags: white, cms, xuewangzhan*/
后台缩略图
在主题文件来下面放一个缩略图图片,缩略图的名字必须是:screenshot.png或者screenshot.jpg
3、修改index.php里面的路径问题
3.1、style.css的调用
Style.css路径调用:
<?php bloginfo( 'stylesheet_url' ); ?>
3.2、其他css文件和图片的路径调用
主题文件夹路径:
<?php bloginfo('template_directory'); ?>
4、修改style.css里面的路劲问题
第二课、header.php头部制作
1、首页分离头部和调用
头部调用标签:
<?php get_header();?>
2、顶部元信息的调用
2.1、标题、编码格式、wp_head()函数
<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' | '; } ?> <?php bloginfo('name'); ?></title>
<?php wp_head(); ?>
2.2、登陆功能
登陆代码:
<?php wp_loginout(); ?>
删除多余的js代码;
2.3、设为首页、加入收藏
设为首页:
<a href="#" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('<?php bloginfo('url'); ?>');" class="homepage">设为首页</a>
加入收藏:
<script type="text/javascript">
// Bookmark
function bookmark(title, url) {
if (document.all)
window.external.AddFavorite(url, title);
else if (window.sidebar)
window.sidebar.addPanel(title, url, "")
}
</script>
<a href="#" onClick="javascript:bookmark('<?php bloginfo('name'); ?>','<?php bloginfo('url'); ?>');" target="_blank" class="favicon">加为收藏</a>
3、自定义非li标签使用
页面调用:
<?php
$pages = get_pages();
foreach ($pages as $pagg) {
echo '<li><a class="nava" href="' . get_page_link($pagg->ID). '" title="' . sprintf( __( "View all posts in %s" ), $pagg->post_title ) . '" ' . '>' . $pagg->post_title.'</a></li>';
}
?>
分类目录调用:
<?php
$args=array(
'orderby' => 'name',
'include'=> '1,3,2',
'order' => 'ASC'
);
$categories=get_categories($args);
foreach($categories as $category) {
echo '<li><a href="' . get_category_link( $category->term_id ) . '" title="' . sprintf( __( "View all posts in %s" ), $category->name ) . '" ' . '>' . $category->name.'</a></li>';
}
?>
自定义添加导航链接
<a href=” <?php echo get_option('home'); ?>”>首页</a>
顶部空白如何处理
functions.php里面添加下面代码。
<?php
add_filter( 'show_admin_bar', '__return_false' );
?>
第三课、CMS幻灯片的制作
1、删除原网站的flash代码
2、下载幻灯片文件, 换灯片文件.rar (62.13 KB, 下载次数: 70)
并复制幻灯片代码flashing.php和js文件到模板文件下面
3、制作functions.php文件
添加缩略图代码
<?php
//支持外链缩略图
if ( function_exists('add_theme_support') )
add_theme_support('post-thumbnails');
function catch_first_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){ //Defines a default image
$random = mt_rand(1, 2);
echo get_bloginfo ( 'stylesheet_directory' );
echo '/images/random/'.$random.'.jpg';
}
return $first_img;
}
?>
4、添加css样式
/*======================首页幻灯片样式=============================*/
#flashimg { float:left; margin:0; padding:0; width:280px; }
#fade_focus { margin:0; padding:0; width:367px; height:263px; font-size:12px; }
#fade_focus img { border:0; }
#fade_focus ul { display:none; }
.focus_d1 { border:#666 1px solid; height:auto; overflow:hidden; position:relative; width:100%; }
.loading { background:#000; border:#666 1px solid; color:#FC0; font-weight:700; height:263px; padding:0; text-align:center; width:100%; }
.focus_d2 { height:240px; overflow:hidden; width:100%; }
.img_bottom { background:#000; bottom:0; color:#FFF; height:18px; left:0; overflow:hidden; padding:3px 0; position:absolute; width:100%; }
.img_bottom span { display:inline-block; height:18px; padding-left:5px; }
.button_list { bottom:2px; position:absolute; right:0; z-index:1000; }
.button_css, .button_hover { background:#666; color:#eee; cursor:pointer; display:block; float:left; margin-right:1px; padding:2px 5px; text-decoration:none; }
.button_hover { color:#fff; background-color:#0066ff; }
5、在index.php中调用代码
幻灯片调用代码:
<?php include(TEMPLATEPATH."/flashimg.php");?>
6、可以在flashimg.php文件中修改调用的分类和数量
第四课、头条新闻版块和热门文章制作
1、头条新闻代码使用
<?php if (have_posts()) : ?>
<?php query_posts('cat=6&showposts=7'); ?>
<?php while (have_posts()) : the_post(); ?>
<?php if ($postcnt == 0) : ?>
<?php else : ?>
<?php endif; $postcnt++; ?>
<?php endwhile; ?>
<?php endif; wp_reset_query();?>
调用标题:
<a href="<?php the_permalink() ?>"> <?php echo mb_strimwidth(get_the_title(), 0, 32, ''); ?></a>
调用标题:
<a href="<?php the_permalink() ?>"> <?php the_title(); ?></a>
调用摘要:
<?php echo mb_strimwidth(strip_tags(get_the_content()),0,70," ");?><a rel="more-link" href="<?php the_permalink()?>" title="<?php the_title(); ?>">[阅读详情]</a>
2、热门文章代码使用
<?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();?>
第五课、两个连续分类目录如何调用
1、正确使用循环调用代码(必须二个分类下各自有至少5片文章,才能正常显示
<?php $display_categories = array(1,4); foreach ($display_categories as $category) { ?>
<?php query_posts("showposts=6&cat=$category")?>
<?php while (have_posts()) : the_post(); ?>
<?php if ($catcnts == 0 || $catcnts == 6) : ?>
<?php else : ?>
<?php endif; $catcnts++; ?>
<?php endwhile;?>
<?php } wp_reset_query();?>
2、调用标题、摘要、缩略图
分类目录名字调用:
<a href="<?php echo get_category_link($category);?>"><?php single_cat_title(); ?></a>
文章标题:
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php echo mb_strimwidth(get_the_title(), 0, 40, ''); ?></a>
缩略图调用:
<?php include( TEMPLATEPATH . '/thumbnail.php' ); ?>
摘要调用:
<?php echo mb_strimwidth(strip_tags(get_the_content()),0,60," ");?><a rel="more-link" href="<?php the_permalink()?>" title="<?php the_title(); ?>">[阅读详情]</a>
3、调用某个子分类下文章
调用某个分类下的文章代码:
<?php $rand_posts = get_posts('numberposts=5&category=1');foreach($rand_posts as $post) : ?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach;?>
第六课、图片滚动效果制作
1、删除重复模块,插入循环代码
<?php if (have_posts()) : ?>
<?php query_posts('cat=3' . $mcatID. '&caller_get_posts=1&showposts=6'); ?>
<?php while (have_posts()) : the_post(); ?>
<?php endwhile;?>
<?php endif; wp_reset_query(); ?>
2、调用标题和图片
图片调用:
<?php include( TEMPLATEPATH . '/thumbnail.php' ); ?>
标题调用:
<a href="<?php the_permalink() ?>"> <?php echo mb_strimwidth(get_the_title(), 0, 16, ''); ?> </a>
第七课、首页特别下面两个分类目录调用
1、插入循环代码(
<?php $display_categories = array(9,10); foreach ($display_categories as $category) { ?>
<?php query_posts("showposts=6&cat=$category")?>
<?php if($category==9):?>
<div class="w367 fl h259 mr5">
<?php else : ?>
<div class="w364 fl h259">
<?php endif; ?>
<?php while (have_posts()) : the_post(); ?>
<?php if ($catcnts == 0 || $catcnts == 6|| $catcnts == 12|| $catcnts == 18) : ?>
<?php else : ?>
<?php endif; $catcnts++; ?>
<?php endwhile;?>
<?php } wp_reset_query();?>
2、判断语句代码
category==9要和array(9,10)中的第一个数字对应;
3、调用标题、摘要、缩略图
分类目录名字调用:
<a href="<?php echo get_category_link($category);?>"><?php single_cat_title(); ?></a>
文章标题:
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php echo mb_strimwidth(get_the_title(), 0, 40, ''); ?></a>
缩略图调用:
<?php include( TEMPLATEPATH . '/thumbnail.php' ); ?>
摘要调用:
<?php echo mb_strimwidth(strip_tags(get_the_content()),0,60," ");?><a rel="more-link" href="<?php the_permalink()?>" title="<?php the_title(); ?>">[阅读详情]</a>
4、调用某个分类下文章
调用某个分类下的文章代码
<?php $rand_posts = get_posts('numberposts=10&category=1');foreach($rand_posts as $post) : ?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach;?>
第八课、友情链接和底部模板制作
1、友情链接制作(需要安装友情链接插件 link-manager.zip (1.14 KB, 下载次数: 19) )
8.1、调用代码
<div id="friendlinks">
<p><span>友情链接:</span><?php get_links('-1', '<a>', '</a>', '', FALSE, 'id', FALSE, FALSE, -1, FALSE); ?> </p>
</div>
8.2、添加对应的css
/*======================首页友情链接=============================*/
#friendlinks {width:960px;padding:9px 0 0;clear:both;}
#friendlinks p{margin:0 10px;color:#003494;line-height:22px;text-align:left;overflow:hidden }
#friendlinks a{padding:0 10px 0 0;font-size:12px;font-family:Verdana,ËÎìå;}
#friendlinks .noborder{border-right:none;}
2、拆分底部、调用代码
<?php get_footer();?>
版权信息:
Copyright © 2012<a href=” <?php echo get_option('home'); ?>”> <?php bloginfo(’name’); ?></a>
第九课、内页制作
1、拆分头部和底部,删除友情链接部分
头部调用:
<?php get_header();?>
侧边栏调用:
<?php get_sidebar();?>
底部调用:
<?php get_footer();?>
2、面包屑导航制作
面包屑导航调用:
<?php wheatv_breadcrumbs(); ?>
在functions.php中添加:
function wheatv_breadcrumbs() {
$delimiter = ' > ';
$name = '首页'; //
if ( !is_home() ||!is_front_page() || is_paged() ) {
global $post;
$home = get_bloginfo('url');
echo '<a href="' . $home . '" class="gray">' . $name . '</a> ' . $delimiter . ' ';
if ( is_category() ) {
global $wp_query;
$cat_obj = $wp_query->get_queried_object();
$thisCat = $cat_obj->term_id;
$thisCat = get_category($thisCat);
$parentCat = get_category($thisCat->parent);
if ($thisCat->parent != 0) echo(get_category_parents($parentCat, TRUE, ' ' . $delimiter . ' '));
echo single_cat_title();
} elseif ( is_day() ) {
echo '<a href="' . get_year_link(get_the_time('Y')) . '" class="gray">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
echo '<a href="' . get_month_link(get_the_time('Y'),get_the_time('m')) . '" class="gray">' . get_the_time('F') . '</a> ' . $delimiter . ' ';
echo get_the_time('d');
} elseif ( is_month() ) {
echo '<a href="' . get_year_link(get_the_time('Y')) . '" class="gray">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
echo get_the_time('F');
} elseif ( is_year() ) {
echo get_the_time('Y');
} elseif ( is_single() ) {
$cat = get_the_category(); $cat = $cat[0];
echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
echo "正文";
} elseif ( is_page()||!$post->post_parent ) {
the_title();
} elseif ( is_page()||$post->post_parent ) {
$parent_id = $post->post_parent;
$breadcrumbs = array();
while ($parent_id) {
$page = get_page($parent_id);
$breadcrumbs[] = '<a href="http://www.wheatv.com/site/wp-admin/ . get_permalink($page->ID) . " class="gray">' . get_the_title($page->ID) . '</a>';
$parent_id = $page->post_parent;
}
$breadcrumbs = array_reverse($breadcrumbs);
foreach ($breadcrumbs as $crumb) echo $crumb . ' ' . $delimiter . ' ';
the_title();
} elseif ( is_search() ) {
echo get_search_query();
} elseif ( is_tag() ) {
echo single_tag_title();
} elseif ( is_author() ) {
global $author;
$userdata = get_userdata($author);
echo '由'.$userdata->display_name.'发表';
} elseif ( is_404() ) {
echo '404 错误';
}
if ( get_query_var('paged') ) {
if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ' (';
echo '第' . ' ' . get_query_var('paged').' 页';
if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ')';
}
}else{
echo $name;
}
}
3、内容调用
3.1、循环代码
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php endwhile; ?>
<?php endif; wp_reset_query();?>
3.2、日志元信息
发布日期:
<?php the_date_xml(); ?>
分类目录:
<?php the_category(', ') ?>
文章标签:
<?php the_tags('标签: ', ', ', ''); ?>
调用评论数:
<?php comments_number('暂无评论', '1条评论', '% 评论' );?>
浏览数标签:(用到插件wp-postviews wp-postviews.zip (22.1 KB, 下载次数: 14) )查看次数,调用代码:
<?php the_views();?>
3.3、标题、摘要、内容调用
文章标题:
<?php the_title_attribute(); ?>
摘要代码:
<?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 200,"……"); ?>
内容代码:
<?php the_content(); ?>
3.4、上一篇、下一篇
<div style="float:left"><?php previous_post_link('« %link'); ?></div>
<div style="float:right"><?php next_post_link('%link »'); ?></div>
4、评论模块制作
4.1、调用评论
<?php comments_template(); ?>
4.2、复制comments.php comments.php (4.52 KB, 下载次数: 51) 到主题文件夹下面
4.3、添加评论css样式
/* 评论 */
#comments{ width:100%; margin:10px 0px; padding:8px 0px 5px; text-indent:8px; background:#F3F3F3; border-bottom:1px solid #BBC5CC; }
.commentlist{ }
.commentlist p{ text-indent:0px;}
.commentlist a:link, .commentlist a:visited{ background:none; color:#454545;}
.commentlist a:hover{ background:none; color:#CC0000; text-decoration:underline;}
.commentlist li{ float:left; margin:5px 0px; width:96%; padding:15px 10px 5px 10px; background:#FFF; border:1px solid #BBC5CC;}
.commentlist li.alt{ background:#FFFAF4; border:1px solid #BBC5CC;}
.commentlist li .gravatar{ float:left; width:48px; margin:0px 8px 5px 0px; padding:1px 1px; text-align:center; border:1px solid #C7C7C7;}
.commentlist li .gravatar img{ margin:0px !important; padding:0px !important;}
.commentlist li .floor{ float:left; width:48px; margin-top:1px; padding:2px 0px 1px; text-align:center; border-top:1px solid #A7B6BE; background:F8F8F8; color:#999999;}
.commentlist li .authordata{ float:right; width:550px;}
.commentlist li .commentmetadata{ float:right; color:#999999;}
.commentlist li .commentcontent{ float:right; width:550px;}
#editcomment{ float:left; font-size:14px;}
#editcomment p{ padding:10px 10px 5px;}
#author, #email, #url{ margin-left:8px; width:40%; border:1px solid #CCCCCC; color:#906; font-weight:bold; font-size:14px; background:#FCFCFC; padding:5px 3px;}
#submit{ margin-bottom:15px;margin-top:5px;padding:2px;}
#respond{ float:left; width:100%; margin:10px 0px; padding:8px 0px 5px; text-indent:8px; background:#F3F3F3; border-bottom:1px solid #BBC5CC; }
#comment{ margin:-23px 0px 0px 72px; padding:8px 5px; width:80%; color:#333; font-size:14px; border:1px solid #CCCCCC;}
#but_submit{ margin-left:72px;}
#submit{ float:left; width:220px; height:32px; font-size:18px; font-weight:bold; letter-spacing:3px;}
#ctrl_enter{ float:left; margin:16px 0px 0px 5px; color:#066283; font-weight:bold;}
.submit_hover{ border:2px solid #FF6600;}
第十课、侧边栏制作
1、侧边栏拆分调用
<?php get_sidebar();?>
调用标签云:
<?php wp_tag_cloud('smallest=12&largest=12&number=30'); ?>
2、最新文章调用
<?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;?>
3、最新图文调用
循环代码:
<?php $rand_posts = get_posts('numberposts=4&category=1');foreach($rand_posts as $post) : ?>
<?php endforeach;?>
图片调用:
<?php include( TEMPLATEPATH . '/thumbnail.php' ); ?>
标题调用:
<a href="<?php the_permalink() ?>"> <?php echo mb_strimwidth(get_the_title(), 0, 16, ''); ?> </a>
4、热门文章
<?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();?>
第十一课、文章列表页面制作
1、拆分头部、侧边栏和底部
调用头部标签:
<?php get_header();?>
调用侧边栏标签:
<?php get_sidebar();?>
调用底部标签:
<?php get_footer();?>
2、补充图片完整路径
主题文件夹路径:
<?php bloginfo('template_directory'); ?>
3、面包屑导航调用
面包屑导航调用:
<?php wheatv_breadcrumbs(); ?>
4、调用列表内容
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php endwhile; ?>
<?php endif; wp_reset_query();?>
页面的标题:
<?php wp_title('');?>
发布日期:
<?php the_date_xml(); ?>
分类目录:
<?php the_category(', ') ?>
标题:
<a href="<?php the_permalink() ?>"> <?php echo mb_strimwidth(get_the_title(), 0, 16, ''); ?> </a>
5、分页代码调用
wp-page-numbers插件 wp-page-numbers.0.5.zip (15.53 KB, 下载次数: 15)
调用代码:
<?php if(function_exists('wp_page_numbers')) : wp_page_numbers(); endif; ?>
第十二课、图片列表页面制作
1、拆分头部、侧边栏和底部
调用头部标签:
<?php get_header();?>
调用底部标签:
<?php get_footer();?>
2、图片调用
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php endwhile; ?>
<?php endif; wp_reset_query();?>
缩略图代码:
<?php include( TEMPLATEPATH . '/thumbnail.php' ); ?>
标题:
<a href="<?php the_permalink() ?>"> <?php echo mb_strimwidth(get_the_title(), 0, 16, ''); ?> </a>
日期:
<?php the_date_xml(); ?>
3、分页代码调用
调用代码:
<?php if(function_exists('wp_page_numbers')) : wp_page_numbers(); endif; ?>
4、侧边栏子目录调用
<?php
$args=array(
'orderby' => 'name',
'child_of' => '1',
'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>';
}
?>
第十三课、搜索功能制作
1、复制archive.php为search.php
2、调用搜索代码
在header.php中添加搜索代码:
<form id="search" action="<?php bloginfo('url'); ?>/" target="_blank">
<input id="s" name="s" maxlength="30" style="vertical-align: middle; margin-bottom:12px;" type="text" value="<?php the_search_query(); ?>"/>
<input type="image" width="60" height="22" class="searchaction" onClick="if(document.forms['search'].searchinput.value=='- Search -')document.forms['search'].searchinput.value='';" alt="Search" src="<?php bloginfo('template_directory'); ?>/img/sbtn.gif" border="0" />
</form>