WordPress 主题

如何輕鬆創建自定義WordPress主題(無需任何編碼)

如何輕鬆創建自定義WordPress主題(無需任何編碼)

更新日期:2024年3月27日 | 編輯部 | 審稿:Syed Balkhi

你是否想從頭開始創建自定義的WordPress主題?

過去,您需要遵循複雜的WordPress教程並具備相當的編碼知識才能構建自定義WordPress主題。但如今,感謝新的WordPress主題構建器,您可以輕鬆地在不學習任何編程技能的情況下製作主題。

在本文中,我們將向您展示如何在不編寫任何代碼的情況下輕鬆創建自定義WordPress主題。

本文目錄

  • 為初學者創建自定義WordPress主題
  • 使用SeedProd主題構建器創建自定義主題
  • 使用SeedProd主題構建器編輯主題
  • 更改站點範圍的主題設計
  • 應用並發布自定義WordPress主題
  • 為自定義WordPress主題創建其他佈局

視頻教程

訂閱WPressize Me,如果您更願意閱讀文字說明,請繼續閱讀。

為初學者創建自定義WordPress主題

WordPress網站使用主題來佈局和設計網站。這些主題由PHP、HTML、CSS和JavaScript模板文件組成。通常,您需要了解這些網頁設計語言,或者聘請網頁開發人員來創建自定義WordPress主題。

如果您聘請開發人員或代理商,則自定義WordPress主題的成本可能高達數千美元。由於許多小企業無法負擔高昂的自定義WordPress主題成本,因此很多人只是滿足於默認主題。那些不願意妥協的人則使用WordPress頁面構建器或主題框架來構建自定義主題。雖然WordPress主題框架使構建WordPress主題變得更容易,但它們是為開發人員而設計的,而不是普通網站所有者。

另一方面,WordPress頁面構建器插件使得使用拖放界面構建自定義頁面佈局變得超級容易,但它們僅限於單頁佈局,無法構建自定義主題。

這就是SeedProd的用途。它是最好的WordPress主題構建插件,可以讓您在不編寫任何代碼的情況下輕鬆創建自定義WordPress主題。

SeedProd是一款拖放式WordPress頁面構建器,適用於企業、博主和網站所有者。現在,它還配備了一個新的自定義主題設計器,允許您僅需指點和點擊即可編輯任何元素。您還可以通過拖放的方式將常用的設計元素添加到您的主題中。

SeedProd主題構建器的最大優點是它不依賴於您現有的WordPress主題樣式或功能,賦予您完全的自由和控制權。

如果您正在尋找替代方案,您還可以使用Thrive Theme Builder插件輕鬆創建自定義WordPress主題。

那麼,讓我們來看看如何使用SeedProd在不編寫任何代碼的情況下創建自定義WordPress主題。

使用SeedProd主題構建器創建自定義主題

設置SeedProd主題構建器非常簡單,因為它適用於使用任何主題的任何WordPress網站。

首先,您需要安裝並激活SeedProd插件。詳細信息,請參閱我們的逐步指南,了解如何安裝WordPress插件。注意:您需要至少購買專業版或精英版計劃才能解鎖主題構建器。

激活後,導航至SeedProd » 設置頁面並輸入您的插件許可密鑰。您可以在SeedProd網站上的帳戶下找到這些信息。

輸入許可密鑰後,您現在可以使用SeedProd主題構建器創建自定義WordPress主題了。

使用現成的主題(推薦)

我們推薦從現有主題開始。這允許SeedProd自動生成所有模板文件。這些都是完全專業設計的主題,讓您在編輯模板時得到一個良好的開始。

簡單點擊“主題”按鈕,然後選擇一個可用主題。不同類型的網站會有不同的主題,您可以選擇最符合您需要的主題。

先不要擔心設計和佈局,所有這些主題都是完全可編輯的,您可以在主題構建器中更改其每一個方面。

選擇主題後,SeedProd將生成所有的主題模板。

這是您的自定義WordPress主題的草稿版本。在本教程的後面部分,我們會展示如何編輯這些主題文件以設計和發布您的主題,並將其應用於您網站。

從頭開始手動創建主題模板

或者,您可以通過點擊’新增主題模板’按鈕從頭開始創建您的主題。您需要為模板命名,然後選擇一個模板類型開始。

目前,您可以選擇以下模板類型: 頁眉、頁腳、單篇文章、單頁面、歸檔、搜索結果、全局部分、自定義頁面。

您還可以設置使用模板的條件。例如,您可以將其應用於整個網站或網站的特定部分。

保存模板後,SeedProd將在主題構建器中打開它,您可以開始編輯它。

使用SeedProd主題構建器編輯主題

生成主題模板後,可以使用SeedProd主題構建器編輯它們。簡單點擊模板文件下的“編輯設計”鏈接進行編輯。

這將在SeedProd主題構建器中打開模板文件。您將在右側欄看到模板的實時預覽,左側欄有編輯面板。

要更改模板文件中的項目,您可以簡單地指向並點擊編輯它。

根據項目類型,您將在左側欄看到不同的編輯選項。您可以更改字體、顏色、背景、間距等。

要添加新項目,可以從左側欄添加SeedProd塊。它有一堆塊類型,您可以添加到您的模板中。

模板標籤塊

模板標籤塊是動態塊,允許您從WordPress數據庫即時生成主題元素。

例如,您可以使用“帖子”塊列出最近的帖子,或者使用“文章內容”塊顯示當前顯示的文章或頁面的內容。

標準塊

接下來,您有標準塊,可以將常見的網頁設計元素添加到主題的模板中。您可以使用它們添加文本、媒體、按鈕、列、分隔符等。

其他塊

其他高級塊允許您添加聯繫表單、社交資料、分享按鈕、WordPress短代碼、Google地圖、價格列表、倒數計時器等。

SeedProd還與WooCommerce完全集成。如果您運營在線商店,則可以在主題中使用WooCommerce塊。您可以創建完全自定義的WooCommerce模板,擁有自定義的購物車頁面和結算體驗。

使用部分快速佈局主題

