本文详细介绍了如何从零开始创建WordPress主题，包括模板文件的拆分与制作、导航栏与侧边栏的构建、底部文件的配置以及首页、产品列表、文章详情等页面的实现。同时提供了滚动图片调用、分类循环、页面布局优化等实用技巧。
一、模板拆分
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;/*子目录背景颜色*/ } |
扫一扫
1382
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
