wordpress 仿站步骤
1、主题决定一切，获取主题（模板）的三种途径：
a、自己通过HTML5+CSS3写静态网站，再转化成模板；
b、通过在网上下载别人已经做好的模板 （第三方模板网站购买）
C、通过仿站，仿制自己喜欢的网站
2、仿站并不是仿制别人网站的内容，是仿站别人网站的版面。
3、并不是所有网站都可以仿的，特别是一些功能复杂的网站，你只能仿出它的前台界面，做不到它后台的功能。
4、仿站时注意事项：
a、不要去仿老式的布局网站，如table布局 可以仿div+css html5+css3
b、不要仿版面错位的网站
5、仿站的流程:
下载页面-----制作成WP模板-----后台安装变成网站
仿站开始
目前仿站主流需要仿制的主流页面有一下：
首页、产品页、列表页、内容页、page页面
1.仿制首页
1-1. 制作CSS页面
把首页模板调用css文件改名为：style.css
制作主题版权信息，放到css文件顶部
1
2
3
4
5
6
7
8
9
| /*
Theme Name: 我的模板名称
Theme URI: http://www.haichengsem.com
Description:我的模板A1 XX主题描述
Author: 我的模板A1
Author URI: http://www.haichengsem.com
Version: 1.0
Tags: 我的模板A1
*/ |
在主题文件来下面放一个缩略图图片，
缩略图的名字必须是：screenshot.png 或者 screenshot.jpg
1-2. Style.css路径调用：
1
| <!--?php bloginfo( 'stylesheet_url' ); ?--> |
获取主题存放路径：
1
| <!--?php bloginfo('template_directory'); ?--> |
1-3. 分离头部/尾部，改用WP调用，调用顶部标签：
1
| <!--?php get_header();?--> |
1
| <!--?php get_footer();?--> |
1-4. 网站title标题调用标签：
1-5. HOOK函数：
1
| <!--?php wp_head(); ?--> |
1-6. 导航制作
菜单选项的生成：
在函数文件functions.php文件中添加以下代码：
1
2
3
4
| <div class="codecolorer-container php geshi">
<div class="php codecolorer">//添加多个菜单功能
if ( function_exists('register_nav_menus')) {register_nav_menus (array('topmenu' => ; ' 顶部菜单'));}
if ( function_exists('register_nav_menus')) {register_nav_menus (array('footmenu' => ;'底部菜单'));} |
顶部菜单的调用：
1
| <!--?php wp_nav_menu ( array( 'theme_location' => ;'topmenu','container' => ; '','menu_class' => ; 'navigation','menu_id' => ; "nav_sgBhgn",'depth' => ; 2, ) ); ? --> |
调用二级导航
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <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里面添加下面代码：
1
| add_filter( 'show_admin_bar', '__return_false' ); |
1-8. 分离侧边栏调用
1
| <!--?php get_sidebar();?--> |
1-9. 调用特定分类下的文章：直接复制到要显示分类的地方。cat=1为id=1下面的文章，showposts=5为显示5片文章
1
2
3
4
5
6
| <!--?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(); ?--> |
文章标题的调用（控制文字数）
文章标题的调用（不控制文字数）
1
| <!--?php the_title(); ?--> |
1-10. 友情链接调用
1
2
3
| <!--?php if ( is_home()) { ?-->
<!--?php wp_list_bookmarks('title_li=&categorize=0&orderby=rand&limit=24'); ?-->
<!--?php } ?--> |
友情链接插件下载地址： link-manager.zip
友情链接测试过的调用代码：
1
2
3
4
5
6
7
8
9
10
11
| <!--友情链接-->
<!--?php if ( is_home()) { ?-->
<ul>
<li>友情链接: <!--?php wp_list_bookmarks('title_li=&categorize=0&orderby=rand&limit=24'); ?--></li>
</ul>
<!--?php } ?-->
<!--友情链接--> |
CSS样式代码：
1
2
3
4
5
6
7
8
9
10
11
12
| .dhnblog_link{
margin-left: 100px;
}
.dhnblog_link ul{
float: left;
}
.dhnblog_link li{
float: left;
padding-left: 5px;
} |
以上代码展示主要是由于部分模板安装后后台会不显示友情链接,所以在wordpress安装根目录的 functions.php文件添加一下代码：
1
2
| //开启wordpress友情链接管理
add_filter( 'pre_option_link_manager_enabled', '__return_true' ); |
首页最新文章调用标签：
1
| <!--?php wp_get_archives('type=postbypost&limit=5'); ?--> |
