An article explaining in detail how to create CMS column blocks in WordPress

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
      // 传递调用参数
      $the_query = new WP_Query(
                  array(
                      &#39;category_name&#39; => &#39;历史&#39;,  // 分类名称
                      &#39;posts_per_page&#39; => 10     // 最多显示的文章数
                  ) );
      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结束都要重置一下
      // 以免影响其他代码
      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:

<div class="box">
   <!-- 分类名称及链接 -->
   <h3>
      <strong><a href="<?php echo get_category_link(get_cat_ID('历史')); ?>">历史</a></strong>
      <em><a href="<?php echo get_category_link(get_cat_ID('历史')); ?>">更多</a></em>
   </h3>
   <!-- 文章列表 -->
   <ul class="iconBoxT14">
   <!--?php
      // 传递调用参数
      $the_query = new WP_Query(
                  array(
                      'category_name' =--> '历史',  // 分类名称
                      'posts_per_page' => 10      // 最多显示的文章数
                  ) );
      if ( $the_query->have_posts() ) {
         while ( $the_query->have_posts() ) {
            $the_query->the_post();

            // get_permalink()是获取文章链接
            // get_the_title()是获取文章标题
            echo '<li><a href="' . get_permalink() .'">' . mb_strimwidth(get_the_title(), 0, 28, &#39;...&#39;) .'</a></li>';
         }
      }
      else {
         echo '<li><a href="#">该分类没有文章</a></li>';
      }
      // WP_Query结束都要重置一下
      // 以免影响其他代码
      wp_reset_postdata();
   ?>
   </ul>
</div>

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!