Intégrer un nouveau menu sur MyBB

[Krafty]

Bonjour à tous,

J'ai décidé d'utiliser MyBB comme forum pour mon site WordPress (http://sandboxgames.fr/forum/). J'en suis pour le moment très satisfaite, car je n'ai eu aucune difficulté à intégrer mon forum.

Seulement, je n'y connais rien en PHP, et j'aurais besoin d'aide pour trouver comment copier mon Menu de WordPress sur mon forum MyBB (Un menu au dessus des boutons "connexion" etc). Si je connais déjà l'endroit, je pourrais faire des test pour savoir quoi rentrer (si c'est du HTML basique, je devrais m'en sortir)

J'aurais également besoin d'un "Bridge" pour que les utilisateurs de WordPress aient le même compte sur le forum MyBB. J'ai déjà vu WordBB, mais je ne l'ai pas trouvé intuitif.

Merci beaucoup

[exdiogene]

Pour trouver des solutions rapidement, il est toujours préférable de consulter la FAQ et de faire de simples recherches.

Avec le mot "menu" 11 pages de messages pertinents apparaissent...

Dont cette discussion :
http://mybb.fr/thread-5433.html

Il faudra un peu de HTML et de CSS pour obtenir un résultat professionnel.

Je ne vois pas pourquoi un "Bridge" devrait être intuitif, il fait le travail en arrière plan! ???

[Krafty]

Merci, j'avais peut-être fait une recherche trop compliqué, car je ne l'avais pas trouvé. Je vais regarder cela de plus près.

Je voudrais juste que les utilisateurs soient les mêmes sur le site que le forum, et pas de surplus d'option

[Krafty]

J'ai presque finis pour le menu, il y a juste deux petits bugs que je n'arrive pas à régler : les deux menus se mélangent et je n'arrive pas à centrer le deuxième menu (celui que j'ai rajouté).

[spyto]

Je pense qu'il faudrait que tu "encadres" ton menu WP style, depuis :
<ul id="menu-menu"... jusqu'à </ul> dans un <div> de style clear; both; ou clear: right;
De façon à "repousser à la ligne" la fenêtre d'identification.

C'est-à-dire :

Code PHP :

<div style="clear: both;">
    <ul id="menu-menu"...
      .... ton menu WP...
    </ul>
</div> 


qui sera suivi du <div id="panel"> qui contient la barre de navigation de MyBB.

Peut-être que clear: right suffit ?

[Krafty]

Aucun des deux ne marchent

J'ai également remarqué deux autres problèmes que je ne sais pas régler :
- les menus déroulants ne fonctionnent pas
- le petit "sélecteur" orange ne bouge pas au survole de la souris, et je n'ai rien trouvé dans le wordpress que j'aurais oublié

[exdiogene]

Normalement les menus déroulant fonctionnent avec des styles CSS, de même avec le survol de souris.

Il faudra probablement copier le CSS de la feuille de style de Wordpress spécifiquement pour ce menu. Il faudra regarder pour les élément tels que : #menu-menu, .sf-menu, .sf-js-enabled, #menu-item .

De plus je suspecte qu'il y a une interaction avec un script de Javascript, il faudra aussi le localiser...

[Krafty]

