爆乳熟妇一区二区三区,国产精品丝袜,成人免费观看做爰视频胸大

WordPress在網(wǎng)絡(luò)上的大部分站點(diǎn)上使用。它使我們能夠創(chuàng)建各種不同類型的網(wǎng)站，但是任何網(wǎng)站最重要的組件之一始終是主頁。完美的著陸頁將幫助您降低跳出率，提高流量和客戶。在本文中，我們將介紹如何創(chuàng)建WordPress網(wǎng)站的自定義主頁（或著陸頁）。

有很多方法可以實現(xiàn)這一目標(biāo)，這只是一種方式

。

>概述我們將在本文中介紹的內(nèi)容首先，我們將完成以下基本步驟：

在WordPress的索引頁面上顯示一個滑塊。

顯示三個用於顯示產(chǎn)品描述的面板。

顯示兩個行，其中包含有關(guān)您的產(chǎn)品的詳細(xì)信息，並並排文本。
>面板，向您的團(tuán)隊成員展示。
然後，我們將查看以下高級主題：

>僅為首頁創(chuàng)建側(cè)邊欄。

flexslider提供滑塊選項。

瑪麗亞·安東尼特·佩納（Maria Antonietta Perna）在上一篇文章中涵蓋了柯基（Kirki），如果您正在尋找有關(guān)該主題的良好介紹。

鑰匙要點(diǎn)

>通過使用WordPress Customizer來優(yōu)化WordPress主頁，以輕鬆修改滑塊和側(cè)邊欄等元素而無需其他插件。
>使用Kirki Toolkit來增強(qiáng)WordPress Customizer的功能，從而允許使用最小編碼的高級自定義。通過在“庫”文件夾中組織主題文件以進(jìn)行更好的管理和模塊化，
>
>
>確保您的主頁既有信息又具有吸引力，包括包括團(tuán)隊展示，詳細(xì)的產(chǎn)品描述和交互式滑塊等動態(tài)元素。 >
note

>您會在庫文件夾中找到一個名為theme-options.php的文件，我們將在本教程中進(jìn)行最多的編輯。在您喜歡的文本編輯器中打開該文件，並準(zhǔn)備好讓您的手弄髒！

kirki

Kirki不是一個框架。這是一個工具包，允許WordPress開發(fā)人員通過抽象代碼並使每個人更容易創(chuàng)建美麗而有意義的用戶體驗來利用自定義器並利用其高級功能和靈活性。

我們可以使用Kirki將配置，字段，部分和麵板添加到定制器中。這不會替換WordPress Customizer API。 Kirki的API只是默認(rèn)WordPress方法的包裝器，簡化了語法並允許您以更少的代碼編寫並利用其一些最高級的功能。

>從github下載kirki文件，然後將其放入主題文件夾中的名為“ kirki”的文件夾中。

首先，您必須創(chuàng)建一個新的配置。配置具有唯一的ID，所有使用相同config_id的字段都將繼承該配置的屬性。

>添加配置後，您可以添加面板，部分和字段。請注意，您的定制器中應(yīng)該至少有一個部分，以便能夠添加字段。字段不可能是“孤兒”，必須將它們分組為部分。

配置

kirki允許您為插件或主題創(chuàng)建配置，並通過ID分組。然後將所有字段鏈接到該ID的字段將繼承配置屬性。

<span>Kirki<span>::</span>add_config( 'my_theme', array(
</span>    <span>'capability'    => 'edit_theme_options',
</span>    <span>'option_type'   => 'option',
</span>    <span>'option_name'   => 'my_theme',
</span><span>) );</span>

option_type：可以是選項或theme_mod。

>面板

>面板是部分的包裝器，這是將多個部分分組在一起的一種方法。

e節(jié)

>部分是字段的包裝器，這是將多個字段組合在一起的方法。所有字段都必須屬於一個部分，沒有任何字段可以是孤兒。

<span>Kirki<span>::</span>add_panel( 'panel_id', array(
</span>    <span>'priority'    => 10,
</span>    <span>'title'       => __( 'My Title', 'textdomain' ),
</span>    <span>'description' => __( 'My Description', 'textdomain' ),
</span><span>) );</span>

>字段

>字段是諸如文本框之類的選項，並提供了複選框，以便用戶可以在其中輸入自定義文本。每個字段必須僅與特定的部分相關(guān)聯(lián)。

<span>Kirki<span>::</span>add_section( 'section_id', array(
</span>    <span>'title'          => __( 'My Title', 'textdomain' ),
</span>    <span>'description'    => __( 'My Description', 'textdomain' ),
</span>    <span>'panel'          => '', // Not typically needed.
</span>    <span>'priority'       => 160,
</span>    <span>'capability'     => 'edit_theme_options',
</span>    <span>'theme_supports' => '', // Rarely needed.
</span><span>) );</span>

