【架構篇】WordPress佈景主題製作【index.php】

本篇要來介紹製作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() ) : => 代表接下來要執行的項目如果有文章就會執行。

<?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(); ?>