如何從頭開始構建WordPress主題：基礎知識-＆＃＆按-PHP中文網

首頁

CMS教程

＆＃＆按

如何從頭開始構建WordPress主題：基礎知識

Lisa Kudrow

Feb 09, 2025 am 10:43 AM

如何從頭開始構建WordPress主題：基礎知識

在本教程中，我們將深入探索WordPress主題文件結構，並學習如何從頭開始創建基本的WordPress主題。

在本系列的第一部分中，我們介紹了WordPress主題，以及與WordPress主題開發有關的基本術語。我們介紹了

模板

，partials，>模板層次結構， wordpress post types ，style.css.css stylelesheet，wordpress，wordpress，wordpress， filter和操作掛鉤， wordpress loop ，有條件標籤，我們簡要介紹了一個典型的簡單WordPress主題文件結構。

鑰匙要點

創建裸露的最低主題

>我們要做的第一件事是安裝一個插件，該插件將使我們能夠批量創建WordPress帖子和其他內容。這樣，我們將能夠快速填充我們的開發網站而不會浪費太多時間。一個實現此目的的插件是Gustavo Bordoni的FakerPress，可在WordPress插件存儲庫中提供。

我們通過WP-CLI快速安裝和激活插件。

>現在，當我們登錄到管理儀表板時，我們將看到FakerPress已安裝，我們可以在批處理中創建各種內容，包括我們擁有的任何自定義帖子類型。

現在，使用此插件，我們將創建一些虛假的內容。這是結果，使用默認如何從頭開始構建WordPress主題：基礎知識二十七

wordpress主題：

>現在，我們迅速潛入並設置了一個由catch-all index.php文件和style.css組成的裸露的最低主題，我們對於WordPress模板系統需要它以識別主題：如何從頭開始構建WordPress主題：基礎知識 >

這是style.css，目前僅由元CSS評論組成。這些評論是需要的。

這是index.php文件。它將暫時捕獲所有請求：

<span>/*
</span><span>Theme Name: Botega Simple Theme
</span><span>Theme URI: https://botega.co.uk
</span><span>Author: Tonino Jankov
</span><span>Author URI: https://botega.co.uk
</span><span>Description: Basic WordPress theme for Sitepoint theme building tutorial
</span><span>Text Domain: bsimple
</span><span>Version: 1.0.0
</span><span>License: GNU General Public License v2 or later
</span><span>*/
</span>

>我們現在上傳並激活我們擁有的最小主題。我使用wp-cli激活它：

現在，WordPress可以看到該主題，並且處於活動狀態：>

如何從頭開始構建WordPress主題：基礎知識

我們尚未提供屏幕截圖，因此後端中的顯示是基本的。

如果我們現在在瀏覽器中訪問我們的網站，這就是我們所看到的：

如何從頭開始構建WordPress主題：基礎知識顯然，我們有工作要做。

如果我們查看主頁的源代碼，我們將看到WP_head（）函數在中輸出了許多默認的WordPress標籤，例如CSS，JavaScript，link和Meta標籤。 >

> Bloginfo（）函數用於輸出網站信息。 >

我們的主頁是空的，因為我們沒有在循環中輸出任何內容 - WordPress在其所有模板中使用的模式用於輸出內容。關於循環的法典頁面深入詳細信息。循環的典型結構（基於php >而

>控制結構）看起來像這樣：

我們需要在用內容循環時填充它 - 或用內容輸出的WordPress標籤。

如果我們通過添加the_title（），the_excerpt（）更改循環，然後添加html markup和the_id（），以使其看起來像這樣：

> >現在，我們將在主頁上獲取帖子列表，而沒有應用樣式：

<span><span><?php </span></span><span><span>/**
</span></span><span><span> *
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> */
</span></span><span><span>?></span>
</span>
<span><span>
</span><span><span><span> <span><span><?php language_attributes(); ?></span></span>></span>
</span><span><span><span>></span>
</span>    <span><span><span><title>></title></span><span><?php bloginfo('name'); ?></span><span><span></span>></span>
</span>    <span><span><span><link> rel<span>="stylesheet"</span> href<span>="<span><?php bloginfo('stylesheet_url'); ?></span>"</span>></span>
</span>    <span><span><?php wp_head(); ?></span>
</span><span><span><span></span>></span>
</span><span><span><span>></span>
</span>
      <span><span><span><header>></header></span>
</span>         <span><span><span><h1 id="gt">></h1></span><span><?php bloginfo('name'); ?></span><span><span></span>></span>
</span>         <span><span><span><h3 id="gt">></h3></span><span><?php bloginfo('description'); ?></span><span><span></span>></span>
</span>      <span><span><span></span>></span>
</span>
        <span><span><?php </span></span><span>        <span>if ( have_posts() ) :
</span></span><span>            <span>/* Start the Loop */
</span></span><span>            <span>while ( have_posts() ) :
</span></span><span>                <span>the_post();
</span></span><span>            <span>endwhile;
</span></span><span>        <span>endif;
</span></span><span>        <span>?></span>
</span>
<span><span><span></span>></span>
</span></span></span></span></span></span></span></span></span></span></span></span>

WordPress顯示一個博客頁面 - 所有博客文章的存檔頁面 - 默認情況下。

如果我們現在訪問單個帖子URL - 類似於http://my-website.com/2018/11/14/sapiente-ad-facilis-quo-repellat-quos/-我們會看到這樣的東西：

<span><span><?php </span></span><span><span>if ( have_posts() ) {
</span></span><span>    <span>while ( have_posts() ) {
</span></span><span>        <span>the_post();
</span></span><span>        <span>//
</span></span><span>        <span>// Post Content here
</span></span><span>        <span>//
</span></span><span>    <span>} // end while
</span></span><span><span>} // end if
</span></span><span><span>?></span>
</span></span>

如何從頭開始構建WordPress主題：基礎知識我們的

loop

，儘管很粗糙，但實際上是有效的。

>將我們的主題構造到文件中並應用Bootstrap Markup

>現在，我們將使用Twitter Bootstrap標記來實現partials，例如header.php and footer.php和各種專用模板，以便我們更輕鬆地進行樣式。

>從index.php開始，我們用get_header（）和get_footer（）函數替換循環之前和之後的所有內容如何從頭開始構建WordPress主題：基礎知識

這意味著我們需要在我們提到的部分中提供所有內容。 >

>與我們所說的一致 - 我們將使用Twitter bootstrap主題 - 我們的header.php文件將看起來像這樣：

我們的footer.php文件將看起來像：

<span>/*
</span><span>Theme Name: Botega Simple Theme
</span><span>Theme URI: https://botega.co.uk
</span><span>Author: Tonino Jankov
</span><span>Author URI: https://botega.co.uk
</span><span>Description: Basic WordPress theme for Sitepoint theme building tutorial
</span><span>Text Domain: bsimple
</span><span>Version: 1.0.0
</span><span>License: GNU General Public License v2 or later
</span><span>*/
</span>

我們正在使用HTML標籤中的Bootstrap類，以及WP_head（）和WP_FOOTER（）FIRE WP_HEAD和WP_FOOTER ACTION HOCKS。

我們將要做的接下來的事情是從startbootstrap.com上包括Clean Bootstrap模板的CSS和JavaScript，該模板帶有MIT許可證，因此我們可以自由使用。這樣，我們的主題將帶有預定義的樣式，響應能力，我們仍然能夠進一步設置。

> functions.php

> functions.php是一個帶有任何嚴重WordPress主題的文件。這是一個充當窮人插件存檔的文件。它允許我們在主題中包含任何自定義功能。

>我們首先使用此文件包括Bootstrap和Bootstrap主題的樣式和腳本：

這是一種在主題中包含腳本和样式的WordPress-事務方式。它允許我們指定腳本的位置將被登錄（標題與頁腳）和重點的優先級。我們甚至可以指定每個特定資源對彼此的依賴性。這將確保資源將以正確的順序加載。

<span><span><?php </span></span><span><span>/**
</span></span><span><span> *
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> */
</span></span><span><span>?></span>
</span>
<span><span>
</span><span><span><span> <span><span><?php language_attributes(); ?></span></span>></span>
</span><span><span><span>></span>
</span>    <span><span><span><title>></title></span><span><?php bloginfo('name'); ?></span><span><span></span>></span>
</span>    <span><span><span><link> rel<span>="stylesheet"</span> href<span>="<span><?php bloginfo('stylesheet_url'); ?></span>"</span>></span>
</span>    <span><span><?php wp_head(); ?></span>
</span><span><span><span></span>></span>
</span><span><span><span>></span>
</span>
      <span><span><span><header>></header></span>
</span>         <span><span><span><h1 id="gt">></h1></span><span><?php bloginfo('name'); ?></span><span><span></span>></span>
</span>         <span><span><span><h3 id="gt">></h3></span><span><?php bloginfo('description'); ?></span><span><span></span>></span>
</span>      <span><span><span></span>></span>
</span>
        <span><span><?php </span></span><span>        <span>if ( have_posts() ) :
</span></span><span>            <span>/* Start the Loop */
</span></span><span>            <span>while ( have_posts() ) :
</span></span><span>                <span>the_post();
</span></span><span>            <span>endwhile;
</span></span><span>        <span>endif;
</span></span><span>        <span>?></span>
</span>
<span><span><span></span>></span>
</span></span></span></span></span></span></span></span></span></span></span></span>

我們在這裡使用WP_ENQUEUE_SCRIPTS ACTION HONK。我們可以在法典中了解更多有關它的信息。（我們在上一篇文章中介紹了動作鉤。）在我們的自定義bsimple_scripts（）函數（我們將其連接到wp_enque_scripts action Hook）中

>我們可以看到我們正在從Internet（Google字體）和主題文件夾中加載樣式。因此，我們在主題文件夾中創建CSS，JS和WebFonts目錄，並複制Bootstrap主題的CSS，JavaScript文件以及Fontawesome Icon-Font Files。

>我們還將index.php文件複製到Archive.php，page.php和single.php文件，我們將修改。

現在，我們的主題文件結構將看起來像這樣：

調整標記

>如果我們現在訪問主頁，我們將在頂部看到菜單- 儘管它和頁面仍然是一團糟- 因為標題中的以下行仍在輸出包裝在DIV及其自己的UL中的菜單標籤，因此不受我們的bootstrap樣式的影響：如何從頭開始構建WordPress主題：基礎知識

為了解決這個問題，我們首先需要轉到我們的WP-Admin儀表板，然後在定制器中創建一個新菜單。我們將其命名

頂部菜單

。

<span><span><?php </span></span><span><span>if ( have_posts() ) {
</span></span><span>    <span>while ( have_posts() ) {
</span></span><span>        <span>the_post();
</span></span><span>        <span>//
</span></span><span>        <span>// Post Content here
</span></span><span>        <span>//
</span></span><span>    <span>} // end while
</span></span><span><span>} // end if
</span></span><span><span>?></span>
</span></span>

> https://uploads.sitepoint.com/wp-content/uploads/2018/11/11/1542595661customizer.mp4

我們完成此操作後，我們將轉到header.php文件刪除以下行：>

<span>/*
</span><span>Theme Name: Botega Simple Theme
</span><span>Theme URI: https://botega.co.uk
</span><span>Author: Tonino Jankov
</span><span>Author URI: https://botega.co.uk
</span><span>Description: Basic WordPress theme for Sitepoint theme building tutorial
</span><span>Text Domain: bsimple
</span><span>Version: 1.0.0
</span><span>License: GNU General Public License v2 or later
</span><span>*/
</span>

在他們的位置，我們將這些行：

<?php /** * * @package Botega_Scratch_Theme */ ?> <?php language_attributes(); ?>> > <title>></title><?php bloginfo('name'); ?>> <link> rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"> <?php wp_head(); ?> > > <header>></header> <h1 id="gt">></h1><?php bloginfo('name'); ?>> <h3 id="gt">></h3><?php bloginfo('description'); ?>> > <?php if ( have_posts() ) : /* Start the Loop */ while ( have_posts() ) : the_post(); endwhile; endif; ?> > 

>這將為我們刪除DIV標籤和UL標籤的重複，但是我們仍然需要將NAV-ITEM和NAV-LINK應用於我們的菜單項（分別為LI和A標籤）。我們將如何解決？ WP_NAV_MENU不為此提供參數。我們將使用NAV_MENU_LINK_ATTRIBUTES和NAV_MENU_CSS_CLASS過濾器掛鉤。我們將其放入我們的functions.php文件中：
>
<?php if ( have_posts() ) { while ( have_posts() ) { the_post(); // // Post Content here // } // end while } // end if ?> 

現在，我們可以在header.php中的wp_nav_menu中指定新屬性：

<?php if ( have_posts() ) : while ( have_posts() ): the_post(); ?> <div> id="post-<?php the_ID(); ?>"> <h2 id="gt">></h2><?php the_title(); ?>> <div> class="post-excerpt"><?php the_excerpt(); ?> </div>> </div>> <?php endwhile; endif; ?> 

現在，我們的頂級菜單鏈接可以利用Bootstrap主題的CSS中已經定義的樣式。

動態標頭

>能夠使用動態標頭- 即首頁的不同標頭，其他選定頁面或檔案- 我們將在我們的function.php文件中定義dynamic_header（）函數， 'll輸出我們的標頭標記取決於訪問者加載的頁面。
>現在我們的header.php文件將如下結束：
>

<?php /** * * @package Botega_Scratch_Theme */ get_header(); ?> <?php if ( have_posts() ) : while ( have_posts() ): the_post(); ?> <div> id="post-<?php the_ID(); ?>"> <h2 id="gt">></h2><?php the_title(); ?>> <div> class="post-excerpt"><?php the_excerpt(); ?> </div>> </div>> <?php endwhile; endif; ?> <?php get_footer(); ?> 
我們還將定義這樣的功能：
>

<?php /** * The header for our theme. * * @package Botega_Scratch_Theme * */ ?> > > <meta> charset="<?php bloginfo( 'charset' ); ?>"> <meta> name="viewport" content="width=device-width, initial-scale=1"> <?php wp_head(); ?> > <?php body_class(); ?>> <nav> class="navbar navbar-default navbar-custom navbar-fixed-top"></nav> <div> class="container-fluid"> <div> class="navbar-header page-scroll"> <a> href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home" class="navbar-brand"></a><?php bloginfo( 'name' ); ?>> </div>> <div> class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul> class="nav navbar-nav navbar-right"></ul> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'items_wrap' => '%3$s' ) ); ?> > </div>> </div>> > <div> class="container"> <div> class="row"> >能夠使用當前的所有URL或發布數據（例如在循環中），我們聲明了$ post actible global。然後，我們只用填充標頭HTML填充不同的頁面或請求案例，我們將在以後完成。這為真正動態的標題奠定了基礎。 >我們需要確保即使登錄用戶時，我們的頭版也將看起來不錯。 WordPress登錄訪問者，即使在訪問者訪問時也顯示<anc.> admin bar首頁。因為它具有位置：修復了，它覆蓋了我們網站上的頂部區域，涵蓋了那裡的任何內容，因此我們需要為我們的頂級菜單指定偏移。 我們將其添加到我們的style.css： >這確保#mainnav（我們的菜單容器）從頂部具有足夠的偏移，因此在用戶登錄時未覆蓋。 WordPress在這些情況下添加了登錄名和管理式式類別，因此我們可以很容易地定位它。 <pre class="brush:php;toolbar:false"><?php /** * Footer template partial * * @package Botega_Scratch_Theme * */ ?>

>
>

class="container">
class="row">
class="col-lg-8 col-md-10 mx-auto">
>
>
> > > >
>我們可以看到我們解決了CSS中的兩種情況 - 一個默認情況，另一種用於較小的屏幕。這是因為WordPress在移動設備上輸出更寬的管理欄，因此我們需要提供46px偏移。
在移動設備上，我們現在應該有一個響應迅速的JavaScript供電下拉菜單：>

結論
在第二部分中，關於從頭開始創建WordPress主題的第二部分中，我們創建了一個非常基本的WordPress主題，並將Bootstrap樣式和腳本包括在其中。我們調整了菜單輸出以適合我們的預定義樣式。我們還將標題和頁腳輸出分為各自的部分。

> functions.php文件（主題開發中的關鍵文件）是我們介紹和利用的另一個主題。標題輸出已分為自己的函數，該功能將使用頁面訪問的細節和站點所有者定義的變量來確定最終輸出。
在指南的第三部分中，我們將完成特定的模板，為我們的主題功能和部分提供更好的結構，並完成我們網站的樣式。

在本系列中有三篇有關從頭開始構建WordPress主題的文章：>

>在主題結構
上
主題基礎

完善主題

經常詢問有關從頭開始構建WordPress主題的問題（常見問題解答）
>從頭開始構建WordPress主題的先決條件是什麼？這些是WordPress主題開發中使用的核心技術。此外，您應該熟悉WordPress平臺本身，包括其文件結構和模板層次結構。在計算機上設置了本地開發環境，例如MAMP或XAMPP，在構建主題時可以測試主題。

如何開始從scratch構建WordPress主題？如何將自定義功能添加到我的WordPress主題中？

>您可以通過WordPress主題添加自定義功能在主題目錄中創建functions.php文件。該文件的作用像插件，使您可以在主題中添加自定義功能和功能。您可以使用它來註冊導航菜單，添加側邊欄，排名樣式和腳本等等。 'LL需要在CSS代碼中使用媒體查詢。媒體查詢允許您根據用戶屏幕的大小應用不同的樣式。這意味著您可以為台式機，平板電腦和移動設備創建不同的佈局。您還需要確保圖像響應迅速，您可以將其寬度設置為100％。

>如何自定義WordPress主題的標頭和頁腳？

>您可以通過在主題目錄中創建headpress.php文件和footer.php文件來自定義WordPress主題的標題和頁腳。 header.php文件是您為標題編寫HTML和PHP代碼的地方，footer.php文件是您為頁腳編寫代碼的地方。然後，您可以使用get_header（）和get_footer（）functions。通過在您的functions.php文件中使用register_post_type（）函數的自定義帖子類型為您的WordPress主題。此功能使您可以定義具有自己的標籤，功能和功能的新帖子類型。然後，您可以創建一個單{postType} .php文件和一個存檔 - {postType} .php文件來控制您自定義帖子類型的顯示。

>如何將導航菜單添加到我的WordPress主題？

>您可以在您的WordPress主題中添加導航菜單WordPress主題通過在您的functions.php文件中使用register_nav_menus（）函數。此功能使您可以在主題中註冊一個或多個導航菜單。然後，您可以使用wp_nav_menu（）函數在其他模板文件中顯示您的菜單。

>如何自定義我的WordPress主題中的循環？ >您可以在WordPress主題中自定義循環通過在index.php文件或其他模板文件中修改循環代碼。循環是WordPress用於顯示帖子的PHP代碼。您可以將其自定義以更改顯示帖子的顯示方式，顯示的帖子數量等等。

如何更新WordPress主題？

>您可以通過更改來更新WordPress主題到您的主題文件，然後將它們上傳到您的WordPress網站。如果您使用的是子主題，則可以更新父主題而不會失去更改。如果您不使用兒童主題，則應在更新主題之前對主題進行備份，因為更新將覆蓋您的更改。

以上是如何從頭開始構建WordPress主題：基礎知識的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

wordpress怎麼加評論框Apr 20, 2025 pm 12:15 PM

在 WordPress 網站上啟用評論功能，可以為訪客提供參與討論和分享反饋的平台。為此，請按照以下步驟操作：啟用評論：在儀錶盤中，導航至“設置”>“討論”，並選中“允許評論”複選框。創建評論表單：在編輯器中，單擊“添加塊”並蒐索“評論”塊，將其添加到內容中。自定義評論表單：通過設置標題、標籤、佔位符和按鈕文本來定制評論塊。保存更改：單擊“更新”以保存評論框並將其添加到頁面或文章中。

wordpress怎麼複製子站Apr 20, 2025 pm 12:12 PM

如何復制 WordPress 子站？步驟：在主站創建子站。在主站克隆子站。將克隆導入目標位置。更新域名（可選）。分開插件和主題。

wordpress怎麼寫頁頭Apr 20, 2025 pm 12:09 PM

在WordPress中創建自定義頁頭的步驟如下：編輯主題文件“header.php”。添加您的網站名稱和描述。創建導航菜單。添加搜索欄。保存更改並查看您的自定義頁頭。

wordpress評論怎麼顯示Apr 20, 2025 pm 12:06 PM

WordPress 網站中啟用評論功能：1. 登錄管理面板，轉到 "設置"-"討論"，勾選 "允許評論"；2. 選擇顯示評論的位置；3. 自定義評論表單；4. 管理評論，批准、拒絕或刪除；5. 使用 <?php comments_template(); ?> 標籤顯示評論；6. 啟用嵌套評論；7. 調整評論外形；8. 使用插件和驗證碼防止垃圾評論；9. 鼓勵用戶使用 Gravatar 頭像；10. 創建評論指

wordpress怎麼上傳源碼Apr 20, 2025 pm 12:03 PM

可以通過 WordPress 安裝 FTP 插件，配置 FTP 連接，然後使用文件管理器上傳源碼。步驟包括：安裝 FTP 插件、配置連接、瀏覽上傳位置、上傳文件、檢查上傳成功。

wordpress代碼怎麼複製Apr 20, 2025 pm 12:00 PM

如何復制 WordPress 代碼？從管理界面複製：登錄 WordPress 網站，導航到目標位置，選擇代碼並按 Ctrl C (Windows)/Command C (Mac) 複製代碼。從文件複製：使用 SSH 或 FTP 連接到服務器，導航到主題或插件文件，選擇代碼並按 Ctrl C (Windows)/Command C (Mac) 複製代碼。

wordpress出現錯誤怎麼辦Apr 20, 2025 am 11:57 AM

WordPress 錯誤解決指南：500 內部服務器錯誤：禁用插件或檢查服務器錯誤日誌。 404 未找到頁面：檢查 permalink 並確保頁面鏈接正確。白屏死機：增加服務器 PHP 內存限制。數據庫連接錯誤：檢查數據庫服務器狀態和 WordPress 配置。其他技巧：啟用調試模式、檢查錯誤日誌和尋求支持。預防錯誤：定期更新 WordPress、僅安裝必要插件、定期備份網站和優化網站性能。

wordpress怎麼關閉評論Apr 20, 2025 am 11:54 AM

如何在 WordPress 中關閉評論？特定文章或頁面：在編輯器中取消選中“討論”下的“允許評論”。整個網站：在“設置”->“討論”中取消選中“允許發表評論”。使用插件：安裝 Disable Comments 等插件禁用評論。編輯主題文件：通過編輯 comments.php 文件移除評論表單。自定義代碼：使用 add_filter() 函數禁用評論。

See all articles