社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
目錄
>如果我們訪問主頁並打開瀏覽器控制台檢查這些課程，我們會發現我們缺少這些類別中的當前模板信息：
>我們可以看到，我們的虛假帖子一般都沒有任何圖像，並且沒有特色圖像
customizer
首頁 CMS教程 ＆＃＆按 如何從頭開始構建WordPress主題：最終步驟

如何從頭開始構建WordPress主題：最終步驟

Christopher Nolan
Christopher Nolan
Feb 09, 2025 am 09:42 AM

如何從頭開始構建WordPress主題：最終步驟

>在本文中，我們將完成從頭開始構建WordPress主題的嘗試，重點是完善我們的模板，添加元信息，縮寫縮略圖，側邊欄，用戶友好的控件等等。

這是有關構建WordPress主題的WordPress系列的第三部分也是最後一部分。第1部分引入了WordPress主題，在第2部分中，我們構建了一個基本主題。我們使用StartBootStrap使用乾淨的博客模板為WordPress主題添加樣式。到目前為止，我們已經編寫的代碼可在GitHub上找到。

>

>我們已經添加了single.php，page.php，archive.php和index.php模板，但是我們將其保留為任務的這一部分的任務。我們介紹了function.php - WordPress用來自動包含特定功能的文件，並在其中添加了功能。我們在header.php中添加了動態標頭函數，然後將該功能分開到我們的functions.php中。理想情況下，應該將其組織到一個單獨的文件中 - 可能在我們主題內的Inc文件夾中 - 以保持一切清潔。

在第2部分中，我們還引入了部分 - footer.php和header.php。

鑰匙要點

>利用`functions.php`來添加特定於主題的功能，並有效地將代碼組織到單獨的文件中以進行清潔結構。
  • >實現模板零件，用於一致和模塊化的HTML結構，例如`single.php`和`Index.php`。
    • >
  • >使用'add_theme_support（'Post-thumbnails'）啟用和管理WordPress主題中的縮略圖；
    • 通過`functions.php`註冊多個側邊欄和小窗口區域，以通過WordPress小部件進行動態內容管理。
    • >使用WordPress Customizer API自定義站點外觀和佈局，從而使用戶友好的控件用於背景圖像等等。
    • >通過使用模板層次結構原理擴展單個帖子和頁面自定義，並且用於結構化和特定內容顯示的`get_template_part`。
    • 完善模板
    • 在上一篇文章中，我們將標籤（開頭一個）分開為header.php，然後添加了對此。這為身體增加了一些語義課，告訴我們我們是否在頁面上，發帖，是否登錄，等等，等等 - 使我們能夠根據訪問的頁面和其他網站的不同元素進行樣式的樣式事物。

>如果我們訪問主頁並打開瀏覽器控制台檢查這些課程，我們會發現我們缺少這些類別中的當前模板信息：

>

要更改WordPress顯示的內容，我們需要知道正在使用哪些文件。在我們的情況下，index.php用作默認的後備模板。該信息圖顯示了使用的模板的層次結構。覆蓋或創建主題時，它可能非常方便。

>

>在上一篇文章中，我們開始完善Archive.php循環，添加元信息並在輸出文章中發布縮略圖。我們將該循環分為一個單獨的文件，將其包括在Archive.php和index.php中，然後完成完善。

>

>首先，我們將用一行請求部分文件的單行替換兩個文件中的內容，因此index.php看起來像這樣：>

>完成此操作後，我們將將已替換為Archive.php中的內容放入partials/content.php文件：
<span><span><?php
</span></span><span><span>/**
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> */
</span></span><span>
</span><span><span>get_header(); ?></span>
</span>
    <span><span><?php
</span></span><span>    <span>if ( have_posts() ) : while ( have_posts() ): the_post();
</span></span><span>
</span><span>                <span>get_template_part( 'partials/content', get_post_type() );
</span></span><span>
</span><span>        <span>endwhile;
</span></span><span>    <span>endif;
</span></span><span>    <span>?></span>
</span>
<span><span><?php get_footer(); ?></span>
</span>
登入後複製
登入後複製
登入後複製
登入後複製
>

