Könnte Hilfe mit Shortcodes verwenden

Also fange ich mit shortcodes an und das ist das erste Mal, dass ich versuche, eins zu machen, ich benutze es, um css / js Tabs für Informationen zu erstellen und Code, den ich von themeforest bekommen habe, zu verarbeiten.

Also werde ich das Beste tun, um zu erklären, was ich habe und was ich zu tun versuche.


HIER ist, wie meine Kurznummer aussieht

[tabs] [tab title="This is tab 1 Title"]Tab 1 Content [/tab] [tab title="This is tab 2 Title"]Tab 2 Content [/tab] [tab title="This is tab 3 Title"]Tab 3 Content [/tab] [tab title="This is tab 4 Title"]Tab 4 Content [/tab] [/tabs] 

HIER ist der Code, den ich verwende, um die Tabs zu erstellen

  /* ----------------------------------------------------------------- Tab ----------------------------------------------------------------- */ // Set up Scripts For Tabs function add_tabs_scripts_to_head(){ wp_register_script( 'custom-script', get_template_directory_uri() . '/js/zozoTabs.js' ); // For either a plugin or a theme, you can then enqueue the script: wp_enqueue_script( 'custom-script' ); } // Set up Style For Tabs function add_tabs_style_to_head(){ wp_register_style( 'custom-style', get_template_directory_uri() . '/css/zozoTabs.css'); // For either a plugin or a theme, you can then enqueue the style: wp_enqueue_style( 'custom-style' ); } add_action('template_redirect', 'add_scripts'); extract(shortcode_atts(array( 'style' => false, 'orientation' => false, ), $atts)); function add_scripts() { global $wp_query; if ( is_singular() ) { $post = $wp_query->get_queried_object(); if ( false !== strpos($post->post_content, '[tabs') ) { // Adding the style JUST when needed add_action( 'wp_enqueue_scripts', 'add_tabs_style_to_head' ); add_action( 'wp_enqueue_scripts', 'add_tabs_scripts_to_head' ); } } } add_shortcode('tabs', 'ts_tab'); function ts_tab($atts, $content = null, $code) { if (!preg_match_all("/(.?)\[(tab)\b(.*?)(?:(\/))?\](?:(.+?)\[\/tab\])?(.?)/s", $content, $count)) { return do_shortcode($content); } else { for($i = 0; $i < count($count[0]); $i++) { $count[3][$i] = shortcode_parse_atts($count[3][$i]); } $output = '  $(document).ready(function () { $("#tabbed-nav").zozoTabs({ defaultTab: "tab1", rounded: false, }); });  
'; $output .= '
'; for($i = 0; $i < count($count[0]); $i++) { $output .= '
' . do_shortcode(trim($count[5][$i])) . '
'; } $output .= '
'; return '
' . $output . '
';} }

Und eine Pastebin der gleichen: http://pastebin.com/wZ6VRPwm


Alles funktioniert gut, aber ich versuche es so zu machen, dass ich meinen Code so starten kann

 [tabs orientation="vertical"] 

und es wird orientation: "vertical" hinzufügen orientation: "vertical" ,

zu Zeile 52 des Pastebins, damit es so aussieht

  $(document).ready(function () { $("#tabbed-nav").zozoTabs({ defaultTab: "tab1", rounded: false, orientation: "vertical", }); });  

Das ist also das Problem, und ich habe alles versucht, was ich mir vorstellen kann und suche, aber nirgendwohin.

Solutions Collecting From Web of "Könnte Hilfe mit Shortcodes verwenden"

Vor allem … Es ist ein wirklich schlechter Qualitätscode, schätze ich.

Sie gehen davon aus, dass es nur ein Tab-Widget auf der Seite geben wird (es wird von der HTML-ID param erkannt, also würde das Platzieren von 2 Widgets auf derselben Seite einen ungültigen HTML-Code erzeugen).

Sie implementieren auch nur einen Shortcode, der den Inhalt analysiert. Aber ich glaube nicht, dass du das wirklich brauchst.

Shortcodes

Die bessere Version wäre die Verwendung verschachtelter Shortcodes:

 [tabs] [tab] content [/tab] [/tabs] 

Also sollten Sie tabs und tab Shortcodes registrieren. WordPress wird sie für Sie parsen;) Mehr dazu hier: http://codex.wordpress.org/Shortcode_API#Nested_Shortcodes

Rufen Sie dazu do_shortcodes in do_shortcodes Callbacks auf.

Javascripte

Setzen Sie Ihre Inline-JS in eine separate Datei. Schließe es mit so etwas auf:

 function my_scripts_method() { wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom_script.js', array( 'jquery' ) ); } add_action( 'wp_enqueue_scripts', 'my_scripts_method' ); 

Senden von Parametern an JS

Anstatt JS-Code für verschiedene Parameter auszugeben, sollten Sie JS intelligent machen. Wenn Sie also möchten, dass verschiedene Optionen an zoozoTabs übergeben werden, lassen Sie sie von JS basierend auf dem class oder Datenattribut vorbereiten.

So kann dein JS so aussehen:

 $(document).ready(function () { $(".tabbed-nav")each(function() { $(this).zozoTabs({ defaultTab: "tab1", rounded: ( $(this).data('zozo-rounded') ) ? true : false }); }); });