Пользовательский шорткод для создания вкладок

В настоящее время я пытаюсь создать шорткод для WordPress, который создает вкладки, я знаю, что есть доступные шорткоды. Но я пытаюсь научиться писать их самостоятельно.

В настоящее время я создаю элементы меню вкладок, но я застрял с размещением содержимого в совершенно новом div.

Использование переднего конца:

[tabs]
 [tab title="tab" active="y" id="home"]home[/tab]
 [tab title="tab2" active="n" id="about"]about[/tab]
 [tab title="tab3" active="n" id="help"]help[/tab]
[/tabs]

И затем код:

function tabs_group( $atts, $content = null ) {  
    extract(shortcode_atts(array(  
    'id' => '',
    'class' => ''
    ), $atts));  

    $output  = '<ul class="nav nav-tabs '.$class.'"  ';

    if(!empty($id))
        $output .= 'id="'.$id.'"';

    $output .='>'.do_shortcode($content).'</ul>';

    return $output;  
}  

add_shortcode("tabs", "tabs_group");

function tab($atts, $content = null) {  
    extract(shortcode_atts(array(  
    'id' => '',
    'title' => '',
    'active'=>'n' 
    ), $atts));  
    if(empty($id))
        $id = 'tab_item_'.rand(100,999);

    $output = '<li class="'.($active == 'y' ? 'active' :'').'">
                <a href="#'.$id.'">'.$title.'</a>
                </li>';  
    $output .= '<div class="tab-content">
                 <div class="tab-pane active" id="'.$id.'">'.$content.'</div>
                 <div class="tab-pane"  id="'.$id.'">'.$content.'</div>
                 <div class="tab-pane" id="'.$id.'">'.$content.'</div>
                </div>';
    return $output;
}
add_shortcode("tab", "tab");

в настоящее время он возвращает:

<ul class="nav nav-tabs">
 <li class="active">
                <a href="#home">tab</a>
                </li><div class="tab-content">
                 <div class="tab-pane active" id="home">home</div>
                 <div class="tab-pane"  id="home">home</div>
                 <div class="tab-pane" id="home">home</div>
                </div>
 <li class="">
                <a href="#about">tab2</a>
                </li><div class="tab-content">
                 <div class="tab-pane active" id="about">about</div>
                 <div class="tab-pane"  id="about">about</div>
                 <div class="tab-pane" id="about">about</div>
                </div>
 <li class="">
                <a href="#help">tab3</a>
                </li><div class="tab-content">
                 <div class="tab-pane active" id="help">help</div>
                 <div class="tab-pane"  id="help">help</div>
                 <div class="tab-pane" id="help">help</div>
                </div>
</ul>

и мне нужно, чтобы он вернулся:

<ul class="nav nav-tabs "  >
 <li class="active">
    <a href="#home">tab</a>
 </li>
 <li class="">
    <a href="#about">tab2</a>
 </li>
 <li class="">
    <a href="#help">tab3</a>
 </li>
</ul>

<div class="tab-content">
 <div class="tab-pane active" id="home">blah</div>
 <div class="tab-pane" id="about">blah</div>
 <div class="tab-pane" id="help">blah</div>
</div>

Я добавил к выходу, спасибо Obmerk Kronen.

Любая помощь с благодарностью.


person Community    schedule 07.05.2013    source источник
comment
у вас нет части div в вашем контенте   -  person Obmerk Kronen    schedule 07.05.2013
comment
Извините, я не совсем понимаю?   -  person    schedule 07.05.2013
comment
Вы хотите, чтобы ваш код создавал div, верно? где они ?   -  person Obmerk Kronen    schedule 07.05.2013
comment
В вашем вопросе вы добавили их не в то место, их следует добавить ПОСЛЕ закрытия UL (согласно вашему примеру желаемого результата)   -  person Obmerk Kronen    schedule 08.05.2013


Ответы (3)


Проблема здесь в том, что вам нужно добавить свои div после do_shortcode($content) : при разборе шоркодов tab вам нужно где-то хранить свои div, чтобы иметь возможность выводить их после.

Простым способом (не самым лучшим способом) для этого может быть использование глобальной переменной, например :

add_shortcode('tabs', 'tabs_group');
add_shortcode('tab', 'tab');

// this variable will hold your divs
$tabs_divs = '';

function tabs_group( $atts, $content = null ) {
    global $tabs_divs;

    // reset divs
    $tabs_divs = '';

    extract(shortcode_atts(array(  
        'id' => '',
        'class' => ''
    ), $atts));  

    $output = '<ul class="nav nav-tabs '.$class.'"  ';

    if(!empty($id))
        $output .= 'id="'.$id.'"';

    $output.='>'.do_shortcode($content).'</ul>';
    $output.= '<div class="tab-content">'.$tabs_divs.'</div>';

    return $output;  
}  