>我們將這些更改上傳到服務器後，我們將看到我們的首頁，在帖子列表中的每個帖子中，都有元信息 - 日期和作者鏈接：
<span><span><span><div</span> <span><span><?php post_class( 'post-preview' ); ?></span></span> id<span>="post-<span><?php the_ID(); ?></span>"</span>></span>
</span>
<span><span><span><header</span> class<span>="entry-header"</span>></span>
</span>    <span><span><?php
</span></span><span>    <span>if ( is_singular() ) :
</span></span><span>        <span>the_title( '<h1 >', '</h1>' );
</span></span><span>    <span>else :
</span></span><span>        <span>the_title( '<h2 ><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
</span></span><span>    <span>endif;
</span></span><span>
</span><span>    <span>if ( 'post' === get_post_type() ) :
</span></span><span>        <span>?></span>
</span>        <span><span><span><div</span> class<span>="entry-meta"</span>></span>
</span>            <span><span><?php
</span></span><span>            <span>bsimple_posted_on();
</span></span><span>            <span>bsimple_posted_by();
</span></span><span>            <span>?></span>
</span>        <span><span><span></div</span>></span><!-- .entry-meta -->
</span>    <span><span><?php endif; ?></span>
</span><span><span><span></header</span>></span><!-- .entry-header -->
</span>
        <span><span><span><a</span> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></span>
</span>            <span><span><?php
</span></span><span>            <span>the_post_thumbnail( 'post-thumbnail', array(
</span></span><span>
</span><span>            <span>) );
</span></span><span>            <span>?></span>
</span>        <span><span><span></a</span>></span>
</span>
        <span><span><?php the_excerpt(); ?></span>
</span>
<span><span><span></div</span>></span>
</span>
登入後複製
登入後複製
登入後複製
登入後複製

如何從頭開始構建WordPress主題：最終步驟這意味著我們的部分作品。

>

張貼縮略圖

>我們可以看到，我們的虛假帖子一般都沒有任何圖像，並且沒有特色圖像

。如果我們轉到WordPress儀表板，然後嘗試將特色image

添加到我們的帖子/頁面，我們將看到最右邊的側欄中沒有文件上傳字段。 （對於那些不熟悉WordPress的人，可以在此處閱讀有關此功能的更多信息。）> 在WordPress主題中默認啟用了未啟用縮略圖。這是一個需要專門打開新主題的功能。大多數主題都啟用了它。 為此，我們包括add_theme_support（'Post-thumbnails'）;在我們的functions.php。 上行

現在啟用了縮略圖。

>

>現在，我們可以使用WP-CLI命令WP站點空的WORDPRESS安裝所有內容的安裝-Alower-root（或者我們可以從WordPress儀表板手動執行），並用FakerPress將其重新填充。它應該用它從互聯網上獲取的特色圖像填充帖子和頁面。 （我們需要像以前一樣重新創建頂部菜單，並為其分配頁面和帖子。）

>

一個提示：如果我們正在構建待售主題，或者通常會發布給更廣泛受眾的主題，我們可能想使用Automattic提供的主題單元測試數據

，因為它可能會提供用於測試案例和主題詳細信息範圍的內容。

我們可以將圖像大小指定為Fakerpress，但它很可能仍然會導致雜亂的外觀。

>當我們構建主題時，用於實現拋光，標準化外觀的技術之一是指定>縮略圖。這些是標準尺寸WordPress，將調整所有上傳圖像以適合。我們將使用WordPress

add_image_size（）

>函數添加我們主題將使用的幾個圖像大小：

<span><span><?php
</span></span><span><span>/**
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> */
</span></span><span>
</span><span><span>get_header(); ?></span>
</span>
    <span><span><?php
</span></span><span>    <span>if ( have_posts() ) : while ( have_posts() ): the_post();
</span></span><span>
</span><span>                <span>get_template_part( 'partials/content', get_post_type() );
</span></span><span>
</span><span>        <span>endwhile;
</span></span><span>    <span>endif;
</span></span><span>    <span>?></span>
</span>
<span><span><?php get_footer(); ?></span>
</span>
登入後複製
登入後複製
登入後複製
登入後複製
然後，我們將在我們的content.php中使用> >要在我們的存檔或博客列表中實現一個格式摘要
<span><span><span><div</span> <span><span><?php post_class( 'post-preview' ); ?></span></span> id<span>="post-<span><?php the_ID(); ?></span>"</span>></span>
</span>
<span><span><span><header</span> class<span>="entry-header"</span>></span>
</span>    <span><span><?php
</span></span><span>    <span>if ( is_singular() ) :
</span></span><span>        <span>the_title( '<h1 >', '</h1>' );
</span></span><span>    <span>else :
</span></span><span>        <span>the_title( '<h2 ><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
</span></span><span>    <span>endif;
</span></span><span>
</span><span>    <span>if ( 'post' === get_post_type() ) :
</span></span><span>        <span>?></span>
</span>        <span><span><span><div</span> class<span>="entry-meta"</span>></span>
</span>            <span><span><?php
</span></span><span>            <span>bsimple_posted_on();
</span></span><span>            <span>bsimple_posted_by();
</span></span><span>            <span>?></span>
</span>        <span><span><span></div</span>></span><!-- .entry-meta -->
</span>    <span><span><?php endif; ?></span>
</span><span><span><span></header</span>></span><!-- .entry-header -->
</span>
        <span><span><span><a</span> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></span>
</span>            <span><span><?php
</span></span><span>            <span>the_post_thumbnail( 'post-thumbnail', array(
</span></span><span>
</span><span>            <span>) );
</span></span><span>            <span>?></span>
</span>        <span><span><span></a</span>></span>
</span>
        <span><span><?php the_excerpt(); ?></span>
</span>
<span><span><span></div</span>></span>
</span>
登入後複製
登入後複製
登入後複製
登入後複製
，我們將增加字體的大小，但是為此，我們將減少由 ： >能夠浮動圖像（我們剛才提到的縮略圖）和摘錄，我們將以下內容添加到我們的CSS中的父元素選擇器：> 
<span>add_image_size( 'list-thumb-1', 730, 400, true);
</span><span>add_image_size( 'small-list-thumb-1', 400, 200, true);
</span><span>add_image_size( 'small-list-thumb-2', 300, 200, true);
</span><span>add_image_size( 'small-list-thumb-3', 220, 140, true);
</span>
登入後複製
登入後複製
登入後複製
（我們在這裡不介紹對主題本身至關重要的較小樣式調整。）

>

現在，我們可以增加字體大小，並通過浮動圖像（與A apent元素一起浮動圖像）圍繞圖像進行漂浮 
<span><span><span><a</span> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></span>
</span>    <span><span><?php
</span></span><span>    <span>the_post_thumbnail( 'small-list-thumb-1');
</span></span><span>    <span>?></span>
</span><span><span><span></a</span>></span>
</span>
登入後複製
登入後複製

>以後我們還將在單帖子/頁面上使用post_thumbnails。

主題側欄

主題側邊欄是主題中的寬度區域。它們需要在WordPress系統中註冊，以便我們可以將不同的小部件放置到這些區域。一旦這樣做，我們就會在模板文件中打印或輸出這些小部件。 如何從頭開始構建WordPress主題：最終步驟>我們將在主題中註冊許多側欄，可以在主題的GitHub存儲庫中看到。我們通過將以下代碼添加到我們的functions.php：來做到這一點。

>在這裡，我們展示瞭如何註冊兩個側邊欄。有關register_sidebar（）函數的更多詳細信息可以在wordpress.org。

我們註冊了11個側邊欄，但是我們不需要在所有頁面模板或網站位置中輸出所有這些側欄。如果它們是在當前自定義頁面中輸出的，則可以在小部件下的

customizer

中訪問：

> 

<span># functions.php
</span><span>function custom_excerpt_length( $length ) {
</span>    <span>return 40;
</span><span>}
</span><span>add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );
</span>
登入後複製
登入後複製
>這是footer.php中側邊欄或小部件區域的實際輸出的一個示例 - 這意味著它可以在全球顯示：

>在這裡，我們使用了上面的bottom_center_sidebar中使用的側欄ID。 > >我們還根據主欄是否有活躍的小部件（IS_ACTIVE_SIDEDBAR（））來調節主頁上的中央內容容器的寬度：

>我們輸出依賴於這些條件的Bootstrap類，確保如果我們省略為頁面設置小部件，例如如何從頭開始構建WordPress主題：最終步驟> home

>。

>我們用小部件和圖像填充這些小部件區域後，這就是我們得到的： 

<span><span>.home .post-preview.post</span> {
</span>    <span>overflow: hidden;
</span><span>}
</span>
登入後複製

主題的塑造很好。讀者當然會適應他們喜歡的樣式。

>

> Customizer api 
<span>// Register custom sidebars
</span><span>function sidebar_register() {
</span>
    <span>$args = array(
</span>        <span>'name'          => __( 'home_header', 'bsimple' ),
</span>        <span>'description'   => __( 'home_header', 'bsimple' ),
</span>        <span>'id'            => 'h_h',
</span>        <span>'class'         => 'home_header',
</span>        <span>'before_widget' => ' <div >',
</span>        <span>'after_widget'  => '</div>',
</span>        <span>'before_title'  => '<h2 >',
</span>        <span>'after_title'   => '</h2>',
</span>    <span>);
</span>    <span>register_sidebar($args);
</span>
    <span>$args = array(
</span>        <span>'name'          => __( 'archive_sidebar_1', 'bsimple' ),
</span>        <span>'description'   => __( 'Archive Sidebar no 1', 'bsimple' ),
</span>        <span>'id'            => 'a_s_1',
</span>        <span>'class'         => 'archive_sidebar_1',
</span>        <span>'before_widget' => ' <div >',
</span>        <span>'after_widget'  => '</div>',
</span>        <span>'before_title'  => '<h2 >',
</span>        <span>'after_title'   => '</h2>',
</span>    <span>);
</span>    <span>register_sidebar($args);
</span>
    <span>$args = array(
</span>        <span>'name'          => __( 'bottom_center_sidebar', 'bsimple' ),
</span>        <span>'description'   => __( 'Bottom Center Sidebar', 'bsimple' ),
</span>        <span>'id'            => 'b_c_s',
</span>        <span>'class'         => 'bottom_center_sidebar',
</span>        <span>'before_widget' => '<div >',
</span>        <span>'after_widget'  => '</div>',
</span>        <span>'before_title'  => '<h2 >',
</span>        <span>'after_title'   => '</h2>',
</span>    <span>);
</span>    <span>register_sidebar($args);
</span>
<span>}
</span><span>add_action( 'widgets_init', 'sidebar_register' );
</span>
登入後複製

>當我們談論樣式時，我們將提及“定制器API”，並展示如何使用它來對標題的用戶友好控制。

這是我們如何創建新的面板，pance和 control的一個示例（functions.php又） 

<span><span><?php
</span></span><span><span>/**
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> */
</span></span><span>
</span><span><span>get_header(); ?></span>
</span>
    <span><span><?php
</span></span><span>    <span>if ( have_posts() ) : while ( have_posts() ): the_post();
</span></span><span>
</span><span>                <span>get_template_part( 'partials/content', get_post_type() );
</span></span><span>
</span><span>        <span>endwhile;
</span></span><span>    <span>endif;
</span></span><span>    <span>?></span>
</span>
<span><span><?php get_footer(); ?></span>
</span>
登入後複製
登入後複製
登入後複製
登入後複製
>這裡的主要內容是customize_register鉤子，$ wp_customize方法的順序（add_panel，add_section，add_setting，add_control。訂單效果。

>在functions.php中添加設置和控件後，我們將以下代碼添加到BSIMPLE_SCRIPTS（）函數的底部，我們創建了為了加入我們的腳本和样式：

>

>我們在標題容器中添加了phome，pfront和pglobal類。現在，我們使用
<span><span><span><div</span> <span><span><?php post_class( 'post-preview' ); ?></span></span> id<span>="post-<span><?php the_ID(); ?></span>"</span>></span>
</span>
<span><span><span><header</span> class<span>="entry-header"</span>></span>
</span>    <span><span><?php
</span></span><span>    <span>if ( is_singular() ) :
</span></span><span>        <span>the_title( '<h1 >', '</h1>' );
</span></span><span>    <span>else :
</span></span><span>        <span>the_title( '<h2 ><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
</span></span><span>    <span>endif;
</span></span><span>
</span><span>    <span>if ( 'post' === get_post_type() ) :
</span></span><span>        <span>?></span>
</span>        <span><span><span><div</span> class<span>="entry-meta"</span>></span>
</span>            <span><span><?php
</span></span><span>            <span>bsimple_posted_on();
</span></span><span>            <span>bsimple_posted_by();
</span></span><span>            <span>?></span>
</span>        <span><span><span></div</span>></span><!-- .entry-meta -->
</span>    <span><span><?php endif; ?></span>
</span><span><span><span></header</span>></span><!-- .entry-header -->
</span>
        <span><span><span><a</span> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></span>
</span>            <span><span><?php
</span></span><span>            <span>the_post_thumbnail( 'post-thumbnail', array(
</span></span><span>
</span><span>            <span>) );
</span></span><span>            <span>?></span>
</span>        <span><span><span></a</span>></span>
</span>
        <span><span><?php the_excerpt(); ?></span>
</span>
<span><span><span></div</span>></span>
</span>
登入後複製
登入後複製
登入後複製
登入後複製
WP_ADD_INLINE_STYLE（）和我們用來在開始時使用基本主題樣式的Bsimple風格的手柄 - 輸出我們剛剛創建的定制器設置。我們使用get_theme_mod（）獲取我們註冊的每個設置。

> 這樣，我們可以為指南中的Dynamic_header（）函數分開的標題設置圖像：

單頁和帖子

> WordPress模板層次結構可幫助我們定位訪問時加載的確切URL並發布的發布，以便我們可以原子設計每個其中的HTML輸出。很多時候，我們不需要創建所有模板。 >

>為所有帖子或頁面添加通用背景圖像是沒有意義的。因此，我們的自定義策略將用於檔案，用於帖子的博客列表，首頁甚至是術語。但是對於特定的頁面和帖子，我們可能希望單獨設置圖像。 
<span>add_image_size( 'list-thumb-1', 730, 400, true);
</span><span>add_image_size( 'small-list-thumb-1', 400, 200, true);
</span><span>add_image_size( 'small-list-thumb-2', 300, 200, true);
</span><span>add_image_size( 'small-list-thumb-3', 220, 140, true);
</span>
登入後複製
登入後複製
登入後複製
我們該怎麼做？

>

>在我們的Dynamic_header（）函數中，我們已經為

> pages

>的標題指定了，所以現在我們將使用內聯樣式和get_the_post_thumbnail_url（）函數來設置頁面'

特色圖像

🎜>作為標題背景：

現在，用戶可以為每個頁面設置標頭圖像。我們可以為IS_Single（）案例做同樣的事情，該案例將對所有帖子應用相同的解決方案（包括自定義帖子類型）。 >此行將允許用戶在每個頁面，名稱subtitle_添加自定義字段，並將其輸出到頁面標題：> 

<span><span><span><a</span> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></span>
</span>    <span><span><?php
</span></span><span>    <span>the_post_thumbnail( 'small-list-thumb-1');
</span></span><span>    <span>?></span>
</span><span><span><span></a</span>></span>
</span>
登入後複製
登入後複製

如果我們看不到“自定義字段”部分，我們可以在編輯屏幕的右上角通過

屏幕選項

<span># functions.php
</span><span>function custom_excerpt_length( $length ) {
</span>    <span>return 40;
</span><span>}
</span><span>add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );
</span>
登入後複製
登入後複製

完成此操作後，我們將在單個頁面上查看下面的subtitle_ meta字段：如何從頭開始構建WordPress主題：最終步驟>

所有這些東西以及樣式 - 也可以應用於

帖子

>如何從頭開始構建WordPress主題：最終步驟>

我們現在需要在single.php和pagp.php中格式化輸出

由於本指南的空間約束，我們將創建將在這兩個模板中使用的內容，但是該結構將允許讀者在需要時更具體地適應和自定義這些模板：> 

<span><span><?php
</span></span><span><span>/**
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> */
</span></span><span>
</span><span><span>get_header(); ?></span>
</span>
    <span><span><?php
</span></span><span>    <span>if ( have_posts() ) : while ( have_posts() ): the_post();
</span></span><span>
</span><span>                <span>get_template_part( 'partials/content', get_post_type() );
</span></span><span>
</span><span>        <span>endwhile;
</span></span><span>    <span>endif;
</span></span><span>    <span>?></span>
</span>
<span><span><?php get_footer(); ?></span>
</span>
登入後複製
登入後複製
登入後複製
登入後複製
>在這裡，我們使用的是10/12寬的單列佈局，以MX-AUTO類為中心。我們使用部分內容single.php來輸出實際內容。

>

在此部分中，我們使用the_content（）和wp_link_pages（）：>

>現在，我們有針對單頁和帖子的最低限度，但是可以使用WordPress函數添加更多最低限度。我們可以自動指定我們希望WordPress在單個帖子，單頁和屬於特定類別等的頁面中輸出的細節等 
<span><span><span><div</span> <span><span><?php post_class( 'post-preview' ); ?></span></span> id<span>="post-<span><?php the_ID(); ?></span>"</span>></span>
</span>
<span><span><span><header</span> class<span>="entry-header"</span>></span>
</span>    <span><span><?php
</span></span><span>    <span>if ( is_singular() ) :
</span></span><span>        <span>the_title( '<h1 >', '</h1>' );
</span></span><span>    <span>else :
</span></span><span>        <span>the_title( '<h2 ><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
</span></span><span>    <span>endif;
</span></span><span>
</span><span>    <span>if ( 'post' === get_post_type() ) :
</span></span><span>        <span>?></span>
</span>        <span><span><span><div</span> class<span>="entry-meta"</span>></span>
</span>            <span><span><?php
</span></span><span>            <span>bsimple_posted_on();
</span></span><span>            <span>bsimple_posted_by();
</span></span><span>            <span>?></span>
</span>        <span><span><span></div</span>></span><!-- .entry-meta -->
</span>    <span><span><?php endif; ?></span>
</span><span><span><span></header</span>></span><!-- .entry-header -->
</span>
        <span><span><span><a</span> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></span>
</span>            <span><span><?php
</span></span><span>            <span>the_post_thumbnail( 'post-thumbnail', array(
</span></span><span>
</span><span>            <span>) );
</span></span><span>            <span>?></span>
</span>        <span><span><span></a</span>></span>
</span>
        <span><span><?php the_excerpt(); ?></span>
</span>
<span><span><span></div</span>></span>
</span>
登入後複製
登入後複製
登入後複製
登入後複製
>全局小部件和頁腳

>我們為頁腳創建了三個小部件（側欄）區域，並將輸出添加到footer.php中。我們還在頁腳標籤上方添加了一個部分或小部件區域。這些小部件不是特定於主頁，頁面或檔案，而是全球性的。一旦我們將小部件分配給它們，他們將顯示範圍內的網站：

我們得到的是一個簡單的底部和頁腳區域，我們可以用窗口小部件填充：

<span>add_image_size( 'list-thumb-1', 730, 400, true);
</span><span>add_image_size( 'small-list-thumb-1', 400, 200, true);
</span><span>add_image_size( 'small-list-thumb-2', 300, 200, true);
</span><span>add_image_size( 'small-list-thumb-3', 220, 140, true);
</span>
登入後複製
登入後複製
登入後複製

我們現在有一個最小但功能性的主題，可以用來顯示內容。 如何從頭開始構建WordPress主題：最終步驟本指南將在這裡停止，但是接下來的事物可能要做的是確保所有用例涵蓋所有用例，並且該主題是100％全功能的。為此，安裝主題檢查插件以及其他工具，以檢查我們的主題缺少的內容，並確保一切都符合標準：

>

結論

如何從頭開始構建WordPress主題：最終步驟>本指南的目的是對WordPress主題構建進行全面介紹。希望它介紹了所有基本的WordPress主題構建概念，並展示了它們如何團結在一起。

>但仍然有一些東西要學習 - 例如評論部分，作者模板，404頁和許多其他小細節，如果我們想更加專業，應該涵蓋這個主題。 >

>本系列的初始代碼可在此處的GitHub上找到，我們在本指南中構建的主題的最終版本可在此處獲得。 在這些基礎上，可以在綜合WordPress法典的幫助下建立更多的基礎。

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

>在主題結構

上

主題基礎

完善主題

經常詢問有關從頭開始構建WordPress主題的問題

    如何在WordPress中沒有
  • 中的給定頁面ID的內容，在WordPress中，給定頁面ID的內容通常包裹在A
>中用於樣式的標籤。但是，如果要在沒有包裝器的情況下顯示內容，則可以使用“ the_content”過濾器。此過濾器允許您從數據庫中檢索到帖子後，但在將其打印到屏幕之前修改它的內容。這是一個簡單的示例，說明如何使用此過濾器刪除

>標籤：

函數remove_p_tags（$ content）{

return return strip_tags（$ content，'

'） ;
}
add_filter（'the_content'，'remove_p_tags'）;
此代碼將從帖子內容中刪除所有

標籤。請注意，這將影響所有帖子，因此請仔細使用它。

為什麼我的頭版不加載WordPress？

可能有幾個原因，為什麼您的前頁沒有在WordPress中加載。 。以下是一些常見問題及其解決方案：

1。設置不正確：檢查您的WordPress設置>讀取>讀取，並確保將正確的頁面設置為首頁。

2。主題問題：問題可能與您的主題有關。嘗試切換到默認的WordPress主題，看看問題是否持續。插件衝突：有時，插件可能會相互衝突或與您的主題衝突，從而導致您的頭版不加載。嘗試停用所有插件，然後一一重新激活它們以識別有問題的插件。

4。損壞的.htaccess文件：損壞的.htaccess文件也可能導致此問題。嘗試將.htaccess文件重命名為.htaccess_old之類的東西，看看是否可以解決問題。
>
如果這些解決方案都不可用，則最好與您的託管提供商或WordPress專家聯繫以獲取進一步的幫助，這可能是一個好主意。 。

>如何通過使用WordPress函數和JavaScript的組合來實現在WordPress中顯示其內容的發布ID？以下是如何執行此操作的基本示例：

首先，您需要獲取發布ID。您可以使用WordPress中的get_the_id（）函數來執行此操作。此功能將返回循環中當前帖子的ID。

$ post_id = get_the_id（）;

接下來，您需要獲取帖子的內容。您可以使用get_post_field（）函數來執行此操作。此函數從帖子中檢索特定字段的值。在這種情況下，您需要獲取'post_content'字段。


$ post_content = get_post_field（'post_content'，$ post_id'，$ post_id）;





您可以使用javascript在彈出窗口。這是一個簡單的示例，使用alert（）函數：
alert（''）;

請注意，這是一個非常基本的示例，可能不是在所有情況下都能完美工作。對於更強大的解決方案，您可能需要考慮使用插件或更高級的JavaScript庫來創建彈出窗口。

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

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

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

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

顯示更多

熱門文章

如何修復KB5055523無法在Windows 11中安裝？
3 週前 By DDD
如何修復KB5055518無法在Windows 10中安裝？
3 週前 By DDD
R.E.P.O.的每個敵人和怪物的力量水平
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
<🎜>：死鐵路 - 如何馴服狼
3 週前 By DDD
<🎜>：種植花園 - 完整的突變指南
2 週前 By DDD
顯示更多

熱工具

記事本++7.3.1

記事本++7.3.1

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

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

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

顯示更多

熱門話題

Java教學
1655
14
CakePHP 教程
1413
52
Laravel 教程
1306
25
PHP教程
1252
29
C# 教程
1226
24
顯示更多
Related knowledge
如何開始WordPress博客：初學者的分步指南 如何開始WordPress博客：初學者的分步指南 Apr 17, 2025 am 08:25 AM

博客是人們在網上表達觀點、意見和見解的理想平台。許多新手渴望建立自己的網站，卻因擔心技術障礙或成本問題而猶豫不決。然而，隨著平台不斷發展以滿足初學者的能力和需求，現在開始變得比以往任何時候都更容易。 本文將逐步指導您如何建立一個WordPress博客，從主題選擇到使用插件提升安全性和性能，助您輕鬆創建自己的網站。 選擇博客主題和方向 在購買域名或註冊主機之前，最好先確定您計劃涵蓋的主題。個人網站可以圍繞旅行、烹飪、產品評論、音樂或任何激發您興趣的愛好展開。專注於您真正感興趣的領域可以鼓勵持續寫作

wordpress文章列表怎麼調 wordpress文章列表怎麼調 Apr 20, 2025 am 10:48 AM

有四種方法可以調整 WordPress 文章列表：使用主題選項、使用插件（如 Post Types Order、WP Post List、Boxy Stuff）、使用代碼（在 functions.php 文件中添加設置）或直接修改 WordPress 數據庫。

如何在 WordPress 中獲取登錄用戶信息以獲得個性化結果 如何在 WordPress 中獲取登錄用戶信息以獲得個性化結果 Apr 19, 2025 pm 11:57 PM

最近，我們向您展示瞭如何通過允許用戶將自己喜歡的帖子保存在個性化庫中來為用戶創建個性化體驗。您可以通過在某些地方（即歡迎屏幕）使用他們的名字，將個性化結果提升到另一個水平。幸運的是，WordPress使獲取登錄用戶的信息變得非常容易。在本文中，我們將向您展示如何檢索與當前登錄用戶相關的信息。我們將利用get_currentuserinfo(); 功能。這可以在主題中的任何地方使用（頁眉、頁腳、側邊欄、頁面模板等）。為了使其工作，用戶必須登錄。因此我們需要使用

如何在父分類的存檔頁面上顯示子分類 如何在父分類的存檔頁面上顯示子分類 Apr 19, 2025 pm 11:54 PM

您想了解如何在父分類存檔頁面上顯示子分類嗎？在自定義分類存檔頁面時，您可能需要執行此操作，以使其對訪問者更有用。在本文中，我們將向您展示如何在父分類存檔頁面上輕鬆顯示子分類。為什麼在父分類存檔頁面上顯示子分類？通過在父分類存檔頁面上顯示所有子分類，您可以使其不那麼通用，對訪問者更有用。例如，如果您運行一個關於書籍的WordPress博客，並且有一個名為“主題”的分類法，那麼您可以添加“小說”、“非小說”等子分類法，以便您的讀者可以

如何在 WordPress 中按帖子過期日期對帖子進行排序 如何在 WordPress 中按帖子過期日期對帖子進行排序 Apr 19, 2025 pm 11:48 PM

過去，我們分享過如何使用PostExpirator插件使WordPress中的帖子過期。好吧，在創建活動列表網站時，我們發現這個插件非常有用。我們可以輕鬆刪除過期的活動列表。其次，多虧了這個插件，按帖子過期日期對帖子進行排序也非常容易。在本文中，我們將向您展示如何在WordPress中按帖子過期日期對帖子進行排序。更新了代碼以反映插件中更改自定義字段名稱的更改。感謝Tajim在評論中讓我們知道。在我們的特定項目中，我們將事件作為自定義帖子類型。現在

如何使用 IFTTT 自動化 WordPress 和社交媒體（及更多） 如何使用 IFTTT 自動化 WordPress 和社交媒體（及更多） Apr 18, 2025 am 11:27 AM

您是否正在尋找自動化 WordPress 網站和社交媒體帳戶的方法？ 通過自動化，您將能夠在 Facebook、Twitter、LinkedIn、Instagram 等平台上自動分享您的 WordPress 博客文章或更新。 在本文中，我們將向您展示如何使用 IFTTT、Zapier 和 Uncanny Automator 輕鬆實現 WordPress 和社交媒體的自動化。 為什麼要自動化 WordPress 和社交媒體？ 自動化您的WordPre

如何在 WordPress 中顯示查詢數量和頁面加載時間 如何在 WordPress 中顯示查詢數量和頁面加載時間 Apr 19, 2025 pm 11:51 PM

我們的一位用戶詢問其他網站如何在頁腳中顯示查詢數量和頁面加載時間。您經常會在網站的頁腳中看到這一點，它可能會顯示類似以下內容：“1.248秒內64個查詢”。在本文中，我們將向您展示如何在WordPress中顯示查詢數量和頁面加載時間。只需將以下代碼粘貼到主題文件中您喜歡的任何位置（例如footer.php）。 queriesin

wordpress主機怎麼建站 wordpress主機怎麼建站 Apr 20, 2025 am 11:12 AM

要使用 WordPress 主機建站，需要：選擇一個可靠的主機提供商。購買一個域名。設置 WordPress 主機帳戶。選擇一個主題。添加頁面和文章。安裝插件。自定義您的網站。發布您的網站。

See all articles