[SPXWMENU] : menu administrable

je-evrard · avril 2015

Ce plugin va permettre d'afficher et d'administrer un plusieurs menus entièrement personnalisables.

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)

flipflip · avril 2015

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 ?

je-evrard · avril 2015

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é

flipflip · avril 2015

Merci

je-evrard · août 2015

Nouvelle version 1.3 disponible pour compatibilité pluxml 5.4

PPmarcel · août 2015

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-evrard · août 2015

: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

Dudy · août 2015

jerome

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

merci

je-evrard · septembre 2015

héhé

PPmarcel · septembre 2015

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.

je-evrard · septembre 2015

Bonjour

Tu es en https ?

PPmarcel · septembre 2015

Ah oui tout à fait.

je-evrard · septembre 2015

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é

PPmarcel · septembre 2015

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é.

je-evrard · septembre 2015

Ok merci. Je peu te demander de tester pour moi la prochaine version en https ?

PPmarcel · septembre 2015

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.

PPmarcel · septembre 2015

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.

je-evrard · septembre 2015

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.

PPmarcel · septembre 2015

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.

je-evrard · septembre 2015

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

PPmarcel · septembre 2015

Ah yes, en chargeant ce bout de code avec bootstrap.js ça fonctionne mieux. Merci.

PPmarcel · septembre 2015

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 ?

je-evrard · septembre 2015

Oui pourquoi pas, je dois cogiter la question. A plus. Jeje

PPmarcel · octobre 2015

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-evrard · octobre 2015

Bonjour,

@PPMarcel

Tu veux parler des groupes de page statique ? pas des catégories. Une bonne copie d'écran peut éclaircir le sujet

.

PPmarcel · octobre 2015

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.

je-evrard · octobre 2015

Donc il y a pas de soucis ?

PPmarcel · octobre 2015

Non aucun, le plugin marche très bien.

je-evrard · octobre 2015

J'aime quand tout roule O:)

djinlemage · décembre 2015

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

djinlemage · décembre 2015

Arf je viens de voir que lors de la reduction de la fenetre, le menu disparait
Aie

[SPXWMENU] : menu administrable

Réponses