xx另类性欧美,吃奶呻吟打开双腿做受视频 ,扒开腿挺进湿润的花苞hd视频

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

<\/p>

\n $\"如何從頭開始構建WordPress主題：基礎知識\"$ 我們的<\/p>loop

，儘管很粗糙，但實際上是有效的。\n<\/p>>將我們的主題構造到文件中並應用Bootstrap Markup

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

>從index.php開始，我們用get_header（）和get_footer（）函數替換循環(huán)之前和之後的所有內容\n $\"如何從頭開始構建WordPress主題：基礎知識\"$ \n<\/p>這意味著我們需要在我們提到的部分中提供所有內容。 >\n

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

\n
\/*\n<\/span>Theme Name: Botega Simple Theme\n<\/span>Theme URI: https:\/\/botega.co.uk\n<\/span>Author: Tonino Jankov\n<\/span>Author URI: https:\/\/botega.co.uk\n<\/span>Description: Basic WordPress theme for Sitepoint theme building tutorial\n<\/span>Text Domain: bsimple\n<\/span>Version: 1.0.0\n<\/span>License: GNU General Public License v2 or later\n<\/span>*\/\n<\/span><\/pre>\n<\/h2>\n
我們正在使用HTML標籤中的Bootstrap類，以及WP_head（）和WP_FOOTER（）FIRE WP_HEAD和WP_FOOTER ACTION HOCKS。\n<\/p>我們將要做的接下來的事情是從startbootstrap.com上包括Clean Bootstrap模板的CSS和JavaScript，該模板帶有MIT許可證，因此我們可以自由使用。這樣，我們的主題將帶有預定義的樣式，響應能力，我們仍然能夠進一步設置。\n
> functions.php<\/p>\n
> functions.php是一個帶有任何嚴重WordPress主題的文件。這是一個充當窮人插件存檔的文件。它允許我們在主題中包含任何自定義功能。 <\/h2>\n
>我們首先使用此文件包括Bootstrap和Bootstrap主題的樣式和腳本：<\/p>\n
\n<\/p>這是一種在主題中包含腳本和樣式的WordPress-事務方式。它允許我們指定腳本的位置將被登錄（標題與頁腳）和重點的優(yōu)先級。我們甚至可以指定每個特定資源對彼此的依賴性。這將確保資源將以正確的順序加載。
<\/span>\/**\n<\/span><\/span> *\n<\/span><\/span> * @package Botega_Scratch_Theme\n<\/span><\/span><\/span> *\/\n<\/span><\/span>?><\/span>\n<\/span>\n<\/span>\n<\/span> <\/span><\/span>><\/span>\n<\/span>><\/span>\n<\/span> ><\/span><\/span><\/title<\/span>><\/span>\n<\/span> rel=\"stylesheet\"<\/span> href=\"<\/span>\"<\/span>><\/span>\n<\/span> <\/span>\n<\/span><\/head<\/span>><\/span>\n<\/span>
国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂
><\/span>\n<\/span>\n ><\/span>\n<\/span> ><\/span><\/span><\/h1<\/span>><\/span>\n<\/span> ><\/span><\/span><\/h3<\/span>><\/span>\n<\/span> <\/header<\/span>><\/span>\n<\/span>\n <\/span> if ( have_posts() ) :\n<\/span><\/span> \/* Start the Loop *\/\n<\/span><\/span> while ( have_posts() ) :\n<\/span><\/span> the_post();\n<\/span><\/span> endwhile;\n<\/span><\/span> endif;\n<\/span><\/span> ?><\/span>\n<\/span>\n<\/body<\/span>><\/span>\n<\/span><\/pre>>\n
我們在這裡使用WP_ENQUEUE_SCRIPTS ACTION HONK。我們可以在法典中了解更多有關它的信息。（我們在上一篇文章中介紹了動作鉤。）\n在我們的自定義bsimple_scripts（）函數（我們將其連接到wp_enque_scripts action Hook）中\n
>我們可以看到我們正在從Internet（Google字體）和主題文件夾中加載樣式。因此，我們在主題文件夾中創(chuàng)建CSS，JS和WebFonts目錄，並複制Bootstrap主題的CSS，JavaScript文件以及Fontawesome Icon-Font Files。\n<\/p>>我們還將index.php文件複製到Archive.php，page.php和single.php文件，我們將修改。
>\n<\/p>現在，我們的主題文件結構將看起來像這樣：
\n<\/p>\n
<\/p>\n
調整標記<\/p>\n
>如果我們現在訪問主頁，我們將在頂部看到菜單- 儘管它和頁面仍然是一團糟- 因為標題中的以下行仍在輸出包裝在DIV及其自己的UL中的菜單標籤，因此不受我們的bootstrap樣式的影響： $\"如何從頭開始構建WordPress主題：基礎知識\"$ \n<\/p>\n為了解決這個問題，我們首先需要轉到我們的WP-Admin儀表板，然後在定制器中創(chuàng)建一個新菜單。我們將其命名
頂部菜單<\/h2>。
\n<\/p>\n
<\/span>if ( have_posts() ) {\n<\/span><\/span> while ( have_posts() ) {\n<\/span><\/span> the_post();\n<\/span><\/span> \/\/\n<\/span><\/span> \/\/ Post Content here\n<\/span><\/span> \/\/\n<\/span><\/span> } \/\/ end while\n<\/span><\/span>} \/\/ end if\n<\/span><\/span>?><\/span>\n<\/span><\/pre>> https:\/\/uploads.sitepoint.com\/wp-content\/uploads\/2018\/11\/11\/1542595661customizer.mp4
\n我們完成此操作後，我們將轉到header.php文件刪除以下行：>
\/*\n<\/span>Theme Name: Botega Simple Theme\n<\/span>Theme URI: https:\/\/botega.co.uk\n<\/span>Author: Tonino Jankov\n<\/span>Author URI: https:\/\/botega.co.uk\n<\/span>Description: Basic WordPress theme for Sitepoint theme building tutorial\n<\/span>Text Domain: bsimple\n<\/span>Version: 1.0.0\n<\/span>License: GNU General Public License v2 or later\n<\/span>*\/\n<\/span><\/pre>\n
在他們的位置，我們將這些行：<\/p>\n
<\/span>\/**\n<\/span><\/span> *\n<\/span><\/span> * @package Botega_Scratch_Theme\n<\/span><\/span><\/span> *\/\n<\/span><\/span>?><\/span>\n<\/span>\n<\/span>\n<\/span> <\/span><\/span>><\/span>\n<\/span>><\/span>\n<\/span> ><\/span><\/span><\/title<\/span>><\/span>\n<\/span> rel=\"stylesheet\"<\/span> href=\"<\/span>\"<\/span>><\/span>\n<\/span> <\/span>\n<\/span><\/head<\/span>><\/span>\n<\/span>><\/span>\n<\/span>\n ><\/span>\n<\/span> ><\/span><\/span><\/h1<\/span>><\/span>\n<\/span> ><\/span><\/span><\/h3<\/span>><\/span>\n<\/span> <\/header<\/span>><\/span>\n<\/span>\n <\/span> if ( have_posts() ) :\n<\/span><\/span> \/* Start the Loop *\/\n<\/span><\/span> while ( have_posts() ) :\n<\/span><\/span> the_post();\n<\/span><\/span> endwhile;\n<\/span><\/span> endif;\n<\/span><\/span> ?><\/span>\n<\/span>\n<\/body<\/span>><\/span>\n<\/span><\/pre>\n
>這將為我們刪除DIV標籤和UL標籤的重複，但是我們仍然需要將NAV-ITEM和NAV-LINK應用於我們的菜單項（分別為LI和A標籤）。我們將如何解決？ WP_NAV_MENU不為此提供參數。我們將使用NAV_MENU_LINK_ATTRIBUTES和NAV_MENU_CSS_CLASS過濾器掛鉤。我們將其放入我們的functions.php文件中：<\/p>>\n
<\/span>if ( have_posts() ) {\n<\/span><\/span> while ( have_posts() ) {\n<\/span><\/span> the_post();\n<\/span><\/span> \/\/\n<\/span><\/span> \/\/ Post Content here\n<\/span><\/span> \/\/\n<\/span><\/span> } \/\/ end while\n<\/span><\/span>} \/\/ end if\n<\/span><\/span>?><\/span>\n<\/span><\/pre>\n
現在，我們可以在header.php中的wp_nav_menu中指定新屬性：<\/p>\n
<\/span> if ( have_posts() ) : while ( have_posts() ): the_post(); ?><\/span>\n<\/span>\n id=\"post-<\/span>\"<\/span>><\/span>\n<\/span> ><\/span><\/span><\/h2<\/span>><\/span>\n<\/span> class=\"post-excerpt\"<\/span>><\/span><\/span><\/div<\/span>><\/span>\n<\/span> <\/div<\/span>><\/span>\n<\/span>\n <\/span> endif;\n<\/span><\/span> ?><\/span>\n<\/span><\/pre>\n
現在，我們的頂級菜單鏈接可以利用Bootstrap主題的CSS中已經定義的樣式。 <\/p>\n
動態(tài)標頭<\/h2>\n
>能夠使用動態(tài)標頭- 即首頁的不同標頭，其他選定頁面或檔案- 我們將在我們的function.php文件中定義dynamic_header（）函數， 'll輸出我們的標頭標記取決於訪問者加載的頁面。\n<\/p>>現在我們的header.php文件將如下結束：
>\n<\/p>\n
<\/span>\/**\n<\/span><\/span> *\n<\/span><\/span> * @package Botega_Scratch_Theme\n<\/span><\/span><\/span> *\/\n<\/span><\/span>\n<\/span>get_header(); ?><\/span>\n<\/span>\n <\/span> if ( have_posts() ) : while ( have_posts() ): the_post(); ?><\/span>\n<\/span>\n id=\"post-<\/span>\"<\/span>><\/span>\n<\/span> ><\/span><\/span><\/h2<\/span>><\/span>\n<\/span> class=\"post-excerpt\"<\/span>><\/span><\/span><\/div<\/span>><\/span>\n<\/span> <\/div<\/span>><\/span>\n<\/span>\n <\/span> endif;\n<\/span><\/span> ?><\/span>\n<\/span>\n<\/span>\n<\/span><\/pre>我們還將定義這樣的功能：
>\n<\/p>\n
<\/span>\/**\n<\/span><\/span> * The header for our theme.\n<\/span><\/span> *\n<\/span><\/span> * @package Botega_Scratch_Theme\n<\/span><\/span><\/span> *\n<\/span><\/span> *\/\n<\/span><\/span>?><\/span>\n<\/span><\/span>\n<\/span>><\/span>\n<\/span>><\/span>\n<\/span> charset=\"<\/span>\"<\/span>><\/span>\n<\/span> name=\"viewport\"<\/span> content=\"width=device-width, initial-scale=1\"<\/span>><\/span>\n<\/span>\n<\/span>\n<\/span><\/head<\/span>><\/span>\n<\/span>\n <\/span><\/span>><\/span>\n<\/span>\n class=\"navbar navbar-default navbar-custom navbar-fixed-top\"<\/span>><\/span>\n<\/span> class=\"container-fluid\"<\/span>><\/span>\n<\/span> class=\"navbar-header page-scroll\"<\/span>><\/span>\n<\/span> href=\"<\/span>\"<\/span> rel=\"home\"<\/span> class=\"navbar-brand\"<\/span>><\/span><\/span><\/a<\/span>><\/span>\n<\/span> <\/div<\/span>><\/span>\n<\/span>\n class=\"collapse navbar-collapse\"<\/span> id=\"bs-example-navbar-collapse-1\"<\/span>><\/span>\n<\/span> class=\"nav navbar-nav navbar-right\"<\/span>><\/span>\n<\/span> 'primary', 'items_wrap' => '%3$s' ) ); ?><\/span>\n<\/span> <\/ul<\/span>><\/span>\n<\/span> <\/div<\/span>><\/span>\n<\/span> <\/div<\/span>><\/span>\n<\/span> <\/nav<\/span>><\/span>\n<\/span>\n class=\"container\"<\/span>><\/span>\n<\/span> class=\"row\"<\/span>><\/span>\n<\/span><\/pre>>能夠使用當前的所有URL或發(fā)布數據（例如在循環(huán)中），我們聲明了$ post actible global。然後，我們只用填充標頭HTML填充不同的頁面或請求案例，我們將在以後完成。這為真正動態(tài)的標題奠定了基礎。
\n<\/p>>我們需要確保即使登錄用戶時，我們的頭版也將看起來不錯。 WordPress登錄訪問者，即使在訪問者訪問時也顯示 admin bar
首頁。因為它具有位置：修復了，它覆蓋了我們網站上的頂部區(qū)域，涵蓋了那裡的任何內容，因此我們需要為我們的頂級菜單指定偏移。 \n<\/em>我們將其添加到我們的style.css：<\/p>\n
\n<\/p>>這確保#mainnav（我們的菜單容器）從頂部具有足夠的偏移，因此在用戶登錄時未覆蓋。 WordPress在這些情況下添加了登錄名和管理式式類別，因此我們可以很容易地定位它。
<\/span>\/**\n<\/span><\/span> * Footer template partial\n<\/span><\/span> *\n<\/span><\/span> * @package Botega_Scratch_Theme\n<\/span><\/span><\/span> *\n<\/span><\/span> *\/\n<\/span><\/span>?><\/span>\n<\/span> <\/div<\/span>><\/span>\n<\/span> \n<\/span> <\/div<\/span>><\/span>\n<\/span> \n<\/span>\n \n<\/span> ><\/span>\n<\/span> class=\"container\"<\/span>><\/span>\n<\/span> class=\"row\"<\/span>><\/span>\n<\/span> class=\"col-lg-8 col-md-10 mx-auto\"<\/span>><\/span>\n<\/span> <\/div<\/span>><\/span>\n<\/span> <\/div<\/span>><\/span>\n<\/span> <\/div<\/span>><\/span>\n<\/span> <\/footer<\/span>><\/span>\n<\/span>\n<\/span>\n<\/span>\n<\/body<\/span>><\/span>\n<\/span><\/html<\/span>><\/span>\n<\/span><\/pre>\n
>我們可以看到我們解決了CSS中的兩種情況 - 一個默認情況，另一種用於較小的屏幕。這是因為WordPress在移動設備上輸出更寬的管理欄，因此我們需要提供46px偏移。\n<\/p>在移動設備上，我們現在應該有一個響應迅速的JavaScript供電下拉菜單：>\n
<\/p>
\n<\/p>結論
\n在第二部分中，關於從頭開始創(chuàng)建WordPress主題的第二部分中，我們創(chuàng)建了一個非?；镜腤ordPress主題，並將Bootstrap樣式和腳本包括在其中。我們調整了菜單輸出以適合我們的預定義樣式。我們還將標題和頁腳輸出分為各自的部分。 $\"如何從頭開始構建WordPress主題：基礎知識\"$ <\/p>\n
> functions.php文件（主題開發(fā)中的關鍵文件）是我們介紹和利用的另一個主題。標題輸出已分為自己的函數，該功能將使用頁面訪問的細節(jié)和站點所有者定義的變量來確定最終輸出。\n<\/p>在指南的第三部分中，我們將完成特定的模板，為我們的主題功能和部分提供更好的結構，並完成我們網站的樣式。
\n<\/p>\n
在本系列中有三篇有關從頭開始構建WordPress主題的文章：>\n
\n<\/p>>在主題結構
上\n
主題基礎<\/li>\n
完善主題<\/li>\n
\n\n\n\n<\/li>經常詢問有關從頭開始構建WordPress主題的問題（常見問題解答）\n\n\n\n<\/ul>>從頭開始構建WordPress主題的先決條件是什麼？這些是WordPress主題開發(fā)中使用的核心技術。此外，您應該熟悉WordPress平臺本身，包括其文件結構和模板層次結構。在計算機上設置了本地開發(fā)環(huán)境，例如MAMP或XAMPP，在構建主題時可以測試主題??。
<\/h2>如何開始從scratch構建WordPress主題？如何將自定義功能添加到我的WordPress主題中？ <\/antepress><\/ancy><\/ancy><\/anc.><\/ancy><\/em><\/p>>
>您可以通過WordPress主題添加自定義功能在主題目錄中創(chuàng)建functions.php文件。該文件的作用像插件，使您可以在主題中添加自定義功能和功能。您可以使用它來註冊導航菜單，添加側邊欄，排名樣式和腳本等等。 'LL需要在CSS代碼中使用媒體查詢。媒體查詢允許您根據用戶屏幕的大小應用不同的樣式。這意味著您可以為臺式機，平板電腦和移動設備創(chuàng)建不同的佈局。您還需要確保圖像響應迅速，您可以將其寬度設置為100％。
>如何自定義WordPress主題的標頭和頁腳？ <\/h3>\n<\/h3>\n
>您可以通過在主題目錄中創(chuàng)建headpress.php文件和footer.php文件來自定義WordPress主題的標題和頁腳。 header.php文件是您為標題編寫HTML和PHP代碼的地方，footer.php文件是您為頁腳編寫代碼的地方。然後，您可以使用get_header（）和get_footer（）functions。通過在您的functions.php文件中使用register_post_type（）函數的自定義帖子類型為您的WordPress主題。此功能使您可以定義具有自己的標籤，功能和功能的新帖子類型。然後，您可以創(chuàng)建一個單{postType} .php文件和一個存檔 - {postType} .php文件來控制您自定義帖子類型的顯示。
>如何將導航菜單添加到我的WordPress主題？ <\/ancypress>\n<\/h3>>您可以在您的WordPress主題中添加導航菜單WordPress主題通過在您的functions.php文件中使用register_nav_menus（）函數。此功能使您可以在主題中註冊一個或多個導航菜單。然後，您可以使用wp_nav_menu（）函數在其他模板文件中顯示您的菜單。
<\/p>>如何自定義我的WordPress主題中的循環(huán)？ >您可以在WordPress主題中自定義循環(huán)通過在index.php文件或其他模板文件中修改循環(huán)代碼。循環(huán)是WordPress用於顯示帖子的PHP代碼。您可以將其自定義以更改顯示帖子的顯示方式，顯示的帖子數量等等。
<\/p>如何更新WordPress主題？
>您可以通過更改來更新WordPress主題到您的主題文件，然後將它們上傳到您的WordPress網站。如果您使用的是子主題，則可以更新父主題而不會失去更改。如果您不使用兒童主題，則應在更新主題之前對主題進行備份，因為更新將覆蓋您的更改。 <\/h3>><\/ancy><\/antepress><\/ancipress><\/p><\/ancimple_scripts><\/p><\/ancy><\/ancli>"}

社群

文章合集問答

學習

課程程式設計字典

工具庫

開發(fā)工具網站源碼 PHP 函式庫 JS特效網站素材擴充插件

AI工具

休閒

遊戲下載遊戲教程

繁體中文

簡體中文 English 繁體中文日本語 ??? Melayu Fran?ais Deutsch

Login

singup

目錄

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

頂部菜單

動態(tài)標頭

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

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

首頁 CMS教程＆＃＆按如何從頭開始構建WordPress主題：基礎知識

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

Lisa Kudrow

Feb 09, 2025 am 10:43 AM

在本教程中，我們將深入探索WordPress主題文件結構，並學習如何從頭開始創(chuàng)建基本的WordPress主題。
在本系列的第一部分中，我們介紹了WordPress主題，以及與WordPress主題開發(fā)有關的基本術語。我們介紹了
模板
，partials，>模板層次結構， wordpress post types ，style.css.css stylelesheet，wordpress，wordpress，wordpress， filter和操作掛鉤， wordpress loop ，有條件標籤，我們簡要介紹了一個典型的簡單WordPress主題文件結構。
鑰匙要點

開始，使用index.php和style.css文件設置一個裸露的最低主題，確保WordPress識別您的新主題。

集成了響應式設計和美學的引導程序，修改模板文件以包括Bootstrap的HTML和CSS類。
>
>利用function.php文件來添加自定義功能，啟用樣式和腳本，並有效地管理WordPress掛鉤。
>
>使用WordPress掛鉤和條件來自定義標題和導航菜單的動態(tài)輸出以適應不同的頁麵類型。

通過調整CSS和使用媒體查詢，請確保您的主題在移動設備上響應迅速且用戶友好。

創(chuàng)建裸露的最低主題

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

我們通過WP-CLI快速安裝和激活插件。
>現在，當我們登錄到管理儀表板時，我們將看到FakerPress已安裝，我們可以在批處理中創(chuàng)建各種內容，包括我們擁有的任何自定義帖子類型。

現在，使用此插件，我們將創(chuàng)建一些虛假的內容。這是結果，使用默認二十七
wordpress主題：
>

>現在，我們迅速潛入並設置了一個由catch-all index.php文件和style.css組成的裸露的最低主題，我們對於WordPress模板系統(tǒng)需要它以識別主題：>

這是style.css，目前僅由元CSS評論組成。這些評論是需要的。
>
這是index.php文件。它將暫時捕獲所有請求：

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

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

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

我們尚未提供屏幕截圖，因此後端中的顯示是基本的。
如果我們現在在瀏覽器中訪問我們的網站，這就是我們所看到的：
>

顯然，我們有工作要做。
如果我們查看主頁的源代碼，我們將看到WP_head（）函數在中輸出了許多默認的WordPress標籤，例如CSS，JavaScript，link和Meta標籤。 >
> Bloginfo（）函數用於輸出網站信息。 >
我們的主頁是空的，因為我們沒有在循環(huán)中輸出任何內容 - WordPress在其所有模板中使用的模式用於輸出內容。關於循環(huán)的法典頁面深入詳細信息。循環(huán)的典型結構（基於php >而
>控制結構）看起來像這樣：
>

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

如果我們通過添加the_title（），the_excerpt（）更改循環(huán)，然後添加html markup和the_id（），以使其看起來像這樣：
> >現在，我們將在主頁上獲取帖子列表，而沒有應用樣式：

<?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> 

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

如果我們現在訪問單個帖子URL - 類似於http://my-website.com/2018/11/14/sapiente-ad-facilis-quo-repellat-quos/-我們會看到這樣的東西：
<?php if ( have_posts() ) { while ( have_posts() ) { the_post(); // // Post Content here // } // end while } // end if ?> 

我們的
loop
，儘管很粗糙，但實際上是有效的。
>將我們的主題構造到文件中並應用Bootstrap Markup

>現在，我們將使用Twitter Bootstrap標記來實現partials，例如header.php and footer.php和各種專用模板，以便我們更輕鬆地進行樣式。
>從index.php開始，我們用get_header（）和get_footer（）函數替換循環(huán)之前和之後的所有內容
這意味著我們需要在我們提到的部分中提供所有內容。 >
>與我們所說的一致 - 我們將使用Twitter bootstrap主題 - 我們的header.php文件將看起來像這樣：
我們的footer.php文件將看起來像：

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

我們正在使用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-事務方式。它允許我們指定腳本的位置將被登錄（標題與頁腳）和重點的優(yōu)先級。我們甚至可以指定每個特定資源對彼此的依賴性。這將確保資源將以正確的順序加載。
<?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> 
>
我們在這裡使用WP_ENQUEUE_SCRIPTS ACTION HONK。我們可以在法典中了解更多有關它的信息。（我們在上一篇文章中介紹了動作鉤。）在我們的自定義bsimple_scripts（）函數（我們將其連接到wp_enque_scripts action Hook）中
>我們可以看到我們正在從Internet（Google字體）和主題文件夾中加載樣式。因此，我們在主題文件夾中創(chuàng)建CSS，JS和WebFonts目錄，並複制Bootstrap主題的CSS，JavaScript文件以及Fontawesome Icon-Font Files。
>我們還將index.php文件複製到Archive.php，page.php和single.php文件，我們將修改。
>
現在，我們的主題文件結構將看起來像這樣：

調整標記

>如果我們現在訪問主頁，我們將在頂部看到菜單- 儘管它和頁面仍然是一團糟- 因為標題中的以下行仍在輸出包裝在DIV及其自己的UL中的菜單標籤，因此不受我們的bootstrap樣式的影響：
為了解決這個問題，我們首先需要轉到我們的WP-Admin儀表板，然後在定制器中創(chuàng)建一個新菜單。我們將其命名
頂部菜單
。

<?php if ( have_posts() ) { while ( have_posts() ) { the_post(); // // Post Content here // } // end while } // end if ?> 
> https://uploads.sitepoint.com/wp-content/uploads/2018/11/11/1542595661customizer.mp4
我們完成此操作後，我們將轉到header.php文件刪除以下行：>
/* Theme Name: Botega Simple Theme Theme URI: https://botega.co.uk Author: Tonino Jankov Author URI: https://botega.co.uk Description: Basic WordPress theme for Sitepoint theme building tutorial Text Domain: bsimple Version: 1.0.0 License: GNU General Public License v2 or later */ 

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

