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

2019年1月9日00:02:16 评论 1,560 5477字阅读18分15秒
摘 要

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

站点地图的好处：

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

 

具体内容

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

 

效果预览

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

 

制作方法

首先：在主题目录下新建一个名为【sitemap.php】的文件

[mark_a]使用相同主题的童鞋，建议在【pages/】目录下新建一个名为【template-sitemap.php】的文件[/mark_a]

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

<?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> &#62; <a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a> &#62; <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>

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

代码说明：

  • 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>

是配合我自己的博客中的自定义文章类型为“视频”的分类所使用的，你们可能没有自定义文章类型，可以将这段代码删除或注释掉。

接着：在【后台--页面】中新建一个页面，模板选择【站点地图】，正常情况下，页面发布后就可以看到了。

最后：在【footer.php】文件中适当位置添加一个A链接即可

<a href="https://isdola.com/sitemap.html">站点地图</a>

使用相同主题的童鞋也可以添加在【主题选项--SEO设置--个性化页脚】中，记得把域名换成你自己的。

最后一步可以不操作，但建议操作，这有利于下面提到的文章中的“自动向百度平台提交链接”。

Ps：本文提供的是站点地图页面制作方法，所生成的站点地图是HTML格式（.html）的页面，如果你需要XML格式（.xml）的站点地图的话，请参考文章：《给网站添加XML格式的站点地图》。

继续阅读
如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: