零基础学做网站培训介绍

当前位置:

wordpress主题制作步骤方法

本课程视频是VIP会员课程,学习请进入VIP学习区

wordpress主题制作步骤方法

1、wordpress主题分析

1、首页模板-----index.php
2、产品页面模板-----category-id.php
3、文章列表页模板------archive.php
4、single内容页模板-------single.php
5、page页面模板-------page.php

2、静态页面转化成WP模板和头部制作

1、WP模板必需的二个文件:style.css index.php

1-1、style.css添加Wordpress模板版权信息:


/*
Theme Name: 学做网站论坛
Theme URI: https://www.xuewangzhan.net
Description:学做网站论坛 公司企业主题
Author: 学做网站论坛
Author URI: https://www.xuewangzhan.net
Version: 1.0
Tags: 企业主题
*/

如果后台乱码,要修改,css 的页面属性,如果网页出现乱码,要修改index.php的页面属性。修改——页面属性——编码。

后台缩略图
在主题文件来下面放一个缩略图图片,缩略图的名字必须是:screenshot.png或者screenshot.jpg

1-2、制作index.php

1-2-1、修改css文件路径
Style.css路径调用:


<?php bloginfo( 'stylesheet_url' ); ?>

1-2-2、修改index.php中的图片的所有相对路径为WP从不路径. 获取主题存放路径:


<?php bloginfo('template_directory'); ?>

1-2-3、分离头部,改用WP调用,调用顶部标签:
<?php get_header();?>

2-1、元信息调用

网站标题:


<title><?php if (is_home()||is_search()) { bloginfo('name'); } else { wp_title(''); print " - "; bloginfo('name'); } ?> </title>

HOOK函数:


<?php wp_head(); ?>

2-2、导航菜单制作

菜单选项的生成:
在函数文件functions.php文件中添加以下代码;


//添加多个菜单功能
if ( function_exists('register_nav_menus')) {register_nav_menus(array('topmenu' => ' 顶部菜单'));}
if ( function_exists('register_nav_menus')) {register_nav_menus(array('footmenu' =>'底部菜单'));}

顶部菜单的调用:


<?php wp_nav_menu( array( 'theme_location' =>'topmenu','container' => '','menu_class' => 'navigation','menu_id' => "nav_sgBhgn",'depth' => 2, ) ); ?>

顶部空白如何处理


functions.php里面添加下面代码。
add_filter( 'show_admin_bar', '__return_false' );

3、侧边栏和底部模板制作

1、分离侧边栏
通过WP标签调用回来,调用侧边栏标签:


<?php get_sidebar();?>

2、循环代码:调用特定分类下的文章:直接复制到要显示分类的地方。cat=1为id=1下面的文章,showposts=5为显示5片文章。


<?php if (have_posts()) : ?>
<?php query_posts('cat=1' . $mcatID. '&caller_get_posts=1&showposts=5'); ?>
<?php while (have_posts()) : the_post(); ?>

<?php endwhile;?>
<?php endif; wp_reset_query(); ?>

3、缩略图调用
3-1、将以下代码放入functions.php,用于显示缩略图


//缩略图
function get_first_image() {
global $post;
$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
$first_img = bloginfo('template_url') . "/images/default.jpg";
};
return $first_img;
}

3-2、在images文件夹下,设置一个默认的缩略图:default.jpg

3-3、缩略图的调用


<img src="<?php echo get_first_image(); ?>" alt="<?php the_title(); ?>" />

4、文章标题:(可以控制字数)


<a href="<?php the_permalink() ?>"> <?php echo mb_strimwidth(get_the_title(), 0, 32, ''); ?></a>

标题:


<?php the_title(); ?>

文章简介:


<?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 200,"……"); ?>

5、底部制作

分离底部并通过WP标签调用回来,调用底部标签:


<?php get_footer();?>

底部菜单的调用:


<?php wp_nav_menu( array( 'theme_location' =>'footmenu','container' => '','menu_class' => 'navigation','menu_id' => "nav_sgBhgn",'depth' => 2, ) ); ?>

版权信息:


Copyright © 2012<a href=" <?php echo get_option('home'); ?>"> <?php bloginfo('name'); ?></a>

4、网站首页模板制作

4-1、幻灯片替换
1、将以下代码放入functions.php,用于显示缩略图


//缩略图
function get_first_image() {
global $post;
$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
$first_img = bloginfo('template_url') . "/images/default.jpg";
};
return $first_img;
}