<?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中已經定義的樣式。

動態(tài)標頭

>能夠使用動態(tài)標頭- 即首頁的不同標頭，其他選定頁面或檔案- 我們將在我們的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或發(fā)布數據（例如在循環(huán)中），我們聲明了$ post actible global。然後，我們只用填充標頭HTML填充不同的頁面或請求案例，我們將在以後完成。這為真正動態(tài)的標題奠定了基礎。

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

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

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

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

>在主題結構
上
主題基礎

完善主題

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

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

>您可以通過在主題目錄中創(chuàng)建headpress.php文件和footer.php文件來自定義WordPress主題的標題和頁腳。 header.php文件是您為標題編寫HTML和PHP代碼的地方，footer.php文件是您為頁腳編寫代碼的地方。然後，您可以使用get_header（）和get_footer（）functions。通過在您的functions.php文件中使用register_post_type（）函數的自定義帖子類型為您的WordPress主題。此功能使您可以定義具有自己的標籤，功能和功能的新帖子類型。然後，您可以創(chuàng)建一個單{postType} .php文件和一個存檔 - {postType} .php文件來控制您自定義帖子類型的顯示。
>如何將導航菜單添加到我的WordPress主題？
>您可以在您的WordPress主題中添加導航菜單WordPress主題通過在您的functions.php文件中使用register_nav_menus（）函數。此功能使您可以在主題中註冊一個或多個導航菜單。然後，您可以使用wp_nav_menu（）函數在其他模板文件中顯示您的菜單。
>如何自定義我的WordPress主題中的循環(huán)？ >您可以在WordPress主題中自定義循環(huán)通過在index.php文件或其他模板文件中修改循環(huán)代碼。循環(huán)是WordPress用於顯示帖子的PHP代碼。您可以將其自定義以更改顯示帖子的顯示方式，顯示的帖子數量等等。
如何更新WordPress主題？
>您可以通過更改來更新WordPress主題到您的主題文件，然後將它們上傳到您的WordPress網站。如果您使用的是子主題，則可以更新父主題而不會失去更改。如果您不使用兒童主題，則應在更新主題之前對主題進行備份，因為更新將覆蓋您的更改。
>
以上是如何從頭開始構建WordPress主題：基礎知識的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

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