J'ai déjà recopier les styles CSS, donc je pense aussi qu'il y a un script javascript mais qui devait déjà être intégrer au thème (il y a d'ailleurs un dossier js dans le theme wordpress) mais je ne sais pas comment l'intégrer à MyBB car c'est la première fois que j'utilise ce forum

[spyto]

Comme tout template évolué de WP, il est farci de JavaScript et de JQuery !!!
Les menus déroulants et le sélecteur orange sont gérés par JQuery.

L'examen du code source de la page d'accueil WP permet de penser que le menu est de type "superfish" donc il faut intégrer dans les templates MyBB au moins les fichiers .js et le code d’initialisation JQuery de Superfixh !!!
Pas simple !

A la louche, je dirais qu'il faut au minimum :

Code PHP :

<script type='text/javascript' src='http://sandboxgames.fr/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>
<script src="http://sandboxgames.fr/wp-content/themes/Polished/js/jquery.lavalamp.1.3.3-min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://sandboxgames.fr/wp-content/themes/Polished/js/jquery.cycle.all.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://sandboxgames.fr/wp-content/themes/Polished/js/superfish.js" type="text/javascript" charset="utf-8"></script>   
<script src="http://sandboxgames.fr/wp-content/themes/Polished/js/jquery.easing.1.3.js" type="text/javascript" charset="utf-8"></script>
    
<script type="text/javascript">
//<![CDATA[
 
jQuery(function(){

        jQuery.noConflict();
    
        jQuery('ul.sf-menu').superfish({
            delay:       200,                            // one second delay on mouseout 
            animation:   {'marginLeft':'0px',opacity:'show',height:'show'},  // fade-in and slide-down animation 
            speed:       'fast',                          // faster animation speed 
            autoArrows:  true,                           // disable generation of arrow mark-up 
            onBeforeShow:      function(){ this.css('marginLeft','20px'); },
            dropShadows: false                            // disable drop shadows 
        });
        
        jQuery('ul.sf-menu ul > li').addClass('noLava');
        jQuery('ul.sf-menu > li').addClass('top-level');
        
        jQuery('ul.sf-menu > li > a.sf-with-ul').parent('li').addClass('sf-ul');
        
                
        if (!(jQuery("#footer_widgets .block_b").length == 0)) {
            jQuery("#footer_widgets .block_b").each(function (index, domEle) {
                // domEle == this
                if ((index+1)%3 == 0) jQuery(domEle).after("<div class='clear'></div>");
            });
        };
        
        /* search form */
        
        jQuery('#search').toggle(
            function () {jQuery('#searchbox').animate({opacity:'toggle', marginLeft:'-210px'},500);},
            function () {jQuery('#searchbox').animate({opacity:'toggle', marginLeft:'-200px'}, 500);}
        );
        
        var $searchinput = jQuery("#header #searchbox input");
        var $searchvalue = $searchinput.val();
        
        $searchinput.focus(function(){
            if (jQuery(this).val() == $searchvalue) jQuery(this).val("");
        }).blur(function(){
            if (jQuery(this).val() == "") jQuery(this).val($searchvalue);
        });
        
    
        jQuery('ul.sf-menu li ul').append('<li class="bottom_bg noLava"></li>');
        
        var active_subpage = jQuery('ul.sf-menu ul li.current-cat, ul.sf-menu ul li.current_page_item').parents('li.top-level').prevAll().length;
        var isHome = 1; 
        
        if (active_subpage) jQuery('ul.sf-menu').lavaLamp({ startItem: active_subpage });
        else if (isHome === 1) jQuery('ul.sf-menu').lavaLamp({ startItem: 0 });
        else jQuery('ul.sf-menu').lavaLamp();
            
        
                    
            /* featured slider */
            
            jQuery('#spotlight').cycle({
                timeout: 0,
                speed: 1000, 
                fx: 'fade'
            });
            
            var $featured_item = jQuery('div.featitem');
            var $slider_control = jQuery('div#f_menu');
            var ordernum;
            var pause_scroll = false;
            var $featured_area = jQuery('div#featured_content');            
     
            function gonext(this_element){
                $slider_control
                .children("div.featitem.active")
                .removeClass('active');
                this_element.addClass('active');
                ordernum = this_element.find("span.order").html();
                jQuery('#spotlight').cycle(ordernum - 1);
            } 
            
            $featured_item.click(function() {
                clearInterval(interval);
                gonext(jQuery(this)); 
                return false;
            });
            
            jQuery('a#previous, a#next').click(function() {
                clearInterval(interval);
                if (jQuery(this).attr("id") === 'next') {
                    auto_number = $slider_control.children("div.featitem.active").prevAll().length+1;
                    if (auto_number === $featured_item.length) auto_number = 0;
                } else {
                    auto_number = $slider_control.children("div.featitem.active").prevAll().length-1;
                    if (auto_number === -1) auto_number = $featured_item.length-1;
                };
                gonext($featured_item.eq(auto_number));
                return false;
            });

                
            
            var auto_number;
            var interval;
            
            $featured_item.bind('autonext', function autonext(){
                if (!(pause_scroll)) gonext(jQuery(this)); 
                return false;
            });
            
                    
        });
//]]>
</script> 


Peut-être tout n'est pas utile. Il faudrait analyser les sources du template WP, ce qui est long et fastidieux.

On n'est plus là dans le support MyBB.

En clair il faut que tu isoles les fichiers et le code JS nécessaires au menu et que tu les intègres à headerinclude et header sans doute.

Pour ce qui est de la disposition, même si ce que je t'ai indiqué ne fonctionne pas, tu verras bien par la suite.
L'essentiel est de faire fonctionner d'abord le menu.
Bon courage.

[Krafty]

Ou faut-il que je mette ça ?

[spyto]

Je te l'ai dit : dans les templates headerincule et/ou header.
La partie déclaration des scripts externes plutôt dans la section <head> donc dans headerinclude.
Quant à la partie fonction JQuery essaie de la placer aussi dans headerinclude, mais peut-être doit-elle être placée dans le <body> donc dans le template header ?...
Ce n'est qu'une piste, je ne sais pas s'il faut mettre "tout ça" ou si c'est même insuffisant.

Observe le code source du template de Wordpress pour voir comment tout ça est structuré.

A mon avis ce sera loin d'être simple d'intégrer le menu WP dans la mesure où, pour autant que je connaisse ce CMS, il y a des appels à functions.php du répertoire du thème WP pour l'affichage des menus. Il te faudra bricoler pas mal !!!

[Krafty]

J'ai essayé dans les deux parties, malheureusement ça n'a rien changé. Je pense que je vais l'enlever, et mettre un simple 'Aller au site', du moins pour le début.

Je vous remercie beaucoup tous les deux pour le temps que vous avez passé à m'aider

[spyto]

Je crois que c'est plus sage, sinon tu risques d'y passer un temps fou...

[Krafty]

Me revoici ! Je reviens vous embêter avec mon histoire de menu ^^

Pour commencer, une mise à jour de l'adresse : http://brickrunner-france.net/forum/

L'apparence du forum n'allait pas du tout avec mon site, donc j'ai recommencer à le trafiquer.

Ensuite, bonne nouvelle (du moins pour moi ) il suffisait juste d'enlever un petit "float: left" et de rafistoler un peu de partout pour que ça soit centré. Bref, cela m'a bien pris la journée (bien que ça aurait pu être plus).

Maintenant, j'ai toujours ce problème de flèche qui n’apparaît pas... Et si elle apparait, elle est stagnante et n'est pas placé au bon endroit. Donc, comme vous me l'avez dis, c'est surement du à du js. Mais lequel ?

J'ai trouvé ceci dans le header.php de WordPress :

Code PHP :

<script type="text/javascript">
    document.documentElement.className = 'js';
</script> 


Et j'ai 6 fichiers js dans un dossier js du thème WordPress :
- DD_belatedPNG_0.0.9a-min.js
- hoverIntent.js
- jquery.cycle.all.min.js
- jquery.easing.1.3.js
- jquery.lavalamp.1.3.3-min.js (il correspondrait au curseur du menu)
- superfish.js

Je ne m'y connais rien en js, donc je viens vous re-re-redemandez de l'aide.
Merci.