function tab($atts, $content = null) {  
    global $tabs_divs;

    extract(shortcode_atts(array(  
        'id' => '',
        'title' => '',
        'active'=>'n' 
    ), $atts));  

    if(empty($id))
        $id = 'tab_item_'.rand(100,999);

    $activeClass = $active == 'y' ? 'active' :'';
    $output = '
        <li class="'.$activeClass.'">
            <a href="#'.$id.'">'.$title.'</a>
        </li>
    ';

    $tabs_divs.= '<div class="tab-pane '.$activeClass.'" id="'.$id.'">'.$content.'</div>';

    return $output;
}
person soju    schedule 07.05.2013
comment
Эй, спасибо, твой ответ сработал для меня ... не самый приятный способ, как будто я пытаюсь учиться и писать хороший код ... так это плохая привычка или? .. - person ; 07.05.2013
comment
Вы должны прочитать об использовании глобальной переменной: stackoverflow.com/questions/5166087 /php-глобальные-в-функциях - person soju; 07.05.2013

в настоящее время у вас нет содержательной части div в вашем содержании

$output .= '<div class="tab-content">
 <div class="tab-pane active" id="'.$id.'">'.$title.'</div>
 <div class="tab-pane"  id="'.$id.'">'.$title.'</div>
 <div class="tab-pane" id="'.$id.'">'.$title.'</div>
</div>'
person Obmerk Kronen    schedule 07.05.2013
comment
Спасибо, ваш пост был очень полезен.. но не решил проблему.. См. Обновление.. :) - person ; 07.05.2013
comment
@ Дэвид ван дер Ховен - очевидно, это не решило проблему, потому что вы поместили его не в то место :-). Но так как мой комментарий и ответ кто-то уже вставил одно и то же решение в другом вкусе. Вы должны были вставить мой код в другую функцию. - person Obmerk Kronen; 07.05.2013
comment
Извините, но вы ошибаетесь, внимательно посмотрите на мой ответ, и вы увидите, что это действительно не то же самое «в другом вкусе» ... - person soju; 08.05.2013

<?php
//  my shortcode look like this.
[tabgroup] 
    [tab title="Your title #1" class="active" ]
     Your Description here #1
    [/tab]  
    [tab title="Your title #2" ]  
     Your Description here  #2 
    [/tab]    
    [tab title="Your title #3" ]   
     Your Description here #3
    [/tab]    
[/tabgroup]

add_shortcode( 'tab', 'ease_tabs' );
function ease_tabs( $atts, $content ){
    extract(shortcode_atts(array(
        'title' => 'Tab',
        'class' => false,
    ), $atts));

     $x = isset($GLOBALS['tab_count'])?$GLOBALS['tab_count']:0; 
     $GLOBALS['tab_count'] = isset($GLOBALS['tab_count'])?$GLOBALS['tab_count']:0;          

     $GLOBALS['tabs'][$GLOBALS['tabs_count']][$x] = array( 
            'title'     => $title   ,
            'class'     => $class   ,
            'content'   => $content ,
     );

     $GLOBALS['tab_count']++;

 }

add_shortcode( 'tabgroup', 'ease_tabgroup' );
function ease_tabgroup( $atts, $content ){

    if( isset( $GLOBALS['tabs_count'] ) )
      $GLOBALS['tabs_count']++;
    else
      $GLOBALS['tabs_count'] = 0;

    do_shortcode( $content ); 

    if( is_array( $GLOBALS['tabs'][$GLOBALS['tabs_count']] ) ){

        $tabs=array();
        $panes=array();

        foreach( $GLOBALS['tabs'][$GLOBALS['tabs_count']] as $tab ){

        $panes_class  = ( !empty($tab["class"]) &&  $tab['class'] == "active" ) ? 'tab-pane active' : 'tab-pane';
        $__title = preg_replace('/[^a-zA-Z0-9._\-]/', '', strtolower($tab['title'])  );     
        $tabs[] = '<li  role="presentation" class="'.$tab['class'].'" >
                        <a href="#'.$__title.'" data-toggle="tab">'.$tab['title'].'</a>
                  </li>';
        $panes[] = sprintf( '<div class="%s" id="%s"> %s </div>',$panes_class, $__title, $tab['content']  );

        }


        $return = "\n".'<div role="tabpanel">
                            <ul role="tablist" class="nav nav-tabs">'
                                .implode( "\n", $tabs ).
                            '</ul>'."\n".
                            '<div class="tab-content">'
                                    .implode( "\n", $panes ).
                            '</div>
                        </div>'."\n";       
    }   
    return do_shortcode( sprintf('<div class="tp-tabs"> %s </div>',  $return));
}

wordpressshortcode

person Mahavar Hitesh    schedule 29.06.2015
comment
Пожалуйста, включите в свой ответ некоторые подробности о причине проблемы и о том, как ваш код решает ее. - person Rory McCrossan; 29.06.2015