足夠的介紹?，F(xiàn)在讓我們自定義我們的主題！

將Kirki與我們的主題集成

>我們需要做的第一件事是將Kirki與我們的主題集成在一起。為此，請打開您在庫文件夾中找到的them-options.php文件，並在其中添加以下代碼：

<span>function my_custom_text_settings( $fields ) {
</span>
    <span>// Add the controls
</span>    <span>$fields[] = array(
</span>        <span>'label'       => __( 'My custom control', 'translation_domain' ),
</span>        <span>'section'     => 'my_section',
</span>        <span>'settings'    => 'my_setting',
</span>        <span>'type'        => 'text',
</span>        <span>'priority'    => 10,
</span>        <span>'option_type' => 'theme_mod',
</span>        <span>'capability'  => 'edit_theme_options',
</span>    <span>);
</span>
    <span>$fields[] = array(
</span>        <span>'label'       => __( 'My custom control 2', 'translation_domain' ),
</span>        <span>'section'     => 'my_section',
</span>        <span>'settings'    => 'my_setting_2',
</span>        <span>'type'        => 'text',
</span>        <span>'priority'    => 20,
</span>        <span>'option_type' => 'theme_mod',
</span>        <span>'capability'  => 'edit_theme_options',
</span>    <span>);
</span>
    <span>return $fields;
</span>
<span>}
</span><span>add_filter( 'kirki/fields', 'my_custom_text_settings' );</span>

上面的代碼將kirki文件與我們的主題鏈接。請注意，如前所述，我們從github源下載的文件應(yīng)放在主題文件夾中的名為“ kirki”的文件夾中。

>

創(chuàng)建配置

如前所述，我們需要創(chuàng)建一種可以與選項一起使用的配置。將以下代碼添加到您的theme-options.php文件中。

<span>// Integrating Kirki with our theme
</span><span>include_once( get_template_directory() . '/kirki/kirki.php' );</span>

>我們成功地為我們的主題創(chuàng)建了配置?，F(xiàn)在，我們將在選項中使用MC作為我們的option_name。

設(shè)計

>現(xiàn)在讓我們看一下我們的著陸頁的設(shè)計。我們的主頁將包含以下內(nèi)容：

<span>// Adding the configuration
</span><span>Kirki<span>::</span>add_config( 'mc', array(
</span>    <span>'capability'    => 'edit_theme_options',
</span>    <span>'option_type'   => 'option',
</span>    <span>'option_name'   => 'mc',
</span><span>) );</span>

產(chǎn)品滑塊（用於顯示您的產(chǎn)品頁面的幻燈片）。

描述框（用於顯示有關(guān)您公司的一些信息）。

>產(chǎn)品詳細(xì)信息（以顯示有關(guān)您產(chǎn)品的一些詳細(xì)信息）。

>
我們將介紹如何一對一地完成這些要點(diǎn)的主頁。

創(chuàng)建首頁的自定義模板

>我們不想更改我們的index.php文件，因為我們可以為首頁創(chuàng)建自定義模板。在此自定義模板中，我們將添加代碼，以便顯示我們自定義的頭版。因此，我們將創(chuàng)建一個自定義模板，該模板將在首頁中顯示內(nèi)容。 >

在此文件中，我們添加了代碼以顯示滑塊。

<span>Kirki<span>::</span>add_config( 'my_theme', array(
</span>    <span>'capability'    => 'edit_theme_options',
</span>    <span>'option_type'   => 'option',
</span>    <span>'option_name'   => 'my_theme',
</span><span>) );</span>

我們必須將其設(shè)置為靜態(tài)頭版。但是，最初沒有一個頁面將使用此模板。我們將必須創(chuàng)建一個將使用此模板的新頁面。請按照以下步驟：

創(chuàng)建一個新頁面（**頁面>添加新**）。

>在頁面上添加標(biāo)題（例如**我的自定義主頁**）。

選擇**自定義主頁**來自**模板** ** page屬性**。

單擊**發(fā)布**按鈕。

現(xiàn)在，將WordPress自定義器內(nèi)部的靜態(tài)正面頁面選項設(shè)置為靜態(tài)頁面，然後選擇我的自定義主頁（或者您使用了該頁面的任何其他名稱，請選擇一個）。 >

不要忘記單擊“自定義”的保存和發(fā)布按鈕。

>您尚未註意到定制器內(nèi)部的任何可見更改，因為我們尚未在homepage.php文件中添加任何代碼。打開homepage.php，讓我們開始向其添加代碼！為您的WordPress網(wǎng)站設(shè)計自定義主頁

>讓我們添加以下代碼：

上面的代碼包括我們當(dāng)前主題目錄中的header.php和footer.php文件。如果您現(xiàn)在刷新您的定制器，您可能只會看到導(dǎo)航和頁腳菜單。

>產(chǎn)品滑塊

>產(chǎn)品滑塊顯示您最有創(chuàng)意或最暢銷的產(chǎn)品。這些是訪問者首先在您的網(wǎng)站上看到的產(chǎn)品。創(chuàng)建產(chǎn)品滑塊涉及以下步驟：

<span>Kirki<span>::</span>add_panel( 'panel_id', array(
</span>    <span>'priority'    => 10,
</span>    <span>'title'       => __( 'My Title', 'textdomain' ),
</span>    <span>'description' => __( 'My Description', 'textdomain' ),
</span><span>) );</span>

創(chuàng)建一組滑塊（通常為5）。

>在滑塊中添加背景圖像。

在滑塊上添加標(biāo)題。

創(chuàng)建一組滑塊
>如前所述，我們正在使用Flexslider在主題中顯示滑塊。因此，首先，我們需要從Github下載Flexslider。我們只需要使用jquery.flexslider.js，flexslider.css，bg_play_pause.png和fonts文件夾即可。將這些資源複製到您的主題文件夾中。

note

如果您與我提供的主題一起工作，則可以在供應(yīng)商文件夾中復(fù)制jquery.flexslider.js，在js文件夾中，flexslider.css在CSS文件夾中，bg_play_pause.ppause.png files. css file。圖像文件夾的圖像文件夾和字體文件夾中的字體文件夾的內(nèi)容（來自flexslider的github源），該文件夾已在主題文件夾中。

>現(xiàn)在，我們將需要用我們的主題加入這些文件。我們將在庫文件夾中存在的enqueue-scripss.php文件中添加以下候選代碼：>

<span>Kirki<span>::</span>add_config( 'my_theme', array(
</span>    <span>'capability'    => 'edit_theme_options',
</span>    <span>'option_type'   => 'option',
</span>    <span>'option_name'   => 'my_theme',
</span><span>) );</span>

：

<span>Kirki<span>::</span>add_panel( 'panel_id', array(
</span>    <span>'priority'    => 10,
</span>    <span>'title'       => __( 'My Title', 'textdomain' ),
</span>    <span>'description' => __( 'My Description', 'textdomain' ),
</span><span>) );</span>

note

如果您不使用我提供的主題，則可能需要編輯以下部分：/js/vendor/jquery.flexslider.js和/css/flexslider.css，並用JS的路徑替換它和CSS文件。

首先，讓我們在WordPress自定義器中創(chuàng)建一個面板，該面板將顯示我們的滑塊的圖像，鏈接和字幕。

>再次打開theme-options.php，然後向其添加以下代碼：>

>上面的代碼將產(chǎn)品滑塊面板添加??到我們的自定義器中，但是它將不可見，因為沒有任何部分具有此面板，並且沒有字段包含與此面板相關(guān)的任何部分。令人困惑？讓我們繼續(xù)前進(jìn)，它將變得更加清晰。

<span>Kirki<span>::</span>add_section( 'section_id', array(
</span>    <span>'title'          => __( 'My Title', 'textdomain' ),
</span>    <span>'description'    => __( 'My Description', 'textdomain' ),
</span>    <span>'panel'          => '', // Not typically needed.
</span>    <span>'priority'       => 160,
</span>    <span>'capability'     => 'edit_theme_options',
</span>    <span>'theme_supports' => '', // Rarely needed.
</span><span>) );</span>

來完成。

上面的代碼添加了產(chǎn)品滑塊面板內(nèi)的主頁部分的產(chǎn)品滑塊。

接下來，我們添加一個用於顯示圖像的字段。我們可以使用以下代碼創(chuàng)建一個圖像字段：

