CTMaxs 網路行銷公司部落格

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

本教程將向您展示如何創建一個簡單的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網頁主題

如前所述,內部的WordPress函數通常用在主題的代碼中。有關每個功能的更多信息,您可以在WordPress的官方網站上查看完整的功能參考

從現在起,您可以修改CSS文件,添加圖像,動畫和其他內容到您的主題,以實現您想要的博客的外觀!

還不了解網路行銷手法?如何操作關鍵字排名?如何設計電子商務網站?延伸閱讀:

快速設計網站”WordPress”的6個步驟

4種方式為您的產品免費上市

什麼是整合行銷,為什麼它很重要?


如果目前對你來說還是有些不懂,歡迎聯絡我們台南整合行銷,關於很多企業的知識以及資訊我們都可以為你分析,只要你想了解。我就分析給你,喜歡我們的文章給我一點支持讓我知道。

文章有價值嗎?馬上分享讓更多人知道...

發表評論