首頁 > CMS教程 > &#&按 > 如何從頭開始構建WordPress主題:最終步驟

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

Christopher Nolan
發布: 2025-02-09 09:42:13
原創
861 人瀏覽過

如何從頭開始構建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
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板