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: 550px;

        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=""

上一课: 网站搬家教程详细步骤下一课: wordpress主题制作详细步骤