2、在要显示换灯片的位置放入以下的代码


<!--图片轮播区开始-->
<div id="com_box" class="com_box ftl">

<?php
$sticky = get_option('sticky_posts');
rsort( $sticky );//对数组逆向排序,即大ID在前
$sticky = array_slice( $sticky, 0, 5);//输出置顶文章数,请修改5,0不要动,如果需要全部置顶文章输出,可以把这句注释掉
query_posts( array( 'post__in' => $sticky, 'caller_get_posts' => 1 ) );
if (have_posts()) :while (have_posts()) : the_post();
?>

<div class="img dpn"><a href="<?php the_permalink(); ?>" target="_blank" title="<?php the_title(); ?>"><img class="img_directly_load" src="<?php echo get_first_image(); ?>" alt="<?php the_title(); ?>" /></a></div>
<?php endwhile; endif; ?>

<ul id="com_txt" class="title">
<?php
$sticky = get_option('sticky_posts');
rsort( $sticky );//对数组逆向排序,即大ID在前
$sticky = array_slice( $sticky, 0, 5);//输出置顶文章数,请修改5,0不要动,如果需要全部置顶文章输出,可以把这句注释掉
query_posts( array( 'post__in' => $sticky, 'caller_get_posts' => 1 ) );
if (have_posts()) :while (have_posts()) : the_post();
?>
<li></li>
<?php endwhile; endif; ?>
</ul>

</div>
<script type="text/javascript">

function com_change()
{
var self_now = 0;
var self_speed = 5000;
var self_auto_change = null;
var self_max = $('#com_box div.img').size();
function self_change(i)
{
$('#com_box div.img').hide();
$('#com_txt_bg li').removeClass('on');
$('#com_txt li').removeClass('on');
$('#com_box div.img:eq(' + i + ')').show();
$('#com_txt_bg li:eq(' + i + ')').addClass('on');
$('#com_txt li:eq(' + i + ')').addClass('on');
}
function self_interval()
{
return setInterval(function(){
self_now++;
if (self_now >= self_max)
{
self_now = 0;
}
self_change(self_now);
}, self_speed);
}
$('#com_box div:first').show();
$('#com_txt_bg li:first').addClass('on');
$('#com_txt li:first').addClass('on');
$('#com_txt li').each(function(i)
{
$(this).mouseover(function(){
self_now = i;
clearInterval(self_auto_change);
self_change(i);
}).mouseout(function(){
self_auto_change = self_interval();
});
});
$(function(){
$('#com_loding').hide();
self_auto_change = self_interval();
});
}
com_change();
</script>
<!--图片轮播区结束-->

3、在CSS中放以下的CSS样式:【通过修改width和height的值可以修改换灯片的尺寸】


