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

  • A+
所属分类:建博笔记

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

站点地图的好处:

  • 简单的体现出网站的整体框架结构给搜索引擎蜘蛛
  • 方便搜索引擎蜘蛛抓取网站链接层次较深的页面
  • 优化搜索流量,提高网站收录
wordpress纯代码制作站点地图页面

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

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

 

具体内容

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

 

效果预览

PC端效果预览:点击这里

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

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

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

 

制作方法

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

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

  1. <?php
  2. /*
  3. Template Name: 站点地图
  4. */
  5. ?>
  6. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  7. <html xmlns="http://www.w3.org/1999/xhtml">
  8. <head profile="http://gmpg.org/xfn/11">
  9. <meta charset="<?php bloginfo( 'charset' ); ?>">
  10. <title>站点地图 - <?php bloginfo('name'); ?></title>
  11. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  12. <meta name="keywords" content="站点地图,<?php bloginfo('name'); ?>" />
  13. <meta name="copyright" content="<?php bloginfo('name'); ?>" />
  14. <link rel="canonical" href="<?php echo get_permalink(); ?>" />
  15. <style type="text/css">
  16. html, body, header, nav, footer, div, p, a, img {
  17. border: 0;
  18. font-family: inherit;
  19. font-size: 100%;
  20. font-style: inherit;
  21. margin: 0;
  22. outline: 0;
  23. padding: 0;
  24. }
  25. html {
  26. -webkit-box-sizing: border-box;
  27. -moz-box-sizing: border-box;
  28. font-size: 62.5%;
  29. -webkit-text-size-adjust: 100%;
  30. -ms-text-size-adjust: 100%;
  31. }
  32. body {
  33. font-family: Microsoft Yahei,Verdana;
  34. font-size: 14px;
  35. color: #000;
  36. background-image: url(http://localhost/wp-content/uploads/bg.gif);
  37. background-attachment: fixed;
  38. }
  39. h1 {
  40. text-align: center;
  41. }
  42. .clear {
  43. clear: both;
  44. }
  45. nav, .arctives, .video, .categories, .pages, .tags, footer {
  46. width: 95%;
  47. border: 1px solid #ccc;
  48. margin: auto;
  49. margin-top: 10px;
  50. padding: 8px 15px;
  51. }
  52. footer p {
  53. margin: 10px 0;
  54. text-align: center;
  55. }
  56. ul li {
  57. margin: 15px 10px 0 0;
  58. }
  59. a {
  60. text-decoration-line: none;
  61. }
  62. a:link, a:visited {
  63. color:#000;
  64. text-decoration: none;
  65. }
  66. a:hover {
  67. color:#08d;
  68. }
  69. a.tags_li {
  70. text-align: center;
  71. line-height: 200%;
  72. border: 1px solid #ccc;
  73. margin: 6px;
  74. padding: 5px 10px;
  75. display: block;
  76. float: left;
  77. word-break: break-word;
  78. }
  79. a.tags_li:hover {
  80. background: #fff;
  81. }
  82. @media screen and (max-width: 800px) {
  83. .pages .menu {
  84. margin: 0 0 0 -40px;
  85. }
  86. .pages ul li {
  87. text-align: center;
  88. word-break: break-word;
  89. line-height: 200%;
  90. list-style: none;
  91. border: 1px solid #ccc;
  92. margin: 5px;
  93. padding: 5px 10px;
  94. display: inline-block;
  95. }
  96. }
  97. </style>
  98. </head>
  99. <body vlink="#333333" link="#333333">
  100. <header>
  101. <h1><?php bloginfo('name'); ?>的站点地图</h1>
  102. <nav><b>您的位置</b> &#62; <a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a> &#62; <a href="<?php echo get_permalink(); ?>">站点地图</a></nav>
  103. <div class="clear"></div>
  104. </header>
  105. <div class="arctives">
  106. <h3>所有文章</h3>
  107. <ul><?php $previous_year = $year = 0; $previous_month = $month = 0; $ul_open = false; $myposts = get_posts('numberposts=-1&orderby=post_date&order=DESC');
  108. foreach($myposts as $post) :?>
  109. <li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" target="_blank"><?php the_title(); ?></a></li>
  110. <?php endforeach; ?>
  111. </ul>
  112. </div><div class="clear"></div>
  113. <div class="video">
  114. <h3>自定义文章类型“视频”所有文章</h3>
  115. <?php
  116. $custom_taxterms = wp_get_object_terms( $post->ID,'video', array('fields' => 'ids') );
  117. $args_video = array(
  118. 'post_type' => 'video',
  119. 'post_status' => 'publish',
  120. 'posts_per_page' => 10000,
  121. 'orderby' => 'date',
  122. );
  123. $related_items = new WP_Query( $args_video );
  124. if ($related_items->have_posts()) :
  125. echo '<ul>';
  126. while ( $related_items->have_posts() ) : $related_items->the_post();
  127. ?>
  128. <li><a href="<?php the_permalink(); ?>" ?><?php the_title(); ?></a></li>
  129. <?php
  130. endwhile;
  131. echo '</ul>';
  132. endif;
  133. wp_reset_postdata();
  134. ?>
  135. </div><div class="clear"></div>
  136. <div class="categories">
  137. <h3>所有分类</h3>
  138. <ul><?php wp_list_categories('title_li='); ?></ul>
  139. </div><div class="clear"></div>
  140. <div class="pages">
  141. <h3>所有页面</h3><?php wp_page_menu( $args ); ?>
  142. </div><div class="clear"></div>
  143. <div class="tags">
  144. <h3>所有标签</h3>
  145. <?php
  146. $tags = get_terms("post_tag");
  147. foreach ( $tags as $key => $tag ) {
  148. for ($i = $tags.length; $i < $tags.length; $i++) {
  149. $output = "";
  150. $link = get_term_link( intval($tag->term_id), "post_tag" );
  151. if ( is_wp_error( $link ) )
  152. return false;
  153. }
  154. $output .= "<a class='tags_li' href='".get_tag_link($tag->term_id)."'>".$tag->name."</a>";
  155. }
  156. echo $output;
  157. ?>
  158. <div class="clear"></div>
  159. </div><div class="clear"></div>
  160. <footer>
  161. <p>
  162. Copyright © <a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a> 版权所有.
  163. </p>
  164. <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; ?>
  165. </p>
  166. </footer><div class="clear"></div>
  167. </body>
  168. </html>

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

代码说明:

  • CSS样式中的
  1. body {
  2. font-family: Microsoft Yahei,Verdana;
  3. font-size: 14px;
  4. color: #000;
  5. background-image: url(https://isdola.com/wp-content/uploads/bg.gif);
  6. background-attachment: fixed;
  7. }

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

  • body中的
  1. <div class="video">
  2. <h3>自定义文章类型“视频”所有文章</h3>
  3. <?php
  4. $custom_taxterms = wp_get_object_terms( $post->ID,'video', array('fields' => 'ids') );
  5. $args_video = array(
  6. 'post_type' => 'video',
  7. 'post_status' => 'publish',
  8. 'posts_per_page' => 10000,
  9. 'orderby' => 'date',
  10. );
  11. $related_items = new WP_Query( $args_video );
  12. if ($related_items->have_posts()) :
  13. echo '<ul>';
  14. while ( $related_items->have_posts() ) : $related_items->the_post();
  15. ?>
  16. <li><a href="<?php the_permalink(); ?>" ?><?php the_title(); ?></a></li>
  17. <?php
  18. endwhile;
  19. echo '</ul>';
  20. endif;
  21. wp_reset_postdata();
  22. ?>
  23. </div><div class="clear"></div>

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

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

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

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

使用begin主题的童鞋,也可以添加在后台--外观--主题选项--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: