【wordpress主题】企业模板制作流程及标签
仿站知识 2014-10-01 6039 8 评论 admin

上次给大家分享了博客模板的制作流程,现在给大家分享一个企业模板的制作流程以及调用标签,企业模板通常都有以下文件组成:

style.css 样式文件
functions.php 函数文件
index.php 首页文件
-header.php 头部文件
-sidebar.php 侧边栏文件
-footer.php 底部文件
archive.php 文章列表文件
category-xxx.php 图片列表文件
single.php 内容文件
page.php 页面文件
search.php 搜索文件
404.php 错误页面文件

一、模板拆分

1、将style.css移动主题目录下,并添加以下版权信息:

1
2
3
4
5
6
7
8
9
/*
Theme Name: 主题名称  
Theme URI: http://www.linw.net
Description:主题介绍
Author: 作者
Author URI: http://www.linw.net
Version: 1.0
Tags: 免费模板, 湛江SEO, wp仿站之家,wordpress主题
*/

2、修改首页index.php文件的调用代码:
(1)style.css路径调用:

1
<?php bloginfo( 'stylesheet_url' ); ?>

(2)相对路径修改为绝对路径(主题存放路径):

1
<?php bloginfo('template_directory'); ?>

3、头部文件header.php的制作:
(1)头部文件调用标签:

1
<?php get_header();?>

(2)元信息添加,编码格式:

1
2
<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo( 'charset' ); ?
>" />

(3)新建seo.php文件并添加以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<title><?php if ( is_home() ) {
bloginfo('name'); echo " - "; bloginfo('description');
} elseif ( is_category() ) {
single_cat_title(); echo " - "; bloginfo('name');
} elseif (is_single() || is_page() ) {
single_post_title();
} elseif (is_search() ) {
echo "搜索结果"; echo " - "; bloginfo('name');
} elseif (is_404() ) {
echo '页面未找到!';
} else {
wp_title('',true);
} ?>
</title>
<?php
if (is_home() || is_page()) {
$description = "";//填写首页描述信息
$keywords = "";//填写首页关键词信息,不填留空
}
elseif (is_single()) {
$description1 = get_post_meta($post->ID, "description", true);
$description2 = mb_strimwidth(strip_tags(apply_filters('the_content', $post-
>post_content)), 0, 200, "…");
// 填写自定义字段description时显示自定义字段的内容,否则使用文章内容前200字作为描述
$description = $description1 ? $description1 : $description2;
// 填写自定义字段keywords时显示自定义字段的内容,否则使用文章tags作为关键词
$keywords = get_post_meta($post->ID, "keywords", true);
if($keywords == '') {
$tags = wp_get_post_tags($post->ID);
foreach ($tags as $tag ) {
$keywords = $keywords . $tag->name . ", ";
}
$keywords = rtrim($keywords, ', ');
}
}
elseif (is_category()) {
$description = category_description();
$keywords = single_cat_title('', false);
}
elseif (is_tag()){
$description = tag_description();
$keywords = single_tag_title('', false);
}
$description = trim(strip_tags($description));
$keywords = trim(strip_tags($keywords));
?>
<meta name="description" content="<?php echo $description; ?>" />
<meta name="keywords" content="<?php echo $keywords; ?>" />

(4)在头部文件的标题描述位置添加调用代码:

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

(5)元信息添加,Hook标签:

1
<?php wp_head(); ?> 放在头部</head>前面

(6)添加了Hook标签后会出现网站顶部出现一行空白,可以新建一个函数文件functions.php并添加以下代码就可以去除顶部空白的问题:

1
<?php add_filter( 'show_admin_bar', '__return_false' );?>

4、头部文件导航栏的制作:
(1)在函数文件functions.php中添加以下菜单调用代码:

1
2
3
4
5
6
7
<?php
//自定义菜单
   register_nav_menus(
      array(
         'header-menu' => __( '导航自定义菜单' ),
      )
   );?>

(2)在头部文件的导航位置添加菜单调用代码:

1
2
<?php wp_nav_menu( array( 'container' => '','menu_class' => 'navigation','menu_id' =>
'nav_sgBhgn') ); ?>

(3)菜单参数:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//最外层容器的标签名,默认div  
'container' => 'div',  
//最外层容器的class名  
'container_class' => 'mainNavBlock',  
//最外层容器的id名  
'container_id' => 'menu',  
//导航菜单ul标签的class名  
'menu_class' => 'mainNav',  
//导航菜单ul标签的id名  
'menu_id' => "nav",  
//是否打印,默认是true,如果想将导航的代码作为赋值使用,可设置为false  
'echo' => true,  
//备用的导航菜单函数,用于没有在后台设置导航时调用  
'fallback_cb' => 'the_main_nav',  
//显示在导航a标签之前  
'before' => '<p>',  
//显示在导航a标签之后  
'after' => '</p>',  
//显示在导航链接名之前  
'link_before' => '<em>',  
//显示在导航链接名之后  
'link_after' => '</em>',  
//显示的菜单层数,默认0,0是显示所有层  
'depth' => 0,  
//调用一个对象定义显示导航菜单  
'walker' => new Walker_Nav_Menu(),  
//指定显示的导航名,如果没有设置,则显示第一个  
'theme_location' => 'primary',

5、侧边栏模板文件sidebar.php的制作:
(1)侧边栏调用标签:

1
<?php get_sidebar();?>

(2)调用某个分类下的文章(wordpress主题制作中如何调用最新、热门、随机文章):

1
2
3
4
<?php $rand_posts =
get_posts('category=ID&numberposts=5&orderby=date');foreach($rand_posts as $post) : ?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach;?>

(3)更多内容链接:

1
<?php echo get_option('home'); ?>/这里添加分类目录名称

(4)产品树形结构的调用:

1
<?php wp_list_categories('title_li=0&orderby=name&show_count=0&depth=0'); ?>

(5)产品树形结构的调用的CSS样式:

1
2
3
4
5
6
7
.prod_type{float:left;width:250px;overflow:hidden;margin-left:15px;padding-bottom:10px; }
.prod_type ul li{background:url("images/jiahao.gif")no-repeat scroll 0 10px
transparent;padding-left: 15px;font-weight:bold;}
.prod_type ul li ul li{background: url("images/minus.gif") no-repeat scroll 0 10px
transparent;margin-left: -8px;font-weight: normal;}
.prod_type ul li a {height:30px;line-height:30px;}
.prod_type ul ul{ display:block!important;}

(6)添加友情链接,并只在首页显示:

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

(7)wordpress后台添加友情链接功能,在函数文件functions.php中添加以下代码:

1
<?php add_filter( 'pre_option_link_manager_enabled', '__return_true' ); ?>

6、底部文件footer.php文件的制作:
(1)底部文件调用:

1
<?php get_footer();?>

(2)添加站点版权信息:

1
Copyright © 2014-2018 <a href=”<?php echo get_option('home'); ?>”> <?php bloginfo(‘name’); ?></a> All rights reserved. 版权所有

(3)hook信息的添加:

1
<?php wp_footer();?> 放在底部任何位置

7、首页文件index.php的制作:
(1)页面调用,通常用在公司简介方面:

1
2
3
4
5
<?php query_posts('page_id=2');//修改页面ID ?>
<?php while (have_posts()) : the_post(); ?>
<?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0,
300,"……"); //修改显示字数 ?>
<?php endwhile;wp_reset_query();?>

(2)产品列表调用:
(2-1)循环标签:

1
2
3
4
5
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<!--需要循环的模块-->
<?php endwhile; ?>
<?php endif; wp_reset_query(); ?>

(2-2)控制输出分类和显示数量,在循环标签 if (have_posts()) 和while (have_posts()) : the_post(); 之间添加以下代码:

1
<?php query_posts('cat=3' . $mcatID. '&caller_get_posts=1&showposts=6'); ?>

(2-3)标题调用:

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

(3)缩略图制作:
(3-1)新建thumbnail.php文件,并添加以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="thumbnail_t">
    <?php if ( get_post_meta($post->ID, 'thumbnail', true) ) : ?>
    <?php $image = get_post_meta($post->ID, 'thumbnail', true); ?>
    <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?
