一、模板拆分
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;/*子目录背景颜色*/ } |
1536
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
