Home > CMS Tutorial > WordPress > body text

Detailed explanation of how to create an article archive page in WordPress

青灯夜游
Release: 2023-03-20 18:31:01
forward
1948 people have browsed it

What is an article archive page? How to easily create an article archive page in WordPress? The following article will introduce you to 3 methods of creating archive pages in WordPress. I hope it will be helpful to you!

Detailed explanation of how to create an article archive page in WordPress

You may ask, what is an article archive page and what is it used for? Before we begin, let’s first have a perceptual understanding of what an archive page is. Please click to view the Sitemap of this site. You can see this archive page listing all the articles and all pages on my blog. On the one hand, if readers want to see the articles on this site at once, it will be much easier to go to this page; on the other hand, it is said to be helpful for SEO. , I have not confirmed it yet. Finally, you may have realized that there is a sitemap.xml in the root directory of the website? Why create such an archive page? In fact, sitemap.xml is for search engine spiders to see, and this archive page is for humans to see. Now let me talk about how to create this page. If you are interested, you can take a look.

Method 1: SQL read database

The archive page effect displayed in Method 1 is the Sitemap effect of this site. In fact, it is to create a custom page template. The operation It is also very simple to use. You do not need to know too much programming technology. The only thing you need to configure is to modify the link of sitemap.xml. The advantage of method one is that I use SQL to read data directly from the database, and only make two database connections, avoiding the use of WordPress built-in functions, which is relatively faster; the disadvantage is that you have to copy The code is relatively long. Let’s take a look at the specific steps:

1. Create a new php file in the current theme directory, name it sitemap.php, and then copy all the code in page.php to sitemap.php
2. Delete all comments at the beginning of sitemap.php, that is, /* and */, and everything between them
3. Change the first

<?php/*
 * Template Name: sitemap
 * @author: Ludou  
 * @Blog  : https://www.ludou.org/
 */
Copy after login

4. Change to:

<div class="myArchive">
<ul>
<?php
/**
 * WordPress分类存档页面
 * 作者:露兜
 * 博客:https://www.ludou.org/
 * 最后修改:2012年8月27日
 */
    $categoryPosts = $wpdb->get_results("
    SELECT post_title, ID, post_name, slug, {$wpdb->prefix}terms.term_id AS catID, {$wpdb->prefix}terms.name AS categoryname
    FROM {$wpdb->prefix}posts, {$wpdb->prefix}term_relationships, {$wpdb->prefix}term_taxonomy, {$wpdb->prefix}terms
    WHERE {$wpdb->prefix}posts.ID = {$wpdb->prefix}term_relationships.object_id
    AND {$wpdb->prefix}terms.term_id = {$wpdb->prefix}term_taxonomy.term_id
    AND {$wpdb->prefix}term_taxonomy.term_taxonomy_id = {$wpdb->prefix}term_relationships.term_taxonomy_id
    AND {$wpdb->prefix}term_taxonomy.taxonomy = &#39;category&#39;
    AND {$wpdb->prefix}posts.post_status = &#39;publish&#39;
    AND {$wpdb->prefix}posts.post_type = &#39;post&#39;
    ORDER BY {$wpdb->prefix}terms.term_id, {$wpdb->prefix}posts.post_date DESC");

    $postID = 0;
    if ( $categoryPosts ) :
        $category = $categoryPosts[0]->catID;
        foreach ($categoryPosts as $key => $mypost) :
            if($postID == 0) {
                echo &#39;<li><strong>分类:</strong> <a title="&#39;.$mypost->categoryname.&#39;" href="&#39;.get_category_link($mypost->catID).&#39;">&#39;.$mypost->categoryname."</a>\n";
                echo &#39;<ul>&#39;;
            }
           
            if($category == $mypost->catID) {          
?>
    <li><a title="<?php echo $mypost->post_title; ?>" href="<?php echo get_permalink( $mypost->ID ); ?>"><?php echo $mypost->post_title; ?></a></li>
<?php
                $category = $mypost->catID;
                $postID++;
            }
            else {
                echo "</ul>\n</li>";
                echo &#39;<li><strong>分类:</strong> <a title="&#39;.$mypost->categoryname.&#39;" href="&#39;.get_category_link($mypost->catID).&#39;">&#39;.$mypost->categoryname."</a>\n";
                echo &#39;<ul>&#39;;
?>
    <li><a title="<?php echo $mypost->post_title; ?>" href="<?php echo get_permalink( $mypost->ID ); ?>"><?php echo $mypost->post_title; ?></a></li>
<?php
                $category = $mypost->catID;
                $postID = 1;
            }
        endforeach;
    endif;
    echo "</ul>\n</li>";
?>

<li><strong>页面</strong>
<ul>
<?php
    // 读取所有页面
    $mypages = $wpdb->get_results("
        SELECT post_title, post_name, ID
        FROM {$wpdb->prefix}posts
        WHERE post_status = &#39;publish&#39;
        AND post_type = &#39;page&#39;");

    if ( $mypages ) :
        foreach ($mypages as $mypage) :
?>
    <li><a title="<?php echo $mypage->post_title; ?>" href="<?php echo get_permalink( $mypage->ID ); ?>"><?php echo $mypage->post_title; ?></a></li>
    <?php endforeach; echo "</ul>\n</li>"; endif; ?>
</ul>
<p><a href="https://www.ludou.org/sitemap.xml">查看 sitemap.xml</a></p>
</div>
Copy after login

Finally, change the last second line of https://www.ludou.org/sitemap. Just change the xml to your own sitemap.xml link. After modification, remember to save it in UTF-8 encoding, otherwise the Chinese may be garbled. Theoretically speaking, there is no big problem if the above code is used directly in your WordPress site, but there may be some problems with the aesthetics. You can just modify it a little with CSS according to your personal ability. In addition, I provide it here. You can refer to a CSS example and copy it to style.css in the theme directory. It may achieve the style effect of the sitemap of this website:

.myArchive {
	line-height:18px;
	margin:1.5em 0;
	color:#555555;
	font-size:14px;
}
.myArchive h2 {
	font-size:16px;
	margin:0 0 10px;
	font-weight:bold;
}
.myArchive ul {
	line-height:21px;
	padding:0 0 0 2em;
}
.myArchive ul li {
	background:none;
	list-style-type:disc;
	margin:0;
	padding-left:10px;
}
.myArchive a {
	color:#2970A6;
	outline:medium none;
	text-decoration:none;
}
.myArchive a:hover {
	text-decoration:underline;
}
.myArchive ul li ul {
	margin:10px 0;
}
.myArchive ul li ul li {
	list-style-type:circle;
}
Copy after login

5. Enter the WordPress management background- Page - Create a page with the title Article Archive (you can name it yourself). Do not fill in the content. You can choose a template on the right and select sitemap.
6. The article archive page is created successfully.

Method 2: Use wp_get_archives function

The operation of Method 2 is also very simple, with less code, but here is just a pure list of all articles, not It will list articles by category like method one, which is a bit monotonous, but if you find method one troublesome, you can try it. The following is the specific operation method:

Steps 1~3 are the same as method 1. Step 4:
Just change the_content(); to the following code:

echo &#39;<ul>&#39;;
wp_get_archives(&#39;type=postbypost&show_post_count=1&#39;);
echo &#39;</ul>&#39;;
Copy after login

Steps 5~6 are the same as method 1.

Method 3: Use plug-ins

There are many plug-ins for WordPress archive pages. If you are interested, please search by yourself. I will not introduce them in detail here.

Recommended learning: "WordPress Tutorial"

The above is the detailed content of Detailed explanation of how to create an article archive page in WordPress. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:ludou.org
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!