[SPXWMENU] : menu administrable

je-evrardje-evrard Member
décembre 2016 modifié dans Plugins
Ce plugin va permettre d'afficher et d'administrer un plusieurs menus entièrement personnalisables.

4.png

Caractéristiques :

[list=*]
[*]intègre la librairie bootstap navbar (non obligatoire)[/*]
[*]administration via widget (un ou plusieurs menus sans limite)[/*]
[*]s'adapte a tout type de menu via des parametres dans un shortcode[/*]
[*]s'insère n'importe ou (thème, pages statiques, articles...)[/*]
[*]configuration complète sur 3 niveaux (groupes de pages statiques, articles...)[/*]
[*]une aide soignée (en cours)[/*]
[*]nécessite le plugin spxdatas, spxshortcodes[/*]
[/list]

Niveau d'usage : facile

Compatible : pluxml 5.3.1 - 5.4 - 5.5

spxwmenu 1.7 version officielle


j'ai mis en, place une Demo live pour montrer le plugin. (demo-spx5)

Il utilise le thème par default avec les modifications suivantes :

1 shortcode dans la page header.php
[== Indéfini ==]

<nav role="navigation">
[SPXWMENU id=001 menu_type='bootstrap' ]

</nav>

1 shorcode dans la page Sidebar.php
[== Indéfini ==]
<h3>Sous menu</h3>		
[SPXWMENU id=002 menu_type='default' ]

Rajout du css suivant pour le thème par default 5.4
[== Indéfini ==]
.nav {
    height: auto;
}
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
    background-color: #eeeeee;
    border-color: #428bca;
	color:grey;
}
.dropdown-toggle:focus {
  color:grey;
}
.nav > li > a:hover,
.nav > li > a:focus {
 color:grey;
}

La démo utilise donc deux menus différents (1 bootstrap et 1 default)

Vous pouvez vous connecter dans l'admin ici (login : demo password : demo). Partie widget / menus

Vous pouvez télécharger facilement les plugins spxwmenu, spxdatas et spxshortcodes via le spxpluginsdownloader


Si vous voulez remplacer le menu du thème par default de la 5.5 par un menu personnalisé controlé par ce plugin rien de plus simple :

- intaller le plugin et préparer votre menu (voir l'aide du plugin nécessite spxwmenu, spxdatas et spxshorcodes bien sur)

- modifier le css du thème (default/css/theme.css) par default en rajoutant à la fin :
[== Indéfini ==]
/* made by jeje */
.nav {
    height: auto;
}
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
    background-color: #eeeeee;
    border-color: #428bca;
	color:grey;
}
.dropdown-toggle:focus {
  color:grey;
}
.nav > li > a:hover,
.nav > li > a:focus {
 color:grey;
}

Et enfin dans header.php du thème par default (default/header.php)

Remplacer
[== Indéfini ==]
<nav class="nav" role="navigation">
		<div class="responsive-menu">
			<label for="menu"><?php $plxShow->lang('MENU'); ?></label>
			<input type="checkbox" id="menu">
			<ul class="menu expanded">
				<?php $plxShow->staticList($plxShow->getLang('HOME'),'<li class="#static_status" id="#static_id"><a href="#static_url" title="#static_name">#static_name</a></li>'); ?>
				<?php $plxShow->pageBlog('<li id="#page_id"><a class="#page_status" href="#page_url" title="#page_name">#page_name</a></li>'); ?>
			</ul>
		</div>
		
</nav>

Par
[== Indéfini ==]
<nav class="nav" role="navigation">
	[SPXWMENU id=001 menu_type='bootstrap' ]
</nav>

L'id étant votre id de menu widget (voir la doc du plugin)
«1

