wordpress新增首頁最新分類文章

WordPress在首頁新增3篇最新文章

小編其實有試著安裝排版的外掛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>

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *