在本系列的第一部分中,我們介紹了WordPress主題,以及與WordPress主題開發有關的基本術語。我們介紹了
模板,partials,>模板層次結構, wordpress post types ,style.css.css stylelesheet,wordpress,wordpress,wordpress, filter和操作掛鉤, wordpress loop ,有條件標籤,我們簡要介紹了一個典型的簡單WordPress主題文件結構。
鑰匙要點我們通過WP-CLI快速安裝和激活插件。
>現在,當我們登錄到管理儀表板時,我們將看到FakerPress已安裝,我們可以在批處理中創建各種內容,包括我們擁有的任何自定義帖子類型。
現在,使用此插件,我們將創建一些虛假的內容。這是結果,使用默認二十七
>
>現在,我們迅速潛入並設置了一個由catch-all index.php文件和style.css組成的裸露的最低主題,我們對於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可以看到該主題,並且處於活動狀態:
如果我們現在在瀏覽器中訪問我們的網站,這就是我們所看到的:
>
顯然,我們有工作要做。
> Bloginfo()函數用於輸出網站信息。
>控制結構)看起來像這樣:
>我們需要在用內容循環時填充它 - 或用內容輸出的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>
我們的
,儘管很粗糙,但實際上是有效的。
>將我們的主題構造到文件中並應用Bootstrap Markup>現在,我們將使用Twitter Bootstrap標記來實現partials,例如header.php and footer.php和各種專用模板,以便我們更輕鬆地進行樣式。
>從index.php開始,我們用get_header()和get_footer()函數替換循環之前和之後的所有內容
>與我們所說的一致 - 我們將使用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
>我們首先使用此文件包括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。
>
調整標記 >如果我們現在訪問主頁,我們將在頂部看到菜單- 儘管它和頁面仍然是一團糟- 因為標題中的以下行仍在輸出包裝在DIV及其自己的UL中的菜單標籤,因此不受我們的bootstrap樣式的影響:
我們完成此操作後,我們將轉到header.php文件刪除以下行: 在他們的位置,我們將這些行: >這將為我們刪除DIV標籤和UL標籤的重複,但是我們仍然需要將NAV-ITEM和NAV-LINK應用於我們的菜單項(分別為LI和A標籤)。我們將如何解決? WP_NAV_MENU不為此提供參數。我們將使用NAV_MENU_LINK_ATTRIBUTES和NAV_MENU_CSS_CLASS過濾器掛鉤。我們將其放入我們的functions.php文件中: 現在,我們可以在header.php中的wp_nav_menu中指定新屬性: 現在,我們的頂級菜單鏈接可以利用Bootstrap主題的CSS中已經定義的樣式。 >能夠使用動態標頭- 即首頁的不同標頭,其他選定頁面或檔案- 我們將在我們的function.php文件中定義dynamic_header()函數, 'll輸出我們的標頭標記取決於訪問者加載的頁面。
>
>
首頁。因為它具有位置:修復了,它覆蓋了我們網站上的頂部區域,涵蓋了那裡的任何內容,因此我們需要為我們的頂級菜單指定偏移。
我們將其添加到我們的style.css:
>我們可以看到我們解決了CSS中的兩種情況 - 一個默認情況,另一種用於較小的屏幕。這是因為WordPress在移動設備上輸出更寬的管理欄,因此我們需要提供46px偏移。
在第二部分中,關於從頭開始創建WordPress主題的第二部分中,我們創建了一個非常基本的WordPress主題,並將Bootstrap樣式和腳本包括在其中。我們調整了菜單輸出以適合我們的預定義樣式。我們還將標題和頁腳輸出分為各自的部分。 > functions.php文件(主題開發中的關鍵文件)是我們介紹和利用的另一個主題。標題輸出已分為自己的函數,該功能將使用頁面訪問的細節和站點所有者定義的變量來確定最終輸出。
>您可以通過在主題目錄中創建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文件來控制您自定義帖子類型的顯示。
頂部菜單
。 <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<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>
<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>
<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><span><?php
</span></span><span> <span>if ( have_posts() ) : while ( have_posts() ): the_post(); ?></span>
</span>
<span><span><span><div</span> id<span>="post-<span><?php the_ID(); ?></span>"</span>></span>
</span> <span><span><span><h2</span>></span><span><?php the_title(); ?></span><span><span></h2</span>></span>
</span> <span><span><span><div</span> class<span>="post-excerpt"</span>></span><span><?php the_excerpt(); ?></span><span><span></div</span>></span>
</span> <span><span><span></div</span>></span>
</span>
<span><span><?php endwhile;
</span></span><span> <span>endif;
</span></span><span> <span>?></span>
</span>
動態標頭
/**
*
* @package Botega_Scratch_Theme
*/
get_header(); ?>
<span><span><?php
</span></span><span> <span>if ( have_posts() ) : while ( have_posts() ): the_post(); ?></span>
</span>
<span><span><span><div</span> id<span>="post-<span><?php the_ID(); ?></span>"</span>></span>
</span> <span><span><span><h2</span>></span><span><?php the_title(); ?></span><span><span></h2</span>></span>
</span> <span><span><span><div</span> class<span>="post-excerpt"</span>></span><span><?php the_excerpt(); ?></span><span><span></div</span>></span>
</span> <span><span><span></div</span>></span>
</span>
<span><span><?php endwhile;
</span></span><span> <span>endif;
</span></span><span> <span>?></span>
</span>
我們還將定義這樣的功能:<span><span><?php
</span></span><span><span>/**
</span></span><span><span> * The header for our theme.
</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><!DOCTYPE html></span>
</span><span><span><span><html</span>></span>
</span><span><span><span><head</span>></span>
</span><span><span><span><meta</span> charset<span>="<span><?php bloginfo( 'charset' ); ?></span>"</span>></span>
</span><span><span><span><meta</span> name<span>="viewport"</span> content<span>="width=device-width, initial-scale=1"</span>></span>
</span>
<span><span><?php wp_head(); ?></span>
</span><span><span><span></head</span>></span>
</span>
<span><span><span><body</span> <span><span><?php body_class(); ?></span></span>></span>
</span>
<span><span><span><nav</span> class<span>="navbar navbar-default navbar-custom navbar-fixed-top"</span>></span>
</span> <span><span><span><div</span> class<span>="container-fluid"</span>></span>
</span> <span><span><span><div</span> class<span>="navbar-header page-scroll"</span>></span>
</span> <span><span><span><a</span> href<span>="<span><?php echo esc_url( home_url( '/' ) ); ?></span>"</span> rel<span>="home"</span> class<span>="navbar-brand"</span>></span><span><?php bloginfo( 'name' ); ?></span><span><span></a</span>></span>
</span> <span><span><span></div</span>></span>
</span>
<span><span><span><div</span> class<span>="collapse navbar-collapse"</span> id<span>="bs-example-navbar-collapse-1"</span>></span>
</span> <span><span><span><ul</span> class<span>="nav navbar-nav navbar-right"</span>></span>
</span> <span><span><?php wp_nav_menu( array( 'theme_location' => 'primary', 'items_wrap' => '%3$s' ) ); ?></span>
</span> <span><span><span></ul</span>></span>
</span> <span><span><span></div</span>></span>
</span> <span><span><span></div</span>></span>
</span> <span><span><span></nav</span>></span>
</span>
<span><span><span><div</span> class<span>="container"</span>></span>
</span> <span><span><span><div</span> class<span>="row"</span>></span>
</span>
>能夠使用當前的所有URL或發布數據(例如在循環中),我們聲明了$ post actible global。然後,我們只用填充標頭HTML填充不同的頁面或請求案例,我們將在以後完成。這為真正動態的標題奠定了基礎。 <span><span><?php
</span></span><span><span>/**
</span></span><span><span> * Footer template partial
</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></div</span>></span>
</span> <span><!-- /.row -->
</span> <span><span><span></div</span>></span>
</span> <span><!-- /.container -->
</span>
<span><!-- Footer -->
</span> <span><span><span><footer</span>></span>
</span> <span><span><span><div</span> class<span>="container"</span>></span>
</span> <span><span><span><div</span> class<span>="row"</span>></span>
</span> <span><span><span><div</span> class<span>="col-lg-8 col-md-10 mx-auto"</span>></span>
</span> <span><span><span></div</span>></span>
</span> <span><span><span></div</span>></span><!-- /.row -->
</span> <span><span><span></div</span>></span><!-- /.container -->
</span> <span><span><span></footer</span>></span><!-- /footer -->
</span>
<span><span><?php wp_footer(); ?></span>
</span>
<span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>
在本系列中有三篇有關從頭開始構建WordPress主題的文章:上
>從頭開始構建WordPress主題的先決條件是什麼?這些是WordPress主題開發中使用的核心技術。此外,您應該熟悉WordPress平臺本身,包括其文件結構和模板層次結構。在計算機上設置了本地開發環境,例如MAMP或XAMPP,在構建主題時可以測試主題。
如何開始從scratch構建WordPress主題? 如何將自定義功能添加到我的WordPress主題中? >您可以通過WordPress主題添加自定義功能在主題目錄中創建functions.php文件。該文件的作用像插件,使您可以在主題中添加自定義功能和功能。您可以使用它來註冊導航菜單,添加側邊欄,排名樣式和腳本等等。 'LL需要在CSS代碼中使用媒體查詢。媒體查詢允許您根據用戶屏幕的大小應用不同的樣式。這意味著您可以為台式機,平板電腦和移動設備創建不同的佈局。您還需要確保圖像響應迅速,您可以將其寬度設置為100%。
>如何自定義WordPress主題的標頭和頁腳?
>如何將導航菜單添加到我的WordPress主題?
>您可以在您的WordPress主題中添加導航菜單WordPress主題通過在您的functions.php文件中使用register_nav_menus()函數。此功能使您可以在主題中註冊一個或多個導航菜單。然後,您可以使用wp_nav_menu()函數在其他模板文件中顯示您的菜單。 >如何自定義我的WordPress主題中的循環? >您可以通過更改來更新WordPress主題到您的主題文件,然後將它們上傳到您的WordPress網站。如果您使用的是子主題,則可以更新父主題而不會失去更改。如果您不使用兒童主題,則應在更新主題之前對主題進行備份,因為更新將覆蓋您的更改。
>
以上是如何從頭開始構建WordPress主題:基礎知識的詳細內容。更多資訊請關注PHP中文網其他相關文章!