熱AI工具

Undress AI Tool

免費脫衣圖片

Undresser.AI Undress

人工智慧驅動的應用程序，用於創(chuàng)建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

顯示更多

熱門文章

指南：恆星刀片保存文件位置/保存文件丟失/不保存
3 週前 By DDD

Oguri Cap Build Guide |漂亮的德比志
2 週前 By Jack chen

Agnes Tachyon Build Guide |漂亮的德比志
1 週前 By Jack chen

沙丘：覺醒 - 高級行星學家Quest演練
3 週前 By Jack chen

約會一切：德克和哈珀關係指南
3 週前 By Jack chen

顯示更多

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發(fā)環(huán)境

Dreamweaver CS6

視覺化網頁開發(fā)工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

gmail信箱登陸入口在哪裡

8634

17

Java教學

1783

16

CakePHP 教程

1723

56

Laravel 教程

1577

28

PHP教程

1439

31

顯示更多

Related knowledge

如何將git與WordPress一起使用 Jun 26, 2025 am 12:23 AM
使用Git管理WordPress項目時，應只將主題、自定義插件和配置文件納入版本控制；設置.gitignore文件以忽略上傳目錄、緩存和敏感配置；利用webhook或CI工具實現自動部署並註意數據庫處理；採用兩分支策略（main/develop）進行協(xié)作開發(fā)。這樣做可避免衝突、保障安全，並提升協(xié)作與部署效率。

如何創(chuàng)建一個簡單的Gutenberg塊 Jun 28, 2025 am 12:13 AM
創(chuàng)建Gutenberg塊的關鍵在於理解其基本結構並正確連接前後端資源。 1.準備開發(fā)環(huán)境：安裝本地WordPress、Node.js和@wordpress/scripts；2.使用PHP註冊塊並用JavaScript定義塊的編輯和顯示邏輯；3.通過npm構建JS文件以使更改生效；4.遇到問題時檢查路徑、圖標是否正確或使用實時監(jiān)聽構建避免重複手動編譯。按照這些步驟，可以逐步實現一個簡單的Gutenberg塊。

如何使用WordPress測試環(huán)境 Jun 24, 2025 pm 05:13 PM
使用WordPress測試環(huán)境是為了確保新功能、插件或主題在正式上線前的安全性和兼容性，避免影響真實網站。搭建測試環(huán)境的步驟包括：下載安裝本地服務器軟件（如LocalWP、XAMPP），創(chuàng)建站點、設置數據庫和管理員賬號，安裝主題和插件進行測試；複製正式網站到測試環(huán)境的方法是通過插件導出站點、導入測試環(huán)境並替換域名；使用時應注意不使用真實用戶數據、定期清理無用數據、備份測試狀態(tài)、適時重置環(huán)境，並統(tǒng)一團隊配置以減少差異問題。

