零基础建站培训介绍

当前位置:

wordpress仿站详细步骤

wordpress仿站教程

wordpress仿站视频教程:https://www.xuewangzhan.net/jz/wpfz/

wordpress仿站步骤

1、主题决定一切,获取主题(模板)的三种途径:
a、自己通过HTML5+CSS3写静态网站,再转化成模板;
b、通过在网上下载别人已经做好的模板 如:https://aiwangxue.com/
C、通过仿站,仿制自己喜欢的网站
 
2、仿站并不是仿制别人网站的内容,是仿站别人网站的版面。
 
3、并不是所有网站都可以仿的,特别是一些功能复杂的网站,你只能仿出它的前台界面,做不到它后台的功能。
 
4、仿站时注意事项:
a、不要去仿老式的布局网站,如table布局    可以仿div+css   html5+css3
b、不要仿版面错位的网站
 
5、仿站的流程:
下载页面-----制作成WP模板-----后台安装变成网站
6、浏览器:火狐浏览器(可以百度上搜“火狐浏览器”下载安装)


仿站开始:
 
1、下载目标网站的相关页面:
 
首页、产品页、列表页、内容页、page页面
 
下载网页后,图片不显示的二种原因:
a、没有下载下来
b、下载下来了,但路径不对---修改CSS
 
页面的整理
 
a、 修改文件夹名字,取消关联
b、 替换所有页面中的文件夹名字
c、 修改其他所有文件夹名字,取消关联,删除文件夹
d、 做完模板删除没有用的文件
 
2、仿制首页:

2-1、头部制作

1、制作style.css

1-1、移动images文件夹下面的css到主题文件夹下面,重命名为style.css

添加主题版权信息:


