This article brings you relevant knowledge about WordPress. It mainly talks about how WordPress makes CMS column blocks. Friends who are interested can take a look below. Welcome to collect and learn!

WordPress creates CMS column blocks

Some netizens asked: How to write a separate list for each column on the homepage (similar to a regular cms)? Similar to the following effect:

In fact, this function is relatively easy to implement. You only need to use the built-in WP_Query class of WodPress to call the articles of the specified category. A specific example is used below. Let’s explain how to create CMS column blocks.

1. Making an HTML page

This article will not explain how to make an HTML page. Please learn how to make a column block with specific HTML and CSS by yourself. It is assumed here that your column block is an html code similar to the following:

<div class="box">
   <!-- 分類名稱及鏈接 -->
   <h3>
      <strong><a href="http://歷史分類鏈接/">歷史</a></strong>
      <em><a href="http://歷史分類鏈接/">更多</a></em>
   </h3>

   <!-- 文章列表 -->
   <ul class="iconBoxT14">
      <li><a href="http://文章1鏈接">文章1標題</a></li>
      <li><a href="http://文章2鏈接">文章2標題</a></li>
      <li><a href="http://文章3鏈接">文章3標題</a></li>
      <li><a href="http://文章4鏈接">文章4標題</a></li>
   </ul>
</div>

2. Get the category link

We can use static URLs or dynamic URLs for category links way of obtaining. The static method is to directly change the above http://historical category link/ to your category link. There are many ways to dynamically obtain category links. They can be obtained by category id, category name, or category name. Here we introduce how to get the category link through the category name. Code:

<?php
  $catid = get_cat_ID(&#39;歷史&#39;); // 歷史是分類名稱
  echo get_category_link($catid); // 輸出分類鏈接
?>

Use the above php code to replace http://historical category link/ in the html. The code looks like this:

<strong><a href="<?php echo get_category_link(get_cat_ID(&#39;歷史&#39;)); ?>">歷史</a></strong>
<em><a href="<?php echo get_category_link(get_cat_ID(&#39;歷史&#39;)); ?>">更多</a></em>

3. Get the list of classified articles

We need to dynamically obtain the specified number of articles under this category, and then dynamically output them to the ul list of HTML. The WP_Query class needs to be used here. WP_Query has There are many parameters, but only two simple ones are introduced here. For other parameters, please refer to the documentation or search online.

We will modify the html as follows and add the WP_Query calling code:

<ul class="iconBoxT14">
   <?php
      // 傳遞調(diào)用參數(shù)
      $the_query = new WP_Query( 
                  array(
                      &#39;category_name&#39; => &#39;歷史&#39;,  // 分類名稱
                      &#39;posts_per_page&#39; => 10     // 最多顯示的文章數(shù)
                  ) ); 
      if ( $the_query->have_posts() ) {
         while ( $the_query->have_posts() ) {
            $the_query->the_post();
            
            // get_permalink()是獲取文章鏈接
            // get_the_title()是獲取文章標題
            echo &#39;<li><a href="&#39; . get_permalink() .&#39;">&#39; . get_the_title() .&#39;</a></li>&#39;;
         }
      }
      else {
         echo &#39;<li><a href="#">該分類沒有文章</a></li>&#39;;
      }
      // WP_Query結(jié)束都要重置一下
      // 以免影響其他代碼
      wp_reset_postdata();
?>
</ul>

4. Limit the number of words in the article title

The article title may be very long and exceed determines the scope of the column block. We can limit the number of words in the article title. If it exceeds the number, use.... Replace get_the_title() in point 3 with the following code:

mb_strimwidth(get_the_title(), 0, 28, '...')

A Chinese character is 2 characters, and the above 28 It means that a maximum of 14 Chinese characters can be displayed. If the characters are exceeded, use... instead. Length optional.

Complete code

The following is the complete code after the above modifications, and so on for multiple classification blocks:

   
   

      歷史
      更多
   
   
   

    '歷史',  // 分類名稱
                      'posts_per_page' => 10      // 最多顯示的文章數(shù)
                  ) ); 
      if ( $the_query->have_posts() ) {
         while ( $the_query->have_posts() ) {
            $the_query->the_post();
            
            // get_permalink()是獲取文章鏈接
            // get_the_title()是獲取文章標題
            echo '
' . mb_strimwidth(get_the_title(), 0, 28, '...') .'
';
         }
      }
      else {
         echo '
該分類沒有文章
';
      }
      // WP_Query結(jié)束都要重置一下
      // 以免影響其他代碼
      wp_reset_postdata();
   ?>
   

Recommended learning: " WordPress Tutorial》

The above is the detailed content of An article explaining in detail how to create CMS column blocks in WordPress. For more information, please follow other related articles on the PHP Chinese website!