小編其實有試著安裝排版的外掛Elementor,想說Wordpress主打的就是不會程式也可以架網站,外掛就是最簡單快速的方式,但很不幸的,他的新增最新文章是需要升級到Pro版才有提供,我想說What!!不過只是個幾篇的最新文章,就要我付錢太不合理了吧! 而且搞不好其他的功能我都用不到,於是身為沒有摳摳的社畜,只好又一次的只能靠自己。
雖然Wordpress本身的後台就有提供”近期文章”的小工具(widget),但不太符合小編的需求:
第一、他沒有分類,完全是最新文章
不管是什麼主題的內容,就是給你抓最新的前十篇
第二、只有標題,沒有敘述以及圖片
說真的,在這個圖片主宰的社會裡面,只看文字真的很痛苦,沒有敘述及圖片,真的無法只透過標題就點進去,圖片對於增加點擊還是有一定的效益。
進入正題
小編這次是利用sidebar-home.php去改,也就是你在後台會看到放小工具(Widget)的地方。
話不多說先上程式。(排版的部分主要是利用bootstrap來去控制他的排版)
先介紹php的部分
1. 選擇要抓取哪一分類的文章、要抓幾篇
<?php
/ the query
$catch = new WP_Query( array(
'category_name' => 'movie',
'posts_per_page' => 3,
));
?>
這個部分主要是去抓看你要新增哪一個分類的最新文章,小編在這裡是新增分類為movie的最新文章,抓取3篇。
2. 在清單上的每一個物件上加上需要的元素,如: 連結、標題、縮圖、敘述
在recent_movie_list這個div裡面將每個item客製化,自訂你要的元素,下方是我加上每篇文章的永久連結、文章縮圖、標題以及文章簡介,如果沒有加上連結,這個清單就真的只是清單而已,無法連到對應的頁面。
<div class="recent_movie_list">
//加入每篇文章的連結
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
//每篇文章敘述前面新增縮圖
<?php the_post_thumbnail( 'medium', array( 'class' => 'thumbnail pull-left' )); ?>
//文字敘述的部分
<div>
//標題
<h3><?php the_title(); ?></h3>
//簡介
<?php the_excerpt(); ?>
</div>
</a>
</div>
以下就是不用外掛,自製在首頁新增最新文章分類的完整程式碼,主要還是先把文章都確定抓出來之後,在開始寫自訂的html架構以及CSS。
<div class="home-widget-area row">
<div class="container">
<div class="col-12 col-md-9 home-widget recent_movie">
<h2>最新電影開箱</h2>
</div>
<div class="col-sm-6 col-md-9 home-widget">
<?php
// the query
$catch = new WP_Query( array(
'category_name' => 'movie',
'posts_per_page' => 3,
));
?>
<?php if ( $catch->have_posts() ) : ?>
<?php while ( $catch->have_posts() ) : $the_query->the_post(); ?>
<div class="recent_movie_list">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
<?php the_post_thumbnail( 'medium', array( 'class' => 'thumbnail pull-left' )); ?>
<div>
<h3><?php the_title(); ?></h3>
<?php the_excerpt(); ?>
</div>
</a>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else : ?>
<p><?php __('目前沒有新的電影評論'); ?></p>
<?php endif; ?>
</div>
</div>
</div>