wordpress仿站详细步骤
wordpress 仿站教程
wordpress仿站视频教程:https://www.xuewangzhan.net/jz/wpfz/
wordpress 仿站步骤
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=""