/*
Theme Name: 睿酷学苑
Theme URI: https://www.xuewangzhan.net/baike
Description:睿酷学苑 公司企业主题
Author: 睿酷学苑
Author URI: https://www.xuewangzhan.net/baike
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'); ?>

如果还出现有些图片不显示的话,要修改style.css中的路径,因为这是的style.css是从images文件夹中拿出来的,路径已经改变了。

分离头部,改用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, ) ); ?>

调用二级导航


<script type="text/javascript">
var topMenuNum = 0;
$("#nav_sgBhgn li").hover(
        function(){
                topMenuNum++;
                $(this).attr("id","kindMenuHover"+topMenuNum);
                $("#kindMenuHover" + topMenuNum + " > ul").show();
                $(this).parent().addClass("hover");
        },
        function(){
                $("#"+$(this).attr("id")+" > ul").hide();
                $(this).attr("id","");
                $(this).parent().removeClass("hover");
        }
);
</script>

顶部空白如何处理

functions.php里面添加下面代码。


add_filter( 'show_admin_bar', '__return_false' );

2-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;
}

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, 下载次数: 756)
将下载的JS文件放到主题的images文件夹里,在header.php文件的</head>上面放上以下的js代码:


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

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

2-2、侧边栏和底部制作

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


<?php get_sidebar();?>

5、调用特定分类下的文章:直接复制到要显示分类的地方。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(); ?>

文章标题的调用(控制字数)


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

标题不控制字数


<?php the_title(); ?>

更多按钮链接,直接进入该分类页面地址调用:


<?php echo get_option('home'); ?>/?cat=1

6、产品树形结构调用,使用自己的树形样式。
第一步:选中原有的树形div删除,然后将以下代码粘贴。


<div class="sidebarddd">
       <ul>
            <li >
                        <ul >
                <?php wp_list_categories('title_li=0&orderby=name&show_count=0&depth=3'); ?>
                        </ul>
                </li>
                </ul>
</div>

第二步:将以下css样式代码复制到style.css中。


.sidebarddd{ float:left; width:250px; overflow:hidden;}
.sidebarddd h3{ float:left; padding:8px 5px 6px 10px; width:230px; font-size:14px; color:#0B3779;  }
.sidebarddd ul{ float:left; width:250px;}
.sidebarddd ul li{ float:left; margin-bottom:20px;}
.sidebarddd ul li.widget_text{ padding:0px 0px; }
.sidebarddd ul li.widget div{ padding:15px 10px 0px; line-height:20px; clear:both;}
.sidebarddd ul li ul{ float:left; margin-top:15px;}
.sidebarddd ul li ul li{ width:230px; margin:6px 4px 5px; padding-left:10px; background:url(images/news_arrow.gif) no-repeat 0px 6px; overflow:hidden;}
.sidebarddd ul li ul li ul{ border:none;}
.sidebarddd ul li ul.sub li{ padding-left:0px; background:none;}
.sidebarddd ul li ul.sub li a:link, .sidebarddd ul li ul.sub li a:visited{ padding:2px 5px 10px 22px; width:210px; color:#333; font-weight:bold; text-decoration:none; border-bottom:1px solid #E6E6E6; display:block;}
.sidebarddd ul li ul.sub li a:hover{ color:#0B3779;  border-bottom:1px solid #CCC;}
.sidebarddd ul li ul.sub .current_page_item{ border-bottom:1px solid #CCC;}
.sidebarddd ul li ul.sub .current_page_item a:link, .sidebarddd ul li ul.sub .current_page_item a:visited, .sidebarddd ul li ul.sub .current_page_item a:hover{ color:#0B3779; font-weight:bold; background:none;}

4、友情链接只在首页显示


<?php  if ( is_home()) { ?>
<?php wp_list_bookmarks('title_li=&categorize=0&orderby=rand&limit=24'); ?>
<?php } ?>

友情链接插件:  link-manager.zip (1.14 KB, 下载次数: 928) 

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>


2-3、首页主体制作

1、产品图片调用

第一步:删其余相同的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; ?>

标题调用:


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

更多按钮链接,直接进入该分类页面地址调用:


<?php echo get_option('home'); ?>/?cat=1

第二步:缩略图调用操作步骤:

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

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

1-3、缩略图的调用


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

2、某个分类产品图片动态滚动(如果出现错位,可删除文件标题代码)

第一步、删除原有图片调用所有代码包括div框。

第二步、如果是固定的图片展示就放上下面自己的图片div代码:


<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="" border="0" /></a>
<a href="#"><img src="" border="0" /></a>
<a href="#"><img src="" border="0" /></a>
<a href="#"><img src="" border="0" /></a>
<a href="#"><img src="" border="0" /></a>
<a href="#"><img src="" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>

如果要是调用自动更新的某一分类的文章图片用以下代码(循环代码):


<div id="demo">
<div id="indemo">
<div id="demo1">
<?php if (have_posts()) : ?>
<?php query_posts('cat=1' . $mcatID. '&caller_get_posts=1&showposts=6'); ?>
<?php while (have_posts()) : the_post(); ?>
<div class="thumb"><img src="<?php echo get_first_image(); ?>" alt="<?php the_title(); ?>" /><br/><a href="<?php the_permalink() ?>"> <?php echo mb_strimwidth(get_the_title(), 0, 16, ''); ?></a></div>
<?php endwhile;?>
<?php endif; wp_reset_query(); ?>
</div>
<div id="demo2"></div>
</div>
</div>

第三步:将以下js 代码放到首页底部 </body>上面。


<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>

第四步、复制css样式(可以设置长和高)


#demo {
    overflow:hidden;
    width: 750px;
        height:170px;
}
#demo img {
    border: 3px solid #F2F2F2;
}
#indemo {
    float: left;
    width: 800%;
}
#demo1 {
    float: left;
}
#demo2 {
    float: left;
}
.thumb
{
        float:left;
        width:170px;
        height:150px;
        text-align:center;
}
.thumb img
{
        width:160px;
        height:120px;
}

3、产品展示页面制作(category-id.php)

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

4、列表页面制作


1、制作archive.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; ?>

标题调用:


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

日期调用:


<?php the_date_xml()?>

页面名字调用:


<?php wp_title('');?>

4、分页的调用


<?php kriesi_pagination($query_string); ?>

5、文章内容页面制作

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

标题调用:


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

标题:


<?php the_title(); ?>

内容:


<?php the_content(""); ?>

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


<?php the_date_xml()?>

分类目录:


<?php the_category(', ') ?>

文章标签:


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

浏览数标签:(用到插件wp-postviews)【浏览量插件】

查看次数,调用代码:


<?php the_views();?>

大小调整:


<a href="javascript:ContentSize(16)">16px</a>&nbsp;&nbsp;<a href="javascript:ContentSize(14)">14px</a>&nbsp;&nbsp;<a href="javascript:ContentSize(12)">12px</a>

关闭:


<a href="#" onclick="window.close()">Close</a>

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


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

下一篇调用:


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

5、最新文章(注意:以下这段代码是<LI>标签的循环,在插入代码时,要根据模板的原来的标签进行替换。)


<?php $rand_posts = get_posts('numberposts=10&orderby=date');foreach($rand_posts as $post) : ?>
    <li><a href="<?php the_permalink(); ?>"> <?php echo mb_strimwidth(get_the_title(), 0, 32, ''); ?>
</a></li>
<?php endforeach;?>

6、相关文章调用(注意:以下这段代码是<LI>标签的循环,在插入代码时,要根据模板的原来的标签进行替换。)

相关文章:通过分类来判断相关文章


<ul id="cat_related">
<?php
$cats = wp_get_post_categories($post->ID);
if ($cats) {
$args = array(
        'category__in' => array( $cats[0] ),
        'post__not_in' => array( $post->ID ),
        'showposts' => 6,
        'caller_get_posts' => 1
    );
query_posts($args);
if (have_posts()) :
    while (have_posts()) : the_post(); update_post_caches($posts); ?>
<li><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; else : ?>
<li> 暂无相关文章</li>
<?php endif; wp_reset_query(); } ?>
</ul>


6、page页面和搜索功能制作

1、制作page页面,复制single.php

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


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

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


<div id="sousu">
<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>
</div>

2-3、在CSS中放入控制搜索框样式的代码并调整


#sousu{display:inline-block;margin-top:58px;}
#sousu input[type="text"]{width:177px;height:25px;border:1px solid #3598db;box-sizing:border-box;vertical-align:top;font-size:12px;}
#sousu input[type="submit"]{width:40px;height:25px;color:#fff;background:#3598db;border:1px solid #3598db;box-sizing:border-box;font-size:14px}

2-4、直接复制分类目录页面制作search.php,才能实现搜索功能。直接复制分类目录页面
2-5、调试搜索功能和界面
3、控制显示的分类和不显示的分类:排除:exclude=""  包括:include=""

上一课: 下一课:

发表评论

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