你的第一個(gè)主題

  1. 主頁
  2. 文檔
  3. WordPress主題開發(fā)手冊(cè)
  4. 主題開發(fā)入門
  5. 你的第一個(gè)主題

必需文件

正如前面在“ 什么是主題 ”部分中提到的,WordPress主題開箱即用所需的唯一文件是顯示文章列表的 index.php 文件,和用于樣式化內(nèi)容的 style.css 文件。

一旦進(jìn)入更高級(jí)的開發(fā)領(lǐng)域,并且主題的大小和復(fù)雜性不斷增加,您就會(huì)發(fā)現(xiàn)將主題分解為許多單獨(dú)的文件(稱為模板文件)。例如,大多數(shù)WordPress主題還將包括:

  • header.php
  • index.php
  • sidebar.php
  • footer.php

我們將在本手冊(cè)的后面部分介紹如何創(chuàng)建單獨(dú)的文件,但是現(xiàn)在讓我們啟動(dòng)您的第一個(gè)主題!

(注意:以下步驟假定您已經(jīng)完成“ 設(shè)置開發(fā)環(huán)境 ”部分。)

步驟1 –創(chuàng)建主題文件夾

首先,在計(jì)算機(jī)上創(chuàng)建一個(gè)新文件夾,并將其命名為my-first-theme。這是您所有主題文件的存放位置。

步驟2 –創(chuàng)建一個(gè)style.css文件

您可以使用計(jì)算機(jī)上的任何基本文本編輯器來創(chuàng)建一個(gè)名為style.css的新文件。

如果您使用的是基于Windows的計(jì)算機(jī),請(qǐng)暫時(shí)使用記事本;如果使用的是Mac,請(qǐng)使用TextEdit。

將以下代碼復(fù)制并粘貼到新創(chuàng)建的style.css文件中:

/*
Theme Name: My First WordPress Theme
*/

body {
	background: #21759b;
}

步驟3 –創(chuàng)建一個(gè)index.php文件

現(xiàn)在創(chuàng)建一個(gè)名為 index.php 的文件,將其放入主題的文件夾中,并向其中添加以下代碼:

<!DOCTYPE html>
<html>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="stylesheet" href="<?php echo esc_url( get_stylesheet_uri() ); ?>" type="text/css" />
<?php wp_head(); ?>
</head>
<body>
<h1><?php bloginfo( 'name' ); ?></h1>
<h2><?php bloginfo( 'description' ); ?></h2>
 
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 
<h3><?php the_title(); ?></h3>
 
<?php the_content(); ?>
<?php wp_link_pages(); ?>
<?php edit_post_link(); ?>
 
<?php endwhile; ?>
 
<?php
if ( get_next_posts_link() ) {
next_posts_link();
}
?>
<?php
if ( get_previous_posts_link() ) {
previous_posts_link();
}
?>
 
<?php else: ?>
 
<p>No posts found. :(</p>
 
<?php endif; ?>
<?php wp_footer(); ?>
</body>
</html>

步驟4 –安裝主題

將新主題復(fù)制到開發(fā)環(huán)境上的 wp-content/themes 文件夾中,然后將其激活以進(jìn)行測試。

步驟5 –激活主題

現(xiàn)在,您已經(jīng)安裝了主題,請(qǐng)轉(zhuǎn)到管理>外觀>主題  將其激活。

使用第一個(gè)主題

恭喜,您已經(jīng)完成了第一個(gè)WordPress主題!

如果您激活新主題并在瀏覽器中查看它,則應(yīng)該看到以下內(nèi)容:

這是您的第一個(gè)主題在前端的外觀

好的,這還不是最漂亮的主題,但這是一個(gè)了不起的開始!

我們學(xué)到了什么?

盡管您的第一個(gè)主題可能缺少其他主題中提供的功能和設(shè)計(jì)元素,但正如我們上面剛剛創(chuàng)建的那樣,WordPress主題的基本構(gòu)建塊都是相同的。

請(qǐng)記住,現(xiàn)在的關(guān)鍵是不要忙著完成所有工作的其他事情,而是了解制作WordPress主題背后的指導(dǎo)原則,這樣不管以后怎樣改動(dòng)代碼或模板文件結(jié)構(gòu),這些主題將可以經(jīng)受住時(shí)間的考驗(yàn)。

所有網(wǎng)站,無論如何在后臺(tái)進(jìn)行創(chuàng)建,都需要通用元素:頁眉、主要內(nèi)容區(qū)域、菜單、側(cè)邊欄、頁腳等。您會(huì)發(fā)現(xiàn)制作WordPress主題實(shí)際上只是制作網(wǎng)站的另一種方法。

從這個(gè)最基本的主題開始,您將開始學(xué)習(xí)將上面提到的元素組合在一起,以創(chuàng)建更復(fù)雜主題結(jié)構(gòu)。

接下來

第2章:主題基礎(chǔ),我們將進(jìn)一步深入主題,并討論構(gòu)成大多數(shù)主題的模板和其他文件,以及用于制作動(dòng)態(tài)主題的PHP,包括:

  • 模板標(biāo)簽
  • 循環(huán)
  • 主題函數(shù)
  • 條件標(biāo)簽
  • 和更多
這篇文章對(duì)您有用嗎? 18 1
0 條回復(fù) A文章作者 M管理員
    暫無討論,說說你的看法吧
?
個(gè)人中心
購物車
優(yōu)惠劵
今日簽到
有新私信 私信列表
搜索

苏尼特左旗| 寿光市| 库车县| 彭阳县| 弥勒县| 合江县| 会昌县| 龙口市| 禹州市| 贺兰县| 桑日县| 万山特区| 安陆市| 安溪县| 城固县| 绵阳市| 邳州市| 昭苏县| 无锡市| 理塘县| 潢川县| 赤水市| 喀喇沁旗| 万年县| 景谷| 阿城市| 出国| 冕宁县| 石狮市| 孟州市| 五大连池市| 海丰县| 利川市| 西盟| 临江市| 哈尔滨市| 屯昌县| 临西县| 永川市| 大姚县| 屏南县|