• M
    User Attivo •

    Tab annidate in wordpress

    Buongiorno ragazzi, spero di essere nel posto giusto...

    in pratica vorrei creare delle tab annidate in una pagina wordpress.

    Il codice è completo ed è questo:

    <html ><head>


    <!-- Zozo Tabs css -->
    <link href=".....tomatico.com/zozo-tabs/css/zozo.tabs.min.css" rel="stylesheet" />


     <!-- Zozo Tabs Flat Themes css -->
    <link href="..........ngautomatico.com/zozo-tabs/css/zozo.tabs.flat.min.css" rel="stylesheet" />
    
    <!-- Zozo Tabs js -->
    <script src=".............utomatico.com/zozo-tabs/js/jquery.min.js"></script>
    <script src=".........gautomatico.com/zozo-tabs/js/zozo.tabs.min.js"></script>
</head>


<body>


        <!-- Zozo Tabs Start-->
        <div id="tabbed-nav">


            <!-- Tab Navigation Menu -->
            <ul>
                <li><a>Inizio<span>saluto</span></a></li>
                <li><a>Guida del Sistema<span>Guida del Sistema</span></a></li>
                <li><a>Manuale del Sistema<span>Manuale del Sistema</span></a></li>
                <li><a>Bonus 1: WORDPRESS<span>Bonus 1: WORDPRESS</span></a></li>
                <li><a>Bonus 2: Facebook<span>Bonus 2: Facebook</span></a></li>
                <li><a>Bonus 2: Marketing e altro<span>Bonus 2: Marketing e altro</span></a></li>
            </ul>


            <!-- Content container -->
            <div>


                <!-- Inizio -->
                <div class="nested-top-padding">
                    <!-- Zozo Tabs 2 (nested) Start-->
                    <div class="nested-tabs">


                        <!-- Nested Tab Navigation Menu -->
                        <ul>
                            <li><a>Inizio</a></li>
                        </ul>


                        <!-- Nested Content container -->
                        <div>
                            
                            <!-- Inizio -->
                            <div>
                                <h4>Inizio</h4>
                                <p>bla bla Inizio</p>
                            </div>
                            
                        </div>
                    </div>
                    <!-- Zozo Tabs 2 (nested) End-->
                </div>


                
                <!-- Guida del Sistema -->
                <div class="nested-top-padding">
                    <!-- Zozo Tabs 2 (nested) Start-->
                    <div class="nested-tabs">


                        <!-- Nested Tab Navigation Menu -->
                        <ul>
                            <li><a>Step 1</a></li>
                            <li><a>Step 2</a></li>
                            <li><a>Step 3</a></li>
                            <li><a>Step 4</a></li>
                        </ul>


                        <!-- Nested Content container -->
                        <div>
                            <!-- Step 1 -->
                            <div>
                                <h4>Step 1</h4>
                                <p>bla bla Step 1/a></p>
                            </div>
                            <!-- Step 2 -->
                            <div>
                                <h4>Step 2</h4>
                                <p>bla bla Step 2</p>
                            </div>
                            <!-- Step 3 -->
                            <div>
                                <h4>Step 3</h4>
                                <p>bla bla Step 3</p>
                            </div>
                            <!-- Step 4 -->
                            <div>
                                <h4>Step 4</h4>
                                <p>bla bla Step 4</p>
                            </div>


                        </div>
                    </div>
                    <!-- Zozo Tabs 2 (nested) End-->
                </div>


                <!-- Manuale del Sistema -->
                <div class="nested-top-padding">
                    <!-- Zozo Tabs 2 (nested) Start-->
                    <div class="nested-tabs">


                        <!-- Nested Tab Navigation Menu -->
                        <ul>
                            <li><a>Modulo 1</a></li>
                            <li><a>Modulo 2</a></li>
                            <li><a>Modulo 3</a></li>
                            <li><a>Modulo 4</a></li>
                            <li><a>Modulo 5</a></li>
                            <li><a>Modulo 6</a></li>
                            <li><a>Modulo 7</a></li>
                        </ul>


                        <!-- Nested Content container -->
                        <div>
                            <!-- Modulo 1 -->
                            <div>
                                <h4>Modulo 1</h4>
                                <p>link modulo 1/a></p>
                            </div>
                            <!-- Modulo 2 -->
                            <div>
                                <h4>Modulo 2</h4>
                                <p>link Modulo 2</p>
                            </div>
                            <!-- Modulo 3 -->
                            <div>
                                <h4>Modulo 3</h4>
                                <p>link Modulo 3</p>
                            </div>
                            <!-- Modulo 4 -->
                            <div>
                                <h4>Modulo 4</h4>
                                <p>link Modulo 4</p>
                            </div>
                            <!-- Modulo 5 -->
                            <div>
                                <h4>Modulo 5</h4>
                                <p>link Modulo 5</p>
                            </div>
                            <!-- Modulo 6 -->
                            <div>
                                <h4>Modulo 6</h4>
                                <p>link Modulo 6</p>
                            </div>
                            <!-- Modulo 7 -->
                            <div>
                                <h4>Modulo 7</h4>
                                <p>link Modulo 7</p>
                            </div>
                        </div>
                    </div>
                    <!-- Zozo Tabs 2 (nested) End-->
                </div>
                
                
                
                <!-- Modulo 1: WORDPRESS -->
                <div class="nested-top-padding">
                    <!-- Zozo Tabs 2 (nested) Start-->
                    <div class="nested-tabs">


                        <!-- Nested Tab Navigation Menu -->
                        <ul>
                            <li><a>Guida di Installazione</a></li>
                            <li><a>Video Corso</a></li>
                            <li><a>Formazione</a></li>
                        </ul>


                        <!-- Nested Content container -->
                        <div>
                            <!-- Guida di Installazione -->
                            <div>
                                <h4>Guida di Installazione</h4>
                                <p>bla bla Guida di Installazione</p>
                            </div>
                            <!-- Video Corso -->
                            <div>
                                <h4>Video Corso</h4>
                                <p>bla bla Video Corso</p>
                            </div>
                            <!-- Formazione-->
                            <div>
                                <h4>Formazione</h4>
                                <p>bla bla Formazione</p>
                            </div>
                        </div>
                    </div>
                    <!-- Zozo Tabs 2 (nested) End-->
                </div>
                
                
                
                
                
                
                <!-- Bonus 2: FACEBOOK -->
                <div class="nested-top-padding">
                    <!-- Zozo Tabs 2 (nested) Start-->
                    <div class="nested-tabs">


                        <!-- Nested Tab Navigation Menu -->
                        <ul>
                            <li><a>Video Corso</a></li>
                        </ul>


                        <!-- Nested Content container -->
                        <div>
                            
                            <!-- Video Corso -->
                            <div>
                                <h4>Video Corso</h4>
                                <p>bla bla Video Corso</p>
                            </div>
                            
                        </div>
                    </div>
                    <!-- Zozo Tabs 2 (nested) End-->
                </div>
                
                
                
                
                
                
                <!-- Bonus 3: MARKETING e altro -->
                <div class="nested-top-padding">
                    <!-- Zozo Tabs 2 (nested) Start-->
                    <div class="nested-tabs">


                        <!-- Nested Tab Navigation Menu -->
                        <ul>
                            <li><a>Copywriting</a></li>
                            <li><a>Marketing</a></li>
                            <li><a>SEO</a></li>
                            <li><a>Guida alla Sponsorizzazione</a></li>
                            <li><a>Ricerche di Mercato</a></li>
                            <li><a>Ricerca delle Keyword</a></li>
                        </ul>


                        <!-- Nested Content container -->
                        <div>
                            
                            <!-- Copywriting -->
                            <div>
                                <h4>Copywriting</h4>
                                <p>bla bla Copywriting</p>
                            </div>
                            <!-- Marketing -->
                            <div>
                                <h4>Marketing</h4>
                                <p>bla bla Marketing</p>
                            </div>
                            <!-- SEO -->
                            <div>
                                <h4>SEO</h4>
                                <p>bla bla SEO</p>
                            </div>
                            <!-- Guida alla Sponsorizzazione -->
                            <div>
                                <h4>Guida alla Sponsorizzazione</h4>
                                <p>bla bla Guida alla Sponsorizzazione</p>
                            </div>
                            <!-- Ricerche di Mercato -->
                            <div>
                                <h4>Ricerche di Mercato</h4>
                                <p>bla bla Ricerche di Mercato</p>
                            </div>
                            <!-- Ricerca delle Keyword -->
                            <div>
                                <h4>Ricerca delle Keyword</h4>
                                <p>bla bla Ricerca delle Keyword</p>
                            </div>
                            
                        </div>
                    </div>
                    <!-- Zozo Tabs 2 (nested) End-->
                </div>
                
                




    <style>
        .z-tabs.clean.horizontal > .z-container > .z-content.nested-top-padding > .z-content-inner
        {
            padding: 50px 0;
        }


        .z-tabs.vertical > ul
        {
            width: 15%;
        }
    </style>


    <script>
        jQuery(document).ready(function ($) {
            /* jQuery activation and setting options for parent tabs with id selector*/
            $("#tabbed-nav").zozoTabs({
                rounded: false,
                multiline: true,
                style: "clean",
                theme: "flat-midnight-blue",
                defaultTab: "tab2",
                size: "medium",
                rounded: false,
                spaced: true,
                animation: {
                    effects: "slideH",
                    easing: "easeInOutCirc",
                    speed: 500
                }
            });


            /* jQuery activation and setting options for nested tabs with class selector*/
            $(".nested-tabs").zozoTabs({
                position: "top-left",
                theme: "flat-midnight-blue",
                style: "clean",
                orientation:"vertical",
                rounded: false,
                spaced:true,
                bordered:false,
                defaultTab: "tab1",
                animation: {
                    easing: "easeInOutCirc",
                    effects: "slideV",
                    speed: 350
                },
                size: "small"
            });
        });
    </script>