除了塊,您還可以將完整的部分添加到您的主題模板。只需在設計面板下切換到“部分”選項卡。

部分是針對網站設計不同區域的一組塊。例如,您將找到現成可用的部分,用於頁眉、頁腳、行動呼籲、功能等。簡單點擊一個部分將其添加到您的主題模板中,然後根據您的需求進行編輯。

使用AI網站構建器立即生成內容

SeedProd還提供了一個強大的AI網站構建器,可以自動編寫您的主題模板內容。您可以立即生成引人入勝的標題、描述、行動呼籲、正文文本等。簡單點擊SeedProd構建器中的任何標題或文本塊,打開左側的設置面板,然後點擊“生成AI文本”按鈕。

接下來,在文本框中輸入提示,基本上就是您希望AI助理撰寫內容的描述。或者,您可以從列表中選擇一個建議的提示。然後,點擊“生成文本”按鈕。

只需幾秒鐘,SeedProd將自動創建內容。從那裡,您可以優化文本、更改語調,甚至將文本翻譯成50多種語言。當您對內容感到滿意後,點擊“插入”按鈕將其添加到您的主題模板中。

您還可以使用AI網站構建器的DALL-E集成,為您的主題自動生成原創圖像。只需將一個圖像塊拖動到您的頁面上,然後點擊它以打開設置面板。接下來,點擊“用AI添加”按鈕。

然後,輸入圖像的描述,然後點擊“生成圖像”按鈕。生成圖像後,SeedProd將顯示它。要將圖像添加到您的主題模板中,點擊“插入”按鈕。

您還可以使用AI編輯圖像,並生成圖像的變體,以符合您的精確構想。

保存並發布您的模板

當您對設計感到滿意時,可以簡單點擊保存按鈕,然後選擇發布以保存您的模板。重複此過程,以符合您的內容和設計需求編輯其他模板文件。

更改主題的整站設計

在編輯主題模板時,您會希望確保您的設計在整個網站上保持一致。例如,您可能希望在每個頁面上使用相同的字體樣式、字體大小、顏色等。在傳統的WordPress主題中,您需要通過編輯複雜的CSS文件來實現這一點。這個過程需要使用瀏覽器的Inspect工具、定位CSS類、學習代碼等。

SeedProd使這一過程變得非常簡單。您可以通過編輯“全局CSS模板”來做到這一點。“全局CSS模板”允许您預覽常见的网站元素,然后您可以通过指点和点击来编辑其属性。

應用並發布您的自定義WordPress主題

當您對自定義WordPress主題感到滿意後,最後一步就是在您的WordPress網站上激活它。SeedProd允許您通過一個簡單的開關來應用您的自定義WordPress主題。

簡單導航到SeedProd » 主題構建器頁面,然後將“啟用SeedProd主題”選項旁的開關切換為“是”。

SeedProd現在將用您製作的自定義WordPress主題替換現有的WordPress主題。您現在可以訪問您的網站,看看您的自定義WordPress主題在實際運行中的效果。

為您的自定義WordPress主題創建其他佈局

現在您已經創建了自己的自定義WordPress主題,您可以選擇擴展其功能並基於您的主題創建更多設計和佈局。

SeedProd使這一過程變得極其簡單。您仍然可以調整您的自定義WordPress主題,並為網站的不同部分創建多個模板。

例如,您可能希望為您的主題添加一個新的頁眉模板,該模板只在特定分類下顯示。同樣,您可能希望為特定頁面或帖子創建一個模板。您也可以將其添加到您的主題中。

創建自定義登陸頁面

如何創建自定義登陸頁面?SeedProd亦能做到。

你可以簡單地進入SeedProd » 登陸頁面,然後點擊“新增登陸頁面”按鈕以創建一個。

詳細信息,請見我們的教程了解如何使用WordPress創建登陸頁面。通過使用SeedProd的初學者友好拖放主題構建器,您可以輕鬆創建任何類型的自定義佈局。

我們希望這篇文章能幫助您學習如何在不學習編碼的情況下創建自定義WordPress主題。您可能還希望看到我們的指南,了解如何加速您的WordPress網站以獲得更好的SEO和用戶體驗,或者我們為您挑選的最佳WordPress分析解決方案。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道,以獲取更多WordPress影片教程。您還可以在TwitterFacebook上找到我們。

Read More
WordPress 主题

如何為 WordPress 小工具添加自訂樣式(兩種方法)

如何為 WordPress 小工具添加自訂樣式(兩種方法)

自訂小工具樣式是一種強大的方式,可以提升網站外觀、保持品牌一致性並突出重要資訊。然而,許多 WordPress 用戶發現小工具樣式設計有挑戰性,尤其是當他們對 CSS 不太熟悉時。別擔心,我們來幫您。

在本文中,我們將展示兩種簡單的方法,讓您能夠在不破壞網站的情況下,為 WordPress 小工具添加自訂樣式。無論您是否熟悉 CSS 或偏好無需代碼的解決方案,我們都有適合您的方法。

我們將展示兩種添加自訂樣式到 WordPress 小工具的方法。您可以使用這些快速鏈接跳到最適合您的方法:

  • 方法 1:使用區塊編輯器添加自訂樣式(基本)
  • 方法 2:使用 CSS Hero 應用自訂樣式(更多自訂選項)

注意:本文章適用於經典主題用戶。如果您使用區塊主題,則不會在管理員界面上看到「小工具」或「主題自訂器」頁面。您需要使用區塊和全站編輯器來自訂主題。更多資訊詳情,請參閱我們的新手指南《WordPress 全站編輯》。

方法 1:使用區塊編輯器添加自訂樣式(基本)

WordPress 小工具現在使用區塊編輯器來添加小工具和區塊到小工具區域和側邊欄中。因此,您將在某些預設的 WordPress 區塊中看到一些區塊樣式選項。例如,若您前往 外觀 » 小工具 頁面並點擊一個預設的 WordPress 區塊,您將看到更改區塊顏色和排版的選項。

然而,並非所有區塊都提供這些選項,特別是那些非預設的 WordPress 區塊。幸運的是,使用區塊編輯器添加小工具的一個優勢是您可以輕鬆地為每個區塊添加自訂 CSS 類別。

您只需點擊您想添加自訂樣式的小工具。然後,向下捲動到區塊面板下的「高級」標籤。在這裡,您可以添加自訂 CSS 類別。

別忘了通過點擊「更新」按鈕來保存更改。接下來,您可以針對該特定 CSS 類別添加自訂 CSS 到您的 WordPress 主題中。

前往 外觀 » 自訂 頁面,切換到「額外 CSS」標籤。您將看到網站即時預覽和一個添加 CSS 規則的框。

另一種添加自訂 CSS 的方法是使用 WPCode。如果您的主題中已有大量自訂 CSS 代碼並希望輕鬆區分和跟踪所有片段,我們推薦使用這個方法。

首先,確保安裝 WPCode 外掛。您可以參閱我們的指南瞭解如何安裝 WordPress 外掛的逐步說明。

接下來,前往 代碼片段 » + 添加片段 並選擇「添加您的自訂代碼(新片段)」。然後,點擊「+ 添加自訂片段」。

現在,給您的新自訂 CSS 命名。比如「自訂小工具樣式」這樣的簡單名稱。然後,將代碼類型更改為「CSS 片段」。

接下來,請在欄位中添加您的自訂 CSS。

這是我們所使用的一些基本 CSS:

 .latest-articles { background-color:#def4f1; padding:10px; } 

當完成後,向下捲動到「插入」部分。確保插入方法設置為「自動插入」,位置為「全站頭部」。

之後,切換右上角的按鈕,直到它顯示「啟用」,並點擊「保存片段」。

添加自訂 CSS 後,您可以在手機或桌面上查看網站效果。我們的效果如下:

方法 2:使用 CSS Hero 應用自訂樣式(更多自訂選項)

上述方法的一個問題是您需要編寫 CSS 代碼。然而,並非所有用戶都懂 CSS,或者不願意自己編寫代碼。在這種情況下,您可以使用 CSS Hero。這是一個自訂 WordPress 樣式的外掛,允許您無需編寫任何代碼即可為您的 WordPress 主題添加自訂 CSS。

您可以在我們的 CSS Hero 評測中瞭解更多關於這個外掛的資訊。

首先,您需要安裝並啟用 CSS Hero 外掛。詳細內容可參考我們的逐步指南《如何安裝 WordPress 外掛》。

啟用後,該外掛會在您的 WordPress 管理工具欄上方添加一個新功能表項。

接下來,您需要訪問能夠查看您想樣式化的小工具的頁面,然後點擊頂部的 CSS Hero 按鈕。

這將在 CSS Hero 編輯器接口中打開該頁面。這是一個即時編輯器,您可以簡單地指向和點擊網站上的任何項目來更改它的樣式。

將滑鼠移到您想樣式化的小工具上,然後點擊選擇它。在這個示例中,我們選擇了搜索小工具。

之後,您可以使用左側功能表來隨意樣式化小工具。這包括漸變色、排版、填充、邊距和邊框等高級樣式選項。

在下面的示例中,我們更改了搜索小工具的字體大小,使其更加突顯。

如果需要,您還可以改變小工具的特定元素。例如,我們更改了按鈕和搜索欄位的邊框半徑,使它們看起來更加圓潤和時尚。

完成後,別忘了點擊「保存」按鈕來存儲設置。然後,預覽網站以查看更改效果。

我們希望本文能幫助您學會如何為 WordPress 小工具添加自訂樣式。您可能還想查看我們精選的最佳拖放頁面構建器和我們對免費與高級 WordPress 主題的優缺點比較。

如果您喜歡這篇文章,請訂閱我們的 YouTube 頻道 以獲取更多 WordPress 教學視頻。您也可以在 TwitterFacebook 上找到我們。

Read More
WordPress 主题

如何在WordPress 3.0主題中啟用自訂背景

如何在WordPress 3.0主題中啟用自訂背景

WordPress 3.0引入了一個新功能,稱為自訂背景。這個功能允許使用者添加自訂背景,從而使他們的博客或網站顯得更加獨特。雖然這個功能已經被加入到核心中,但只有當您的主題支持它時,它才會被激活。在這篇文章中,我們將向您展示如何在WordPress 3.0主題中啟用自訂背景。

步驟一:編輯functions.php文件

首先,打開您的functions.php文件,然後添加以下代碼:

add_theme_support('custom-background');

保存文件後,您應該能夠在外觀選項中看到“自訂背景”選項。

預設的Twenty Ten主題已經啟用了這個功能,因此如果您使用的是Twenty Ten主題,您可以直接在外觀選項中找到這個新功能。

注意事項

請注意,本文中的某些代碼已經棄用。如果您想了解最新的代碼,請參閱下文中的新代碼。

Read More
WordPress 主题

如何在WordPress文章循環中僅顯示子分類

大多數WordPress主題會顯示一篇文章的所有分類,包括父分類和子分類。然而,當你為文章添加了很多分類時,可能會讓你的网站看起來雜亂無章,讀者也會更難找到他們感興趣的內容。

為何在WordPress文章循環中僅顯示子分類?

建立WordPress博客時,可以使用分類和標籤來組織內容。為了幫助讀者更快地找到有趣的內容,您甚至可以創建子分類(或子目錄)。例如,假如您有一個旅遊博客,您可能會創建一個’目的地’分類,並在其下建立’歐洲’、’美洲’和’澳洲’等子分類。

預設情況下,多數WordPress主題會顯示一篇文章的所有父分類和子分類。但是如果您使用了很多分類,那麼您的博客頁面可能會看起來雜亂,而且這也會讓讀者更難找到他們感興趣的分類。因此,您可能希望隱藏文章的父分類,只顯示子分類。那麼,讓我們來看看如何在WordPress文章循環中僅顯示子分類。

編輯WordPress主題文件前的重點事項

這個指南適合那些對編碼和編輯WordPress主題文件有一定經驗的人。在進行教程之前,請做好以下準備工作:

  • 首先,您需要連接到您的網站的FTP或打開您的網絡主機的文件管理器以訪問這些文件。
  • 若您是初學者,可以參考我們的初學者指南,學習如何將Web上的代碼段粘貼到WordPress中。
  • 我們建議創建備份或使用臨時網站來跟隨此方法,以防出現問題,您的實時網站不會受到影響。
  • 此指南僅適用於傳統的WordPress主題。區塊主題的主題文件結構不同。

在WordPress文章循環中僅顯示子分類

首先,您需要找到主題文件中負責顯示分類的代碼。這可能需要一些時間,但您可以使用代碼編輯器的查找功能來加快速度。嘗試查找與分類相關的代碼,如has_categoryget_the_category_list。如果找到這些函數,那麼您應該已經在正確的文件中了。

例如,如果您使用的是Twenty Twenty-One主題,那麼您應該查找的是位於’inc’文件夾中的template-tags文件。這裡是負責顯示分類的代碼:

if ( has_category() || has_tag() ) {
    echo '
'; $categories_list = get_the_category_list( wp_get_list_item_separator() ); if ( $categories_list ) { printf( /* translators: %%s: List of categories. */ '' . esc_html__( 'Categorized as %s', 'twentytwentyone' ) . ' ', $categories_list // phpcs:ignore WordPress.Security.EscapeOutput ); } echo '
'; }

如果找不到正確的模板文件,可以參考我們的WordPress模板層次結構速查表。找到了正確的代碼後,可以添加以下代碼段:

$categories = get_the_category();
$child_cat_ID = array(); // 存儲子分類ID的數組
foreach( $categories as $category ) {
    if ( $category->parent > 0 ) { // 檢查分類是否有父分類,即其為子分類
        $child_cat_ID[] = $category->term_id; // 存儲子分類ID
    }
}
if ( !empty($child_cat_ID) ) {
    $output = '' . esc_html__( 'Categorized as ', 'twentytwentyone' );
    foreach($child_cat_ID as $cat_id) {
        $cat_link = get_category_link($cat_id);
        $cat_name = get_cat_name($cat_id);
        $output .= '' . esc_html($cat_name) . '';
    }
    $output .= ''; // 在循環後關閉span標簽
    echo $output; // 輸出完整內容
}

若您使用Twenty Twenty-One主題,將以上代碼添加至以下行之間:

if ( has_category() || has_tag() ) {
    echo '
'; // 在這些行之間替換代碼 } echo '
';

應看起來如下:

if ( has_category() || has_tag() ) {
    echo '
'; $categories = get_the_category(); $child_cat_ID = array(); // 存儲子分類ID的數組 foreach( $categories as $category ) { if ( $category->parent > 0 ) { // 檢查分類是否有父分類,即其為子分類 $child_cat_ID[] = $category->term_id; // 存儲子分類ID } } if ( !empty($child_cat_ID) ) { $output = '' . esc_html__( 'Categorized as ', 'twentytwentyone' ); foreach($child_cat_ID as $cat_id) { $cat_link = get_category_link($cat_id); $cat_name = get_cat_name($cat_id); $output .= '' . esc_html($cat_name) . ''; } $output .= ''; // 在循環後關閉span標簽 echo $output; // 輸出完整內容 } } echo '
';

完成後,保存變更並上傳文件至您的網絡主機服務器。現在,您需要訪問擁有一個或多個子分類的文章。您將看到父分類被隱藏,現在僅顯示子分類。

我們希望這篇文章能幫助您學會如何在WordPress文章中僅顯示子分類。接下來,您或許想查看我們的指南,了解如何通過WordPress博客賺錢,或了解我們精選的最佳SEO插件和工具。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道,獲取更多WordPress視頻教程。您也可以在Twitter和Facebook上找到我們。

Read More
WordPress 主题

如何在您的 WordPress 主題中顯示博客文章的元數據

如何在您的 WordPress 主題中顯示博客文章的元數據

最後更新於 2024 年 6 月 21 日,編輯部 | 審核人:Syed Balkhi

你想在你的 WordPress 博客文章中顯示元數據嗎?元數據包括有關您的文章的重要信息,例如發佈日期、作者名稱和標籤。有時,您可能希望在此部分顯示額外的詳情。

在本文中,我們將向您展示如何輕鬆在 WordPress 文章中顯示元數據。

為什麼要在您的 WordPress 網站上編輯和顯示博客文章的元數據?

博客文章的元數據是有關文章的非內容部分的信息。它包括發佈日期、作者名稱、分類和標籤等。這些元數據可以出現在不同的位置,取決於您的 WordPress 主題。

元數據可幫助訪客更了解您的內容,並發現其他有趣的文章。例如,他們可能會查找同一作者撰寫的更多博客文章。這樣,元數據可以改善用戶體驗,甚至可能增加頁面瀏覽量。不過,請謹慎顯示過多的元數據,否則可能會使您的網站顯得混亂。

默認情況下,WordPress 已經會顯示一些元數據,例如博客文章的發佈日期、作者名稱和分類。但有時,您可能希望添加額外的信息。

方法 1:使用 WordPress 主題自定義器(經典主題)

一些經典的 WordPress 主題允許您無需編寫代碼即可自定義元數據。要檢查您的主題是否支持此功能,只需轉到「外觀」» 「自定義」,這會打開 WordPress 主題自定義器。您現在可以查找任何允許您自定義博客頁面的設置,通常會標註為「博客」、「博客設置」、「文章」或類似的標籤。

方法 2:使用全站編輯器(塊主題)

如果您使用的是像 Hestia Pro 這樣的塊主題,則可以使用「文章元數據」塊在您的 WordPress 網站上顯示文章的元數據。要開始,請轉到 WordPress 控制板中的「外觀」» 「編輯器」。

方法 3:創建自定義 WordPress 主題(完全自定義)

另一個選項是創建自定義的 WordPress 主題。如果您希望為您的網站使用完全不同的主題,這是一個更高級的方法。您可以使用 SeedProd 等工具無需編寫代碼來設計自己的主題。

方法 4:使用高級自定義字段(完全自定義)

如果您覺得僅為顯示額外的元數據而創建自定義主題過於繁瑣,您可以使用自定義字段或自定義元數據框來添加自己的欄位,然後在文章編輯器中插入各種類型的元數據。

方法 5:向您的 WordPress 主題文件添加代碼(高級)

最後,您可以使用自定義代碼在 WordPress 中添加博客文章元數據。這種方法推薦給那些現有選項不能滿足需求的用戶。如果您是初學者,我們建議使用 WPCode 插件,這是一個最簡單且最安全的方法來插入自定義代碼片段。

我們希望這篇文章幫助您了解如何在 WordPress 主題中顯示博客文章的元數據。您還可以查看我們的添加元描述和關鍵字以及我們推薦的必備 WordPress 插件指南。如果您喜歡這篇文章,請訂閱我們的 YouTube 頻道以獲取更多 WordPress 視頻教程,也可以在 Twitter 和 Facebook 上關注我們。

Read More
WordPress 主题

最佳實踐:在添加至 WordPress 主題時檢查函數是否存在

最佳實踐:在添加至 WordPress 主題時檢查函數是否存在

最近,有一位用戶詢問我們如何在將依賴 PHP 函數的新代碼添加到 WordPress 網站之前檢查該函數是否存在。WordPress 最好的部分就是它的靈活性,包括能夠向網站添加自定義函數。然而,有時您的自定義代碼可能無法工作,因為它所引用的函數可能不存在。在本文中,我們將向您展示如何在將函數添加到 WordPress 主題之前輕鬆檢查函數是否存在。

為什麼要在自定義代碼中添加「如果函數存在」?

WordPress 主要由 PHP 編程語言編寫。PHP 是一種在 WordPress 託管供應商服務器上運行的服務器端編程語言。由於 PHP 代碼在訪問者的瀏覽器加載頁面之前必須完成運行,因此存在某些限制。其中一個限制是,如果出現問題,可能會阻止整個頁面加載。在 WordPress 中,如果缺少的函數阻止其餘代碼運行,那麼它將停止並顯示一個嚴重錯誤或致命錯誤信息。

那麼,什麼會導致函數突然停止工作或丟失?這是一個比你想象更常見的 WordPress 錯誤。例如,假設您的某個 WordPress 插件附帶了一個您已添加到主題的頁眉或頁腳區域的函數。禁用該插件會使函數消失,並在您的 WordPress 網站上引發致命錯誤。

在 WordPress 中檢查函數是否存在

幸運的是,PHP 編程語言有一個內置的方法,可以在執行函數之前輕鬆檢查函數的存在性。假設您有一個顯示當前時間及時區信息的 WordPress 函數。以下是您可以試用的代碼片段。

您可以直接將其添加到主題的 functions.php 文件,但在本教程中,我們將使用 WPCode 代碼片段插件,因為這是最安全和最簡單的方式來在 WordPress 中添加自定義代碼。首先,您需要安裝並激活 WPCode 免費插件。如需幫助,請參閱我們的分步初學者指南:如何安裝 WordPress 插件。激活後,您需要轉到 WordPress 儀表板上的 Code Snippets » + Add Snippet。一旦到達,將鼠標懸停在「Add Your Custom Code (New Snippet)」選項上,然後點擊出現的「Use snippet」按鈕。

這將打開一個新頁面,您可以在此添加自定義片段。輸入一個標題,例如「顯示當前時間及時區」,然後將以下代碼片段粘貼到 Code Preview 窗格中。

 //顯示當前時間及時區 function wpb_show_timezone() { $better_time = current_time('F j, Y g:i a e'); echo "

The current time is " . $better_time ."

"; }

之後,您需要從 Code Type 下拉菜單中選擇「PHP Snippet」以確保代碼正確運行。最後,您應該將激活切換開關切換到「開」位置,並點擊「Save Snippet」按鈕來保存您的新代碼片段。

要調用此函數,您需要在希望顯示當前時間的任何 WordPress 主題位置添加以下代碼。

這是我們測試網站上的顯示效果。

現在,如果執行該函數的代碼消失會發生什麼?調用該函數會像這樣中斷您的網站。

讓我們額外添加一個檢查,以確保此代碼僅在函數存在時運行。同樣,您需要將該代碼直接添加到主題的 functions.php 文件中或使用代碼片段插件(例如 WPCode,推薦)。

在此代碼中,我們使用了 function_exists() 函數。此函數檢查函數是否存在並返回 TrueFalse。然後,我們添加了一個 if-else 條件來根據函數的可用性採取適當的行動。現在,當函數不再可用時,代碼將簡單地跳過它,而 WordPress 將能夠正常加載其餘網站。

我們希望本文能幫助您了解如何在 WordPress 中檢查函數是否存在。您還可能想查看我們完整的 WordPress 疑難解答指南 或我們專家推薦的最佳拖放式 WordPress 頁面構建器

如果您喜歡這篇文章,請訂閱我們的 YouTube 頻道 以獲取更多 WordPress 視頻教程。您也可以在 TwitterFacebook 上找到我們。

Read More
WordPress 主题

如何在側邊欄中自訂 WordPress 資料庫的顯示

為什麼要自訂側邊欄中的 WordPress 資料庫顯示

WordPress 資料庫會自動按日期組織您的帖子,使訪問者能夠輕鬆找到較早的內容。許多網站所有者會在他們的 WordPress 網站中添加一個側邊欄,並在此區域中包括一個資料庫小工具,以便快速訪問過去的帖子。然而,默認的資料庫顯示往往會過長且不太友好,特別是對於擁有大量內容的網站。

選項 1:自訂默認的資料庫區塊(無插件)

默認的 WordPress 資料庫區塊或小工具實際上提供了自訂外觀的選項。若您使用經典主題,你可以通過前往“外觀 » 小工具”來打開基於區塊的插件編輯器。然後,點擊‘+’按鈕以在側邊欄中添加‘資料庫’區塊。

在右側區塊設置面板中,您會看到顯示資料庫為下拉菜單、顯示資料庫標籤以及顯示每個期間發布的帖子數量的選項。您還可以選擇按年、月、周或天顯示資料庫。

選項 2:創建緊湊的資料庫顯示

如果您的資料庫列表過長,那麼您可以創建一個緊湊的資料庫顯示,使您的帖子使用更少的空間顯示。您需要安裝並啟用 Compact Archives 插件。我們自己開發了這個插件,它在超過2000名用戶中運行良好。啟用該插件後,您可以使用‘WPressize Me Compact Archives’區塊將緊湊資料庫添加到您的主題側邊欄中。

選項 3:在可折疊菜單中顯示資料庫

另一種處理長資料庫列表的方法是顯示一個包含發布 blog 帖子的年份和月份的可折疊大綱。為此,您需要安裝並啟用 Collapsing Archives 插件。啟用後,訪問“外觀 » 小工具”頁面並將‘Collapsing Archives’小工具添加到您的側邊欄中。

選項 4:限制顯示的資料庫月份數量

也許您喜歡默認的 WordPress 資料庫外觀,但如果您有大量內容,顯示每個月或年的資料庫可能會使您的側邊欄過長。可以通過限制資料庫列表中出現的月份數量來解決這個問題。為此,您需要向您的 WordPress 主題文件添加自訂代碼。

選項 5:顯示月度和年度資料庫下拉菜單

有時,訪問者可能不知道帖子更新或發布的確切時間。為了幫助他們,您可以在資料庫區域中創建兩個下拉菜單:一個用於年份,另一個用於月份。

選項 6:按年份排列月度資料庫

有一次,我們需要設計一個網站,該網站需要在側邊欄中按年份排列的月度資料庫。這很難進行編碼,因為這個客戶只想在左側顯示年份。

發現更多 WordPress 部落格技巧和竅門

希望這篇教程能幫助您學習如何自訂側邊欄中的 WordPress 資料庫顯示。如果您想進一步改進您的 WordPress 部落格資料庫,或者重新設計您的側邊欄,請查看以下提示和技巧:

  • 如何為每個分類添加自訂標題、頁腳或側邊欄
  • 如何在 WordPress 中創建自訂文章類型的資料庫頁面
  • 如何在 WordPress 中創建自訂資料庫頁面
  • 如何在 WordPress 中更改側邊欄的位置
  • 如何添加圖片到 WordPress 側邊欄小工具
Read More
WordPress 主题

如何為您的 WordPress 添加自訂作者個人資料頁面

方法 1:使用 SeedProd 在 WordPress 中創建自訂作者個人資料頁面(推薦)

在 WordPress 中創建自訂作者個人資料頁面的最佳方法是使用 SeedProd 插件。SeedProd 是最好的拖放頁面構建器,它讓您輕鬆創建自訂的 WordPress 主題和頁面佈局,包括每位作者的精美頁面。

首先,您需要安裝並啟用 SeedProd 插件。安裝後,進入 SeedProd » 主題構建器並點擊「主題模板工具包」按鈕。選擇所需的網站主題,SeedProd 將導入網站工具包,然後您可以使用拖放主題構建器對模板進行自訂。

創建自訂作者頁面模板

完成網站主題的自訂後,現在開始創建自訂作者個人資料頁面。導航到 SeedProd » 主題構建器並點擊「新增主題模板」按鈕。在「類型」下拉選單中選擇「作者頁面」,之後點擊「儲存」按鈕。

自訂作者個人資料頁面

現在可以通過點擊下面的「編輯設計」鏈接開始自訂頁面。使用 SeedProd 的頁面構建器添加所需的區塊,如「標題」區塊和「作者簡介」區塊,這些區塊會自動抓取作者的 WordPress 用戶資料內容。

如果希望展示作者的最近文章,可以拖放「文章」區塊到頁面,並將「查詢類型」設置為自訂,啟用「按作者查詢」開關並選擇特定作者。完成頁面設計後,點擊頂部的「儲存」按鈕並退出頁面構建器。

發佈自訂作者個人資料頁面

要將作者頁面上線,您需要啟用自訂的 SeedProd 主題。在 SeedProd » 主題構建器中找到「啟用 SeedProd 主題」開關並將其設置為「是」。現在,您可以訪問網站並查看新的作者個人資料頁面。

方法 2:使用 WP User Manager 在 WordPress 中添加自訂作者個人資料頁面

此方法設置簡單,但其設計和自訂選項不如 SeedProd 多。首先安裝並啟用 WP User Manager 插件,然後訪問用戶 » 設定頁面配置插件。插件會自動創建用於自訂登錄、註冊、帳號和個人資料頁面的不同頁面。

在「個人資料」標籤下配置訪客尋簡和用戶查看彼此個人資料的設置,並選擇 SEO 友好的 URL 或永久鏈接。最終,在外觀 » 小工具頁面添加登錄表單小工具到側邊欄,這樣訪客和註冊用戶就能輕鬆找到他們的個人資料頁面。

方法 3:手動創建自訂作者個人資料頁面(代碼)

此方法需要您編輯 WordPress 主題或子主題文件。使用 FTP 客戶端連接到網站並進入您的當前主題文件夾,創建一個 author.php 文件並將 archive.php 文件的內容複製粘貼其中。

然後,編輯文件以顯示所需的作者個人資料信息,如作者名稱、照片和簡介。以帖子列表展示作者的最近文章,自由自訂代碼以匹配主題的顏色和樣式。完成編輯後,可以查看自訂的作者個人資料頁面在網站上的效果。

希望這篇文章能幫助您學習如何在 WordPress 中添加自訂作者個人資料頁面。如果您喜歡這篇文章,請訂閱我們的 YouTube 頻道獲取 WordPress 視頻教程,也可以在 Twitter 和 Facebook 上找到我們。

Read More
WordPress 主题

適用於 WordPress 的全方位社交媒體速查表(更新版)

適用於 WordPress 的全方位社交媒體速查表(更新版)

最後更新日期:2024年7月24日 由編輯團隊 | 評審:Syed Balkhi

為什麼需要適用於 WordPress 的社交媒體速查表?

如果您運營 WordPress 博客或網站的社交媒體賬戶,您會發現每個平台都有不同的要求。例如,Facebook 對圖像尺寸有特定要求,而 Pinterest 則需要完全不同的比例。這些資訊在創建社交媒體圖像時可能很難記住。

速查表可以幫助您快速查閱所有這些選項,確保在創建社交媒體賬戶或在您的 WordPress 網站上發佈新文章時不會遺漏任何重要資訊。

話不多說,讓我們開始介紹為 WordPress 用戶準備的最終社交媒體速查表。以下是本文將覆蓋的內容概覽:

  • 選擇您的社交媒體平台
  • 社交媒體圖像尺寸檢查表
  • 在 WordPress 中設置社交媒體優化
  • WordPress 文章和頁面的社交媒體設置
  • 向您的網站添加社交分享按鈕
  • 在 WordPress 中設置自動化社交分享

選擇您的社交媒體平台

有許多社交媒體網站,但並非所有網站都對您的業務增長或網站流量有幫助。除了像 Facebook 和 Twitter 這樣的大型網站,您還可以選擇最適合您的目標受眾和利基的平台。 例如,如果您運營時尚博客,您可能會想使用 Instagram 來推廣您的內容;飲食和食譜博客可能會專注於 YouTube 和 Yummly;家居裝飾或 DIY 網站可能會發現 Pinterest 在找到合適的觀眾方面非常有幫助。 選擇適合您目標受眾的平台將有助於您創建有效的社交媒體營銷策略,以促進您的業務增長。

社交媒體圖像尺寸檢查表

要在社交媒體上推廣您的博客或業務,您需要設置賬戶,上傳您的網站標誌和封面照片,並創建與您的文章和鏈接相配的圖像。 每個社交媒體平台對這些圖像都有具體要求,不使用正確的尺寸會讓您的圖像看起來變形或拉伸。 這裡是我們準備的社交媒體圖像尺寸速查表,您可以在創建社交賬戶圖像時使用。

  • Facebook 圖像尺寸
  • X(Twitter)圖像尺寸
  • Instagram 圖像尺寸
  • YouTube 圖像尺寸
  • Pinterest 圖像尺寸
  • LinkedIn 圖像尺寸

Facebook 圖像尺寸

Facebook 提供了在不同區域使用圖像的具體建議:

  • 封面圖片:851 x 315 像素,文件大小應小於 100 KB,格式可為 JPEG 或 PNG。
  • 個人資料圖片:至少 170 x 170 像素的正方形圖片,商業頁面可顯示自定義標誌,圖片會被裁剪為圓形。
  • 分享圖片:1200 x 630 像素,這張圖片在您的頁面上最大寬度為 470 像素,在新聞流中最大寬度為 600 像素。
  • 群組封面圖片:1640 x 856 像素。

X(Twitter)圖像尺寸

Twitter 是互聯網的對話中心。以下是 Twitter 的推薦圖像尺寸:

  • 標題圖片:1500 x 500 像素,這張全幅圖片出現在您的 Twitter 個人資料頁面。
  • 個人資料圖片:400 x 400 像素,這張正方形圖片會被裁剪為圓形格式,支持 JPG、PNG 和 GIF 格式,最大文件大小為 2MB。
  • 內嵌圖片:1600 x 900 像素,當您分享文章、轉發推文、嵌入推文和上傳圖片時會顯示這張圖片。如果您已經使用了 Twitter Cards,那麼 Twitter 將能夠選擇正確的圖像來顯示文章描述和標題。

Instagram 圖像尺寸

Instagram 的主要內容已經是視覺格式的。如果您使用 Instagram 應用程序直接從手機上傳照片,它會自動處理合適的圖像尺寸。 其他上傳方式則可以遵循以下推薦尺寸:

  • 個人資料圖片:320 x 320 像素,您可以使用更大尺寸的正方形圖片。
  • 縮略圖圖片:161 x 161 像素,這張圖片將作為您的照片縮略圖顯示。
  • 動態照片:橫向 1080 x 566 像素,縱向 1080 x 1350 像素,正方形 1080 x 1080 像素。
  • 動態視頻:寬 1080 像素。
  • Instagram Stories:1080 x 1920 像素,文件大小不能超過 4 GB。

YouTube 圖像尺寸

YouTube 是世界上第二受歡迎的社交媒體平臺,也是第二大搜尋引擎。您的 YouTube 頻道圖片、封面圖片和影片縮略圖對於獲得更多瀏覽次數至關重要:

  • YouTube 頻道封面圖片:2560 x 1440 像素,請確保圖片在水平中心,以便在移動設備上看起來不會被裁剪。
  • 頻道圖示:800 x 800 像素,這張圖片將作為您的頻道圖示顯示,有時會被裁剪為圓形圖片。
  • 影片縮略圖:1280 x 720 像素,影片縮略圖是影片優化中最重要的部分之一。

Pinterest 圖像尺寸

Pinterest 是一個視覺性的社交分享平台,因此圖像在擴大您的 Pinterest 追隨者方面扮演著最重要的角色:

  • 個人資料圖片:165 x 165 像素,您可以上傳最大文件大小為 10 MB 的高分辨率圖片。
  • 個人資料封面:800 x 450 像素,可以選擇一個板塊作為封面顯示。
  • 板塊封面圖片:225 x 150 像素,可以選擇來自該板塊的圖片作為封面。
  • 固定圖像預覽:寬 238 像素,Pinterest 自動縮放圖像以適應網格。

LinkedIn 圖像尺寸

LinkedIn 是專業人士和企業的社交網絡平台,可以是流量、連接和品牌形象建設的很好來源:

  • 個人資料圖片:至少 400 x 400 像素的正方形圖像,最大文件大小為 8 MB。
  • 個人資料橫幅圖片:1584 x 396 像素,最大文件大小為 8 MB。
  • 公司封面圖片:1128 x 191 像素。
  • 分享圖像:1200 x 627 像素。
  • 公司標誌圖片:300 x 300 像素或更高分辨率的正方形圖片。

在 WordPress 中設置社交媒體優化

了解了合適的社交媒體圖像尺寸後,下一步是確保您的 WordPress 網站針對社交媒體進行優化。 最重要的就是設置自動包含 Open Graph 元數據。Open Graph 元數據是一項技術,允許您向網頁添加社交媒體和搜索引擎所需的其他資訊。

首先,您需要安裝和啟用 All in One SEO 插件。更多細節請參考我們的 WordPress 插件安裝分步指南。 AIOSEO 是最好的 WordPress SEO 插件,可以幫助您從搜索引擎獲得更多流量,同時還支持社交媒體平台。

在啟用後,請訪問 All in One SEO » 社交網絡頁面,首先在「社交帳戶」標籤下添加您的社交媒體帳戶 URL。您不需要添加所有 URL,只需跳過沒有帳戶的社交媒體網站即可。

接著,切換到 Facebook 標籤,可以看到 AIOSEO 預設啟用了 Open Graph 元數據。您還需要提供默認的網站首頁 Post Facebook 圖片,這張圖片會在有人分享您的網站首頁或根 URL 時顯示。

接下來,切換到 Twitter 標籤,選擇網站預設的卡片顯示方式。「大圖摘要」選項會顯示 Twitter 分享圖片以及您的文章摘要。

之後,您可以切換到 Pinterest 標籤,添加 Pinterest 確認標籤。您可以點擊螢幕上的連結來申請您的網站並獲得確認碼。更多詳情請參考我們的 WordPress 網站 Pinterest 確認指南。不要忘記點擊「儲存變更」按鈕來保存設定。

WordPress 文章和頁面的社交媒體設定

就像文章和頁面的 SEO 設定一樣,您也可以為個別文章和頁面設置社交選項。 AIOSEO 插件允許您為個別文章和頁面設置社交選項。

只需編輯要優化的博客文章或頁面,然後向下滾動到編輯器下方的「AIOSEO 設定」部分。切換到「社交」標籤,您可以上傳自定義標題和描述以及 Facebook 和 Twitter 分享的圖像。還可以預覽您的文章在社交媒體上分享時的外觀。之後,可以點擊「發佈」或「更新」來保存文章或頁面。

向網站添加社交分享按鈕

最簡單的方式就是鼓勵您的用戶分享您的內容。這可以通過向博客文章和頁面添加社交分享按鈕來實現。 首先,您需要安裝和啟用 Shared Counts 插件。更多詳情請參考我們的 WordPress 插件安裝分步指南。 Shared Counts 是最好的 WordPress 社交媒體插件,允許您輕鬆向 WordPress 博客文章添加社交分享按鈕。

啟用後,只需前往設定 » Shared Counts 頁面以配置插件選項。向下滾動到「顯示」部分,選擇要顯示的社交媒體網站。在「顯示按鈕」欄位中選擇。然後,選擇按鈕風格和位置。不要忘記點擊「儲存變更」按鈕來保存您的設定。您現在可以訪問網站上的任意文章來查看社交分享按鈕。

在 WordPress 中設置自動化社交分享

社交媒體平台對於建立追隨者和增加網站流量非常有用。然而,在不同平台分享內容並與受眾互動可能會非常耗時。幸運的是,您可以使用多種在線工具來自動化這一過程。 Uncanny Automator 是最好的 WordPress 自動化插件,它允許您將社交媒體賬戶與 WordPress 連接起來。使用該插件,您可以自動在 Facebook 上分享新博客文章,在 Twitter 上推文,在 Instagram 上分享。 Smash Balloon 是最佳的 WordPress 社交媒體動態插件,允許您在網站上創建自定義動態。您可以輕鬆嵌入 Instagram、Facebook、Twitter、TikTok 和 YouTube 的帖子以增加互動,提升追隨數量,並建立與用戶的信任。 Revive Old Posts 允許您定期自動重新分享舊博客文章到社交媒體帳戶。了解更多請參考我們的教程《如何自動分享舊的 WordPress 文章》。 Buffer 是一個平台,允許您設置社交媒體更新隊列並按照您選擇的時間表發佈。 MonsterInsights 幫助您輕鬆使用 Google Analytics 追蹤社交媒體流量。這有助於您了解文章在社交媒體網站上的表現。請參考這篇指南《如何使用 Google Analytics 追蹤社交媒體流量》。

我們希望這份 WordPress 的社交媒體速查表能幫助您改進社交媒體行銷策略。您可能還想查看我們的《如何開啟自己的播客》指南以及我們精選的《最佳電子郵件行銷服務》。

如果您喜歡這篇文章,請訂閱我們的 YouTube 頻道以獲取更多 WordPress 教程影片。您還可以在 Twitter 和 Facebook 上找到我們。

Read More
WordPress 主题

如何在WordPress中顯示圓形的Gravatar頭像

如何在WordPress中顯示圓形的Gravatar頭像

最近,我們展示了如何設計你的留言佈局和留言表單。一位用戶給我們發送電子郵件,詢問「你們是如何讓Gravatar頭像顯示為圓形的?你們是將Gravatar頭像本地保存才使其變圓的嗎?」在本文中,我們將向您展示如何在WordPress中顯示圓形的Gravatar頭像。我們將使用CSS3的border-radius屬性來創建圓形的Gravatar頭像。

編輯主題的style.css文件

首先,你需要編輯你的主題的style.css文件。你可以使用FTP程序或在你的WordPress管理界面中前往外觀 » 編輯器來進行編輯。接下來,你需要將以下代碼添加到你的CSS文件中:


.avatar {
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}

這應該適用於大多數的WordPress主題。但是,如果這在你的主題中不起作用,那麼可能是某個插件或你的主題功能干擾了WordPress中用於Gravatar的默認類別。

檢查Gravatar的CSS類別

要找出在你的主題中Gravatar頭像使用的CSS類別,你需要打開一篇有留言的博客文章,滾動到留言區,右鍵點選Gravatar圖像並選擇「檢查元素」。它會顯示Gravatar的源代碼,如下所示:

如果Gravatar圖像有其他類別而非avatar,則在上述CSS代碼中使用該類別而不是.avatar。

我們希望這篇文章能幫助你在WordPress博客上顯示圓形的Gravatar頭像。如果你有任何問題或意見,請在下方留下留言告訴我們。

Read More