search
HomeCMS TutorialWordPressDetailed explanation of how to create an article archive page in WordPress

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/
 */

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>

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;
}

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

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!

Statement
This article is reproduced at:露兜即刻. If there is any infringement, please contact admin@php.cn delete
Can I learn WordPress in 3 days?Can I learn WordPress in 3 days?Apr 09, 2025 am 12:16 AM

Can learn WordPress within three days. 1. Master basic knowledge, such as themes, plug-ins, etc. 2. Understand the core functions, including installation and working principles. 3. Learn basic and advanced usage through examples. 4. Understand debugging techniques and performance optimization suggestions.

Is WordPress a CMS?Is WordPress a CMS?Apr 08, 2025 am 12:02 AM

WordPress is a Content Management System (CMS). It provides content management, user management, themes and plug-in capabilities to support the creation and management of website content. Its working principle includes database management, template systems and plug-in architecture, suitable for a variety of needs from blogs to corporate websites.

What is the WordPress good for?What is the WordPress good for?Apr 07, 2025 am 12:06 AM

WordPressisgoodforvirtuallyanywebprojectduetoitsversatilityasaCMS.Itexcelsin:1)user-friendliness,allowingeasywebsitesetup;2)flexibilityandcustomizationwithnumerousthemesandplugins;3)SEOoptimization;and4)strongcommunitysupport,thoughusersmustmanageper

Should I use Wix or WordPress?Should I use Wix or WordPress?Apr 06, 2025 am 12:11 AM

Wix is ​​suitable for users who have no programming experience, and WordPress is suitable for users who want more control and expansion capabilities. 1) Wix provides drag-and-drop editors and rich templates, making it easy to quickly build a website. 2) As an open source CMS, WordPress has a huge community and plug-in ecosystem, supporting in-depth customization and expansion.

How much does WordPress cost?How much does WordPress cost?Apr 05, 2025 am 12:13 AM

WordPress itself is free, but it costs extra to use: 1. WordPress.com offers a package ranging from free to paid, with prices ranging from a few dollars per month to dozens of dollars; 2. WordPress.org requires purchasing a domain name (10-20 US dollars per year) and hosting services (5-50 US dollars per month); 3. Most plug-ins and themes are free, and the paid price ranges from tens to hundreds of dollars; by choosing the right hosting service, using plug-ins and themes reasonably, and regularly maintaining and optimizing, the cost of WordPress can be effectively controlled and optimized.

Is WordPress still free?Is WordPress still free?Apr 04, 2025 am 12:06 AM

The core version of WordPress is free, but other fees may be incurred during use. 1. Domain names and hosting services require payment. 2. Advanced themes and plug-ins may be charged. 3. Professional services and advanced features may be charged.

Is WordPress easy for beginners?Is WordPress easy for beginners?Apr 03, 2025 am 12:02 AM

WordPress is easy for beginners to get started. 1. After logging into the background, the user interface is intuitive and the simple dashboard provides all the necessary function links. 2. Basic operations include creating and editing content. The WYSIWYG editor simplifies content creation. 3. Beginners can expand website functions through plug-ins and themes, and the learning curve exists but can be mastered through practice.

Why would anyone use WordPress?Why would anyone use WordPress?Apr 02, 2025 pm 02:57 PM

People choose to use WordPress because of its power and flexibility. 1) WordPress is an open source CMS with strong ease of use and scalability, suitable for various website needs. 2) It has rich themes and plugins, a huge ecosystem and strong community support. 3) The working principle of WordPress is based on themes, plug-ins and core functions, and uses PHP and MySQL to process data, and supports performance optimization.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment