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

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

頂部菜單

動態標頭

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

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

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

首頁

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><!DOCTYPE html></span>
</span><span><span><span><html</span> <span><span><?php language_attributes(); ?></span></span>></span>
</span><span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span><span><?php bloginfo('name'); ?></span><span><span></title</span>></span>
</span>    <span><span><span><link</span> 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></head</span>></span>
</span><span><span><span><body</span>></span>
</span>
      <span><span><span><header</span>></span>
</span>         <span><span><span><h1</span>></span><span><?php bloginfo('name'); ?></span><span><span></h1</span>></span>
</span>         <span><span><span><h3</span>></span><span><?php bloginfo('description'); ?></span><span><span></h3</span>></span>
</span>      <span><span><span></header</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></body</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>

登入後複製

如何從頭開始構建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><!DOCTYPE html></span>
</span><span><span><span><html</span> <span><span><?php language_attributes(); ?></span></span>></span>
</span><span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span><span><?php bloginfo('name'); ?></span><span><span></title</span>></span>
</span>    <span><span><span><link</span> 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></head</span>></span>
</span><span><span><span><body</span>></span>
</span>
      <span><span><span><header</span>></span>
</span>         <span><span><span><h1</span>></span><span><?php bloginfo('name'); ?></span><span><span></h1</span>></span>
</span>         <span><span><span><h3</span>></span><span><?php bloginfo('description'); ?></span><span><span></h3</span>></span>
</span>      <span><span><span></header</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></body</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>

登入後複製

> 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 */ ?> <!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <title><?php bloginfo('name'); ?></title> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"> <?php wp_head(); ?> </head> <body> <header> <h1><?php bloginfo('name'); ?></h1> <h3><?php bloginfo('description'); ?></h3> </header> <?php if ( have_posts() ) : /* Start the Loop */ while ( have_posts() ) : the_post(); endwhile; endif; ?> </body> 
登入後複製
登入後複製
登入後複製

>這將為我們刪除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><?php the_title(); ?></h2> <div class="post-excerpt"><?php the_excerpt(); ?></div> </div> <?php endwhile; endif; ?> 
登入後複製

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

動態標頭

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

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

<?php /** * The header for our theme. * * @package Botega_Scratch_Theme * */ ?> <!DOCTYPE html> <html> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <nav class="navbar navbar-default navbar-custom navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header page-scroll"> <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home" class="navbar-brand"><?php bloginfo( 'name' ); ?></a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'items_wrap' => '%3$s' ) ); ?> </ul> </div> </div> </nav> <div class="container"> <div class="row"> 
登入後複製
>能夠使用當前的所有URL或發布數據（例如在循環中），我們聲明了$ post actible global。然後，我們只用填充標頭HTML填充不同的頁面或請求案例，我們將在以後完成。這為真正動態的標題奠定了基礎。

>我們需要確保即使登錄用戶時，我們的頭版也將看起來不錯。 WordPress登錄訪問者，即使在訪問者訪問時也顯示 admin bar
首頁。因為它具有位置：修復了，它覆蓋了我們網站上的頂部區域，涵蓋了那裡的任何內容，因此我們需要為我們的頂級菜單指定偏移。我們將其添加到我們的style.css：

>這確保#mainnav（我們的菜單容器）從頂部具有足夠的偏移，因此在用戶登錄時未覆蓋。 WordPress在這些情況下添加了登錄名和管理式式類別，因此我們可以很容易地定位它。
<?php /** * Footer template partial * * @package Botega_Scratch_Theme * */ ?> </div>  </div>   <footer> <div class="container"> <div class="row"> <div class="col-lg-8 col-md-10 mx-auto"> </div> </div> </div> </footer> <?php wp_footer(); ?> </body> </html> 
登入後複製

>我們可以看到我們解決了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文件來控制您自定義帖子類型的顯示。