手機站首頁散文詩歌雜文隨筆日記小小說

散文網(wǎng) » 科技 »學(xué)習(xí) » 01：講透WordPress 菜單 - 在菜單中添加Tab選項卡

01：講透WordPress 菜單 - 在菜單中添加Tab選項卡

2023-06-30 20:01 作者:Npcink_牧澤 0人讀過 | 我要投稿

在上一節(jié)中，我們學(xué)習(xí)了如何在 WordPress 中添加菜單的操作，包括頂級菜單、子菜單、默認菜單下的子菜單等。

相信你已經(jīng)可以按照自己的實際需求添加菜單了。

本文主要解決如何在菜單中添加 Tab 選項卡的問題。

問題詳解

若單一菜單中內(nèi)容過多，加子菜單又嫌麻煩，可嘗試添加本節(jié)介紹的 Tab 選項卡菜單。

他可以在當(dāng)前頁面中展示多個選項卡，可以很方便的在當(dāng)前菜單頁面中的各個 Tab 選項卡中進行切換，效果如下：

流程和幫助

流程如下

感謝以下文章的幫助

WordPress 設(shè)置 API，第 5 部分：設(shè)置的選項卡式導(dǎo)航?
https://code.tutsplus.com/tutorials/the-wordpress-settings-api-part-5-tabbed-navigation-for-settings--wp-24971

添加菜單

根據(jù)上一節(jié)的內(nèi)容，我們先添加一個頂級菜單，在當(dāng)前使用主題的?functions.php?文件底部添加以下內(nèi)容

//創(chuàng)建一個Demo菜單
function demo_create_menu_page()
{
? ?add_menu_page(
? ? ? ?'Demo選項', ? ? ? ? ? ? ? ? ? // 此菜單對應(yīng)頁面上顯示的標題
? ? ? ?'Demo', ? ? ? ? ? ? ? ? ? ? ?// 要為此實際菜單項顯示的文本
? ? ? ?'administrator', ? ? ? ? ? ? // 哪種類型的用戶可以看到此菜單
? ? ? ?'demo_id', ? ? ? ? ? ? ? ? ? // ?此菜單項的唯一ID（即段塞）
? ? ? ?'demo_menu_page_display', ? ?// 呈現(xiàn)此頁面的菜單時要調(diào)用的函數(shù)的名稱
? ? ? ?'dashicons-smiley', ? ? ? ? ?//圖標 - 默認圖標
? ? ? ?'600.1', ? ? ? ? ? ? ? ? ? ? //位置
? ?);
} // end vuespa_create_menu_page
add_action('admin_menu', 'demo_create_menu_page');
//Demo菜單的回調(diào)
function demo_menu_page_display()
{
?>
? ?<div class="wrap">
? ?Npcink
? ?</div>
<?php
}

接下來的內(nèi)容，就是圍繞這個菜單回調(diào)函數(shù)?demo_menu_page_display()?來操作的。

添加選項卡

WordPress 準備好了一套默認的樣式，我們直接使用即可。在回調(diào)函數(shù)中添加以下內(nèi)容

<h2 class="nav-tab-wrapper">
? ?<a href="?page=demo_id&tab=display_options" class="nav-tab">Display Options</a>
? ?<a href="?page=demo_id&tab=social_options" class="nav-tab">Social Options</a>
</h2>

這里，我們手動構(gòu)造了兩個選項卡和選項卡的鏈接，通過點擊不同的選項卡，觸發(fā)不同的鏈接。

注意?demo_id?部分，這里是用的頂級菜單的slug 的，需要注意憑借這個，才能找到我們需要的內(nèi)容

菜單切換

為了知道當(dāng)前是哪個選項卡，我們需要添加以下函數(shù)

<?php
if( isset( $_GET[ 'tab' ] ) ) {
? ?$active_tab = $_GET[ 'tab' ];
} // end if
?> ? ?

編寫一個條件來檢查是否設(shè)置了查詢字符串值，如果是，則將其存儲在變量中。

然后，為了讓用戶知道當(dāng)前所在的菜單，我們需要進行判斷，

若當(dāng)前的 Tab 的值是當(dāng)前菜單，顯示選中狀態(tài)。
若當(dāng)前的 Tab 的值不是當(dāng)前菜單，顯示未選中狀態(tài)。