</body>
</html>

    Il problema è che quando lo inserisco in una pagina di wordpress, perde tutta la formattazione... al 99,99% il problem è causato dallo script che c'è in fondo al codice che non viene processato da wordpress.

    Come posso risolvere?

    Nell'HEAD del codice vengono caricati altri due script, questo mi fa pensare che se converto lo script che c'è in fondo da interso a script esterno dovrebbe essere processato... ma come si fa?

    Grazie

    0
  • U
    Moderatore •

    Ciao m3820,
    esistono diversi plugin per generare delle tab all'interno dei post o delle pagine, senza sporcare il codice.
    Per quanto riguarda il codice sopra postato:

    • Il codice contiene al suo interno i tag html, head e body che non ci devono assolutamente essere
    • Poi prelevi tutti i codici che siano scritti o che devono essere prelevati da fonti esterne e li inserisci nel file footer.php, facendo attenzione a dove poi risiedono i file da richiamare ed i loro percorsi corretti
    • All'interno della pagina, utilizzi esclusivamente il costrutto HTML ed il suo testo

    Alternativa migliore come descritto sopra è utilizzare un plugin. Qui ne trovi diversi: http://premium.wpmudev.org/blog/free-wordpress-tab-plugins/

    0
Effettua l'accesso per rispondere