A few days ago, I wrote an article titled “Generating an XML Sitemap with Pure PHP Code,” which was used to generate an XML sitemap. However, XML sitemaps look like nothing but code and have no aesthetic appeal, because they are originally generated for search engine spiders.

Today, I’m bringing you an HTML sitemap, which is a Sitemap intended for people to read. You only need to create a new page, making it simple and convenient. Without further ado, here is the code.

PHP Code

Create a new sitemap.php file and write the following code into it:

<?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>
    <link rel="canonical" href="<?php echo get_permalink(); ?>" />
    <style type="text/css">
        body {
            font-size: 14px;
            margin: 0;
            color: #000000;
            background: rgba(255, 0, 0, 0);
            background-image: url("https://www.ikxin.com/wp-content/uploads/beijing.png");
        }
        img {
            border: 0;
        }
        a {
            color: #0000ff;
        }
        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: 16px;
            border: 4px solid #0000ff;
            clear: both;
            width: 80%;
            margin: auto;
            margin-top: 16px;
        }
    </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> &raquo; 
        <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>
    <br />
    <center>
        <div style="text-align: center; font-size: 11px">
            最后更新:<?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; ?><br /><br />
        </div>
    </center>
    <center>
        <div style="text-align: center; font-size: 11px">作者:<strong>
            <a href="https://www.ikxin.com/php-code-html-sitemap.html" target="_blank">夜色静好</a></strong>&nbsp;
            <a href="<?php bloginfo('url');?>/" style="cursor: help"><?php bloginfo('name');?></a> &copy; 版权所有<br /><br />
        </div>
    </center>
</body>
</html>

Usage Instructions

Upload sitemap.php to the theme directory, then create a new page and select “站点地图” under Page Attributes - Template. No content needs to be entered.