wordpress纯代码制作站点地图页面

发表评论
285

A+

站点地图就是根据网站的结构、框架、内容生成的导航网页文件，是一个网站所有链接的容器。它一般存放在网站根目录下并命名为sitemap，为搜索引擎蜘蛛指路，增加网站重要内容页面的收录。

站点地图的好处：

简单的体现出网站的整体框架结构给搜索引擎蜘蛛
方便搜索引擎蜘蛛抓取网站链接层次较深的页面
优化搜索流量，提高网站收录

我在制作站点地图前搜索了一下相关的文章，发现类似的教程很多，但基本上用的都是同一份模板，由于这些模板大多都是多年前制作，很多标签不够语义化，排版也有些问题，实现的功能也比较有限，一般只有“所有文章”、“所有页面”和“所有分类”，甚至连“所有标签”都没有。

由于我的博客有用到自定义文章类型，该类型下的文章数量也不少，同时又希望添加“所有标签”，因此我根据网上原有的代码进行了相应的修改，重新制作了一份新的站点地图，使标签更加语义化，内容也更加丰富，同时对样式也做了小小的美化和修正。

具体内容

所有文章：针对wordpress内置文章类型下的所有文章
所有文章：针对wordpress自定义文章类型下的所有文章
所有分类：针对wordpress内置文章类型下的所有分类
所有页面：针对wordpress单页面，含自定义page页
所有标签：针对wordpress内置文章类型下的所有标签

效果预览

PC端效果预览：点击这里

移动端效果预览：点击这里

动态预览：点击这里查看实时效果

Ps：效果图中的背景图片显示不完整或显示样式有问题是截图工具的原因。

制作方法

首先：在主题目录下新建一个名为sitemap.php的文件。如果是begin主题的童鞋，建议在pages/目录下新建一个名为template-sitemap.php的文件

然后：将下面的代码复制到这个文件中，展开