>"><img src="<?php echo $image; ?>" alt="<?php the_title(); ?>"/></a>
    <?php else: ?>
</div>
<!-- 截图 -->
<div class="thumbnail">
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">
<?php if (has_post_thumbnail()) { the_post_thumbnail('thumbnail'); }
else { ?>
<img class="home-thumb" src="<?php echo catch_first_image() ?>" width="108px"
height="108px" alt="<?php the_title(); ?>"/>
<?php } ?>
</a>
<?php endif; ?>
</div>

(3-2)在函数文件functions.php中添加以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
//支持外链缩略图
if ( function_exists('add_theme_support') )
add_theme_support('post-thumbnails');
function catch_first_image() {
global $post, $posts;
$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
$random = mt_rand(1, 2);
echo get_bloginfo ( 'stylesheet_directory' );
echo '/images/random/'.$random.'.jpg';
}
return $first_img;
}
?>

(3-3)在images文件夹中新建random文件夹,并放入一些默认的缩略图,图片名字修改为1.jpg,2.jpg等等,然后在需要显示缩略图的地方插入以下代码:

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

8、滚动图片的调用:
(1)在需要显示滚动图片的地方插入以下代码:

1
2
3
4
5
6
7
8
9
10
<div id="demo">
<div id="indemo">
<div id="demo1">
<div class="thumb"><a href="#"><img src="" border="0" /></a></div>
<div class="thumb"><a href="#"><img src="" border="0" /></a></div>
<div class="thumb"><a href="#"><img src="" border="0" /></a></div>  
</div>
<div id="demo2"></div>
</div>
</div>

(2)添加js代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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>

(3)在style.css中添加以下样式:

1
2
3
4
5
6
7
#demo {background: #FFF;overflow:hidden;width: 500px; }
#demo img { border: 3px solid #F2F2F2; }
#indemo { float: left; width: 800%; }
#demo1 { float: left; }
#demo2 { float: left; }
.thumb{float:left;width:167px;height:150px;text-align:center;}
.thumb img{width:160px;height:120px;}

(4)指定分类循环代码:

1
2
3
4
5
6
<?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(); ?>

(5)修改需要循环模块中的代码:

1
2
3
<?php include(TEMPLATEPATH . '/thumbnail.php'); ?>
<a href="<?php the_permalink() ?>"> <?php echo mb_strimwidth(get_the_title(), 0, 16, '');
?></a>

9、列表文件archive.php的制作:
(1)头部标签调用:

1
<?php get_header();?>

(2)底部标签调用:

1
<?php get_footer();?>

(3)侧连栏标签调用:

1
<?php get_sidebar();?>

(4)文章列标循环调用:

1
2
3
4
5
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<!--需要循环的模块-->
<?php endwhile; ?>
<?php endif; wp_reset_query(); ?>

(5)文章列表标题调用:

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

(6)当前页面标题调用:

1
<?php wp_title('');?>

(7)日期调用:

1
<?php the_date_xml()?>

(8)文章内容调用:

1
<?php the_content(""); ?>

(9)所属分类调用:

1
<?php the_category(', ') ?>

(10)文章标签调用:

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

(11)分页插件的调用:

1
<?php wp_pagenavi(); ?>

10、产品图片列表的制作:
(1)将产品图片列表文件重名命为category-xxx.php,其中xxx修改为分类目录的名字:
(2)调用方法与archive.php相同。
(3)在图片显示的地方添加图片调用代码:

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

11、文章内容页面single.php的制作:
(1)拆分、内容循环、元信息调用可参考archive.php。
(2)字体大小显示:

1
2
3
<ahref="javascript:ContentSize(16)">16px</a>
<a href="javascript:ContentSize(14)">14px</a>
<a href="javascript:ContentSize(12)">12px</a>

(3)翻页设置:

1
2
上一篇调用:<?php previous_post_link('上一篇: %link'); ?>
下一篇调用:<?php next_post_link('下一篇: %link'); ?>

(4)翻页设置也可以用以下方式显示:

1
2
3
4
<?php if (get_previous_post()) { previous_post_link(%link);} else {echo “没有了,已经
是最后文章”;} ?>
<?php if (get_next_post()) { next_post_link(%link);} else {echo “没有了,已经是最新文
章”;} ?>

