2021国产精品自在自线,波多野结衣一区二区三区高清,粗大的内捧猛烈进出在线视频

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

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

。

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

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

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

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

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

flexslider提供滑塊選項。

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

鑰匙要點

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

>您會在庫文件夾中找到一個名為theme-options.php的文件，我們將在本教程中進行最多的編輯。在您喜歡的文本編輯器中打開該文件，并準(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>

>字段

>字段是諸如文本框之類的選項，并提供了復(fù)選框，以便用戶可以在其中輸入自定義文本。每個字段必須僅與特定的部分相關(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)品詳細信息（以顯示有關(guān)您產(chǎ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文件夾即可。將這些資源復(fù)制到您的主題文件夾中。

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ù)前進，它將變得更加清晰。

<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)品的詳細信息，這些盒子將很有幫助。通常，可以有三到四個盒子（或面板），但是如果您愿意，您可以擁有更多。

<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)建一個單獨的面板以顯示描述框。我們還可以在同一面板下（在我們創(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)品詳細信息

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

創(chuàng)建面板

>讓我們先創(chuàng)建一個面板。我們將其稱為產(chǎ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>

創(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>

創(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)到您的自定義器并刷新它。

>團隊展示柜

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

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

創(chuàng)建面板

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

創(chuàng)建部分

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

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

創(chuàng)建字段

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

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

顯示輸出

>現(xià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)建一個單獨的面板來提供此選項，讓我們這樣做！

這是面板的代碼：>

<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)部啟用選項?，F(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è)邊欄是簡單的。我不會在這里詳細介紹太多細節(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對其進行裝飾，并按照自己喜歡的方式進行自定義。關(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ù)必牢記觀眾和目的。確保您的主頁清楚地傳達了您的身份以及您的工作。使用高質(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)建了一個單獨的頁面。然后，轉(zhuǎn)到“外觀”，然后“自定義”。單擊“主頁設(shè)置”，然后在“主頁顯示”下選擇“最新帖子”。這將在您的主頁上顯示您最新的博客文章。

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

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

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

>選擇一個干凈，響應(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è)計自定義主頁的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！

本站聲明

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