如何自己設計一個WordPress網頁主題

6月 22, 2017

本教程將向您展示如何創建一個簡單的WordPress主題。

如何創建一個基本的WordPress主題？

要開始構建您的主題，請首先在WordPress文件夾的wp-content / themes目錄中創建一個子文件夾。為了本教程的目的，我們將調用文件夾“tutorial_theme”。該文件夾的名稱應與您要創建的主題的名稱相對應。為此，您可以使用您最喜歡的FTP客戶端或您的cPanel中的文件管理器工具。

在開始創建主題之前，您應該確定網站的佈局如何。在本教程中，我們將構建一個由標題，側邊欄，內容區域和頁腳組成的WordPress主題，如下所示：

設計網頁主題

為此，我們必須在tutorial_theme目錄中創建以下文件：

header.php - 該文件將包含主題標題部分的代碼;
index.php - 這是主題的主要文件。它將包含主區域的代碼，並指定其他文件將被包括在哪裡;
sidebar.php - 此文件將包含有關邊欄的信息;
footer.php - 此文件將處理您的頁腳;
style.css - 此文件將處理您的新主題的樣式;

既可以在本地創建這些文件用一個簡單的文本編輯器（如記事本為例），並將其上傳通過FTP或者您可以使用文件管理器工具在你的cPanel來直接創建的文件在你的託管帳戶。

現在讓我們仔細看看每個文件，它應該包含什麼：

header.php文件

在此文件中，您應該添加以下代碼：

<html> 
<head> 
<title>教程主題</ title> 
<link rel =“stylesheet”href =“<？php bloginfo（'stylesheet_url'）;？>”> 
</ head> 
<body> 
<div id = “wrapper”> 
<div id =“header”> 
<h1> HEADER </ h1> 
</ div>

基本上，這是一個簡單的HTML代碼，一行包含一個php代碼和一個標準的WordPress函數。在此文件中，您可以指定您的元標記，例如您的網站的標題，元描述和頁面的關鍵字。

在標題之後，我們添加的行

<link rel =“stylesheet”href =“<？php bloginfo（'stylesheet_url'）;？>”>

告訴WordPress加載style.css文件。它將處理您的網站的樣式。

該

<？php bloginfo（'stylesheet_url'）; ？>

該行的一部分是實際加載樣式表文件的WordPress函數。

接下來，我們添加了一個“div”開頭的類包裝器，它將是網站的主容器。我們為它設置了類，所以我們可以通過style.css文件修改它。

之後，我們添加了一個簡單的標籤HEADER，包裝在“div”中，類“header”將稍後在樣式表文件中指定。

index.php文件

<？php get_header（）; ？> 
<DIV ID =“主”> 
<DIV ID =“內容”> 
<H1>主區</ H1> 
<PHP的如果（have_posts（））：而（have_posts（））：the_post（）; ？> 
<h1> <？php the_title（）; ？> </ h1> 
<h4>發表在<？php the_time（'F jS，Y'）？> </ h4> 
<p> <？php the_content（__（'（more ...）'））; ？> </ p> 
<hr> <？php endwhile; 其他：？> 
<p> <？php _e（'抱歉，沒有符合您的條件的帖子。？> </ p> <？php endif; ？> 
</ div> 
<？php get_sidebar（）; ？> 
</ div> 
<div id =“delimiter”> 
</ div> 
<？php get_footer（）; ？>

此文件中的代碼以

<？php get_header（）; ？>

其中將包括header.php文件及其主頁中的代碼。它使用內部的WordPress功能來做到這一點。我們將在本教程的後面詳細解釋這一點。然後，我們放置了一個主區域文本，以指示您的主題在該區域中顯示的部分。

接下來的幾行由PHP代碼和標準WordPress功能組成。此代碼檢查您是否在您的博客中通過WordPress管理區域創建的帖子並顯示它們。

接下來，我們將sidebar.php文件與這一行包含在一起

<？php get_sidebar（）; ？>

在此文件中，您可以顯示您的職位類別，檔案等

在這行之後，我們插入一個空的“div”，它將主頁面和邊欄與頁腳分開。

最後，我們添加一條最後一行

<？php get_footer（）; ？>

其中將包括頁面中的footer.php文件。

sidebar.php文件

在sidebar.php中，我們將添加以下代碼：

<div id =“sidebar”> 
<h2> <？php _e（'Categories'）; ？> </ h2> 
<ul> 
<？php wp_list_cats（'sort_column = name＆optioncount = 1＆hierarchical = 0'）; ？> 
</ ul> 
<h2> <？php _e（'Archives'）; ？> </ h2> 
<ul> 
<？php wp_get_archives（'type = monthly'）; ？> 
</ ul> 
</ div>

在這個文件中，我們使用內部的WordPress函數來顯示帖子的類別和歸檔。WordPress函數將它們作為列表項返回，因此我們將實際的函數包裝在未排序的列表（<ul>標籤）中。

footer.php文件

您應該將這些行添加到footer.php文件中：

<div id =“footer”>
<h1> FOOTER </ h1>
</ div>
</ div>
</ body>
</ html>

使用這個代碼，我們添加一個簡單的FOOTER標籤。您可以添加鏈接，附加文本，主題和其他對象的版權信息，而不是此代碼。

style.css文件

將以下行添加到style.css文件中：

body {text-align：center; } 
#wrapper {display：block; border：1px＃a2a2a2 solid; 寬度：90％; margin：0px auto; } 
#header {border：2px＃a2a2a2 solid; } 
#content {width：75％; border：2px＃a2a2a2 solid; float：left; } 
#sidebar {width：23％; border：2px＃a2a2a2 solid; 浮動：右 } 
#delimiter {clear：both; } 
#footer {border：2px＃a2a2a2 solid; } 
.title {font-size：11pt; font-family：verdana; font-weight：bold; }

這個簡單的css文件設置了你的主題的基本外觀。這些行設置了您的頁面的背景，並圍繞您的站點的主要部分，為了方便起見。

此時您的網站應如下所示：

如何設計wordpress網頁主題