<span>function my_custom_text_settings( $fields ) {
</span>
    <span>// Add the controls
</span>    <span>$fields[] = array(
</span>        <span>'label'       => __( 'My custom control', 'translation_domain' ),
</span>        <span>'section'     => 'my_section',
</span>        <span>'settings'    => 'my_setting',
</span>        <span>'type'        => 'text',
</span>        <span>'priority'    => 10,
</span>        <span>'option_type' => 'theme_mod',
</span>        <span>'capability'  => 'edit_theme_options',
</span>    <span>);
</span>
    <span>$fields[] = array(
</span>        <span>'label'       => __( 'My custom control 2', 'translation_domain' ),
</span>        <span>'section'     => 'my_section',
</span>        <span>'settings'    => 'my_setting_2',
</span>        <span>'type'        => 'text',
</span>        <span>'priority'    => 20,
</span>        <span>'option_type' => 'theme_mod',
</span>        <span>'capability'  => 'edit_theme_options',
</span>    <span>);
</span>
    <span>return $fields;
</span>
<span>}
</span><span>add_filter( 'kirki/fields', 'my_custom_text_settings' );</span>

現(xiàn)在，如果我們刷新我們的定制器，我們將看到產(chǎn)品滑塊面板出現(xiàn)了。

<span>// Integrating Kirki with our theme
</span><span>include_once( get_template_directory() . '/kirki/kirki.php' );</span>

>通過圖像字段，我們可以添加將在滑塊中顯示的圖像。我們將創(chuàng)建另外四個類似的字段，以便至少可以為滑塊提供五個圖像。以下代碼將添加更多四個圖像字段：

我們可以通過這些字段上傳圖像，然後在著陸頁上顯示它們。

<span>// Adding the configuration
</span><span>Kirki<span>::</span>add_config( 'mc', array(
</span>    <span>'capability'    => 'edit_theme_options',
</span>    <span>'option_type'   => 'option',
</span>    <span>'option_name'   => 'mc',
</span><span>) );</span>

>向滑塊添加背景圖像為您的WordPress網(wǎng)站設(shè)計自定義主頁

現(xiàn)在，我們將為產(chǎn)品滑塊添加代碼。在內(nèi)部

<span>Kirki<span>::</span>add_config( 'my_theme', array(
</span>    <span>'capability'    => 'edit_theme_options',
</span>    <span>'option_type'   => 'option',
</span>    <span>'option_name'   => 'my_theme',
</span><span>) );</span>

這些行可獲取我們保存在定制器中的每個幻燈片的圖像。在下一步中，我們將檢查這些圖像中的任何一個是否存在。如果它們中的任何一個都存在，我們將稱我們的滑塊。

<span>Kirki<span>::</span>add_panel( 'panel_id', array(
</span>    <span>'priority'    => 10,
</span>    <span>'title'       => __( 'My Title', 'textdomain' ),
</span>    <span>'description' => __( 'My Description', 'textdomain' ),
</span><span>) );</span>

此行檢查是否存在任何幻燈片中的任何圖像。如果圖像存在，則稱為Flexslider?，F(xiàn)在，我們將使用以下代碼呼應(yīng)每張幻燈片的圖像：>

<span>Kirki<span>::</span>add_section( 'section_id', array(
</span>    <span>'title'          => __( 'My Title', 'textdomain' ),
</span>    <span>'description'    => __( 'My Description', 'textdomain' ),
</span>    <span>'panel'          => '', // Not typically needed.
</span>    <span>'priority'       => 160,
</span>    <span>'capability'     => 'edit_theme_options',
</span>    <span>'theme_supports' => '', // Rarely needed.
</span><span>) );</span>

接下來，我們只需要添加JavaScript才能使Flexslider工作。

>向滑塊添加標(biāo)題

<span>function my_custom_text_settings( $fields ) {
</span>
    <span>// Add the controls
</span>    <span>$fields[] = array(
</span>        <span>'label'       => __( 'My custom control', 'translation_domain' ),
</span>        <span>'section'     => 'my_section',
</span>        <span>'settings'    => 'my_setting',
</span>        <span>'type'        => 'text',
</span>        <span>'priority'    => 10,
</span>        <span>'option_type' => 'theme_mod',
</span>        <span>'capability'  => 'edit_theme_options',
</span>    <span>);
</span>
    <span>$fields[] = array(
</span>        <span>'label'       => __( 'My custom control 2', 'translation_domain' ),
</span>        <span>'section'     => 'my_section',
</span>        <span>'settings'    => 'my_setting_2',
</span>        <span>'type'        => 'text',
</span>        <span>'priority'    => 20,
</span>        <span>'option_type' => 'theme_mod',
</span>        <span>'capability'  => 'edit_theme_options',
</span>    <span>);
</span>
    <span>return $fields;
</span>
<span>}
</span><span>add_filter( 'kirki/fields', 'my_custom_text_settings' );</span>

>我們還可以在幻燈片中添加標(biāo)題。我們只需要在我們的定制器中添加一個新字段，該字段將接受每張幻燈片的標(biāo)題（文本）並迴聲。

讓我們先添加字段。

