如何創建 WordPress 自定義主題

已發表: 2021-08-06

WordPress 佔據了全球網站的很大比例，佔目前在線所有網站的 37% 。 雖然這種成功有很多原因和因素，但主要原因之一是所有用戶都可以使用的功能很受歡迎。 插件、主題、帖子、頁面、類別、分類法、用戶角色和媒體處理等等。 為了充分利用 WordPress，建議用戶學習並學習如何使用所有這些功能。 在本博客中，我們將重點討論和討論 WordPress 主題，並將引導您了解如何創建 WordPress 自定義主題所需的基礎知識。

什麼是自定義主題？

您網站前端的所有內容都使用稱為“主題”的東西運行和控制。 網站的主題負責網站的特定設計和功能。 您可以查看WordPress 主題存儲庫或Themeforest以獲取主題示例； 在這裡，您會發現列出的數千個主題供您探索和下載。

雖然已建立的 WordPress 主題很棒，但如果您有能力和需要，您可能還想為客戶、自己構建自己的自定義主題，或者提交給市場以出售它。 在創建商業主題時，您需要遵循市場準則關於編碼標準、文件和文件夾的結構等。您可以在市場網站上找到有關這些準則的更多詳細信息。

在本博客中，我們將通過一個教程向您展示如何創建您自己的 WordPress 主題的基本概述，涵蓋與該過程相關的所有基礎知識和步驟。

創建 WordPress 自定義主題

WordPress 主題是使用模板文件、腳本、樣式、圖像等構建的。要繼續，您應該具備構建自定義主題所需的 PHP、HTML 和 CSS 的工作知識。 了解 JavaScript 也是一個額外的優勢。

首先，我們將首先將主題命名為“Updraft”。 在wp-content/themes中創建一個名為“Updraft”的文件夾。 在這個“Updraft”文件夾中，您將編寫與主題相關的代碼、存儲文件、圖像、字體等。

自定義 WordPress 主題的主要文件有：

  • 樣式.css
  • 索引.php
  • 函數.php

style.css將是主樣式表文件，您可以在此文件中添加所有 CSS。 請記住，您必須包含有關主題的信息標題。 標頭應類似於以下格式，並位於style.css的頂部。

 [代碼]
/*
主題名稱：上升氣流
主題 URI：https://updraftplus.com
作者：UpdraftPlus
作者 URI：https://updraftplus.com
描述：為網站構建的自定義主題。
版本：1.0
許可證：GNU 通用公共許可證 v2 或更高版本
許可證 URI：http://www.gnu.org/licenses/gpl-2.0.html
文本域：上升氣流
*/
[/代碼]

接下來，轉到外觀>>主題，您將在其中看到您的主題。 激活它。 當您檢查網站的前端時，它會顯示一個空白屏幕——因為我們還沒有向主題添加任何內容..

請記住將您的圖像、腳本和样式存儲到您的主題目錄中。 主題目錄是指“wp-content/themes/Updraft”文件夾。 確保通過使用良好的文件夾結構來組織它們，為圖像、腳本和样式創建特定的文件夾； 將文件複製到相應的目錄中。

函數文件

functions.php是您可以為不同目的添加代碼的文件。 該文件在 WordPress 初始化期間自動加載，其中編寫的代碼會自動執行。

functions.php文件中的以下操作通常按此順序進行：

  • 將主題樣式表和腳本排入隊列（將 JS 和 CSS 文件添加到網站）。
  • 啟用側邊欄、導航菜單、發布縮略圖等。
  • 定義在整個應用程序中使用的函數。
  • 等等。

用戶可以從functions.php文件中添加他們的樣式和腳本，如下所示。 請參閱以下鏈接以獲取更多文檔。

 [代碼]
函數 include_js_css() {
wp_register_style（“引導程序”，get_stylesheet_directory_uri（）。
"/styles/bootstrap.min.css", array(), false, "all" );
wp_enqueue_style（“引導”）；
wp_register_script('bootstrap', get_stylesheet_directory_uri() 。
'/scripts/bootstrap.min.js', array(), false, true);
wp_enqueue_script('bootstrap');
}
add_action('wp_enqueue_scripts', 'include_js_css');
[/代碼]

