WordPress 是一種非常流行的內容管理系統（CMS），用於建立部落格、電子商務商店和其他網站。它的突出之處在於其靈活性，支援多個平臺上成千上萬的免費和付費主題，這有助於加快網站建立過程。
不過，WordPress 的真正威力在於它的定製選項，因為您可以使用各種頁面構建工具和塊主題來調整網站的外觀，以滿足自己的喜好。但是，如果這些選項仍然不能滿足您的特定需求怎麼辦？好訊息是你可以從頭開始開發自己的主題。
本指南將介紹如何開發一個經典的WordPress 主題。您將學習如何逐步開發建立主題，為將來建立更高階的主題打下基礎。
注：您可能會問，什麼是經典 WordPress 主題，什麼是經典主題，是否還有其他型別的主題。如果您突然想到這些問題，那麼直接的答案就是：經典 WordPress 主題使用傳統的 PHP 模板檔案和函式來構建網站結構和佈局。
這與古騰堡編輯器引入的現代塊主題不同，後者使用塊和全站編輯（FSE）來建立和管理主題元素。這兩種型別各有優勢，但本指南側重於經典主題。
先決條件
從零開始開發主題是一個涉及編寫程式碼的技術過程。您應該熟悉以下內容：
此外，建立開發環境也至關重要。您可以通過 WordPress 網站的本地開發軟體建立一個開發環境。
瞭解 WordPress 主題結構
在逐步瞭解建立經典主題的過程之前，瞭解 WordPress 經典主題的結構和所涉及的關鍵檔案至關重要。這些知識將為您的主題開發奠定堅實的基礎。
WordPress 主題目錄
所有 WordPress 主題都儲存在 WordPress 安裝的 wp-content/themes directory 中。每個主題都位於該目錄下的資料夾中。
WordPress 主題中的關鍵檔案
每個經典 WordPress 主題都必須包含兩個主要檔案：
index.php– 這是主模板檔案，是所有其他模板檔案的備用檔案。它是 WordPress 用來顯示內容的核心檔案。style.css– 該檔案包含主題的後設資料和自定義 CSS 樣式。它對於定義主題外觀和提供基本資訊（如名稱、作者和版本）至關重要。
要很好地構建主題並新增功能，可以使用額外的模板檔案，例如本指南中建立的示例主題中使用的經典主題常用的以下模板檔案：
header.php：該檔案可包含主題的頁首部分，包括網站的徽標和導航選單。footer.php：該檔案應包含主題的頁尾部分。-
functions.php：該檔案可用於新增自定義函式、功能和主題支援選項。 single.php：此模板檔案用於顯示單個部落格文章。page.php：用於顯示靜態頁面的模板檔案。
在瞭解了基本檔案及其作用後，讓我們繼續一步步建立經典 WordPress 主題。
如何建立一個經典的 WordPress 主題
有句俗話說得好，最好的學習方法就是邊做邊學。讓我們運用這一原則，建立一個經典的部落格主題，在主頁上以自定義 CSS 風格和附加功能顯示 WordPress 文章。
經典 WordPress 部落格主題。
第 1 步：建立新主題資料夾
在 themes 目錄下建立一個資料夾，如myblogtheme。
第 2 步：新增主題後設資料資訊
接下來，讓我們在 style.css 檔案中設定主題細節。下面是一個可以在 style.css 檔案中新增後設資料資訊的示例：
/*
Theme Name: Wbolt Blog Theme
Author: Joel Olawanle
Author URI: https://www.wbolt.com/tw/
Description: A thoughtfully designed WordPress theme crafted specifically to illustrate the theme creation process. This theme provides a clean, responsive layout suitable for showcasing articles and tutorials, making it an ideal choice for blog posts and educational content related to web development and design.
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/
/*
Theme Name: Wbolt Blog Theme
Author: Joel Olawanle
Author URI: https://www.wbolt.com/tw/
Description: A thoughtfully designed WordPress theme crafted specifically to illustrate the theme creation process. This theme provides a clean, responsive layout suitable for showcasing articles and tutorials, making it an ideal choice for blog posts and educational content related to web development and design.
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/
/* Theme Name: Wbolt Blog Theme Author: Joel Olawanle Author URI: https://www.wbolt.com/tw/ Description: A thoughtfully designed WordPress theme crafted specifically to illustrate the theme creation process. This theme provides a clean, responsive layout suitable for showcasing articles and tutorials, making it an ideal choice for blog posts and educational content related to web development and design. Version: 1.0 License: GNU General Public License v3 or later License URI: http://www.gnu.org/licenses/gpl-3.0.html */
在上面的程式碼中：
- Theme Name：顯示在 WordPress 管理區外觀>主題下的主題名稱。
- Author：顯示主題建立者的姓名。
- Author URI：指向作者網站或簡介的連結。
- Description：概述主題的目的和功能。
- Version：顯示主題的當前版本，以便更新。
- License：指定釋出條款。
- License URI：連結到許可證全文。
有關這些欄位的更多資訊，請參閱《WordPress 主題手冊》。
將這些資訊新增到 style.css 檔案後，在 WordPress 管理區導航到外觀>主題。您將看到新建立的主題列表。點選檢視主題詳情時，您會發現您新增的所有資訊都出現在這裡。
經典部落格主題詳情。
注：在主題的根資料夾中新增 screenshot.png 檔案，它將作為預覽圖片出現在主題頁面上。這樣就能更容易地識別主題的外觀。
現在我們已經設定好了 style.css 檔案，接下來建立其他重要的主題檔案。
第 3 步：為主題建立主模板檔案
index.php 檔案是主題的主模板檔案。您在此新增的任何程式碼都將用於顯示網站的主要內容。
例如，如果你在這裡新增了一些基本的 HTML 程式碼，那麼當你啟用並預覽主題時，所有內容都會顯示出來。不過，您希望通過主題的模板檔案從 WordPress CMS 中提取資訊來顯示，這就是使用 PHP 新增 WordPress 功能的地方。
以下是 index.php 檔案的基本結構：
<?php get_header(); ?>
<main>
<!-- Main content goes here -->
</main>
<?php get_footer(); ?>
<?php get_header(); ?>
<main>
<!-- Main content goes here -->
</main>
<?php get_footer(); ?>
<?php get_header(); ?> <main> <!-- Main content goes here --> </main> <?php get_footer(); ?>
在上述結構中，get_header() 和 get_footer() 用於從各自的模板檔案（header.php 和 footer.php）中提取頁首和頁尾部分。
我們將用正確的程式碼填充 index.php 檔案，但讓我們先處理主題的頁首和頁尾部分。
第 4 步：建立頁首檔案
header.php 檔案顯示網站的頁首部分，通常包括網站徽標和導航選單等元素。它還包括樣式表、指令碼和元標記。下面是我們的 header.php 檔案：
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="<?php bloginfo('charset'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class="header-container">
<div class="my-logo">
<?php
if ( function_exists('the_custom_logo') && has_custom_logo() ) {
the_custom_logo();
} else {
// Fallback image
?>
<a href="<?php echo home_url('/'); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/images/dummy-logo.png" alt="<?php bloginfo('name'); ?>" class="custom-logo" width="100px">
</a>
<?php
}
?>
</div>
<nav>
<?php wp_nav_menu(array(
'theme_location' => 'header-menu',
'menu_class' => 'header-menu'
)); ?>
</nav>
</header>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="<?php bloginfo('charset'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class="header-container">
<div class="my-logo">
<?php
if ( function_exists('the_custom_logo') && has_custom_logo() ) {
the_custom_logo();
} else {
// Fallback image
?>
<a href="<?php echo home_url('/'); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/images/dummy-logo.png" alt="<?php bloginfo('name'); ?>" class="custom-logo" width="100px">
</a>
<?php
}
?>
</div>
<nav>
<?php wp_nav_menu(array(
'theme_location' => 'header-menu',
'menu_class' => 'header-menu'
)); ?>
</nav>
</header>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="<?php bloginfo('charset'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class="header-container">
<div class="my-logo">
<?php
if ( function_exists('the_custom_logo') && has_custom_logo() ) {
the_custom_logo();
} else {
// Fallback image
?>
<a href="<?php echo home_url('/'); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/images/dummy-logo.png" alt="<?php bloginfo('name'); ?>" class="custom-logo" width="100px">
</a>
<?php
}
?>
</div>
<nav>
<?php wp_nav_menu(array(
'theme_location' => 'header-menu',
'menu_class' => 'header-menu'
)); ?>
</nav>
</header>
讓我們對該檔案的每個部分進行分解和解釋，並在 functions.php 中新增相應的函式和鉤子。
讓我們從<head>部分開始。該部分包括基本後設資料、網站標題、字元編碼和wp_head()函式：
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="<?php bloginfo('charset'); ?>">
<?php wp_head(); ?>
</head>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="<?php bloginfo('charset'); ?>">
<?php wp_head(); ?>
</head>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="<?php bloginfo('charset'); ?>">
<?php wp_head(); ?>
</head>
language_attributes(); 函式為 HTML 文件設定語言屬性。然後，wp_head(); 函式至關重要，因為它允許 WordPress 和外掛在 <head> 部分插入重要元素，如樣式表和指令碼。
注：始終用
<?php ...?>標籤封裝 WordPress 函式。
在 functions.php 中新增以下內容，以呼叫樣式表：
function my_custom_theme_enqueue_styles() {
// Enqueue the main stylesheet
wp_enqueue_style('my-custom-theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_custom_theme_enqueue_styles');
function my_custom_theme_enqueue_styles() {
// Enqueue the main stylesheet
wp_enqueue_style('my-custom-theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_custom_theme_enqueue_styles');
function my_custom_theme_enqueue_styles() {
// Enqueue the main stylesheet
wp_enqueue_style('my-custom-theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_custom_theme_enqueue_styles');
函式 wp_enqueue_style() 將主樣式表新增到標題部分。為了避免與其他主題或外掛衝突，我們在函式前新增了 my_custom_theme。你也可以使用 <link> 標籤將其直接新增到 head 標籤中。
同樣，讓我們宣告一個函式，將網站標題新增到 head 部分：
function my_custom_theme_wp_title() {
add_theme_support('title-tag');
}
add_action('after_setup_theme', 'my_custom_theme_wp_title');
function my_custom_theme_wp_title() {
add_theme_support('title-tag');
}
add_action('after_setup_theme', 'my_custom_theme_wp_title');
function my_custom_theme_wp_title() {
add_theme_support('title-tag');
}
add_action('after_setup_theme', 'my_custom_theme_wp_title');
現在，由於使用了 wp_head() 函式，樣式和標題標籤會動態新增到頁首中。你可以使用瀏覽器的開發工具檢查你的 WordPress 網站來驗證這一點。在 <head> 部分，您應該可以看到樣式錶連結和動態生成的標題標記，從而確認它們已被包含在內。
接下來，在正文中，我們宣告瞭導航欄部分，在該部分中，我們顯示了一個虛擬徽標，並確保在 WordPress 網站標識中設定時有一個使用自定義徽標的選項：
<body>
<header class="header-container">
<div class="my-logo">
<?php
if ( function_exists('the_custom_logo') && has_custom_logo() ) {
the_custom_logo();
} else {
// Fallback image
?>
<a href="<?php echo home_url('/'); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/images/dummy-logo.png" alt="<?php bloginfo('name'); ?>" class="custom-logo" width="100px">
</a>
<?php
}
?>
</div>
<body>
<header class="header-container">
<div class="my-logo">
<?php
if ( function_exists('the_custom_logo') && has_custom_logo() ) {
the_custom_logo();
} else {
// Fallback image
?>
<a href="<?php echo home_url('/'); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/images/dummy-logo.png" alt="<?php bloginfo('name'); ?>" class="custom-logo" width="100px">
</a>
<?php
}
?>
</div>
<body>
<header class="header-container">
<div class="my-logo">
<?php
if ( function_exists('the_custom_logo') && has_custom_logo() ) {
the_custom_logo();
} else {
// Fallback image
?>
<a href="<?php echo home_url('/'); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/images/dummy-logo.png" alt="<?php bloginfo('name'); ?>" class="custom-logo" width="100px">
</a>
<?php
}
?>
</div>
如果設定了自定義徽標，徽標部分會使用 _custom_logo() 函式顯示自定義徽標。如果未設定自定義徽標，則顯示預設圖片。
要啟用自定義徽標支援，請在 functions.php 中新增以下程式碼：
function my_custom_theme_setup() {
add_theme_support('custom-logo', array(
'height' => 100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
));
}
add_action('after_setup_theme', 'my_custom_theme_setup');
function my_custom_theme_setup() {
add_theme_support('custom-logo', array(
'height' => 100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
));
}
add_action('after_setup_theme', 'my_custom_theme_setup');
function my_custom_theme_setup() {
add_theme_support('custom-logo', array(
'height' => 100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
));
}
add_action('after_setup_theme', 'my_custom_theme_setup');
該函式增加了對自定義徽標的支援。最後是導航選單部分：
<nav>
<?php wp_nav_menu(array(
'theme_location' => 'header-menu',
'menu_class' => 'header-menu'
)); ?>
</nav>
</header>
<nav>
<?php wp_nav_menu(array(
'theme_location' => 'header-menu',
'menu_class' => 'header-menu'
)); ?>
</nav>
</header>
<nav> <?php wp_nav_menu(array( 'theme_location' => 'header-menu', 'menu_class' => 'header-menu' )); ?> </nav> </header>
wp_nav_menu() 函式用於顯示分配給頁首選單（Header Menu）位置的導航選單。要註冊導航選單，請確保在 functions.php 中包含此程式碼：
register_nav_menus(array(
'header-menu' => __('Header Menu', 'my-custom-theme'),
));
register_nav_menus(array(
'header-menu' => __('Header Menu', 'my-custom-theme'),
));
register_nav_menus(array(
'header-menu' => __('Header Menu', 'my-custom-theme'),
));
下面是 function.php 檔案現在的樣子：
100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
));
}
add_action('after_setup_theme', 'my_custom_theme_setup');
function my_custom_theme_enqueue_styles() {
// Enqueue the main stylesheet
wp_enqueue_style('my-custom-theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_custom_theme_enqueue_styles');
// Function to add the site title to the head section
function my_custom_theme_wp_title() {
add_theme_support('title-tag');
}
add_action('after_setup_theme', 'my_custom_theme_wp_title');
?>
100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
));
}
add_action('after_setup_theme', 'my_custom_theme_setup');
function my_custom_theme_enqueue_styles() {
// Enqueue the main stylesheet
wp_enqueue_style('my-custom-theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_custom_theme_enqueue_styles');
// Function to add the site title to the head section
function my_custom_theme_wp_title() {
add_theme_support('title-tag');
}
add_action('after_setup_theme', 'my_custom_theme_wp_title');
?>
100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
));
}
add_action('after_setup_theme', 'my_custom_theme_setup');
function my_custom_theme_enqueue_styles() {
// Enqueue the main stylesheet
wp_enqueue_style('my-custom-theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_custom_theme_enqueue_styles');
// Function to add the site title to the head section
function my_custom_theme_wp_title() {
add_theme_support('title-tag');
}
add_action('after_setup_theme', 'my_custom_theme_wp_title');
?>
通過這些步驟，您可以確保您的頁首支援自定義徽標並顯示導航選單，從而使其動態化並可通過 WordPress 管理儀表盤輕鬆自定義。
第 5 步：建立頁尾檔案
footer.php 檔案將負責顯示網站的頁尾部分。對於本主題，footer.php 檔案將只顯示版權年份：
<footer>
<p>Copyright © 2024</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>
<footer>
<p>Copyright © 2024</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>
<footer> <p>Copyright © 2024</p> </footer> <?php wp_footer(); ?> </body> </html>
在這個檔案中，我們加入了 wp_footer() 函式，就像在頁首中加入 wp_head() 函式一樣。wp_footer() 函式允許WordPress和外掛在結尾的 </body> 標籤之前插入重要元素，例如指令碼。這對於確保正確載入所有必要資源和網站按預期執行至關重要。
第 6 步：使用 WordPress 迴圈顯示博文
讓我們回到 index.php 檔案，解釋如何使用 WordPress 迴圈來迴圈顯示 WordPress 網站上的文章–這是一種動態顯示內容的強大方法。這就是迴圈的樣子：
<div class="my-posts">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<article class="article-loop">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<h2><?php the_title(); ?></h2>
<div class="flex-info">
<p>By: <?php the_author(); ?></p>
<p><?php the_time('F j, Y'); ?></p>
</div>
<?php the_excerpt(); ?>
</article>
</a>
<?php endwhile; else : ?>
<article>
<p>Sorry, no posts were found!</p>
</article>
<?php endif; ?>
</div>
<div class="my-posts">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<article class="article-loop">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<h2><?php the_title(); ?></h2>
<div class="flex-info">
<p>By: <?php the_author(); ?></p>
<p><?php the_time('F j, Y'); ?></p>
</div>
<?php the_excerpt(); ?>
</article>
</a>
<?php endwhile; else : ?>
<article>
<p>Sorry, no posts were found!</p>
</article>
<?php endif; ?>
</div>
<div class="my-posts">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<article class="article-loop">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<h2><?php the_title(); ?></h2>
<div class="flex-info">
<p>By: <?php the_author(); ?></p>
<p><?php the_time('F j, Y'); ?></p>
</div>
<?php the_excerpt(); ?>
</article>
</a>
<?php endwhile; else : ?>
<article>
<p>Sorry, no posts were found!</p>
</article>
<?php endif; ?>
</div>
上面的程式碼在進入迴圈之前會檢查是否有要顯示的帖子。在迴圈中，WordPress 函式，如 the_title()、the_author()、the_time('F j, Y') 和 the_excerpt()，會顯示每個 WordPress 文章的資訊。
the_post_thumbnail() 函式也用於顯示縮圖，但它被包裹在一個 if 語句中，因此只有當文章有特色圖片時才會顯示。在 functions.php 檔案中，我們必須通過該函式新增對文章縮圖的支援，這樣在建立新文章時就可以選擇上傳特色圖片：
add_theme_support('post-thumbnails');
add_theme_support('post-thumbnails');
add_theme_support('post-thumbnails');
將此新增到我們在 functions.php 檔案中建立的 my_custom_theme_setup() 函式中。這就是 index.php 檔案現在的樣子：
<?php get_header(); ?>
<main>
<div class="hero">
<h1>Welcome to my blog!</h1>
<p>Here, you'll find posts on a variety of topics, including programming, web development, and more.</p>
</div>
<div class="my-posts">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<article class="article-loop">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<h2><?php the_title(); ?></h2>
<div class="flex-info">
<p>By: <?php the_author(); ?></p>
<p><?php the_time('F j, Y'); ?></p>
</div>
<?php the_excerpt(); ?>
</article>
</a>
<?php endwhile; else : ?>
<article>
<p>Sorry, no posts were found!</p>
</article>
<?php endif; ?>
</div>
</main>
<?php get_footer(); ?>
<?php get_header(); ?>
<main>
<div class="hero">
<h1>Welcome to my blog!</h1>
<p>Here, you'll find posts on a variety of topics, including programming, web development, and more.</p>
</div>
<div class="my-posts">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<article class="article-loop">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<h2><?php the_title(); ?></h2>
<div class="flex-info">
<p>By: <?php the_author(); ?></p>
<p><?php the_time('F j, Y'); ?></p>
</div>
<?php the_excerpt(); ?>
</article>
</a>
<?php endwhile; else : ?>
<article>
<p>Sorry, no posts were found!</p>
</article>
<?php endif; ?>
</div>
</main>
<?php get_footer(); ?>
<?php get_header(); ?>
<main>
<div class="hero">
<h1>Welcome to my blog!</h1>
<p>Here, you'll find posts on a variety of topics, including programming, web development, and more.</p>
</div>
<div class="my-posts">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<article class="article-loop">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<h2><?php the_title(); ?></h2>
<div class="flex-info">
<p>By: <?php the_author(); ?></p>
<p><?php the_time('F j, Y'); ?></p>
</div>
<?php the_excerpt(); ?>
</article>
</a>
<?php endwhile; else : ?>
<article>
<p>Sorry, no posts were found!</p>
</article>
<?php endif; ?>
</div>
</main>
<?php get_footer(); ?>
你會注意到新增了一些靜態程式碼，這些程式碼將被設計成一個橫幅，顯示 “Welcome to my blog” 和一段文字。
第 7 步：建立單個文章模板
在設計主題之前，我們先定義一個基本模板，以便在點選主題中的任何頁面或文章時顯示單個部落格文章。為此，請在主題根目錄下建立一個 single.php 檔案，並新增以下程式碼：
<?php get_header(); ?>
<main>
<section class="single__post">
<article class="article-full">
<div class="single__post-header">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<h2><?php the_title(); ?></h2>
<p>By: <?php the_author(); ?> on <?php the_time('F j, Y'); ?></p>
</div>
<?php the_content(); ?>
</article>
</section>
</main>
<?php get_footer(); ?>
<?php get_header(); ?>
<main>
<section class="single__post">
<article class="article-full">
<div class="single__post-header">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<h2><?php the_title(); ?></h2>
<p>By: <?php the_author(); ?> on <?php the_time('F j, Y'); ?></p>
</div>
<?php the_content(); ?>
</article>
</section>
</main>
<?php get_footer(); ?>
<?php get_header(); ?>
<main>
<section class="single__post">
<article class="article-full">
<div class="single__post-header">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<h2><?php the_title(); ?></h2>
<p>By: <?php the_author(); ?> on <?php the_time('F j, Y'); ?></p>
</div>
<?php the_content(); ?>
</article>
</section>
</main>
<?php get_footer(); ?>
在上面的程式碼中，get_header() 和 get_footer() 包括頁首和頁尾。在程式碼的其他部分，WordPress 函式顯示動態內容。
第 8 步：為 WordPress 頁面建立模板檔案
就像為單個 WordPress 文章建立模板一樣，您也可以建立一個模板來顯示 WordPress 頁面。為此，請在主題資料夾根目錄下建立一個 page.php 檔案，並新增以下程式碼：
<?php get_header(); ?>
<main class="wrap">
<section class="">
<article class="article-full">
<div class="page-header">
<h1><?php the_title(); ?></h1>
</div>
<?php the_content(); ?>
</article>
</section>
</main>
<?php get_footer(); ?>
<?php get_header(); ?>
<main class="wrap">
<section class="">
<article class="article-full">
<div class="page-header">
<h1><?php the_title(); ?></h1>
</div>
<?php the_content(); ?>
</article>
</section>
</main>
<?php get_footer(); ?>
<?php get_header(); ?> <main class="wrap"> <section class=""> <article class="article-full"> <div class="page-header"> <h1><?php the_title(); ?></h1> </div> <?php the_content(); ?> </article> </section> </main> <?php get_footer(); ?>
第 9 步：設計主題風格
到目前為止，我們已經為主題建立了一些基本模板。現在，是時候新增自定義樣式，讓它看起來更漂亮了。您可以將樣式新增到主題資料夾中的 style.css 檔案。要開始使用，請從本指南中建立的主題示例的 GitHub gist 中複製樣式。
第 10 步：測試並部署主題
到目前為止，您已經成功建立了一個 WordPress 主題。現在，是測試和部署的時候了。
首先，進入 WordPress 管理儀表板，選擇 外觀>主題，確保主題已啟用。如果尚未啟用，請單擊主題並將其啟用。您還可以點選自定義按鈕來設定網站標識、調整選單和其他設定，以確保您的網站顯示正確。
一旦你對主題滿意，你有幾個選項來部署它：
- 將本地網站推送到網上：如果您在本地環境進行開發，您可以輕鬆地將網站推送到暫存環境。這樣，在將主題推送到實時環境之前，您就可以在類似於實時的環境中測試主題。
- 打包並上傳主題：或者，您也可以將主題打包成壓縮資料夾，然後上傳到線上網站。在 WordPress 管理儀表板中進入外觀>主題>安裝新主題>上傳主題，然後選擇要上傳的壓縮主題檔案。
在暫存環境中對主題進行全面測試，確保在正式上線前一切正常。這一步對於發現潛在問題並確保網站外觀和功能完美至關重要。
小結
在本文中，我們從零開始建立了一個經典的 WordPress 主題。我們介紹瞭如何設定基本檔案、新增自定義樣式以及為單個文章和頁面建立模板。
如果您想讓自己的網站擁有自己想要的功能和外觀，那麼開發 WordPress 主題就是您的最佳選擇。但是，如果您缺乏時間、技能或意願，聘請專業人員可以幫助您高效地實現自己的願景。
評論留言