我們可以為其他四個幻燈片做類似的事情。

現(xiàn)在，在前端，在我們的自定義主頁模板中，我們需要稍微編輯一些代碼以顯示這些字幕。

<span>// Integrating Kirki with our theme
</span><span>include_once( get_template_directory() . '/kirki/kirki.php' );</span>

首先，我們需要將字幕存儲在變量中：>

然後，替換以下代碼：

帶有以下代碼：

<span>// Adding the configuration
</span><span>Kirki<span>::</span>add_config( 'mc', array(
</span>    <span>'capability'    => 'edit_theme_options',
</span>    <span>'option_type'   => 'option',
</span>    <span>'option_name'   => 'mc',
</span><span>) );</span>

描述框

描述框可以提供有關(guān)我們產(chǎn)品的有用描述。這些盒子位於滑塊下方，因此它引起了我們訪客的注意。如果您想顯示有關(guān)產(chǎn)品的詳細(xì)信息，這些盒子將很有幫助。通常，可以有三到四個盒子（或面板），但是如果您願意，您可以擁有更多。

<span>/**
</span><span>Template Name: Custom Homepage
</span><span>**/</span>

在本教程中，我們正在創(chuàng)建三個框，並使用Foundation CSS框架的數(shù)據(jù)平價屬性為每個面板提供統(tǒng)一的高度。 >

讓我們開始工作！

<span>// Add the header
</span><span>get_header();
</span>
<span>// Add the footer
</span><span>get_footer();</span>

創(chuàng)建面板

>首先，我們將創(chuàng)建一個單獨(dú)的面板以顯示描述框。我們還可以在同一面板下（在我們創(chuàng)建的第一個面板中）提供所有選項，但要使事物分開以供以後使用。

我們需要在我們的theme-options.php文件中添加以下代碼：>

創(chuàng)建部分

>現(xiàn)在，我們將為產(chǎn)品描述創(chuàng)建兩個部分。我們將圖像上傳到一個部分，並在另一部分中添加描述。

首先，使用以下代碼為圖像創(chuàng)建一個部分：

然後，我們?yōu)槊枋鰟?chuàng)建一個部分：

創(chuàng)建字段

<span>// adding flexslider scripts file in the footer
</span><span>wp_register_script( 'flexslider-js', get_template_directory_uri() . '/js/vendor/jquery.flexslider.js', array( 'jquery' ), '', true );
</span>
<span>wp_enqueue_script( 'flexslider-js' );</span>

接下來，我們需要為圖像輸入創(chuàng)建三個字段（因為將有三個框，因此將有三個圖像），然後我們將為產(chǎn)品描述創(chuàng)建三個字段。代碼看起來如下：

顯示輸出

現(xiàn)在，我們需要使用以下代碼在自定義模板上顯示輸出。

<span>Kirki<span>::</span>add_config( 'my_theme', array(
</span>    <span>'capability'    => 'edit_theme_options',
</span>    <span>'option_type'   => 'option',
</span>    <span>'option_name'   => 'my_theme',
</span><span>) );</span>

這將顯示第一個框的輸出。同樣，我們將為其他兩個盒子做同樣的事情。

<span>Kirki<span>::</span>add_panel( 'panel_id', array(
</span>    <span>'priority'    => 10,
</span>    <span>'title'       => __( 'My Title', 'textdomain' ),
</span>    <span>'description' => __( 'My Description', 'textdomain' ),
</span><span>) );</span>

現(xiàn)在轉(zhuǎn)到您的自定義器並添加圖像和描述，您將看到頁面顯示您的輸入！

>產(chǎn)品詳細(xì)信息

該部分包含兩個行，其中一側(cè)有一個圖像，另一側(cè)有一個描述。此頁面的此部分或部分可以用作訪問者最重要方面的視覺效果。

創(chuàng)建面板

>讓我們先創(chuàng)建一個面板。我們將其稱為產(chǎn)品詳細(xì)信息。

<span>Kirki<span>::</span>add_section( 'section_id', array(
</span>    <span>'title'          => __( 'My Title', 'textdomain' ),
</span>    <span>'description'    => __( 'My Description', 'textdomain' ),
</span>    <span>'panel'          => '', // Not typically needed.
</span>    <span>'priority'       => 160,
</span>    <span>'capability'     => 'edit_theme_options',
</span>    <span>'theme_supports' => '', // Rarely needed.
</span><span>) );</span>

創(chuàng)建部分

>我們將使用以下代碼為字段進(jìn)行部分：