/*换灯片*/
.com_box {width:627px;height:279px;overflow:hidden;position:relative;}
.com_box img{width:100%;height:100%;}
.com_box ul.title li.on {background:#3598db;}
.com_box ul.title {position:absolute;bottom:10px;right:5px;z-index:9;}
.com_box ul.title li {counter-increment:listxh;display:inline-block;border-radius:12px;background: #000;}
.com_box ul.title li:before{content:counter(listxh);display:inline-block;text-align:center;color:#fff;width:24px;height:24px;line-height:24px;font-weight:600;font-size:11px;font-family: "微软雅黑";}

4、下载JS文件: jquery.js (243.32 KB, 下载次数: 369)
将下载的JS文件放到主题的images文件夹里,在header.php文件的</head>上面放上以下的js代码:


<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/images/jquery.js"></script>

5、在网站后台设置置顶文章,即会被调用出来。

4-2、图片+文章标题+文章简介 调用

第一步:删其余相同的div,留下一个div,在标题和图片的上下,调用循环代码:(通过修改('cat=3' 来控制显示哪个分类下的文章)


<?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(); ?>

如果调用所有最新文章的图片:用以下循环:


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

<?php endwhile;?>
<?php endif; ?>

图片调用:(调用文章中的第一张图片)


<img src="<?php echo get_first_image(); ?>" alt="<?php the_title(); ?>" />

标题调用:


<a href="<?php the_permalink() ?>"> <?php echo mb_strimwidth(get_the_title(), 0, 32, ''); ?></a>

文章简介调用:


<?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 200,"……"); ?>

5、产品展示页面模板制作

产品展示页面制作(category-id.php也是一个分类),调用不同的页面是page-id.php

1、制作category-id.php页面,就是产品展示页面。用已有的产品展示页面做。定制某个分类的模板,id为数字
2、调用header、sidebar、footer文件

调用头部标签:


<?php get_header();?>

调用底部标签:


<?php get_footer();?>

3、分离列表页侧边栏 取名为sidebar2.php

3-1、调用侧边栏标签:


<?php include( TEMPLATEPATH . '/sidebar2.php' ); ?>

3-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();?>

3-3:调用最新发布的10篇文章


<?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;?>

4、图片方式循环调用
调用所有最新文章的图片:用以下循环:


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

<?php endwhile;?>
<?php endif; ?>

标题调用:


<a href="<?php the_permalink() ?>"> <?php echo mb_strimwidth(get_the_title(), 0, 32, ''); ?></a>

图片调用:


<img src="<?php echo get_first_image(); ?>" alt="<?php the_title(); ?>" />

页面名字调用:


<?php wp_title('');?>

5、分页导航
第一步:将以下代码放在functions.php中。


//分页
function kriesi_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 = 2; // 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)."' rel='external nofollow'>特别前</a>":"";
echo ($paged > 1 && $showitems < $pages)? "<a href='".get_pagenum_link($prev)."' rel='external nofollow'>上一页</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' rel='external nofollow'>".$i."</a>";
}
}
echo ($paged < $pages && $showitems < $pages) ? "<a href='".get_pagenum_link($next)."' rel='external nofollow'>下一页</a>" :"";
echo ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) ? "<a href='".get_pagenum_link($pages)."' rel='external nofollow'>最后</a>":"";
echo "</div>\n";
}
}

第二步:在分页代码显示的地方放上以下调用代码。


<?php kriesi_pagination($query_string); ?>

第三步:将以下CSS样式放到style.css中。


