零基础建站培训教程介绍

WordPress产品展示页仿制步骤

WordPress产品展示页仿制步骤

1、复制产品页面,制作category-id.php页面,就是产品展示页面。用已有的产品展示页面做。定制某个分类的模板,id为数字
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; ?>

标题调用:
<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('');?>

4、分页的制作
4-1、将以下代码放在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";
}
}

4-2、在分页代码显示的地方放上以下调用代码。
<?php kriesi_pagination($query_string); ?>

4-3、将以下CSS样式放到style.css中。
.pagination{height:40px;text-align:center;margin-top: 20px;}
.pagination .current, .pagination a{padding:3px 5px;border:1px solid #568abe;border-radius: 1px;margin-right:10px;font-size:14px;text-decoration:none;}
.pagination a:hover,.pagination .current{color:#568abe;background:#FFF;}
.pagination a{background:#568abe;color:#FFF;}

4-4、当二种循环代码出现冲突时,使用以下的循环代码替换
<?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(); ?>

发表评论

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