如何以編程方式刷新規(guī)則 Jun 27, 2025 am 12:21 AM
在WordPress中，當新增自定義文章類型或修改固定鏈接結構後，需手動刷新重寫規(guī)則，此時可通過代碼調用flush_rewrite_rules()函數實現。 1.可在主題或插件激活鉤子中添加該函數以自動刷新；2.僅在必要時執(zhí)行一次，如添加CPT、分類法或修改鏈接結構後；3.避免頻繁調用以免影響性能；4.多站點環(huán)境下需視情況為每個站點單獨刷新；5.某些託管環(huán)境可能限制規(guī)則保存。此外，訪問“設置>固定鏈接”頁麵點擊保存也可觸髮刷新，適合非自動化場景。

如何在WordPress htaccess中設置重定向 Jun 25, 2025 am 12:19 AM
tosetupredirectsinwordpressingthe.htaccessfile，locateThEfileInyourSite'sRootDirectorectoryAndDrectRectrulesabovethe＃beginWordPresssection.forbasic301redirects，USETHEETHEETERECTREFTATRECTATREDERTREFTATREDERTREFTATRECTRECTATRECTRECTATREDECT301/OLD-PAGEHTTPS：

如何使用SMTP從WordPress發(fā)送電子郵件 Jun 27, 2025 am 12:30 AM
UsingsMtpForWordPresseMailSimProvesDeliverabilitialComparedComparedTothEdeDefaultPhpMail（）函數.1.smtpauthenticateswithyouremailserver.2.somemomehostsdisablesablephpmail（）