Réponses

  • Bonjour,

    L'idée est très bonne mais j'ai un problème pour la mise en place.

    J'ai créé un menu que j'appelle menu_top (id 001), je l'édite et j'ajoute 3 entrées :
    Accueil -> url : home
    Société -> url : catégorie d'articles 'société'
    Savoir faire -> url : catégorie d'articles 'savoir faire'

    Les catégories Société et Savoir faire contiennent des articles qui sont en status publiés. Dans mon template j'ajoute le shortcode : [SPXWMENU id=001 menu_type='default']

    Je rafraichi ma page, le menu s'affiche bien mais pour Société et Savoir faire ça ne me liste pas les articles qu'elles contiennent.

    Est-ce que j'ai loupé un truc ?

    J'ai un string de l'array

  • je-evrardje-evrard Member
    avril 2015 modifié
    Hello,

    Il faut que "société" et "savoir faire" soit en niveau 2 (à ce stade du dev du plugin).

    ex :

    - Accueil
    - Actus
    - Société
    - Savoir faire

    Ce qui va créer un troisième niveau automatiquement. Je vais voir de mon coté si je peux faire une modif pour une prise en compte depuis le niveau 1.

    Je te tiens au courant.

    a+

    jéjé
  • Merci :)

    J'ai un string de l'array

  • Nouvelle version 1.3 disponible pour compatibilité pluxml 5.4
  • Salut,

    J'essaye d'utiliser le plugin sur pluxml 5.4. J'ai beau créer des liens ou des menus, rien n’apparaît dans les listing.
    Il faut respecter quelque chose en particulier, ou bien c'est un problème d'affichage ?

    note: l'admin utilise le thème par défaut.

    Matthieu
  • je-evrardje-evrard Member
    août 2015 modifié
    :P Regarde bien la doc, il faut insérer un hook ou un shortcode. J'explique ce que j'ai modifié dans le premier post.

    A noter que ce plugin est dépendant de spxdatas et spxshortcodes à installer via spxpluginsdownloader.

    A plus

    Jeje
  • DudyDudy Member
    jerome

    ce plugin est magnifique, la tu me gatte,
    sont tellement simple et claire tes plugins hulala 8)

    merci
  • héhé :)
  • PPmarcel a écrit:
    J'essaye d'utiliser le plugin sur pluxml 5.4. J'ai beau créer des liens ou des menus, rien n’apparaît dans les listing.

    Hello Jérôme,

    C'est dans le panneau d'administration où je suis bloqué.
    La liste des menus dans l'onglet "widget > menus" reste vide lorsque je saisi une nouvelle entrée.

    Les fichiers du plugins appartiennent pourtant bien à l'utilisateur d'apache, ce qui exclus un problème de droits d'écriture.
  • Bonjour

    Tu es en https ?
  • je-evrardje-evrard Member
    septembre 2015 modifié
    PPmarcel a écrit:
    Ah oui tout à fait.

    En fait il existe un bug dans le plugin spxdatas quand on est en https. Tu peux corriger facilement en suivant la procédure suivante:

    Fichiers a modifier:
    [list=*]
    [*]spxdatas/includes/base_edit.php[/*]
    [*]spxdatas/includes/dat_liste.php[/*]
    [*]spxdatas/includes/static_edit.php[/*]
    [*]spxdatas/includes/subdata_liste.php[/*]
    [/list]

    la ligne est la suivante :
    [== PHP ==]
    // Vérification du Referer pour les variables passées en POST
     if(isset($_SERVER['HTTP_REFERER'])
      && $_SERVER['HTTP_REFERER']!=''
      && substr($_SERVER['HTTP_REFERER'], 7, strlen($_SERVER['SERVER_NAME'])) != $_SERVER['SERVER_NAME']){
         $_POST = array();
     }
    

    Tu peux commenter le $_POST = array(); ce qui donne:
    [== PHP ==]
    // Vérification du Referer pour les variables passées en POST
     if(isset($_SERVER['HTTP_REFERER'])
      && $_SERVER['HTTP_REFERER']!=''
      && substr($_SERVER['HTTP_REFERER'], 7, strlen($_SERVER['SERVER_NAME'])) != $_SERVER['SERVER_NAME']){
        // $_POST = array();
     }
    

    La, ça devrait rouler pour toi jusqu'a ma prochaine mise à jour qui va corriger ce petit problème.
    Ces lignes permettent de protéger le referer de post externe mais ne fonctionne pas en https a cause du substr sur 7 caractères.
    Je dois modifier les lignes en conséquence rien de bien méchant mais plutot embetant pour l'usage en https. Si tu as la modif a appliquer dans tous les cas je prends aussi héhé, ça me fera gagner du temps.

    J'ai d'ailleurs eu le cas récemment de qq qui a acheter mon thème simplebox et il ne pouvait enregistrer car il était en https.


    a+

    jéjé
  • Bien vu, c'est fonctionnel !

    Au passage il reste un reliquat de test dans "data_liste.php" :
    // Vérification du Referer pour les variables passées en POST
     if(isset($_SERVER['HTTP_REFERER'])
      && $_SERVER['HTTP_REFERER']!=''
      && substr($_SERVER['HTTP_REFERER'], 7, strlen($_SERVER['SERVER_NAME'])) != $_SERVER['SERVER_NAME']){
         echo ("vrai");
         $_POST = array();
     }
    

    En haut du widget j'avais "vrai" qui s'affichait et je ne savais pas d'où ça venait. :)
    Je l'ai commenté aussi et il est maintenant caché.
  • Ok merci. Je peu te demander de tester pour moi la prochaine version en https ?
  • Dans l'absolu oui. Par contre j'ai moi-même des problèmes à régler pour que les menu apparaissent.
    Le CSS ne fonctionne pas, mais je pense que c'est juste un conflit entre quelques classes.
  • PPmarcelPPmarcel Member
    septembre 2015 modifié
    J'utilise déjà un thème employant bootstrap et impossible de dérouler les menus tant que la classe bootstrap.js est chargée dans le thème.
    Si je commente cette classe, les menus se déroulent (en revanche je perds les petits avantage bootstrap : le repli du menu en mode mobile par exemple). Je n'ai pas encore trouvé la cause, mais si tu as une idée, je suis preneur.

    Autre point, a priori le menu_type='bootstrap' a pour effet de créer un nouveau div "navbar-collapse" avec groupe ul "nav navbar-nav".
    Cela abouti sur une nouvelle navbar dans la navbar.

    Y-aurait-il un moyen d'afficher directement les menus a partir de l'élément li "active dropdown" pour les intégrer dans une navbar existante ?
    Sur le site de la démo c'est le cas, mais j'imagine que bootstrap change un peu la donne quelque part.
  • Tu as vu que tu peux desactiver dans la config du plugin le fait de charger bootstrap js + css.

    Je regarde l'histoire de la nav dès que possible.
  • PPmarcelPPmarcel Member
    septembre 2015 modifié
    Je remarque quelque chose de bizarre. Lorsque j'utilise le CSS bootstrap de mon thème, je ne peux pas dérouler un sous-menu.
    Lorsque je clique sur ce sous-menu, cela retire la classe "open" du "li" du menu parent. Du coup cela referme le menu parent au lieu d'ouvrir le menu enfant.

    Si je neutralise mon CSS bootstrap et que j'active celui du plugin les mécanismes fonctionnent bien.

    Je vais devoir jouer aux jeux des 7 différences. :)

    EDIT: en fait le problème ne vient pas des CSS mais du script bootstrap. Le plugin inclue un script bootstrapnav.js qui semble étendre le fonctionnement des dropdown. Je vais essayer de jouer avec ça.
  • A la fin du bootstrapnav.js j'ai rajouté ceci :
    [== Indéfini ==]
    $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
    		event.stopPropagation(); 
    		$(this).parent().toggleClass('open');
    		$(this).parent().find("ul").parent().find("li.dropdown").addClass('open');
    });
    

    En fait bootstrap ne gère que les menus à deux niveaux nativement. Dans le spxwmenu on a la possibilité d'en avoir 3. J'ai donc rajouté ce code pour forcer bootstrap à gérer les menus de niveaux 3.

    a+

    jeje
  • Ah yes, en chargeant ce bout de code avec bootstrap.js ça fonctionne mieux. Merci.
  • PPmarcel a écrit:
    Autre point, a priori le menu_type='bootstrap' a pour effet de créer un nouveau div "navbar-collapse" avec groupe ul "nav navbar-nav".
    Cela abouti sur une nouvelle navbar dans la navbar.

    Y-aurait-il un moyen d'afficher directement les menus a partir de l'élément li "active dropdown" pour les intégrer dans une navbar existante ?

    Hello,

    Avec le recul je me suis rendu compte que tu n'avais pas intégré le menu du plugin dans la navbar existante. Mais tu as complètement remplacé l'existant par celle du plugin.
    Du coup maintenant j'ai fais comme toi et je gère l'intégralité du menu via le plugin.

    Je gère mes menus comme ça :
    Lieux (navbar)
      - Pays1
        * Région1
        * Région2
      - Pays2
      - etc
    

    Pour le bouton Lieux et Pays je peux gérer via le plugin. Les régions par contre sont supposées être des catégories.
    Mais comme le plugin s'arrête au premier sous-menu (dans mon cas "Pays*"), j'ai créé une page statique par région que j'ai groupé par pays.
    Puis j'ai lié les groupes de pages statiques aux menus correspondants.

    Enfin dans chacune des pages statiques je glisse un code de redirection en PHP vers la catégorie qui va bien.

    C'est un peu lourd à mettre en place mais ça tiens. Est-ce que tu envisagerait toutefois la gestion du 3eme sous-menu directement dans le plugin dans le futur ?
  • Oui pourquoi pas, je dois cogiter la question. A plus. Jeje
  • Bonsoir Jérôme,

    Le plugin est souple sauf sur un point: l'affichage des groupes de catégorie. Par défaut les catégories au sein d'un groupe vont s'afficher par ordre d'identifiant croissant, plutôt statique.
    Peux-tu plutôt baser le tri en fonction de l'ordre, que l'on peut changer bien plus facilement dans l'administration ?

    Bonne soirée, Matthieu.
  • je-evrardje-evrard Member
    octobre 2015 modifié
    Bonjour,

    @PPMarcel

    Tu veux parler des groupes de page statique ? pas des catégories. Une bonne copie d'écran peut éclaircir le sujet :) .
  • PPmarcelPPmarcel Member
    octobre 2015 modifié
    Mais oui c'est ça ! Je voulais effectivement parler des pages statiques.

    Pour chaque catégorie j'ai créé une page statique correspondante. Et du coup je me suis inversé les pinceaux entre la page d'administration des catégories et celle des pages statiques. Mon tri portait sur les catégories, ce qui n'avait évidement aucune portée dans les menus (!).

    Là j'ai réussi à réagencer mon sous-menu des pages statiques en changeant l'ordre des pages dans l'administration de pluxml.

    Tout va bien maintenant, désolé du quiproquo. ;)
  • Donc il y a pas de soucis ?
  • J'aime quand tout roule O:)
  • Bonjour,


    Je suis nouveau sur le site et je decouvre PluXML et ses plugins.

    Deja mes felicitation pour le plugin
    J ai fait mon choix sur le theme Duena mais je n arrive pas a mettre en place ton menu en remplacement du menu actuel.

    Voici la partie d origine
    [== Indéfini ==]
    <nav id="site-navigation" class="main-nav" role="navigation">
    	<div class="navbar_inner">[SPXWMENU id=001]
    		<div class="sf-menu">
    			<ul>
    				<?php $plxShow->staticList($plxShow->getLang('HOME'),'<li class="page_item #static_status" id="#static_id"><a href="#static_url" title="#static_name">#static_name</a></li>'); ?>
    				<?php $plxShow->pageBlog('<li class="page_item #page_status" id="#page_id"><a href="#page_url" title="#page_name">#page_name</a></li>'); ?>
    					<li class="page_item page_item_has_children"><a href="#">Nos Flux</a>
    			<ul class="children">
    				<li class="page_item"><a href="<?php $plxShow->urlRewrite('feed.php?rss') ?>" title="<?php $plxShow->lang('ARTICLES_RSS_FEEDS'); ?>"><?php $plxShow->lang('ARTICLES'); ?></a></li>
    				<li class="page_item"><a href="<?php $plxShow->urlRewrite('feed.php?rss/commentaires'); ?>" title="<?php $plxShow->lang('COMMENTS_RSS_FEEDS') ?>"><?php $plxShow->lang('COMMENTS'); ?></a></li>
    			</ul>
    			</li>
    			</ul>
    		</div>
    	</div>
    </nav>
    

    Et moi j ai fais ca :
    [== Indéfini ==]
    <nav id="site-navigation" class="main-nav" role="navigation">
    	<div class="navbar_inner">[SPXWMENU id=001]
    		<!--<div class="sf-menu">
    			<ul>
    				<?php $plxShow->staticList($plxShow->getLang('HOME'),'<li class="page_item #static_status" id="#static_id"><a href="#static_url" title="#static_name">#static_name</a></li>'); ?>
    				<?php $plxShow->pageBlog('<li class="page_item #page_status" id="#page_id"><a href="#page_url" title="#page_name">#page_name</a></li>'); ?>
    					<li class="page_item page_item_has_children"><a href="#">Nos Flux</a>
    			<ul class="children">
    				<li class="page_item"><a href="<?php $plxShow->urlRewrite('feed.php?rss') ?>" title="<?php $plxShow->lang('ARTICLES_RSS_FEEDS'); ?>"><?php $plxShow->lang('ARTICLES'); ?></a></li>
    				<li class="page_item"><a href="<?php $plxShow->urlRewrite('feed.php?rss/commentaires'); ?>" title="<?php $plxShow->lang('COMMENTS_RSS_FEEDS') ?>"><?php $plxShow->lang('COMMENTS'); ?></a></li>
    			</ul>
    			</li>
    			</ul>
    		</div>-->
    	</div>
    </nav>
    

    Le menu s affiche bien mais les sous menu non et le clic sur le 1er niveau ne donne rien

    Je pense que je ne doit pas faire correctement mais je n ai pas trouve ou !
    Peux tu m aider ?

    Merci
  • Arf je viens de voir que lors de la reduction de la fenetre, le menu disparait
    Aie
Connectez-vous ou Inscrivez-vous pour répondre.