get_stylesheet_directory_uri ()函數給出了活動主題目錄的相對路徑。 剩下的代碼可以看成是資產的路徑。

同樣，對於添加導航菜單，發布縮略圖：

 [代碼]
功能 updraft_theme_setup() {
add_theme_support('後縮略圖');
註冊導航菜單（
大批（
'主要' => __( '主菜單' ),
'footer1=' => __( '頁腳菜單' ),
'商店' => __( '商店頁面菜單' ),
)
);
}
add_action('after_setup_theme', 'updraft_theme_setup');
[/代碼]

接下來，轉到 WordPress 儀表板並添加帖子或頁面。 您應該看到“特色圖片”部分。 此外，在外觀>>菜單下，您將在管理位置下找到主菜單和頁腳菜單。

這些只是您在使用“功能”文件時可以涵蓋的一些基本功能。 如果您願意，可以在此文件中添加更多內容。

模板文件

構建主題時，模板文件可用於影響網站不同部分的佈局和設計。 例如，您可以使用 header.php 模板來創建標題，或者使用 comments.php 模板來包含您網站上的評論。 模板文件具有.php擴展名。 由於它們是 PHP 文件，所有頁面都以 HTML 格式輸出。

使用模板，開發人員可以在多個文件之間分發代碼。 下面列出了一些有問題的文件。

  • index.php ：主模板。 該文件應負責發布列表。 當您從Settings >> Readings設置 Posts 頁面時，將執行此模板。
  • page.php ：這個模板負責渲染你的頁面。 可以通過將自定義頁面模板分配給各個頁面來覆蓋此設置。
  • single.php ：查詢單個帖子時使用。
  • header.php ：在此模板中添加您的標題部分。
  • footer.php ：在此模板中添加您的頁腳部分。
  • sidebar.php ：在此模板中添加小部件。

在此處獲取所有可用模板文件的列表。

自定義頁面模板

默認情況下，您的所有頁面都通過page.php模板呈現。 但在實踐中，有時您必須在不同頁面上顯示單獨的流程。 在這種情況下，建議您使用自定義頁面模板的強大功能。

例如，如果您有一個“職業”頁面，並且您想將代碼添加到此頁面； 為此，您需要在主題目錄中創建一個career.php文件，並將下面的註釋放在文件頂部。

 [代碼]
<?php
/*
模板名稱：職業
*/
[/代碼]

接下來，轉到頁面編輯部分並從頁面屬性框下分配此“職業”模板。

現在，當您訪問職業頁面時，將執行career.php中的代碼。

頭文件

您的網站將在所有頁面上都有一個共同的標題。 您可以將此公共標頭放入header.php中。 標頭代碼將是這樣的：

 [代碼]
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<頭部>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<!-- 你的菜單 -->
[/代碼]

在上面的代碼中，您會注意到我們使用了 WordPress 中可用的一些功能。

  • wp_head() ：此方法將關鍵元素插入到您的文檔中——例如，腳本、樣式和元標記。
  • body_class() ：這將為 body 元素添加不同的類。
  • wp_body_open() ：用於在打開body標籤後立即插入代碼。 這方面的一個例子是 - Google Analytics 腳本。

菜單可以通過wp_nav_menu()函數動態添加。 假設您首先已經在外觀>>菜單下創建了一個菜單並為其分配了“主要”位置。 下面的代碼動態生成菜單元素。

 [代碼]
<?php
wp_nav_menu(
大批（
'theme_location' => '主要',
'container_class' => '菜單',
)
);
?>
[/代碼]

設置頭文件後，使用get_header()函數將此文件包含到其他模板中。

頁腳文件

與頭文件類似，頁腳的通用代碼將放在footer.php模板中。

 [代碼]
<!-- 頁腳元素 -->
<?php wp_footer(); ?>
</正文>
</html>
[/代碼]

在這裡，使用wp_footer()在此位置插入元素，特別是腳本。 使用get_footer()將在其他地方包含此文件的內容。

邊欄文件

側邊欄是一個垂直列，用於顯示您網站上未顯示在主要內容中的信息。 它可能包括熱門文章、廣告橫幅、時事通訊提交表單等。側邊欄包含管理員可以自定義的小部件。 sidebar.php模板將包含您的站點小部件。

在此示例中，我們將通過將以下代碼添加到functions.php文件來創建一個基本側邊欄。

 [代碼]
函數 updraft_widgets_init() {
註冊邊欄（
大批（
'name' => esc_html__( Home Sidebar' ),
'id' => 'sidebar-1',
'description' => esc_html__('在此處添加小部件以顯示在您的側邊欄中。'),
'before_widget' => '<section class="widget">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
)
);
}
add_action('widgets_init', 'updraft_widgets_init');
[/代碼]

接下來，轉到外觀>>小部件。 在這裡你會找到上面的側邊欄。 在此示例中，我們將向此側邊欄添加一些小部件。 要將此側邊欄添加到前端，請在sidebar.php中添加以下代碼。

 [代碼]
<div class="側邊欄">
<?php
if ( is_active_sidebar( 'sidebar-1' ) ) {
dynamic_sidebar('sidebar-1');
}
?>
</div>
[/代碼]

最後，請記住將方法命名為“ get_sidebar()” ，以便您可以在需要時輕鬆地將側邊欄包含在任何其他頁面的任何位置。

渲染頁面和帖子

如前所述，所有 WordPress 頁面都使用您在page.php文件中編寫的代碼呈現和執行，具有自定義頁面模板的頁面除外。 下面的代碼是一個示例，它將顯示一個具有頁面標題、描述和特色圖像的頁面。

 [代碼]
<?php
get_header();
?>
<div class="內容區域">
<main class="site-main">
<?php
而（有_posts（））：
the_post();
?>
<?php
如果（has_post_thumbnail()）：
the_post_thumbnail();
萬一;
?>
<header class="entry-header">
<?php the_title(); ?>
</標題>
<div class="entry-content">
<?php the_content(); ?>
</div>
<?php
結束；
?>
</main>
</div>
<?php
get_footer();
[/代碼]

類似的代碼將進入single.php文件以顯示帖子信息。 要正確呈現帖子列表（您的index.php ），除了上述方法 - 您可能還需要使用以下方法：

  • the_catgeory() ：顯示帖子的類別列表。
  • the_permalink() ：顯示當前帖子的永久鏈接。
  • the_excerpt() ：顯示帖子摘錄。

用於 WordPress 自定義主題的 I18n

在構建自定義主題時，請記住它應該以支持國際化的方式進行開發。 通過這樣做，可以輕鬆地將您的主題翻譯成其他語言。

要添加 I18n 支持，請記住使用可以解析源文件並從中提取可翻譯字符串的文本域。 在此示例中，我們使用文本域“Updraft”，但您可以選擇任何唯一標識符。 我們可以如下定義文本域。

 [代碼]
功能 i18n_setup() {
load_theme_textdomain('updraft', get_stylesheet_directory() . '/languages');
}
add_action('after_setup_theme', 'i18n_setup');
[/代碼]

現在，每當您在主題文件中使用靜態字符串時，請將它們包裝在__()或_e()函數中。

 [代碼]
<h2><?php _e('First Name', 'updraft); ?></h2>
<?php echo __('用戶郵箱', 'updraft'); ?>
[/代碼]

有像 POEDIT 這樣的特殊工具可以幫助生成翻譯的語言文件。 請參閱此博客了解更多信息。

該博客涵蓋了創建 WordPress 自定義主題的基礎知識。 然而，這是一個龐大的話題，需要大量的時間和耐心。 以下是您應該熟悉的一些有用資源，它們將幫助您開始創建 WordPress 主題。

  • WordPress 循環
  • 模板標籤
  • 類別頁面
  • Function_Reference
  • 條件標籤
  • WordPress 編碼標準

為您的 WordPress 網站創建新主題時，請記住，每次更改後都需要對其進行備份，否則可能會丟失所有工作。 使用 UpdraftPlus – 世界領先且最值得信賴的 WordPress 備份、恢復和克隆插件。

如何創建 WordPress 自定義主題的帖子首先出現在 UpdraftPlus 上。 UpdraftPlus – WordPress 的備份、恢復和遷移插件。