如何在WordPress主題中添加幻燈片面板菜單


最近,我們的一位用戶問我們如何用jQuery滑動面板菜單替換其導航菜單? 滑動面板菜單可用於極大地改善移動網站上的用戶體驗。 在本文中,我們將向您展示如何在WordPress主題中添加幻燈片面板菜單。

WordPress默認主題中的滑動面板菜單

注意:這是中級教程,需要足夠的HTML和CSS知識。

用WordPress中的滑動面板菜單替換默認菜單

目的是在較小的屏幕上向用戶顯示幻燈片面板菜單,同時保留我們主題的默認菜單,以便筆記本電腦和台式機上的用戶可以看到完整菜單。 在我們開始之前,重要的是要知道有很多不同的WordPress主題,以後您將不得不處理一些CSS。

您需要做的第一件事是在計算機上打開純文本編輯器(例如記事本),然後創建一個新文件。 複製並粘貼以下代碼:

(function($) {
$('#toggle').toggle( 
    function() {
        $('#popout').animate({ left: 0 }, 'slow', function() {
            $('#toggle').html('關');
        });
    }, 
    function() {
        $('#popout').animate({ left: -250 }, 'slow', function() {
            $('#toggle').html('“關閉"');  });  });  })(jQuery);

更換 example.com 用您自己的域名,並替換 your-theme 與您的實際主題目錄。 將此文件另存為slidepanel.js在您的桌面上。 此代碼使用jQuery切換幻燈片面板菜單。 它還會設置切換效果的動畫。

打開FTP客戶端(如Filezilla)並連接到您的網站。 接下來,轉到您的主題目錄,如果它有一個js文件夾,則將其打開。 如果您的主題目錄沒有js文件夾,則需要創建一個並將slidepanel.js文件上載到js文件夾中。

下一步是設計或查找菜單圖標。 最常用的菜單圖標是帶有三行的菜單圖標。 您可以使用Photoshop創建圖片,也可以從Google找到許多現有圖片之一。 在本教程中,我們使用27x23px菜單圖標。 創建或找到菜單圖標後,將其重命名為menu.png並將其上傳到主題目錄中的images文件夾。

下一步是將javascript文件放入WordPress的幻燈片面板。 基本上,只需將此代碼複製並粘貼到主題的 functions.php 文件。

 
wp_enqueue_script( 'wpb_slidepanel', get_template_directory_uri() . '/js/slidepanel.js', array('jquery'), '20131010', true );

現在已經完成所有設置,您需要修改主題的默認菜單。 通常,大多數主題會在主題的 header.php 文件。 打開 header.php 文件並找到與此相似的行:

 'primary', 'menu_class' => 'nav-menu' ) ); ?>

此處的目標是用HTML代碼包裝主題的導航菜單,以在較小的屏幕上顯示幻燈片面板菜單。 我們將其包裝在

。 像這樣:

節目
'primary', 'menu_class' => 'nav-menu' ) ); ?>

將example.com替換為您自己的域名,將您的主題替換為主題目錄。 保存您的更改。

最後一步是使用CSS為大屏幕用戶隱藏菜單圖標,並將其顯示給小屏幕用戶。 我們還需要調整菜單圖標的位置和滑動面板的外觀。 將此CSS複製並粘貼到主題的樣式表中。

@media screen and (min-width: 769px) { 
#toggle {
display:none;
}

} 

@media screen and (max-width: 768px) { 
#popout {
position: fixed;
height: 100%;
width: 250px;
background: rgb(25, 25, 25);
background: rgba(25, 25, 25, .9);
color: white;
top: 0px;
left: -250px;
overflow:auto;
}


#toggle {
float: right;
position: fixed;
top: 60px;
right: 45px;
width: 28px;
height: 24px;

}

.nav-menu li { 
border-bottom:1px solid #eee; 
padding:20px;
width:100%;
}

.nav-menu li:hover { 
background:#CCC;
}

.nav-menu li a { 
color:#FFF;
text-decoration:none;
width:100%;
}
} 

請記住,主題的導航菜單可能使用了不同的CSS類,並且它們可能與此CSS樣式衝突。 但是,您可以使用Chrome Inspector工具查找哪些CSS類與樣式表衝突,從而解決這些問題。 使用CSS來滿足您的樣式和需求。

我們希望本教程可以幫助您使用jQuery在WordPress中添加幻燈片面板菜單。 有關反饋和問題,請在下面發表評論,不要忘記在Google+上關注我們