<span>function my_custom_text_settings( $fields ) {
</span>
    <span>// Add the controls
</span>    <span>$fields[] = array(
</span>        <span>'label'       => __( 'My custom control', 'translation_domain' ),
</span>        <span>'section'     => 'my_section',
</span>        <span>'settings'    => 'my_setting',
</span>        <span>'type'        => 'text',
</span>        <span>'priority'    => 10,
</span>        <span>'option_type' => 'theme_mod',
</span>        <span>'capability'  => 'edit_theme_options',
</span>    <span>);
</span>
    <span>$fields[] = array(
</span>        <span>'label'       => __( 'My custom control 2', 'translation_domain' ),
</span>        <span>'section'     => 'my_section',
</span>        <span>'settings'    => 'my_setting_2',
</span>        <span>'type'        => 'text',
</span>        <span>'priority'    => 20,
</span>        <span>'option_type' => 'theme_mod',
</span>        <span>'capability'  => 'edit_theme_options',
</span>    <span>);
</span>
    <span>return $fields;
</span>
<span>}
</span><span>add_filter( 'kirki/fields', 'my_custom_text_settings' );</span>

創(chuàng)建字段

>類似於先前涵蓋的概念，我們將使用下面的代碼創(chuàng)建兩個圖像字段和兩個文本區(qū)域字段。

<span>// Integrating Kirki with our theme
</span><span>include_once( get_template_directory() . '/kirki/kirki.php' );</span>

顯示輸出

我們需要在自定義主頁模板上顯示輸出。打開您的homepage.php文件並添加以下代碼：

<span>// Adding the configuration
</span><span>Kirki<span>::</span>add_config( 'mc', array(
</span>    <span>'capability'    => 'edit_theme_options',
</span>    <span>'option_type'   => 'option',
</span>    <span>'option_name'   => 'mc',
</span><span>) );</span>

也只對另一行做同樣的事情。然後，轉(zhuǎn)到您的自定義器並刷新它。

>團(tuán)隊展示櫃

>本部分用於提供有關(guān)您團(tuán)隊的一些信息。本節(jié)應(yīng)該很有用，因為它使我們的訪問者可以知道他們將與誰合作。

>通常，本節(jié)可能包括許多團(tuán)隊成員。在此示例中，我們將僅提供三個成員的選項，但是您可以根據(jù)需要進(jìn)行擴(kuò)展。

創(chuàng)建面板

我們將創(chuàng)建一個新的面板並將其稱為團(tuán)隊展示。

創(chuàng)建部分

<span>/**
</span><span>Template Name: Custom Homepage
</span><span>**/</span>

接下來，我們將創(chuàng)建一個具有團(tuán)隊展示選項的部分。

創(chuàng)建字段

>總共將有六個字段，該字段由化身的三個圖像字段和成員名稱的三個文本字段組成。

<span>// Add the header
</span><span>get_header();
</span>
<span>// Add the footer
</span><span>get_footer();</span>

顯示輸出

>現(xiàn)在，我們將在我們的自定義主頁模板上顯示團(tuán)隊三個成員的圖像和名稱。打開homepage.php並插入以下內(nèi)容：

<span>// adding flexslider scripts file in the footer
</span><span>wp_register_script( 'flexslider-js', get_template_directory_uri() . '/js/vendor/jquery.flexslider.js', array( 'jquery' ), '', true );
</span>
<span>wp_enqueue_script( 'flexslider-js' );</span>

讓我們首先將圖像和文本的值存儲在變量中。

然後，我們可以使用下面的代碼顯示每個成員：

<span>Kirki<span>::</span>add_config( 'my_theme', array(
</span>    <span>'capability'    => 'edit_theme_options',
</span>    <span>'option_type'   => 'option',
</span>    <span>'option_name'   => 'my_theme',
</span><span>) );</span>

高級主題

從另一個頁面獲取內(nèi)容

>我們還可以將另一個頁面的內(nèi)容獲取到我們的主頁。如果您想顯示有關(guān)您公司的一些信息，並且已經(jīng)有一個關(guān)於我們的頁面，這將特別有用。您無需重新編寫相同的內(nèi)容。您可以使用Kirki獲取該內(nèi)容。

我們可以創(chuàng)建一個單獨(dú)的面板來提供此選項，讓我們這樣做！

這是面板的代碼：>

<span>Kirki<span>::</span>add_panel( 'panel_id', array(
</span>    <span>'priority'    => 10,
</span>    <span>'title'       => __( 'My Title', 'textdomain' ),
</span>    <span>'description' => __( 'My Description', 'textdomain' ),
</span><span>) );</span>

這是本節(jié)的代碼：>