修改上面的選項卡內(nèi)容

<h2 class="nav-tab-wrapper">
? ?<a href="?page=demo_id&tab=display_options" class="nav-tab <?php echo $active_tab == 'display_options' ? 'nav-tab-active' : ''; ?>">Display Options</a>
? ?<a href="?page=demo_id&tab=social_options" class="nav-tab <?php echo $active_tab == 'social_options' ? 'nav-tab-active' : ''; ?>">Social Options</a>
</h2>

WordPress 也提供了對應(yīng)的樣式，這里，我們通過三元運算符實現(xiàn)樣式切換。

若當(dāng)前鏈接顯示的是當(dāng)前菜單選項，則添加樣式?nav-tab-active

然后，初次進入菜單時，我們是拿不到 Tab 選項內(nèi)容的，此時，用戶還沒有點擊我們構(gòu)造的鏈接。

這里需要設(shè)置一個默認展示的菜單。

$active_tab = isset( $_GET[ 'tab' ] ) ? $_GET[ 'tab' ] : 'display_options';

這樣，在初次進入菜單頁面時，如果拿不到 Tab 的值，就展示菜單?display_options?的值。

內(nèi)容切換

完成了菜單切換，我們還需要切換內(nèi)容的顯示，不同的菜單對應(yīng)不同的內(nèi)容。

我們添加以下代碼

<?php
? ? ? ? ? ?//根據(jù)當(dāng)前 Tab 展示對應(yīng)內(nèi)容
? ? ? ? ? ?if ($active_tab == 'display_options') {
? ? ? ? ? ??>
? ? ? ? ? ? ? ?<h3>Npcink 放置需要展示的內(nèi)容</h3>
? ? ? ? ? ?<?php
? ? ? ? ? ?} else {
? ? ? ? ? ??>
? ? ? ? ? ? ? ?<h3>Npcink 放置準備展示的函數(shù)</h3>
? ? ? ? ? ?<?php
? ? ? ? ? ? ? ?//展示設(shè)置字段和設(shè)置節(jié)
? ? ? ? ? ?} // end if/else
?>

通過簡單的?if?判斷，就能根據(jù)不同的菜單?Tab?展示不同的內(nèi)容了。

當(dāng)然，若您有興趣了解的話，可以查查什么是設(shè)置字段和設(shè)置節(jié)，

一般情況下，這塊的內(nèi)容應(yīng)該是這樣的

<form method="post" action="options.php">
? ? ? ? ? ?<?php
? ? ? ? ? ?//根據(jù)當(dāng)前 Tab 展示對應(yīng)內(nèi)容
? ? ? ? ? ?if ($active_tab == 'display_options') {
? ? ? ? ? ??>
? ? ? ? ? ? ? ?<h3>Npcink 放置需要展示的內(nèi)容</h3>
? ? ? ? ? ?<?php
? ? ? ? ? ? ? ?//展示設(shè)置字段和設(shè)置節(jié)
? ? ? ? ? ? ? ?settings_fields('sandbox_theme_display_options');
? ? ? ? ? ? ? ?do_settings_sections('sandbox_theme_display_options');
? ? ? ? ? ?} else {
? ? ? ? ? ??>
? ? ? ? ? ? ? ?<h3>Npcink 放置準備展示的函數(shù)</h3>
? ? ? ? ? ?<?php
? ? ? ? ? ? ? ?//展示設(shè)置字段和設(shè)置節(jié)
? ? ? ? ? ? ? ?settings_fields('sandbox_theme_social_options');
? ? ? ? ? ? ? ?do_settings_sections('sandbox_theme_social_options');
? ? ? ? ? ?} // end if/else
? ? ? ? ? ?//保存按鈕
? ? ? ? ? ?submit_button();
? ? ? ? ? ??>
? ? ? ?</form>

完整代碼

前面詳細介紹了每一步的作用，這里給出完整代碼，供大家參考

