自动生成HTML站点地图对于网站优化和用户体验的重要性

摘要

大家的网站是否缺少网站地图呢?是否也不知道使用什么插件或者如何生成呢?这边接下来就教大家如何使用html生成一个以html后缀的文件网站地图!

网站地图对于站点的搜索引擎优化和用户体验都有着重要作用。一般来说,默认的Sitemap是以XML格式呈现,这有利于搜索引擎蜘蛛更好地爬取网站内容。除了满足SEO需求外,一个清晰的网站地图对于用户浏览和站长梳理网站历程同样十分重要,因此许多站长在XML版网站地图之外也会添加HTML版网站地图。

通常情况下,大家会使用sitemap插件或者SEO插件来生成网站地图,但实际上,我们完全可以通过纯代码自行为WordPress网站添加HTML版站点地图。这样做不仅可以更好地满足搜索引擎优化的需求,也能够提升用户体验,并帮助站长更好地管理和优化网站。

 

安装教程

一、给网站添加一个sitemap页面模板:

1、创建template-sitemap.php文件

2、后将以下代码放入这个文件中

<!--TEMPLATE NAME: 玖华IT知识之家HTML网站地图页-->
<?php /** @package WordPress 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 http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>"/>
    <title>站点地图 - <?php bloginfo('name'); ?></title>
    <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">
        body {
            font-family: Verdana;
            FONT-SIZE: 12px;
            MARGIN: 0;
            color: #000000;
            background: #ffffff;
        }

        img {
            border: 0;
        }

        li {
            margin-top: 8px;
        }

        .page {
            padding: 4px;
            border-top: 1px #EEEEEE solid
        }

        .author {
            background-color: #EEEEFF;
            padding: 6px;
            border-top: 1px #ddddee solid
        }

        #nav, #content, #footer {
            padding: 8px;
            border: 1px solid #EEEEEE;
            clear: both;
            width: 95%;
            margin: auto;
            margin-top: 10px;
        }
    </style>
</head>
<body vlink="#333333" link="#333333">
<h2 style="text-align: center; margin-top: 20px"><?php bloginfo('name'); ?>站点地图</h2>
<center></center>
<div id="nav">
    <a href="<?php bloginfo('url'); ?>/"><strong><?php bloginfo('name'); ?></strong></a>
    »
    <a href="<?php echo get_permalink(); ?>">站点地图</a></div>
<div id="content">
    <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 id="content">
    <li class="categories">分类目录
        <ul>
            <?php wp_list_categories('title_li='); ?>
        </ul>
    </li>
</div>
<div id="content">

    <li class="categories">单页面</li>

    <?php wp_page_menu($args); ?>
</div>
<div id="footer">查看博客首页: <strong><a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a></strong></div>
<center>
    <div style="text-algin: center; font-size: 11px">
        Latest
        Update: <?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; ?>
    </div>
</center>
<center>
    © <?php echo date('Y'); ?> <a href="<?php bloginfo('url'); ?>/"
                                       style="cursor:help"><?php bloginfo('name'); ?></a> 版权所有.
    </div>
</center>
</body>
</html>

注:本代码默认是"zh-CN",如需要修改请将<html lang="zh-CN">说明站点地图是中文的,如果是做外贸独立站的朋友可以把”zh-CN“替换成”en-US“。

3、将"template-sitemap.php"文件上传到当前网站的主题页面文件夹下,通常是(page),例如本站是Wordpress系统,则上传到/wp-content/themes/主题文件夹,即可!

4、后回到网站后台(/wp-admin)页面-新建页面-填写页面标题-在右侧选择我们刚刚放进去的网站地图文件模板"网站地图(sitemap)后点击发布即可!

5、最后你的wordpress就会自动生成HTML网站地图了。

以下是本站地图的实例页面:站点地图 - 玖华IT知识之家 (blog.jhacd.com)

效果图

自动生成HTML站点地图对于网站优化和用户体验的重要性插图

自动生成HTML站点地图对于网站优化和用户体验的重要性插图1

版权声明 1 本网站名称:玖华IT知识分享
2 本站永久网址:https://blog.jhacd.com
3 当前文章地址:https://blog.jhacd.com/313.html
4 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
5 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
6 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
7 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长 QQ:81754131,进行删除处理。
THE END
分享
二维码
打赏
< <上一篇
下一篇>>
文章目录
关闭
目 录