零基础建站培训介绍

当前位置:

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('&laquo; %link'); ?></div>
<div style="float:right"><?php next_post_link('%link &raquo;'); ?></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:750px;}
.commentlist li .commentmetadata{ float:right; color:#999999;}
.commentlist li .commentcontent{ float:right; width:750px;}
#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>

上一课: 下一课:

发表评论

电子邮件地址不会被公开。 必填项已用*标注