如何在WordPress中創建“固定”浮動頁腳欄


您是否要在WordPress中創建粘性浮動頁腳欄? 多年來,我們一直在使用網站上的浮動頁腳欄,因為它可以幫助我們降低跳出率並增加用戶瀏覽的頁面。 你們中的許多人都問過我們如何創建類似的浮動條,就是這樣。 在本文中,我們將向您展示如何在WordPress中創建粘性浮動頁腳欄。

浮動頁腳欄

什麼是浮動頁腳欄?

粘性的浮動頁腳欄使您可以向用戶突出顯示重要內容。 用戶始終可以看到該條,因此他們更有可能單擊它並發現更多有用的內容。

WPBeginner頁腳欄

您可以使用浮動頁腳欄執行以下操作:

  • 吸引更多點擊到其他博客文章
  • 建立您的電子郵件清單
  • 注意特價/銷售

在本文中,我們將向您展示兩種在WordPress網站上添加粘性浮動頁腳欄的方法。 一個使用插件,另一個使用我們在WPBeginner上使用的編碼方法。 您可以選擇更易於使用的一種。

方法1:在WordPress中手動創建粘性浮動頁腳欄

此方法要求您在WordPress文件中添加代碼。 如果您不熟悉添加代碼,請查看我們的指南,了解如何將網頁摘要粘貼到WordPress中。

首先,您需要使用cPanel中的FTP客戶端或文件管理器連接到WordPress站點。

在您的FTP客戶端中,您需要找到 footer.php WordPress主題文件夾中的文件,然後將其下載到桌面。 它會位於這樣的路徑中:

/wp-content/themes/your-theme-folder/

接下來,您需要在純文本編輯器(如記事本)中打開footer.php文件,並在 標籤。

  • WPBeginner Link is the First Item
  • WordPress.org is the Second Item

您可以根據需要添加任意多個列表項。 我們將向您展示如何在每次加載頁面時隨機旋轉它們。

下一步是添加CSS樣式。

您可以將CSS添加到WordPress主題的 style.css 文件或使用Simple Custom CSS插件。

/*WPBeginner Footer Bar*/

.fixedbar {
background: #000; 
bottom: 0px; 
color:#fff; 
font-family: Arial, Helvetica, sans-serif; 
left:0; 
padding: 0px 0; 
position:fixed; 
font-size:16px; 
width:100%; 
z-index:99999; 
float:left; 
vertical-align:middle; 
margin: 0px 0 0; 
opacity: 0.95; 
font-weight: bold;
}
.boxfloat {
text-align:center; 
width:920px; 
margin:0 auto;
}

#tips, #tips li {
margin:0; 
padding:0; 
list-style:none
}
#tips {
width:920px; 
font-size:20px; 
line-height:120%;
}
#tips li {
padding: 15px 0; 
display:none;
}
#tips li a{
color: #fff;
}
#tips li a:hover {
text-decoration: none;
}

添加CSS後,您可能無法在網站上看到更改。 這是因為我們將列表中項目的顯示設置為“無”。

接下來,我們將使用jQuery在每次加載頁面時從列表中隨機顯示一項。

您需要在計算機上打開一個純文本編輯器(如記事本),並將此代碼添加到空白文件中:

(function($) {
this.randomtip = function(){
	var length = $("#tips li").length;
	var ran = Math.floor(Math.random()*length) + 1;
	$("#tips li:nth-child(" + ran + ")").show();
};

$(document).ready(function(){	
	randomtip();
});
})( jQuery );

完成後,需要將該文件另存為桌面上的floatbar.js。

現在打開FTP客戶端並連接到Web服務器。 轉到主題文件夾並找到js文件夾。 它將處於這樣的路徑:

/wp-content/themes/your-theme-folder/js

如果您的主題目錄中沒有js文件夾,則需要創建一個。

現在,您需要將之前創建的floatingbar.js文件上傳到剛創建的js文件夾中。

下一步是將JavaScript文件放入(加載)您的WordPress主題中。

將此代碼粘貼到主題的functions.php文件或特定於站點的插件中。