如何使WordPress主題響應迅速 Jun 28, 2025 am 12:14 AM
要實現響應式WordPress主題設計，首先要使用HTML5和移動優(yōu)先的Meta標籤，在header.php中添加viewport設置以確保移動端正確顯示，並用HTML5結構標籤組織佈局；其次，利用CSS媒體查詢實現不同屏幕寬度下的樣式適配，按移動優(yōu)先原則編寫樣式，常用斷點包括480px、768px和1024px；第三，彈性處理圖片和佈局，為圖片設置max-width:100%並使用Flexbox或Grid佈局替代固定寬度；最後，通過瀏覽器開發(fā)者工具和真實設備進行充分測試，優(yōu)化加載性能，確保響應

 如何將第三方API與WordPress集成 Jun 29, 2025 am 12:03 AM
TOINTEGRATETHIRD-PARTYAPISINTOWORDPRESS，關注臺詞：1.SelectAutableabepianDobtainCredentialslikeapikeYsoroAuthtoKensByEnterRegisteringThemSecure.2.ChooseBeteBetB????eteBetB????eteBetB????etebetInpliCityOorcustimplicityOrcustomPliCoseTompliCoseTomploomcoseusionfunctionfunctionfunctibunitiacuciencipuity forfunigation。

See all articles

公益線上PHP培訓，幫助PHP學習者快速成長！

關於我們免責聲明 Sitemap

? php.cn All rights reserved

感谢您访问我们的网站，您可能还对以下资源感兴趣：
国产av日韩一区二区三区精品