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> <a href="javascript:ContentSize(14)">14px</a> <a href="javascript:ContentSize(12)">12px</a>
关闭:
<a href="#" onclick="window.close()">Close</a>
上一片，下一片代码直接粘贴到相应显示的位置就可以了。
上一篇调用：
<?php previous_post_link('« %link'); ?>
下一篇调用：
<?php next_post_link('%link »'); ?>
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=""
Its function is to secrete endolymph while simultaneously maintaining its gradient of potassium ions to sodium ions, contributing to the resting endocochlear potential EP priligy 30mg price
Funk cited a 2014 study on cell metabolism in over 6, 000 adults ages 50 65 who were followed for 18 years priligy sg Adjuvant Bone Modifying Agent Therapy and Breast Cancer Related Outcomes