function wpb_floating_bar() {
    wp_enqueue_script( 'wpb-footerbar', get_stylesheet_directory_uri() . '/js/floatingbar.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'wpb_floating_bar' );

就是這樣,您現在可以訪問您的網站以查看浮動頁腳欄。 重新加載頁面幾次,以查看頁腳欄,隨機顯示列表中的不同項目。

使用此方法的好處是,您可以像我們一樣隨意旋轉浮動頁腳欄中的多個鏈接。

但是,困難在於您需要添加代碼。 此外,如果不進行過多的CSS定制,則不能將此浮動條用於其他用途。

方法2:使用OptinMontser在WordPress中添加浮動頁腳欄

OptinMonster是一個流行的潛在客戶生成插件,可在所有網站上使用。 它可以幫助您將網站訪問者轉換為訂閱者和客戶。

OptinMonster的功能之一是浮動的頁眉和頁腳欄,您可以使用它顯示電子郵件選擇表單以及促進單個鏈接/報價。

使用此方法的好處是:

  • 易於設置(無代碼)
  • 您可以在網站的不同頁面/類別上顯示自定義浮動條。
  • 您可以使用它來構建您的電子郵件列表以及促銷商品。

唯一的缺點是OptinMonster是一項付費服務。 但是您可以使用我們的OptinMonster優惠券: WPB10 獲得任何OptinMonster計劃10%的折扣。

購買OptinMonster(Plus或Pro計劃)後,您可以在網站上使用OptinMonster WordPress API插件。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

該插件僅充當WordPress網站和OptinMonster之間的連接器。

激活後,插件將在您的WordPress管理欄中添加一個標記為OptinMonster的新菜單項。 單擊它會將您帶到插件的設置頁面。

將您的WordPress網站連接到OptinMonster

系統將要求您提供OptinMonster API用戶名和密鑰。 您可以從OptinMonster帳戶獲取這些密鑰。

OptinMonster API密鑰

複製密鑰並將其粘貼到插件設置中,然後單擊“連接到OptinMonster”按鈕。 現在,該插件會將您的WordPress網站連接到您的OptinMonster帳戶。

接下來,您需要點擊“創建新眼鏡”按鈕。

創建一個新的選擇

這將帶您進入OptinMonster網站上的“創建新的Optin”頁面。

首先,您需要為Optin Campaign提供一個標題,然後選擇一個將使用此optin的網站。 如果您的網站未列出,請單擊“添加新網站”鏈接。

優化設置

接下來,您可以單擊“選擇您的optin類型”下方的浮動欄,以使用可用作浮動欄的模板。

您可以根據自己的喜好自定義所有這些模板。 選擇最接近您所想的那個。

選擇模板後,OptinMonster將啟動其設計定制器。 這是一個點擊生成器,您可以在其中配置optin的外觀和設置。

優化定制器

配置完optin的外觀後,請確保單擊“保存”按鈕。

儘管這些被稱為optins,但並非總是如此。 您可以使用“是/否”功能添加按鈕來查看博客文章或享受特別折扣。

首次創建浮動條時,默認情況下已暫停。

完成配置後,將鼠標懸停在頂部菜單的狀態欄中,然後選擇“啟動廣告系列”。

您的浮動條現在準備添加到WordPress網站。

返回WordPress網站的管理區域並訪問 OptinMonster»光學。 您將在此處看到您的optin。 如果看不到,請單擊“刷新選項”按鈕,插件將顯示它。

單擊“編輯輸出設置”鏈接以繼續。

最佳輸出設置

在下一頁上,選中“在站點上啟用optin”選項旁邊的框,然後單擊保存設置。

您還可以使用“高級”選項僅在特定帖子,頁面,類別和其他區域上顯示浮動欄。

僅此而已,浮動頁腳欄選項已在您的WordPress網站上發布。

OptinMonster添加了浮動欄

我們希望本文能幫助您將浮動頁腳欄添加到WordPress網站。 您可能還希望看到這些可行的技巧,以吸引訪問WordPress網站的流量。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。