編寫自定義 WordPress 登錄頁面的簡單步驟

不需要太多的網頁設計經驗就知道創建一個好的登錄頁面並不容易。 您需要清楚地了解您的目標網頁應該是關於什麼的。 您需要了解您的訪問者並將他們的注意力引向轉化。 幸運的是，如果您熟悉 Web 編碼的基礎知識，您將擁有必要的自由來優化您認為合適的頁面。 考慮到這一點，讓我們看看編寫自定義 WordPress 登錄頁面的全部內容。

登陸頁面的重要性

在我們詳細介紹編碼的具體步驟之前，讓我們首先詳細說明為什麼擁有一個好的目標網頁很重要。 幾乎沒有一個網站建設的在線指南不會提到擁有一個體面的目標網頁的至關重要性。 無論您的網站是關於銷售產品、提供服務還是收集數據，您都需要有一個好的目標網頁。

不幸的是，創建一個好的目標網頁並不容易。 您需要清楚地了解您的著陸應該是什麼樣的。 您需要了解您的受眾，以引導他們進行轉化。 優化不佳的目標網頁會大大降低您的表現，並可能破壞您原本出色的在線形象。 請記住，著陸頁通常是您的訪問者轉化為客戶之前的最後一步。 所以，盡你所能，讓它盡可能好。 幸運的是，如果您了解 Web 編程的基礎知識，您可以輕鬆編寫自定義登錄頁面。 這為您提供了相當大的自由度，這對於真正實用的頁面通常是必需的。 因此，考慮到這一點，讓我們逐步了解創建 WP 登錄頁面的必要代碼。

編寫自定義 WordPress 登錄頁面

雖然我們將概述的步驟相當簡單，但您應該始終考慮諮詢專業的網頁設計師。 某些網站可能非常複雜，後台運行著許多插件。 如果您不確定自己在做什麼，其中一些插件可能會導致或遇到問題。 雖然您可以在不訪問管理區域的情況下禁用插件，但您確實應該避免給自己帶來太多麻煩。 如果您遇到任何困難，請聯繫專業的網頁設計師來幫助您。

創建子主題

雖然理論上您可以創建一個全新的父主題，但您應該使用子主題。 它們更適合自定義，這使您可以更自由地創建獨特的登錄頁面。 由於我們已經介紹瞭如何創建子主題，因此我們不會在這裡再次討論。 我們唯一要提到的是，您需要在子主題目錄中同時擁有 style.css 和 functions.php 文件才能繼續。

構建 Style.css 文件

在 style.css 文件中，您只需添加以下代碼：

/*

主題名稱：登陸頁面主題

描述：帶有自定義登錄頁面的子主題

作者：默認作家

作者 URI：https://www.wpfullcare.com

*/

構建 Functions.php 文件

在functions.php 文件中，您需要添加以下代碼。 這樣做將允許您註冊您的子樣式表文件。

<?php

// 父主題樣式 //

// https://codex.wordpress.org/Child_Themes //

功能主題入隊樣式（）{

$parent_style = '父樣式';

wp_enqueue_style($parent_style, get_template_directory_uri() . '/style.css' );

wp_enqueue_style('兒童風格',

get_stylesheet_directory_uri() 。 '/style.css',

數組（$parent_style）

);

}

add_action('wp_enqueue_scripts', 'theme_enqueue_styles');

安裝並激活您的子主題

完成此操作後，您可以繼續安裝和激活您的子主題。 一般來說，當談到 WordPress 主題時，您希望在不同的 WP 網站上進行本地測試。 正如我們所提到的，事故確實會發生。 你真的應該避免禁用你的網站。 設置本地 WordPress 站點後，繼續上傳您的主題。 激活它後，請確保您的子主題正在運行並且您可以添加樣式。 轉到 style.css 文件並更改代碼的某些部分，以查看它是否正常工作。

構建自定義頁面

如果一切正常，您可以繼續在您的子主題中創建自定義頁面。 為此，您需要在您孩子的主題中創建一個新文件。 完成後，將其保存為 page-landing.php。 在該文件中，您需要添加以下代碼：

<?php

/**

模板名稱：登陸頁面

**/

?>

現在，前往模板下拉菜單並從菜單中選擇您的登錄頁面。 您需要選擇一張特色圖片作為背景（現在選擇大而簡單的圖片，您可以稍後進行試驗）。 然後添加您的副本並發布添加的頁面。 現在嘗試查看您的頁面只會讓您進入黑屏。 這是因為您還沒有在 page-landing.php 中添加以下標記。

<div id=”landing-page” class=”hfeed 網站”>

<div class=”網站品牌”>

<p class=”site-title aligncenter”><a href=”<?php echo esc_url(home_url('/')); ?>” rel=”home”><?php bloginfo( 'name' ); ?></a></p>

</div><!– .site-branding –>

添加並預覽頁面後，您應該會看到站點標題以及白色背景和大背景圖像。

顯示內容

要在登錄頁面上顯示其餘內容，您需要將以下標記添加到 page-landing.php。 您需要在 <!– .site-branding –> 行下方執行此操作，以使其正常運行。

<div class="sidebar sidebar-bribe">

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<h1 class=”登陸標題”><?php the_title(”); ?></h1>

<?php the_content(); ?>

<!– https://codex.wordpress.org/Function_Reference/wp_link_pages –>

<?php 結束； ?>

<?php endif; ?> <!– mdl-cell-8 //#primary –>

</div>

編寫自定義 WordPress 登錄頁面幾乎完成。 您所要做的就是為其設置樣式。 最簡單的方法是只使用 style.css 文件和必要的代碼。 由於您的頁面外觀實際上有無限的選擇，因此我們不會為您提供嚴格的示例。 相反，我們會建議您找到您喜歡的樣式並複制它。 這樣你就會弄清楚它的功能有多麼不同的方面。