>接下來，我們將顯示管理員可以在首頁上選擇哪個頁面的下拉列表。我們可以使用kirki的下拉頁選項。

<span>Kirki<span>::</span>add_section( 'section_id', array(
</span>    <span>'title'          => __( 'My Title', 'textdomain' ),
</span>    <span>'description'    => __( 'My Description', 'textdomain' ),
</span>    <span>'panel'          => '', // Not typically needed.
</span>    <span>'priority'       => 160,
</span>    <span>'capability'     => 'edit_theme_options',
</span>    <span>'theme_supports' => '', // Rarely needed.
</span><span>) );</span>

我們可以使用以下內(nèi)容添加字段：

這可以在WordPress Customizer內(nèi)部啟用選項。現(xiàn)在，我們可以編輯homepage.php文件以顯示內(nèi)容。打開該文件，然後復(fù)制以下代碼，您希望顯示此內(nèi)容：>

<span>function my_custom_text_settings( $fields ) {
</span>
    <span>// Add the controls
</span>    <span>$fields[] = array(
</span>        <span>'label'       => __( 'My custom control', 'translation_domain' ),
</span>        <span>'section'     => 'my_section',
</span>        <span>'settings'    => 'my_setting',
</span>        <span>'type'        => 'text',
</span>        <span>'priority'    => 10,
</span>        <span>'option_type' => 'theme_mod',
</span>        <span>'capability'  => 'edit_theme_options',
</span>    <span>);
</span>
    <span>$fields[] = array(
</span>        <span>'label'       => __( 'My custom control 2', 'translation_domain' ),
</span>        <span>'section'     => 'my_section',
</span>        <span>'settings'    => 'my_setting_2',
</span>        <span>'type'        => 'text',
</span>        <span>'priority'    => 20,
</span>        <span>'option_type' => 'theme_mod',
</span>        <span>'capability'  => 'edit_theme_options',
</span>    <span>);
</span>
    <span>return $fields;
</span>
<span>}
</span><span>add_filter( 'kirki/fields', 'my_custom_text_settings' );</span>

>僅為前頁面創(chuàng)建側(cè)邊欄如果您遵循WordPress法典，則為主題創(chuàng)建側(cè)邊欄是簡單的。我不會在這裡詳細(xì)介紹太多細(xì)節(jié)，而只會通過在庫/widget-aareas.php文件中使用以下代碼添加該主題。

>打開widget-areas.php並添加以下內(nèi)容：

<span>// Integrating Kirki with our theme
</span><span>include_once( get_template_directory() . '/kirki/kirki.php' );</span>

note

>位於庫文件夾內(nèi)部的widget-areas.php文件包含此主題的所有小部件區(qū)域，因此我在那裡添加了側(cè)欄代碼。然後，我們只需要編輯homepage.php文件即可在該頁面上顯示此窗口小部件。打開您的homepage.php並添加以下代碼：

<span>// Adding the configuration
</span><span>Kirki<span>::</span>add_config( 'mc', array(
</span>    <span>'capability'    => 'edit_theme_options',
</span>    <span>'option_type'   => 'option',
</span>    <span>'option_name'   => 'mc',
</span><span>) );</span>

現(xiàn)在，當(dāng)您在此側(cè)邊欄中添加小部件時，它將僅在前頁面上顯示。

>將其包裹起來

在本教程中，我解釋瞭如何使用Kirki Toolkit為WordPress網(wǎng)站創(chuàng)建登錄頁面。您可以用一些CSS對其進(jìn)行裝飾，並按照自己喜歡的方式進(jìn)行自定義。關(guān)於實施此工具包的任何很酷的想法將很棒，並在下面的評論部分中讓我知道。如果您遇到任何問題或有任何疑問，請告訴我，我會很高興為您提供幫助。

>關(guān)於為您的WordPress網(wǎng)站設(shè)計自定義主頁的常見問題

>如何在WordPress中創(chuàng)建靜態(tài)正面頁面？首先，您需要登錄到WordPress儀表板。然後，轉(zhuǎn)到“頁面”，然後單擊“添加新”。將此新頁面命名為“家”或您喜歡的任何其他名稱。之後，創(chuàng)建另一個新頁面並將其命名為“博客”或“帖子”。創(chuàng)建這兩個頁面後，轉(zhuǎn)到“設(shè)置”，然後轉(zhuǎn)到“閱讀”。在“主頁顯示”下，選擇“靜態(tài)頁面”。在下拉菜單中，將“主頁”設(shè)置為您為家庭創(chuàng)建的頁面，將“帖子頁面”設(shè)置為您為博客或帖子創(chuàng)建的頁面。單擊“保存更改”以最終確定您的設(shè)置。