<?php
/*
Template Name: 站点地图
*/
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta charset="<?php bloginfo( 'charset' ); ?>">
<title>站点地图 - <?php bloginfo('name'); ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="站点地图,<?php bloginfo('name'); ?>" />
<meta name="copyright" content="<?php bloginfo('name'); ?>" />
<link rel="canonical" href="<?php echo get_permalink(); ?>" />
<style type="text/css">
html, body, header, nav, footer, div, p, a, img {
border: 0;
font-family: inherit;
font-size: 100%;
font-style: inherit;
margin: 0;
outline: 0;
padding: 0;
}
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
font-size: 62.5%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
font-family: Microsoft Yahei,Verdana;
font-size: 14px;
color: #000;
background-image: url(http://localhost/wp-content/uploads/bg.gif);
background-attachment: fixed;
}
h1 {
text-align: center;
}
.clear {
clear: both;
}
nav, .arctives, .video, .categories, .pages, .tags, footer {
width: 95%;
border: 1px solid #ccc;
margin: auto;
margin-top: 10px;
padding: 8px 15px;
}
footer p {
margin: 10px 0;
text-align: center;
}
ul li {
margin: 15px 10px 0 0;
}
a {
text-decoration-line: none;
}
a:link, a:visited {
color:#000;
text-decoration: none;
}
a:hover {
color:#08d;
}
a.tags_li {
text-align: center;
line-height: 200%;
border: 1px solid #ccc;
margin: 6px;
padding: 5px 10px;
display: block;
float: left;
word-break: break-word;
}
a.tags_li:hover {
background: #fff;
}
@media screen and (max-width: 800px) {
.pages .menu {
margin: 0 0 0 -40px;
}
.pages ul li {
text-align: center;
word-break: break-word;
line-height: 200%;
list-style: none;
border: 1px solid #ccc;
margin: 5px;
padding: 5px 10px;
display: inline-block;
}
}
</style>
</head>
<body vlink="#333333" link="#333333">
<header>
<h1><?php bloginfo('name'); ?>的站点地图</h1>
<nav><b>您的位置</b> > <a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a> > <a href="<?php echo get_permalink(); ?>">站点地图</a></nav>
<div class="clear"></div>
</header>
<div class="arctives">
<h3>所有文章</h3>
<ul><?php $previous_year = $year = 0; $previous_month = $month = 0; $ul_open = false; $myposts = get_posts('numberposts=-1&orderby=post_date&order=DESC');
foreach($myposts as $post) :?>
<li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" target="_blank"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>
</div><div class="clear"></div>
<div class="video">
<h3>自定义文章类型“视频”所有文章</h3>
<?php
$custom_taxterms = wp_get_object_terms( $post->ID,'video', array('fields' => 'ids') );
$args_video = array(
'post_type' => 'video',
'post_status' => 'publish',
'posts_per_page' => 10000,
'orderby' => 'date',
);
$related_items = new WP_Query( $args_video );
if ($related_items->have_posts()) :
echo '<ul>';
while ( $related_items->have_posts() ) : $related_items->the_post();
?>
<li><a href="<?php the_permalink(); ?>" ?><?php the_title(); ?></a></li>
<?php
endwhile;
echo '</ul>';
endif;
wp_reset_postdata();
?>
</div><div class="clear"></div>
<div class="categories">
<h3>所有分类</h3>
<ul><?php wp_list_categories('title_li='); ?></ul>
</div><div class="clear"></div>
<div class="pages">
<h3>所有页面</h3><?php wp_page_menu( $args ); ?>
</div><div class="clear"></div>
<div class="tags">
<h3>所有标签</h3>
<?php
$tags = get_terms("post_tag");
foreach ( $tags as $key => $tag ) {
for ($i = $tags.length; $i < $tags.length; $i++) {
$output = "";
$link = get_term_link( intval($tag->term_id), "post_tag" );
if ( is_wp_error( $link ) )
return false;
}
$output .= "<a class='tags_li' href='".get_tag_link($tag->term_id)."'>".$tag->name."</a>";
}
echo $output;
?>
<div class="clear"></div>
</div><div class="clear"></div>
<footer>
<p>
Copyright © <a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a> 版权所有.
</p>
<p>最后更新：<?php $last = $wpdb->get_results("SELECT MAX(post_modified) AS MAX_m FROM $wpdb->posts WHERE (post_type = 'post' OR post_type = 'page') AND (post_status = 'publish' OR post_status = 'private')");$last = date('Y-m-d G:i:s', strtotime($last[0]->MAX_m));echo $last; ?>
</p>
</footer><div class="clear"></div>
</body>
</html>

该模板文件已适配移动端，只是写的比较简单，如果你觉得这个样式不太喜欢，也可以自己稍加调整。

代码说明：

CSS样式中的

body {
font-family: Microsoft Yahei,Verdana;
font-size: 14px;
color: #000;
background-image: url(https://isdola.com/wp-content/uploads/bg.gif);
background-attachment: fixed;
}

这个地方我设置了一张背景图片，图片的地址需要更换成你们自己的，如果不需要的话也可以删除该行。

body中的

<div class="video">
<h3>自定义文章类型“视频”所有文章</h3>
<?php
$custom_taxterms = wp_get_object_terms( $post->ID,'video', array('fields' => 'ids') );
$args_video = array(
'post_type' => 'video',
'post_status' => 'publish',
'posts_per_page' => 10000,
'orderby' => 'date',
);
$related_items = new WP_Query( $args_video );
if ($related_items->have_posts()) :
echo '<ul>';
while ( $related_items->have_posts() ) : $related_items->the_post();
?>
<li><a href="<?php the_permalink(); ?>" ?><?php the_title(); ?></a></li>
<?php
endwhile;
echo '</ul>';
endif;
wp_reset_postdata();
?>
</div><div class="clear"></div>