Problèmes avec la fonction TABS
Posté : 30 déc. 2011, 19:02
Bonjour,
je vous contacte avec désespoir car je suis actuellement en train de faire un site mais j'ai quelques soucis sur une fonction que j'aimerais vraiment utiliser.
Voila le site en question: http://www.sopixel.net/wordpress/ . Sur la page principal on peut voir 6 groupes: "Le couple, l'adolescent, l'adulte, l'enfant, thérapie de groupe, thérapie de groupe".
A la base j'ai utilisé un short-codes qui m'avait été fournis et qui ne proposait que 3 groupes. Le couple, L'adolescent et l'adulte. Voulant en ajouter 3 de plus j'ai dupliqué ce short-code mais au final cela renvoie au même groupe de boutons. Voila le code qui correspondait:
Citation : Code pour les TABS
J'ai une autre page qui correspond surement à résoudre le problème mais j'ai beaucoup de mal à la configurer pour y mettre les 6 groupes. Voici la page en question:
Je vous remercie d'avance pour votre aide, car j'ai réellement besoin de cette option.
je vous contacte avec désespoir car je suis actuellement en train de faire un site mais j'ai quelques soucis sur une fonction que j'aimerais vraiment utiliser.
Voila le site en question: http://www.sopixel.net/wordpress/ . Sur la page principal on peut voir 6 groupes: "Le couple, l'adolescent, l'adulte, l'enfant, thérapie de groupe, thérapie de groupe".
A la base j'ai utilisé un short-codes qui m'avait été fournis et qui ne proposait que 3 groupes. Le couple, L'adolescent et l'adulte. Voulant en ajouter 3 de plus j'ai dupliqué ce short-code mais au final cela renvoie au même groupe de boutons. Voila le code qui correspondait:
Citation : Code pour les TABS
Code : Tout sélectionner
[tabs]
[tab title="Control the slider" description="Custom your homepage the way you want! It's really flexible and easy to use. The Humble template offers you options to have an unique page layout!" image="http://localhost:8888/wordpress/wp-content/themes/humble/images/ico_lab.png"]
[one_third]
<h6>Slider setting</h6>
Change all the slider settings from your Theme Options. Lots of options are available to edit your template as you wish.
[/one_third]
[two_third_last]
[image width="590" height="150"]http://localhost:8888/wordpress/wp-content/uploads/2011/08/nivo-setting.png[/image]
[/two_third_last]
[one_third]
<h6>Bonus for slider</h6>
We add for you the ability to choose a texture that will overlay your slider images. Start enhance your slider today!
[/one_third]
[two_third_last]
[image width="590" height="150"]http://localhost:8888/wordpress/wp-content/uploads/2011/08/nivo-texture.png[/image]
[/two_third_last]
[/tab]
[tab title="Custom the background" description="The Theme Options let you set every background you want. All CSS attributes have been added so you don't touch a single line of code." image="http://localhost:8888/wordpress/wp-content/themes/humble/images/ico_teeshirt.png"]
[one_third]
<h6>Background settings</h6>
<p>How it works? Choose a color, upload a background image, set the "repeat", "position" and "attachment" option you want from the Theme Options... and Voila!</p>
<p>You want on custom post or page with a special background? Easy! Just choose different settings for your background from the metabox while you're creating the post or page.</p>
[/one_third]
[two_third_last]
[image width="590" height="350"]http://localhost:8888/wordpress/wp-content/uploads/2011/08/background-setting.png[/image]
[/two_third_last]
[/tab]
[tab title="CSS without coding" description="Change your CSS settings from the Theme Options without editing the style.css. It has never been so easy to custom your template!" image="http://localhost:8888/wordpress/wp-content/themes/humble/images/ico_time.png"]
[one_third]
<h6>CSS settings</h6>
We put all the main options in the panel to allow you or your client can change easily everything.
[/one_third]
[two_third_last]
[image width="590" height="400"]http://localhost:8888/wordpress/wp-content/uploads/2011/08/css-setting.png[/image]
[/two_third_last]
[/tab]
[/tabs]Code : Tout sélectionner
<?php
function theme_shortcode_tabs($atts, $content = null, $code) {
extract(shortcode_atts(array(
'open' => ''
), $atts));
if (!preg_match_all("/(.?)\[(tab)\b(.*?)(?:(\/))?\](?:(.+?)\[\/tab\])?(.?)/s", $content, $matches)) {
return do_shortcode($content);
} else {
for($i=0;$i<3;$i++) {
$matches[3][$i] = shortcode_parse_atts($matches[3][$i]);
}
$output = '<div id="boxes">';
$class = '';
for ($i=0;$i<3;$i++) {
if ($matches[3][$i]['title'] != '' && $matches[3][$i]['description'] != '') {
if ($i == 2) {
$class = 'last';
}
$output .= '<div class="one_third '.$class.'" id="box'.($i+1).'">';
$output .= ' <h3>'.$matches[3][$i]['title'].'</h3>';
if ($matches[3][$i]['image'] != '')
$output .= ' <img src="'.$matches[3][$i]['image'].'" />';
$output .= ' <p>'.$matches[3][$i]['description'].'</p>';
$output .= '</div>';
}
}
$output .= ' <div class="clear"></div>';
$output .= '</div> <!-- #boxes -->';
$output .= '<div id="boxes_content">';
for ($i=0;$i<3;$i++) {
$output .= '<div id="box'.($i+1).'_content" class="box_content">';
$output .= do_shortcode($matches[5][$i]);
$output .= '</div>';
}
$output .= '</div> <!-- #boxes_content -->';
$output .= '<div class="clear"></div>';
if ($open) {
$output .= "
<script type='text/javascript'>
$(document).ready(function() {
$('#boxes #box1').click();
$('#boxes #box2').stop().animate({ opacity: 0.5 }, 200);
$('#boxes #box3').stop().animate({ opacity: 0.5 }, 200);
$('#boxes #box4').stop().animate({ opacity: 0.5 }, 200);
$('#boxes #box5').stop().animate({ opacity: 0.5 }, 200);
$('#boxes #box6').stop().animate({ opacity: 0.5 }, 200);
});
</script>
";
}
return $output;
}
}
add_shortcode('tabs', 'theme_shortcode_tabs');