//創(chuàng)建一個Demo菜單
function demo_create_menu_page()
{
? ?add_menu_page(
? ? ? ?'Demo選項', ? ? ? ? ? ? ? ? ? // 此菜單對應(yīng)頁面上顯示的標題
? ? ? ?'Demo', ? ? ? ? ? ? ? ? ? ? ?// 要為此實際菜單項顯示的文本
? ? ? ?'administrator', ? ? ? ? ? ? // 哪種類型的用戶可以看到此菜單
? ? ? ?'demo_id', ? ? ? ? ? ? ? ? ? // ?此菜單項的唯一ID（即段塞）
? ? ? ?'demo_menu_page_display', ? ?// 呈現(xiàn)此頁面的菜單時要調(diào)用的函數(shù)的名稱
? ? ? ?'dashicons-smiley', ? ? ? ? ?//圖標 - 默認圖標
? ? ? ?'600.1', ? ? ? ? ? ? ? ? ? ? //位置
? ?);
} // end vuespa_create_menu_page
add_action('admin_menu', 'demo_create_menu_page');
//Demo菜單的回調(diào)
function demo_menu_page_display()
{
?>
? ?<div class="wrap">
? ?
? ? ? ?<h2>
? ? ? ? ? ?<?php echo esc_html(get_admin_page_title()); ?>
? ? ? ?</h2>
? ? ? ?
? ? ? ?<?php settings_errors(); ?>
? ? ? ?<?php
? ? ? ?//檢查URL中是否存在名為 "tab" 的GET參數(shù)，并將其值分配給變量 $active_tab
? ? ? ?if (isset($_GET['tab'])) {
? ? ? ? ? ?$active_tab = $_GET['tab'];
? ? ? ?} // end if
? ? ? ?//設(shè)置默認值
? ? ? ?$active_tab = isset($_GET['tab']) ? $_GET['tab'] : 'display_options';
? ? ? ??>
? ? ? ?
? ? ? ?<h2 class="nav-tab-wrapper">
? ? ? ? ? ?<a href="?page=demo_id&tab=display_options" class="nav-tab <?php echo $active_tab == 'display_options' ? 'nav-tab-active' : ''; ?>">Display Options</a>
? ? ? ? ? ?<a href="?page=demo_id&tab=social_options" class="nav-tab <?php echo $active_tab == 'social_options' ? 'nav-tab-active' : ''; ?>">Social Options</a>
? ? ? ?</h2>
? ? ? ?<form method="post" action="options.php">
? ? ? ? ? ?<?php
? ? ? ? ? ?//根據(jù)當(dāng)前 Tab 展示對應(yīng)內(nèi)容
? ? ? ? ? ?if ($active_tab == 'display_options') {
? ? ? ? ? ??>
? ? ? ? ? ? ? ?<h3>Npcink 放置需要展示的內(nèi)容</h3>
? ? ? ? ? ?<?php
? ? ? ? ? ? ? ?//展示設(shè)置字段和設(shè)置節(jié)
? ? ? ? ? ? ? ?settings_fields('sandbox_theme_display_options');
? ? ? ? ? ? ? ?do_settings_sections('sandbox_theme_display_options');
? ? ? ? ? ?} else {
? ? ? ? ? ??>
? ? ? ? ? ? ? ?<h3>Npcink 放置準備展示的函數(shù)</h3>
? ? ? ? ? ?<?php
? ? ? ? ? ? ? ?//展示設(shè)置字段和設(shè)置節(jié)
? ? ? ? ? ? ? ?settings_fields('sandbox_theme_social_options');
? ? ? ? ? ? ? ?do_settings_sections('sandbox_theme_social_options');
? ? ? ? ? ?} // end if/else
? ? ? ? ? ?//保存按鈕
? ? ? ? ? ?submit_button();
? ? ? ? ? ??>
? ? ? ?</form>
? ?</div>
<?php
}

注意，因為我們沒有配置設(shè)置字段和設(shè)置節(jié)，所以，點擊保存按鈕會報錯，

為了專注，這里僅做拓展介紹，并不提供相關(guān)實現(xiàn)內(nèi)容。

總結(jié)

這一節(jié)，我們詳細的介紹了菜單 Tab 切換的每一步，

您可以參考代碼，實現(xiàn)在子菜單中添加 Tab 選項內(nèi)容。

下一節(jié)，我們分享如何對菜單進行權(quán)限控制，僅允許指定人員訪問，以及僅在指定菜單中加載 JS 資源。

最美情侣中文字幕电影,在线麻豆精品传媒,在线网站高清黄,久久黄色视频