如何自定義WordPress HomePage？ WordPress提供多種自定義主頁的方法。您可以使用WordPress Customizer，它允許您實時預(yù)覽更改。要訪問它，請轉(zhuǎn)到“外觀”，然後“自定義”。在這裡，您可以更改網(wǎng)站的身份，顏色，背景圖像，菜單，小部件等。另外，您可以使用頁面構(gòu)建器插件，例如Elementor或Beaver Builder。這些插件提供了一個拖放界面，使設(shè)計主頁非常容易。 WordPress主頁，請務(wù)必牢記觀眾和目的。確保您的主頁清楚地傳達(dá)了您的身份以及您的工作。使用高質(zhì)量的圖像和引人注目的標(biāo)題來吸引訪客的注意。保持設(shè)計清潔，簡單，以使訪問者易於瀏覽您的網(wǎng)站。另外，請確保您的網(wǎng)站對移動設(shè)備友好，因為很大一部分的網(wǎng)絡(luò)流量來自移動設(shè)備。

>我如何在WordPress HomePage中添加自定義標(biāo)頭？定制WordPress主頁的標(biāo)題，轉(zhuǎn)到“外觀”，然後“自定義”。根據(jù)您的主題，單擊“標(biāo)題”或“標(biāo)題圖像”。從這裡，您可以上傳新圖像，將其裁剪成所需的尺寸，並添加所需的任何文本或鏈接。完成後，單擊“保存並發(fā)布”。

如何將自定義頁腳添加到我的WordPress HomePage？

>在WordPress HomePage中添加自定義頁腳類似於添加自定義標(biāo)題。轉(zhuǎn)到“外觀”，然後“自定義”。根據(jù)您的主題，單擊“頁腳”或“頁腳設(shè)置”。在這裡，您可以自定義頁腳文本，添加小部件並更改佈局。完成後，單擊“保存並發(fā)布”。

>

>如何在WordPress HomePage中添加滑塊？

以在WordPress HomePage中添加滑塊，您將需要一個滑塊插件，例如滑塊革命或智能滑塊3。激活了所選插件，您可以創(chuàng)建一個新的滑塊，添加圖像並自定義設(shè)置。然後，根據(jù)插件，您可以使用短碼，窗口小部件或模板標(biāo)籤將滑塊添加到主頁上。首先，在WordPress主頁上添加博客部分，請確保您為博客文章創(chuàng)建了一個單獨(dú)的頁面。然後，轉(zhuǎn)到“外觀”，然後“自定義”。單擊“主頁設(shè)置”，然後在“主頁顯示”下選擇“最新帖子”。這將在您的主頁上顯示您最新的博客文章。

如何在我的WordPress主頁上添加社交媒體圖標(biāo)？

以在您的WordPress Homepage中添加社交媒體圖標(biāo)，您可以使用一個社交媒體插件，例如社交媒體小部件或簡單的社交圖標(biāo)。安裝並激活所選插件後，您可以添加社交媒體鏈接並選擇您喜歡的圖標(biāo)樣式和尺寸。然後，您可以使用窗口小部件將社交媒體圖標(biāo)添加到主頁上。

>如何使我的WordPress Homepage seo友好？

>選擇一個乾淨(jìng)，響應(yīng)迅速的主題。使用SEO插件（例如Yoast SEO）來優(yōu)化您的標(biāo)題標(biāo)籤和元描述。在您的內(nèi)容中包含相關(guān)的關(guān)鍵字，但要避免關(guān)鍵字填充。使用標(biāo)題標(biāo)籤來構(gòu)建內(nèi)容並使閱讀易於閱讀。另外，請確保您的網(wǎng)站迅速加載，因為頁面速度是排名因素。

>如何在WordPress主頁上添加聯(lián)繫表格？

以在您的WordPress Homepage中添加聯(lián)繫表格，您需要一個聯(lián)繫表插件，例如聯(lián)繫表7或WPForms。安裝並激活所選插件後，您可以創(chuàng)建一個新的聯(lián)繫表格並根據(jù)需要自定義字段。然後，您可以使用短碼將聯(lián)繫表格添加到主頁上。

以上是為您的WordPress網(wǎng)站設(shè)計自定義主頁的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！

本網(wǎng)站聲明

本文內(nèi)容由網(wǎng)友自願投稿，版權(quán)歸原作者所有。本站不承擔(dān)相應(yīng)的法律責(zé)任。如發(fā)現(xiàn)涉嫌抄襲或侵權(quán)的內(nèi)容，請聯(lián)絡(luò)admin@php.cn