.pagination{height:40px;text-align:center;margin-top: 20px;}
.pagination .current, .pagination a{padding:10px 15px;border:1px solid #568abe;border-radius: 3px;margin-right:10px;font-size:14px;text-decoration:none;}
.pagination a:hover,.pagination .current{color:#568abe;background:#FFF;}
.pagination a{background:#568abe;color:#FFF;}

6、面包屑导航制作:如首页》分类》文章名
第一步:在主题文件夹中新建functions.php并且在functions.php里面添加下面的函数


//面包屑
function wheatv_breadcrumbs() {
$delimiter = ' > ';
$name = '首页';

if ( !is_home() ||!is_front_page() || is_paged() ) {

global $post;
$home = home_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 the_title();

} 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.frontopen.com/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;
}
}

第二步:将以下标签放在显示面包屑导航的位置。


<?php wheatv_breadcrumbs(); ?>

6、文章列表页面模板制作

1、制作archive.php页面
2、调用header、sidebar、footer文件

调用头部标签:


<?php get_header();?>

调用底部标签:


<?php get_footer();?>

调用侧边栏标签:


<?php include( TEMPLATEPATH . '/sidebar2.php' ); ?>

3、循环调用文章


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

<?php endwhile; ?>
<?php endif; ?>

标题调用:


<a href="<?php the_permalink() ?>"> <?php echo mb_strimwidth(get_the_title(), 0, 32, ''); ?></a>

日期调用:


<?php the_date_xml()?>

面包屑导航调用:


<?php wheatv_breadcrumbs(); ?>

4、分页导航使用


<?php kriesi_pagination($query_string); ?>

7、文章内容页面模板制作

1、制作single.php
2、调用header、sidebar、footer文件

调用头部标签:


<?php get_header();?>

调用底部标签:


<?php get_footer();?>

调用侧边栏标签:


<?php get_sidebar();?>

3、循环调用文章(一定不要忘了放循环代码)


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

<?php endwhile; ?>
<?php endif; ?>

标题:


<?php the_title(); ?>

内容:


<?php the_content(""); ?>

4、元信息调用
日期调用:


<?php the_date_xml()?>

分类目录:


<?php the_category(', ') ?>

文章标签:


<?php the_tags('标签: ', ', ', ''); ?>

浏览数标签:(用到插件wp-postviews)下载地址:【浏览量插件】
查看次数,调用代码:


<?php the_views();?>

上一片,下一片代码直接粘贴到相应显示的位置就可以了。
上一篇调用:


<?php previous_post_link('&laquo; %link'); ?>

下一篇调用:


<?php next_post_link('%link &raquo;'); ?>

8、page页面和搜索模板制作

1、制作page页面,复制single.php,重命名为page.php,去除分类链接

2、制作搜索功能
2-1、在搜索框位置放这个代码:


<?php include (TEMPLATEPATH . '/searchform.php'); ?>

在主题文件夹里新建一个searchform.php,放入以下代码:


<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<input class="searchInput" type="text" value="输入关键字" name="s" id="s"/>
<input type="submit" value="搜 索" onClick="if(document.forms['search'].searchinput.value=='- Search -')document.forms['search'].searchinput.value='';" alt="Search" />
</form>

<script type="text/javascript">
$(document).ready(function(){
// 当鼠标聚焦在搜索框
$('#s').focus(
function() {
if($(this).val() == '输入关键字') {
$(this).val('').css({color:"#454545"});
}
}
// 当鼠标在搜索框失去焦点
).blur(
function(){
if($(this).val() == '') {
$(this).val('输入关键字').css({color:"#333333"});
}
}
);
});
</script>

2-2、直接复制分类目录页面制作search.php,才能实现搜索功能。直接复制分类目录页面
2-3、调试搜索功能和界面

发表评论

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

相关教程

  • 漂亮的wordpress淘客模板 图文教程 (17913 次浏览)
    今天再次给大家分享一款自己仿的一个wordpress淘客模板。这个模板是我自己在别人模板的基础上进行二次开发,自己比较喜欢。注意:此模板不支持IE6,
  • 用什么建网站?Wordpress建网站好不好?这些问题经常被新手问上问起。可以这样说,wordpress程序可以建各种类型的网站,它的功能强大之处令人称赞,
  • Wordpress 如何开启伪静态 视频教程 (1114373 次浏览)
    做网站制作好之后,如果网站做SEO优化时,需要进行伪静态的设置,同样也可以通过网站设置选置进行设置。Wordpress伪静态设置方法 登陆到wordpre
  • 使用wordpress建网站,安装好了wordpress程序之后,我们可以通过网站后台修改网站标题。下面学做网站论坛就来讲一下wordpress 如何修改网站标题。wo
  • 插件介绍在网站中插入幻灯片可以让网站更加绚丽,例如学做网站论坛首页顶部左侧就是一个幻灯片,这种方式是直接借助js文件,然后嵌入到网站主题中的.
  • 仿站长网admin5主题模板 图文教程 (15470 次浏览)
    这是一款模板站长网admin5的wordpress主题模板,这个模板综合了门户和企业网站所有特点,内容特别丰富,而且有大量的广告位可供站长放广告图片,实现网站
  • 如果碰到无法安装Wordpress主题,如何处理?很多朋友只知道在WP后台选择本地安装,上传主题,一旦无法正常安装就没有办法了。下面自己做网站论坛就教
  • 图片分享网站模板主题 图文教程 (15774 次浏览)
    分享一个图片分享网站模板主题,特别适合制作图片分享站,属于全屏展示类版面,漂亮大气,使用也简单。使用说明1、安装并启用Photo_MM主题
  • 简单雅蓝主题风格 Discuz论坛模板** 风格名称:草根雅蓝** 适用版本:Discuz!6.0转载请保留此文件以及本站连接*************************
  • 回忆主题风格 Discuz论坛模板** 风格名称:粉之回忆&回忆之蓝** 适用版本:Discuz!6.0转载请保留此文件以及本站连接**************
  • 我们做了一个论坛网站,如果discuz论坛更换域名的方法又是如何呢,更换域名需要注意那些问题,才会对网站发展更有利呢?下面先说更换域名的步
  • 一、下载 Discuz官方版到自己电脑里二、解压并上传 Discuz! 程序到服务器且修改相应目录权限1、解压DISCUZ程序压缩包。解压缩得到如下图所示
  • 1、登录支付宝官方网站:www.alipay.com 并填写自己的支付宝用户名和密码进入登录;2、进入支付宝后台后,点击“转账”按钮. 3、填写
  • 很多论坛网站的首页都会设置很多人栏目项,如最新贴子,最新回复,论坛图片,特别热贴子等栏目,每个栏目项可以自动调用相应的内容。如下图:
  • 什么是网站仿站仿站是我们学习怎么做网站过程中,必须要学习的课程,仿站是为了让我们快速的了解网站是通过什么代码的布局,怎么通过DIV+CSS的格式