︿

本篇要來介紹製作WordPress佈景主題之一的index.php 檔案,index.php是WordPress相當重要的檔案之一,跟一般建立html一樣主要用來當作首頁使用,可以用來結合之前所建立的像是header.php、footer.php、sidebar.php來豐富自己的首頁。

使用方法很簡單,將之前的 header.php、footer.php、sidebar.php 短碼語法引用到 index.php 首頁內。

<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

但畢竟是首頁,在有了頁首、頁尾及側邊欄之後,我們可以先加入一些文章列表,可以使用判斷式及迴圈來進行加入文章列表。

首先加入一個判斷式 if ( have_posts() ) : => 代表接下來要執行的項目如果有文章就會執行。

注意事項:if 結尾必須要搭配一個 endif 結束這個判斷式。

<?php if ( have_posts() ) : ?>

加入後,再來就是加入 while 循環秀出文章,一樣必須有文章才會執行,這個迴圈只需要包一個標題、圖片、文字摘要就能輕鬆秀出多篇文章列表(跟著WordPress後台設定內閱讀的顯示數量搭配的)。

注意事項:while 結尾必須要搭配一個 endwhile 結束這個迴圈。

<?php while (have_posts() ) : the_post(); ?>

接下來就是加入文章標題 <?php the_title(); ?>,為了可以讓標題能夠點選我們在事先加了一個 <a target="_blank" rel="noopener" href=”<?php the_permalink() ?>”> … </a> 放在標題內,所以就會形成下面的樣子。

<a target="_blank" rel="noopener" href="<?php the_permalink() ?>"><?php the_title(); ?></a>

再來就是秀出文章圖片。

<?php the_post_thumbnail();?>

以及秀出文章摘要。

<?php the_excerpt(); ?>

然後就可以結束文章列表的迴圈。

<?php endwhile;?>

最後再加入 else : => 假如最開始的 if 沒有執行就會使用這個,然後 echo =>列出沒有文章。

最後再加上 if 判斷式結束的 endif 就完成了。

<?php else : ?>
<?php echo '目前沒有文章!';?>
<?php endif; ?>

完整語法結構:

<?php get_header(); ?>
<?php if ( have_posts() ) : ?>
<?php while (have_posts() ) : the_post(); ?>
<a target="_blank" rel="noopener" href="<?php the_permalink() ?>"><?php the_title(); ?></a>
<?php the_post_thumbnail();?>
<?php the_excerpt(); ?>
<?php endwhile;?>
<?php else : ?>
<?php echo '目前沒有文章!';?>
<?php endif; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

關於WordPress系列文章事項
文章版本:
第 2.0 版本,WordPress 系列教學純屬個人經驗,若有錯誤會重新修正並加上版本號碼,目前會持續調整樣式、整理佈景語法,目前版本已調整為先教學基本架構再教學設計樣式,之後會以最終版本告知。

▪ 相關文章

沒有留言

本篇文章目前沒有留言。

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料