通過(guò)使用WordPress主題，您可以為您的網(wǎng)頁(yè)和文章制作統(tǒng)一的布局，也可以對(duì)主題進(jìn)行修改來(lái)更改整個(gè)網(wǎng)站的外觀。要獲得理想的網(wǎng)站，您可以從頭開(kāi)始創(chuàng)建一個(gè)WordPress主題，而無(wú)需從官方主題目錄中安裝WordPress主題。
本教程將討論如何使用HTML5和CSS3創(chuàng)建一個(gè)WordPress主題。而且，我們將響應(yīng)式設(shè)計(jì)原則應(yīng)用于您的主題。因此，讓我們開(kāi)始吧！
了解響應(yīng)式設(shè)計(jì)
響應(yīng)式設(shè)計(jì)意味著您的網(wǎng)站將根據(jù)其屏幕大小自動(dòng)以最佳格式顯示給訪(fǎng)問(wèn)者。頁(yè)面布局實(shí)際上是對(duì)可用空間的“響應(yīng)”，內(nèi)容的正確顯示，不會(huì)被截?cái)啵粫?huì)溢出，并且您的網(wǎng)站看起來(lái)盡可能整潔。
要衡量設(shè)計(jì)的響應(yīng)式對(duì)齊方式，您應(yīng)該將網(wǎng)站的布局視為一系列網(wǎng)格而不是像素（px）。然后，將每個(gè)內(nèi)容部分的網(wǎng)格寬度除以百分比（％）。
假設(shè)您要在網(wǎng)站上擁有四個(gè)內(nèi)容劃分元素（<div>）–頁(yè)眉、主要內(nèi)容、側(cè)邊欄和頁(yè)腳。每個(gè)div的寬度占用100％的可用空間。因此，如果要在其中創(chuàng)建四個(gè)div，則每個(gè)div將獲得分配空間的25％。
對(duì)于圖像，可以將其設(shè)置為最大寬度：實(shí)際尺寸的100％，并將高度設(shè)置為自動(dòng)。縮小容器的尺寸時(shí)，將自動(dòng)調(diào)整圖像的寬度和高度。但是，如果容器變寬，它將無(wú)法放大。
因此，如果您將200px寬度的圖像放置在占屏幕100％的div內(nèi)，則它將以其實(shí)際寬度（200px）來(lái)顯示。
而使用width：100％將導(dǎo)致圖像占用100％的可用空間，而不限制在圖片的實(shí)際寬度內(nèi)。
這是構(gòu)建響應(yīng)式設(shè)計(jì)的良好語(yǔ)法與不良語(yǔ)法的示例：
/* 良好的寬度定義 */
.inline-text-box {
width: 50%;
}
/* 不良的寬度定義 */
.inline-text-box {
width: 800px;
}
/* 良好的圖片寬度定義 */
img {
max-width: 100%;
height: auto;
}
/* 不良的圖片寬度定義 */
img {
width: 100%;
height: auto;
}好了，簡(jiǎn)單介紹完響應(yīng)式規(guī)則了，讓我們開(kāi)始遵循上面的述響應(yīng)原則，使用HTML5和CSS3來(lái)創(chuàng)建WordPress主題吧。
使用HTML5和CSS3創(chuàng)建響應(yīng)式WordPress主題的步驟
HTML5是Web標(biāo)記語(yǔ)言HTML的最新版本，可讓您在任何計(jì)算機(jī)、筆記本、平板電腦或手機(jī)上一致地顯示內(nèi)容。
而且，HTML5提供了視窗元標(biāo)記功能。它使您可以使用<head> </ head>標(biāo)記內(nèi)的<?meta>標(biāo)記來(lái)控制網(wǎng)站在每個(gè)瀏覽器視窗中的顯示。
基本的HTML5文檔代碼如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<title>My HTML5 Page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<h1>My Website</h1>
</header>
<main>
<section>
<header>
<h2>My Articles</h2>
</header>
<article>
<header>
<h2>An Article</h2>
</header>
<p class="inline-text-box">Left</p><p class="inline-text-box">Right</p>
</article>
</section>
</main>
<footer>
<p>Copyright © 2019</p>
</footer>
</body>
</html>要制作完全響應(yīng)的WordPress主題，您還可以使用CSS3媒體查詢(xún)功能。它使您可以設(shè)置特定規(guī)則，并可以控制網(wǎng)站的行為方式以及在各種屏幕或視窗大小上的顯示方式。
在這里，我們將在構(gòu)建主題時(shí)同時(shí)應(yīng)用窗口元標(biāo)記和媒體查詢(xún)。
1.存儲(chǔ)主題及其文件
在繼續(xù)之前，請(qǐng)?jiān)赪ordPress主題文件夾中為主題創(chuàng)建一個(gè)新文件夾。
通過(guò)訪(fǎng)問(wèn)主機(jī)面板的文件管理器來(lái)執(zhí)行此操作。然后，轉(zhuǎn)到public_html-> wp-content->themes 目錄并創(chuàng)建一個(gè)新文件夾。請(qǐng)記住，主題文件夾的名稱(chēng)應(yīng)該是唯一的，一般使用小寫(xiě)英文字母命名，不要使用數(shù)字或空格。
在這里，我們以my-theme為例。
文件夾名稱(chēng)不應(yīng)與其他主題相同。如果您打算共享您的主題，請(qǐng)檢查WordPress.org?主題目錄上是否沒(méi)有相同名稱(chēng)的主題。
一旦有了用于存儲(chǔ)主題的文件夾，就需要?jiǎng)?chuàng)建一些基本的WordPress模板文件了。
2.創(chuàng)建模板文件和CSS樣式表
只需兩個(gè)模板文件即可創(chuàng)建WordPress主題：index.php和style.css。它們將被用來(lái)顯示每個(gè)頁(yè)面并發(fā)布在您的網(wǎng)站上。
要為文章、頁(yè)面和網(wǎng)站的其他部分設(shè)置不同的布局，您必須創(chuàng)建單獨(dú)的文件，其中包含僅適用于每個(gè)部分的HTML5和PHP。
每個(gè)模板文件必須使用WordPress文檔中定義的正確名稱(chēng)。
除index.php之外的一些模板文件是：
- header.php?–包含網(wǎng)站頁(yè)眉的HTML，從
<!DOCTYPE html>開(kāi)始。 - single.php?–顯示博客中的單個(gè)文章。
- page.php?–用于顯示博客中的單個(gè)頁(yè)面。
- comments.php?–定義如何顯示評(píng)論部分。
- footer.php?–包含網(wǎng)站頁(yè)腳的HTML，包括
</html>。
您還可以在WordPress?主題開(kāi)發(fā)手冊(cè)上找到模板文件的完整列表。
如果您希望使用自定義文章類(lèi)型，則可以創(chuàng)建僅適用于該類(lèi)型文章的模板。但是，如果您希望特定類(lèi)別的文章具有不同的樣式，請(qǐng)?jiān)谘h(huán)內(nèi)使用if-then語(yǔ)句。
請(qǐng)按照以下步驟創(chuàng)建WordPress模板文件：
1、在my-theme文件夾中，創(chuàng)建PHP文件–?header.php、?index.php、footer.php、functions.php、sidebar.php、single.php和page.php。
2、然后，創(chuàng)建一個(gè)名為style.css的新CSS文件。
主樣式表文件必須命名為style.css，并且放在主題的根目錄（即本例的 my-theme文件夾中 ）。
3、在style.css文件的頂部添加必要的信息（主題的名稱(chēng)、版本、描述、作者等）。WordPress將在后臺(tái)主題信息中顯示它們。
信息必須以多行CSS注釋的形式編寫(xiě)，每行一個(gè)標(biāo)頭，每個(gè)標(biāo)頭都以關(guān)鍵字開(kāi)頭。您可以在這個(gè)頁(yè)面上找到主題標(biāo)題的完整列表。標(biāo)頭的格式為“?關(guān)鍵字: 信息”。
/*
Theme Name: My Theme
Author: wpdaxue
Author URI: http://www.ydqwiac.cn
Description: My first responsive HTML5 theme
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/如果您打算在WordPress.org上共享主題，則需要第七行和第八行。如果您要在自己的網(wǎng)站上使用主題，則無(wú)需包含它們。
此時(shí)，您的主題已在儀表板的主題部分中可見(jiàn)。您可以訪(fǎng)問(wèn)后臺(tái) 外觀- 主題，看到我們新建的主題 my-theme，帶有白色和灰色的復(fù)選框。完成創(chuàng)建WordPress主題后，您可以截取屏幕截圖以顯示在此處。
如果激活主題，由于index.php文件是空的，并且沒(méi)有模板，您將獲得一個(gè)空白主頁(yè)。
4、將單個(gè)規(guī)則添加到CSS文件中，以更改頁(yè)面的背景顏色。?在第10行的注釋結(jié)束*/后面插入空白行。然后，在下面添加以下代碼：
* {
box-sizing: border-box;
}
body {
background-color: #f9f9f9;
font-family: Helvetica;
}第一個(gè)條目是響應(yīng)式樣式的重要部分。*是通配符，與HTML文檔中找到的每個(gè)單個(gè)類(lèi)匹配。它指出頁(yè)面上每個(gè)項(xiàng)目的最終寬度和高度應(yīng)包括內(nèi)容、 填充和邊框。該規(guī)則有效地在框內(nèi)而不是框外添加了填充。
第二個(gè)條目只是將背景色更改為白色并設(shè)置默認(rèn)字體，該字體將在我們的主題中使用。
3.創(chuàng)建WordPress主題之前
在開(kāi)發(fā)過(guò)程之前，強(qiáng)烈建議在您的function.php和sidebar.php中添加一些代碼，以增強(qiáng)主題的靈活性。
functions.php
首先，通過(guò)插入以下代碼，在您的functions.php文件中引入一個(gè)名為normalize.css的CSS文件：
<?php
// 這個(gè)函數(shù)用來(lái)引入 Normalize.css 文件，給主題添加一些默認(rèn)的樣式。 第一個(gè)參數(shù)是css名稱(chēng)，第二個(gè)參數(shù)是文件網(wǎng)址
// 我們使用在線(xiàn)的Normalize.css網(wǎng)址
function add_normalize_CSS() {
wp_enqueue_style( 'normalize-styles', "https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css");
}不同的瀏覽器對(duì)頁(yè)面頁(yè)邊距和填充等元素具有不同的默認(rèn)設(shè)置。normalize.css是一個(gè)統(tǒng)一不同瀏覽器顯示效果的一個(gè)基本的css樣式，讓瀏覽器可以比較統(tǒng)一地顯示元素的默認(rèn)樣式。
接下來(lái)，在上面代碼的下面繼續(xù)添加代碼，來(lái)啟用側(cè)邊欄小工具：
// 注冊(cè)一個(gè)名為 'sidebar' 的側(cè)邊欄區(qū)域
function add_widget_Support() {
register_sidebar( array(
'name' => 'Sidebar',
'id' => 'sidebar',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
) );
}
// 將函數(shù)掛載到對(duì)應(yīng)的鉤子，使函數(shù)生效
add_action( 'widgets_init', 'add_Widget_Support' );如果您不包括此函數(shù)，則小工具菜單鏈接將在后臺(tái)面板中不可見(jiàn)，并且您將無(wú)法添加任何小工具。
然后，注冊(cè)自定義導(dǎo)航菜單來(lái)使用外觀->菜單功能。在前面的代碼之后添加以下代碼：
// 注冊(cè)一個(gè)導(dǎo)航菜單
function add_Main_Nav() {
register_nav_menu('header-menu',__( 'Header Menu' ));
}
// 將函數(shù)掛載到對(duì)應(yīng)的鉤子，使函數(shù)生效
add_action( 'init', 'add_Main_Nav' );保存并關(guān)閉文件。
sidebar.php
get_sidebar()??允許側(cè)邊欄和小工具出現(xiàn)在主題中的任何位置。為此，請(qǐng)?jiān)?strong>sidebar.php文件中插入以下代碼。然后，保存更改。
<?php if ( is_active_sidebar( 'sidebar' ) ) : ?>
<aside id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
<?php dynamic_sidebar( 'sidebar' ); ?>
</aside>
<?php endif; ?>第一行告訴WordPress，如果未啟用任何小工具，就不顯示側(cè)邊欄的HTML。第二個(gè)設(shè)置包含小工具的元素的屬性。第三行是顯示小工具的WordPress函數(shù)。最后一行關(guān)閉初始的 if 語(yǔ)句。
要在文章和頁(yè)面之間輕松導(dǎo)航，請(qǐng)打開(kāi)后臺(tái)面板 外觀 – 小工具，然后將“?頁(yè)面”和“?最新文章”小工具添加到側(cè)邊欄中。
4.使用模板構(gòu)建布局
現(xiàn)在，我們將繼續(xù)通過(guò)使用媒體查詢(xún)修改header.php，index.php，footer.php，single.php，page.php， style.php文件來(lái)創(chuàng)建WordPress主題的布局。
header.php
header.php將定義文檔的最頂部。它應(yīng)該具有：
- DOCTYPE聲明?–告訴您的Web瀏覽器如何解釋文檔。
language_attributes()函數(shù)?–在<html>標(biāo)簽的開(kāi)頭輸入您在安裝過(guò)程中選擇的語(yǔ)言的代碼。- HTML head元素<head></head>?–在這里存儲(chǔ)元數(shù)據(jù)。包含<title></title>標(biāo)記和
is_front_page()以及bloginfo()函數(shù)，<meta></meta>標(biāo)記，<link></link>標(biāo)記和wp_head()動(dòng)作鉤子。 body_class()函數(shù)?–為您的身體提供WordPress設(shè)置的默認(rèn)CSS類(lèi)。wp_nav_menu()函數(shù)?–在網(wǎng)站標(biāo)題上顯示頁(yè)面導(dǎo)航菜單。
使用元標(biāo)記
在<head>下插入以下meta標(biāo)簽語(yǔ)法，這樣您的網(wǎng)站將自動(dòng)適應(yīng)較小的屏幕尺寸和窗口。
<meta name="viewport" content="width=device-width, initial-scale=1.0">添加后，您將擁有一個(gè)跨瀏覽器兼容的移動(dòng)響應(yīng)站點(diǎn)。
因此，最終的header.php文件代碼如下所示：
<!DOCTYPE html>
<html <?php language_attributes(); ?>
<head>
<title><?php bloginfo('name'); ?> » <?php is_front_page() ? bloginfo('description') : wp_title(''); ?></title>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class="my-logo">
<h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo('name'); ?></a></h1>
</header>
<?php wp_nav_menu( array( 'header-menu' => 'header-menu' ) ); ?>如果要使用Logo作為標(biāo)題，請(qǐng)使用你的圖片代碼替換掉
<head>標(biāo)志中的<?php bloginfo('name'); ?>? 。
index.php
index.php文件用來(lái)定義主頁(yè)。如果未找到特定模板（例如single.php和page.php），它將也用作文章或頁(yè)面的默認(rèn)布局。
使用模板標(biāo)簽確保您的首頁(yè)中包含頁(yè)眉（ get_header() ），側(cè)邊欄（get_sidebar()）和頁(yè)腳（get_footer()）代碼。您還需要插入HTML5語(yǔ)義元素<section>、<main>、<header>和<article>。
有些元素將分配有類(lèi)，這些類(lèi)將寫(xiě)在style.css文件中。
<header></header>標(biāo)記可以在任何頁(yè)面上多次使用，并且不專(zhuān)門(mén)引用頁(yè)面標(biāo)題。如果<h1>，<h2>等中有文本，則節(jié)和文章應(yīng)具有標(biāo)題元素。如果節(jié)或文章中沒(méi)有標(biāo)題文本，則可以將其忽略。
要顯示帶有更多模板標(biāo)簽的文章及其摘要列表，您需要使用WordPress循環(huán)。因此，index.php文件的最終代碼應(yīng)如下所示。
<?php get_header(); ?>
<main class="wrap">
<section class="content-area content-thin">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article class="article-loop">
<header>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
By: <?php the_author(); ?>
</header>
<?php the_excerpt(); ?>
</article>
<?php endwhile; else : ?>
<article>
<p>Sorry, no posts were found!</p>
</article>
<?php endif; ?>
</section><?php get_sidebar(); ?>
</main>
<?php get_footer(); ?>上面的代碼中，循環(huán)從 <?php if ( have_posts() )?: while?( have_posts() ) : the_post(); ?>? 并以 <?php endif; ?> 結(jié)束。在循環(huán)內(nèi)可以使用以下模板標(biāo)簽：
-
<?php the_permalink(); ?>?–輸出文章的網(wǎng)址。 -
<?php the_title_attribute(); ?>–以安全格式顯示標(biāo)題鏈接的title屬性。 -
<?php the_title(); ?>?–顯示文字標(biāo)題。 -
<?php the_author(); ?>?–輸出作者的姓名。 -
<?php the_excerpt(); ?>?–執(zhí)行該文章的摘要，如果您沒(méi)有手動(dòng)設(shè)置，摘要將自動(dòng)生成。
保存文件后，重新加載網(wǎng)站時(shí)會(huì)看到一個(gè)非常簡(jiǎn)潔的頁(yè)面。
我們將在以后，學(xué)習(xí)有關(guān)WordPress?模板標(biāo)簽 和 循環(huán) 的更多信息。
footer.php
您可以在i這個(gè)文件中定義每個(gè)頁(yè)面的頁(yè)腳。它也負(fù)責(zé)關(guān)閉所有從header.php文件打開(kāi)的<body>和<html>標(biāo)記。如果您不創(chuàng)建footer.php文件，則當(dāng)您以管理員身份訪(fǎng)問(wèn)主頁(yè)、文章或頁(yè)面時(shí)，會(huì)注意到缺少管理欄。
使用HTML5語(yǔ)義元素<footer></footer>定義頁(yè)腳。為了確保將任何最終的WordPress代碼和JavaScript添加到該頁(yè)面，它還必須包括wp_footer()動(dòng)作鉤子。
<footer>
<p>Copyright © 2019</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>保存footer.php文件后，將關(guān)閉其他模板文件中所有打開(kāi)的HTML標(biāo)記。
在本教程的最后，我們將學(xué)習(xí)有關(guān)動(dòng)作掛鉤的更多信息。
single.php
single.php中文件決定您網(wǎng)站上的一個(gè)文章的布局。它可以與index.php完全不同。
在這里，我們將使用the_content()函數(shù)顯示完整的文章內(nèi)容。但是，我們不會(huì)將側(cè)邊欄添加到文章頁(yè)面中，還將刪除標(biāo)題上的鏈接。
完整的代碼應(yīng)如下所示：
<?php get_header(); ?>
<main class="wrap">
<section class="content-area content-full-width">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article class="article-full">
<header>
<h2><?php the_title(); ?></h2>
By: <?php the_author(); ?>
</header>
<?php the_content(); ?>
</article>
<?php endwhile; else : ?>
<article>
<p>Sorry, no post was found!</p>
</article>
<?php endif; ?>
</section>
</main>
<?php get_footer(); ?>保存后，您會(huì)看到您的文章將顯示為一個(gè)沒(méi)有側(cè)邊欄的頁(yè)面。
page.php
page.php用來(lái)定義頁(yè)面顯示的方式。它也可以不同于主頁(yè)和文章布局。
請(qǐng)記住，如果page.php文件不存在，WordPress會(huì)使用index.php模板替代。您的網(wǎng)站頁(yè)面一般不應(yīng)該使用和single.php文件相同的布局。
為了使差異更加明顯，我們將再次在該布局中添加側(cè)邊欄，并使頁(yè)面內(nèi)容占據(jù)頁(yè)面70%的寬度。將以下代碼添加到您的page.php文件中。
<?php get_header(); ?>
<main class="wrap">
<section class="content-area content-thin">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article class="article-full">
<header>
<h2><?php the_title(); ?></h2>
By: <?php the_author(); ?>
</header>
<?php the_content(); ?>
</article>
<?php endwhile; else : ?>
<article>
<p>Sorry, no page was found!</p>
</article>
<?php endif; ?>
</section><?php get_sidebar(); ?>
</main>
<?php get_footer(); ?>保存后，您的頁(yè)面將具有專(zhuān)用的布局。
style.css
此文件是您的WordPress網(wǎng)站的主要樣式表。它旨在控制您網(wǎng)站的設(shè)計(jì)和布局。將以下代碼添加到style.css文件的底部。
.my-logo,
footer {
width: 100%;
padding-left: 1%;
margin-bottom: 8px;
background-color: #78baff;
border: 1px solid #78baff;
}
body > header > h1 > a {
color: #ffffff;
font-weight: 400;
}
article > header {
}
footer {
margin-top: 4px;
}
a {
text-decoration: none;
}
/* 'Margin: 0 auto' centers block content on the page */
.wrap {
width: 99%;
margin: 0 auto;
}
.content-area {
display: inline-block;
}
.content-thin {
width: 70%;
}
.content-full-width {
width: 100%;
}
.content-area,
.primary-sidebar {
display: inline-block;
}
.primary-sidebar {
width: 25%;
padding: 1%;
vertical-align: top;
background-color: #ececec;
}
.article-loop {
width: 45%;
text-align: left;
margin: 5px;
padding: 10px;
}
.article-full {
width: 99%;
padding: 1%;
}
.article-loop,
.article-full {
display: inline-block;
vertical-align: top;
background-color: #FFF;
border-radius: 4px;
margin-bottom: 4px;
}保存后，這將使各個(gè)內(nèi)容框具有白色背景和藍(lán)色邊框。
您可以通過(guò)更改CSS樣式和寬度，查看您的主題如何響應(yīng)各種情況。
有了必要的模板和樣式表后，您就可以輕松瀏覽文章和頁(yè)面。您新創(chuàng)建的WordPress主題應(yīng)如下所示。
使用媒體查詢(xún)
CSS樣式表中的媒體查詢(xún)功能定義了更改視窗時(shí)指示頁(yè)面顯示的規(guī)則。您可以將其設(shè)置為任何媒體類(lèi)型，例如在不同瀏覽器中打開(kāi)時(shí)的div寬度。
假設(shè)您有兩個(gè)并排的文本框，它們占據(jù)了屏幕的50％。隨著瀏覽器窗口變小，這些框會(huì)自動(dòng)調(diào)整以占據(jù)窗口的50％，而不是從側(cè)面消失。
如果瀏覽器視窗太小而無(wú)法正確顯示這些框中的所有文本，則可以使它們占據(jù)窗口大小的100％，并在另一個(gè)視窗上方顯示。
由于我們的基本布局在首頁(yè)上有兩個(gè)內(nèi)聯(lián)框，因此當(dāng)瀏覽器窗口太小而無(wú)法顯示文本時(shí)，我們可以輕松更改它們的行為方式。
因此，當(dāng)瀏覽器窗口低于800px時(shí)，我們將更改文章的寬度。而不是具有兩個(gè)并排的文章，每個(gè)文章都有其自己的線(xiàn)。
為此，我們將使用一些媒體功能規(guī)則，例如：
- max-width?–指示瀏覽器可見(jiàn)區(qū)域的最大寬度
- min-width –確定可見(jiàn)區(qū)域的最小寬度
- orientation ?–告訴屏幕是處于縱向還是橫向模式
請(qǐng)參閱Mozilla開(kāi)發(fā)人員網(wǎng)絡(luò)網(wǎng)站上的媒體功能的完整列表。
我們將首先編寫(xiě)一個(gè)影響.article-loop類(lèi)的媒體查詢(xún)。它會(huì)指出，如果瀏覽器窗口的寬度小于800px，則.article-loop類(lèi)應(yīng)使用99%的可用空間。因此，媒體查詢(xún)應(yīng)僅影響寬度為800像素或更小的屏幕和瀏覽器窗口。
在.article-loop類(lèi)的末尾下面，編寫(xiě)以下代碼：
@media screen and (max-width: 800px) {
.article-loop {
width: 99%;
}
}保存后，轉(zhuǎn)到您網(wǎng)站的主頁(yè)。更改瀏覽器窗口的大小，當(dāng)其寬度小于800像素時(shí)，您將看到每個(gè)文章內(nèi)容框發(fā)生了改變，一個(gè)顯示在另一個(gè)的下方。
上面的類(lèi)似，我們將添加的下一個(gè)媒體查詢(xún)。它告訴主要內(nèi)容和側(cè)邊欄占用100％的可用空間，并且當(dāng)瀏覽器窗口的寬度小于600px時(shí)，側(cè)邊欄將降至主要內(nèi)容下方。對(duì)于空間有限的移動(dòng)設(shè)備而言，這將是適當(dāng)?shù)牟季帧?/p>
語(yǔ)法代碼如下所示：
@media screen and (max-width: 600px) {
.content-area,
.primary-sidebar {
width: 100%;
}
}您可以將媒體查詢(xún)放置在樣式表中的任何位置–將它們?nèi)糠旁诘撞浚驅(qū)⑻囟ǖ拿襟w查詢(xún)寫(xiě)入原始定義特定項(xiàng)目的正下方。但是，如果它們影響位于不同位置的不同類(lèi)，則建議將其放在樣式表的底部。
保存style.css文件。然后，返回首頁(yè)并調(diào)整瀏覽器窗口的大小，直到看到內(nèi)容占據(jù)寬度的100％，并且側(cè)邊欄降到主要內(nèi)容下方。
您更改媒體查詢(xún)的規(guī)則以適合您的需求，并查看是否可以定義更好的規(guī)則。
了解WordPress模板標(biāo)簽、循環(huán)和動(dòng)作掛鉤
要將主題與WordPress完全集成，必須使用模板標(biāo)簽、循環(huán)和動(dòng)作掛鉤。
模板標(biāo)簽
模板標(biāo)簽是WordPress提供的PHP函數(shù)，可輕松將主題中的模板文件包含在另一個(gè)文件中或顯示數(shù)據(jù)庫(kù)中的某些信息。
假設(shè)您要在首頁(yè)上顯示頁(yè)腳，而不要在其他任何頁(yè)面上顯示，請(qǐng)?jiān)?strong>index.php文件底部而不是page.php文件的底部添加get_footer()。
以下是一些基本的模板標(biāo)記。
包含模板文件的模板標(biāo)簽：
get_header()–調(diào)用header.php模板get_sidebar()–調(diào)用sidebar.php模板get_footer()?–調(diào)用footer.php模板get_search_form()?–調(diào)用searchform.php模板
從數(shù)據(jù)庫(kù)獲取信息的模板標(biāo)簽：
bloginfo()?–顯示請(qǐng)求作為參數(shù)的信息，例如顯示您的網(wǎng)站名稱(chēng)的bloginfo('name')。single_post_title()?–在single.php中使用時(shí)，顯示當(dāng)前查看的文章的標(biāo)題the_author()?–顯示當(dāng)前查看文章的作者the_content()?–輸出文章或頁(yè)面的主要文本the_excerpt()?–顯示任何文章或頁(yè)面的摘要
您還可以查看WordPress模板標(biāo)簽的完整列表。
有些模板標(biāo)簽必須在循環(huán)中使用。
WordPress循環(huán)
WordPress 循環(huán)是一組代碼，可檢索所有請(qǐng)求的文章。您在循環(huán)中編寫(xiě)的HTML將用于在單個(gè)頁(yè)面上顯示循環(huán)所請(qǐng)求的每個(gè)文章。代碼繼續(xù)循環(huán)直到顯示完最后一篇文章。
循環(huán)是由四行代碼組成的多行簡(jiǎn)寫(xiě)if-then語(yǔ)句。第一行指出，如果找到了文章，請(qǐng)使用以下代碼顯示該文章。如果找不到匹配的文章，則可以定義替代文本。
默認(rèn)的WordPress示例如下所示，注釋行是HTML和模板標(biāo)簽的編寫(xiě)位置：
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
// HTML and template tags here to define the layout, and what is shown from the post
<?php endwhile; else : ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>假設(shè)您要顯示一個(gè)文章，請(qǐng)?jiān)谘h(huán)內(nèi)使用the_content()模板標(biāo)簽顯示該文章的內(nèi)容。同時(shí)，如果要顯示所有已發(fā)布文章的列表，則可以在循環(huán)內(nèi)使用the_excerpt()，這樣就不會(huì)顯示整個(gè)文章的內(nèi)容。
動(dòng)作鉤子
動(dòng)作掛鉤是WordPress提供的PHP函數(shù)，通常還會(huì)附加其他函數(shù)。它具有一些WordPress核心功能，可將其他HTML代碼添加到頁(yè)面，并允許插件添加它們的功能。
在主題的頁(yè)眉模板中，調(diào)用wp_head()動(dòng)作鉤子以在<head></head>標(biāo)記內(nèi)包含WordPress標(biāo)題默認(rèn)的HTML。在主題頁(yè)腳部分，將調(diào)用wp_footer()動(dòng)作鉤子以包含默認(rèn)的HTML和JavaScript，并運(yùn)行插件附帶的所有功能。
如果在創(chuàng)建WordPress主題時(shí)不使用動(dòng)作鉤子，則一些重要的核心代碼將丟失，并且插件將無(wú)法正常運(yùn)行。
例如，在您主題的 footer.php模板 中刪除 wp_footer()，您將發(fā)現(xiàn)登錄后在前段頁(yè)面無(wú)法再顯示W(wǎng)P的頂部管理欄。顯示管理欄的WordPress核心代碼已附加到wp_footer()動(dòng)作鉤子上，如果該鉤子不存在，則附加的函數(shù)將無(wú)法運(yùn)行。
總結(jié)
WordPress主題允許您修改網(wǎng)站的外觀。如果您知道如何編碼，則可以制作適合自己需求的主題。
讓我們回顧一下為您的網(wǎng)站創(chuàng)建響應(yīng)式WordPress主題的步驟：
- 存儲(chǔ)主題及其文件
- 創(chuàng)建模板文件和CSS樣式表
- 在開(kāi)發(fā)之前自定義functions.php和sidebar.php
- 使用模板構(gòu)建布局
確保使用Meta標(biāo)記和媒體查詢(xún)來(lái)創(chuàng)建響應(yīng)式設(shè)計(jì)。此外，將您的主題與WordPress模板標(biāo)簽、循環(huán)和動(dòng)作鉤子相集成，以顯示您的網(wǎng)站信息。
恭喜你！您剛剛已經(jīng)創(chuàng)建了第一個(gè)自適應(yīng)WordPress主題！
制作更加完善和強(qiáng)大的WordPress主題，需要具備更多的能力，具體可以看下我們之前的文章《成為合格的WordPress開(kāi)發(fā)人員需要學(xué)習(xí)哪些知識(shí)？》。如果你真想系統(tǒng)學(xué)習(xí)WordPress主題開(kāi)發(fā)，建議從《WordPress主題開(kāi)發(fā)核心知識(shí)【視頻教程】》入手！當(dāng)然，《WordPress主題開(kāi)發(fā)手冊(cè)》也是必看基礎(chǔ)！
還是購(gòu)買(mǎi)付費(fèi)的成熟主題省事，在此基礎(chǔ)上再修改
例子中的主題請(qǐng)問(wèn)能提供文件嗎？
這個(gè)教程是翻譯自國(guó)外的文章，似乎沒(méi)有提供下載，而且忘記備注出處了，找不到原始文章了。不過(guò)大部分的代碼都在文章中提及了
干貨，只不過(guò)受眾面就比較窄了。最后可以插入一個(gè)你們服務(wù)廣告。