如何在WordPress管理页面中创建选项卡菜单

6

这是我的更新代码

if (is_admin())
{
    add_action('admin_menu', 'user_menu');
}

function user_menu()
{
    add_menu_page('Pesananku', 'Pesananku', 'subscriber', 'userslug',
    'user_funct',get_template_directory_uri().'/img/favicon.ico',22);
}
function user_funct()
{
   ?>
<h2 class="nav-tab-wrapper">
    <a href="#tab1" class="nav-tab">Tab #1</a>
    <a href="#tab2" class="nav-tab nav-tab-active">Tab #2</a>
    <a href="#tab3" class="nav-tab">Tab #3</a>
    </h2>
  <div id="tab1"><!--content tab1--></div>
  <div id="tab2"><!--content tab2--></div>
  <div id="tab3"><!--content tab3--></div>
   <?php
}

我希望'user_funct()'能够创建一个类似于WordPress样式的选项卡,如下所示:


http://postimg.org/image/h3nttjhof/


如何使用链接选项卡菜单创建不同的内容

谢谢


https://github.com/bueltge/WordPress-Admin-Style - brasofilo
我如何在我的自定义菜单管理页面中使用jQuery选项卡? - Iwan Firmawan
先尝试一些东西,如果不起作用,请更新您的问题。请阅读[提问]。 - brasofilo
好的,对不起,我只是想要带有选项卡链接菜单的动态内容。 - Iwan Firmawan
向插件添加脚本:http://wordpress.stackexchange.com/search?q=add_menu_page+%2Badmin_enqueue_scripts - brasofilo
1个回答

17

以下是操作步骤:

首先,您需要创建一个函数,根据当前选定的标签创建结构:

function page_tabs( $current = 'first' ) {
    $tabs = array(
        'first'   => __( 'First tab', 'plugin-textdomain' ), 
        'second'  => __( 'Second tab', 'plugin-textdomain' )
    );
    $html = '<h2 class="nav-tab-wrapper">';
    foreach( $tabs as $tab => $name ){
        $class = ( $tab == $current ) ? 'nav-tab-active' : '';
        $html .= '<a class="nav-tab ' . $class . '" href="?page=ipl_dbx_import_export&tab=' . $tab . '">' . $name . '</a>';
    }
    $html .= '</h2>';
    echo $html;
}

然后在调用显示包含选项卡的页面的回调函数中,您需要像这样使用此函数:

<?php
// Code displayed before the tabs (outside)
// Tabs
$tab = ( ! empty( $_GET['tab'] ) ) ? esc_attr( $_GET['tab'] ) : 'first';
page_tabs( $tab );

if ( $tab == 'first' ) {
    // add the code you want to be displayed in the first tab
}
else {
    // add the code you want to be displayed in the second tab
}
// Code after the tabs (outside)
?>

当您调用该页面时,您可以添加一个名为tab的GET值,对应于您想要显示的选项卡,例如:

admin.php?page=my_plugin_page_slug&tab=second

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接