(5)浏览次数插件的调用:

1
<?php if(function_exists('the_views')) { the_views(); } ?>

(6)最新文章调用:

1
2
3
4
5
6
<?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;?>
<?php wp_get_archives('type=postbypost&limit=10'); ?>

(7)相关文章调用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<ul>
<?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>

12、页面文件page.php的制作与single.php想似,只需修改一些不应显示的功能即可。
13、搜索页面search.php和404.php页面的制作:
(1)搜索页面的显示方式是列表的形式,所以只需复制作archive.php并重命名为search.php,然后在<?php endwhile; ?>后面添加以下代码即可。

1
2
3
<?php else: ?>
<h3><a href="#">未找到</a></h3>
<p>没有找到任何文章!</p>

(2)wordpress默认的搜索代码:

1
2
3
4
<form method="get" action="<?php bloginfo('url'); ?>/">
<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</form>

(3)热门标签的调用:

1
<?php wp_tag_cloud('smallest=10&largest=10&number=5&order=RAND&separator= , '); ?>

(4)404页面可以是任何一个页面,只需要制作一个您希望显示的页面把名字重命名为404.php即可。
14、二级导航的制作:
(1)添加一个jquery库:放在header.php文件的<body>下面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/jscript">
$(document).ready(function(){
$('ul.navigation li').hover(function(){
$(this).find('ul:first').slideDown(200);//显示二级菜单,括号中的数字表示下拉菜单完全显示出
来需要200毫秒。
$(this).addClass("hover");
},function(){
$(this).find('ul').css('display','none');
$(this).removeClass("hover");
});
function hide_submenu(){
$('ul.navigation li').find('ul').css('display','none');//红色标注改为当前导航ul的class名称
}
$('ul.navigation li li:has(ul)').find("a:first").append("");
document.onclick = hide_submenu;
});
</script>

(2)使用谷歌jquery库文件加载

1
2
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
type="text/javascript"></script>

(3)在style.css中添加css样式

1
2
3
4
5
6
7
8
9
10
/* 二级菜单 */
.sub-menu{
display:none;/*初始状态下隐藏子目录*/
position:absolute;/*显示最顶层*/
}
.sub-menu li{
width:100%;/*显示子目录宽度/*针对IE6*/
clear:both;/*垂直显示*/
background:#000;/*子目录背景颜色*/
}

如果大家有看不懂的地方可以加我的QQ或微信提出,我会在我的能力范围内将我懂的东西都告诉大家的!

继续浏览有关: , , , 的文章
版权声明:版权归 wp仿站之家 所有,转载请注明出处!
转载请保留链接: http://www.linw.net/151.html
联系wp仿站之家:5946394#qq.com (#改为@)
wp仿站微信公众号:linw_net
官网淘宝店:http://shop111710277.taobao.com/
wp仿站之家
手机扫一扫
进淘宝店铺选购主题

用心做最好的主题网站wp仿站之家

wp仿站之家是一个专业的wordpress仿站业务网站,提供wordpress主题模板下载以及seo网站优化服务,诚信经营,用心服务每一个客户,让您放心享受我们的优质服务。同时,也欢迎各位建站爱好者加入我们交流建站经验心得。

上一篇: 下一篇:

8则回应给“【wordpress主题】企业模板制作流程及标签”

  1. 艾小丽说道:

    这个不错,可以学习学习,谢谢分享!

  2. 李莹香说道:

    谢谢分享,有了这个就可以仿站了,不过还有些地方看不懂,不知道可不可以问你。

    • admin说道:

      遇到不明白的随时可以问我,只要我懂的都可以帮您,不过我个人能力有限不一定能帮得到您,大家交流交流还是可以的。

  3. 西门塔尔牛说道:

    不错的文章,内容文从字顺.禁止此消息:nolinkok@163.com

  4. 花狐貂说道:

    总结的很全面 楼主用心了 谢谢fenxiang

  5. julytian说道:

    请教下博主做企业站一般用那些插件?有时候要自定义内容类型和分类,这个怎么解决?谢谢!

发表评论

服务咨询