web-dev-qa-db-fra.com

Montrer un WP 3.0 Menu personnalisé dans une sélection HTML avec navigation automatique?

Dans le cadre d'un thème pour un client, je souhaite pouvoir afficher un menu personnalisé (défini via l'administrateur) dans une zone de sélection qui change automatiquement de page après le changement de sélection .

Existe-t-il un plugin (ou un extrait de code pratique) qui y parviendra?

customizationthemestheme-developmentmenus
3
Keith S.

Le nouveau système de menus deWordPress est à la fois merveilleux et infiniment frustrant, selon ce que vous essayez de faire et le jour de la semaine. :) C'est une bonne idée, mais loin d'être mature, c'est une fonctionnalité que j'applaudis, mais je serai plus heureux lorsque la v3.3 ou v3.4 de WordPress sortira et que nous aurons beaucoup plus de cas d'utilisation directement pris en charge par l'API du système de menus. .

Cela dit, je ne sais pas s’il existe déjà un plugin pour faire ce que vous cherchez, maiset le code dont vous avez besoin pour écrire votre propre plugin?Ou vous pourriez simplement l’inclure dans votre thème functions.php fichier; quelle que soit votre préférence.

Ce que je fournis est un exemple entièrement autonome que vous pouvez enregistrer en tant que test.php dans le répertoire racine de votre site Web afin de le tester. Si votre domaine était example.com, vous chargeriez de tester à:

http://example.com/test.php

Voici à quoi ça ressemble en action:

 Inactive drop down of Pages from WordPress 3.0 Menu 
(source: mikeschinkel.com )
 Active drop down of Pages from WordPress 3.0 Menu 
(source: mikeschinkel.com )

À partir du code ci-dessous, il devrait être facile d’incorporer la fonction get_page_selector() à votre thème et de l’appeler chaque fois que vous avez besoin de cette fonctionnalité:

<?php

  include "wp-load.php";
  echo 'Jump to:';
  echo get_page_selector('My Select Menu');

function get_page_selector($menu) {
  $page_menu_items = wp_get_nav_menu_items($menu,array(
    'meta_key'=>'_menu_item_object',
    'meta_value'=>'page',
  ));
  $selector = array();
  if (is_array($page_menu_items) && count($page_menu_items)>0) {
    $selector[] =<<<HTML
<select id="page-selector" name="page-selector"
    onchange="location.href = document.getElementById('page-selector').value;">
HTML;
    $selector[] = '<option value="">Select a Page</option>';
    foreach($page_menu_items as $page_menu_item) {
      $link = get_page_link($page_menu_item->object_id);
      $selector[] =<<<HTML
<option value="{$link}">{$page_menu_item->title}</option>
HTML;
  }
    $selector[] = '</select>';
  }
  return implode("\n",$selector);
}

Vous vous demandez peut-être comment cela fonctionne?

La fonction wp_get_nav_menu_items()

WordPress 3.0 stocke ses menus dans la table wp_posts sous le type post_type de nav_menu_item. La wp_get_nav_menu_items() appelle indirectement la fonction get_posts(). Le premier paramètre de wp_get_nav_menu_items() est soit 1.) un nom de menu (ce que j’ai utilisé: "Mon menu de sélection" ), 2.) un ID d’élément de menu (c.-à-d. Le post de cet élément de menu ID de la base de données). ou 3.) un slug de menu (le slug du terme de taxonomie du menu; oui, les menus sont mis en œuvre en utilisant des termes de taxonomie avec une taxonomie de 'nav_menu'.)

 Menu Configuration in WordPress 3.0 
(source: mikeschinkel.com )

Au-delà du premier paramètre, il est transmis à get_posts() à la plupart (si ce n’est à tous?) Du $args que vous passez à wp_get_nav_menu_items(). Vous pouvez donc le traiter comme un type de publication personnalisé (même s’il est plus long terme quand ils améliorent l’API de menu qui ne sera probablement pas Une bonne idée, mais aujourd'hui, faites du foin pendant que le soleil brille!)

Filtrage des éléments de menu avec meta_key et meta_value

L'utilisation sous-jacente de posts pour les éléments de menu par WordPress explique pourquoi nous pouvons interroger meta_key et meta_value; WordPress utilise une série de meta_keys avec le préfixe _menu_item pour les informations supplémentaires dont il a besoin pour chaque élément de menu. _menu_item_object contiendra page pour chaque élément de menu qui correspond à un type WordPress "Page" post. (Si vous souhaitez inclure des éléments autres que Pages, vous devrez faire un peu plus de recherches que ce que j'ai fait ici, mais au moins je vous ai donné les outils nécessaires pour faire la recherche vous-même.)

Voici une capture d'écran utilisant Navicat for MySQL d'une requête montrant les méta-enregistrements de plusieurs nav_menu_items:

 Menu Item Configuration found in wp_postmeta with WordPress 3.0 
(source: mikeschinkel.com )

Saisir l'URL de la page avec get_post_link()

Ensuite, je ferai remarquer que l'URL de la page est obtenue à partir de la fonction get_post_link() et que je règle le value du HTML <option> sur ...

<?php
    $link = get_page_link($page_menu_item->object_id);
    $selector[] =<<<HTML
<option value="{$link}">{$page_menu_item->title}</option>
HTML;

Utiliser la variable onchange de Javascript pour accéder à la page sélectionnée

... afin que je puisse le récupérer dans la propriété value de l'élément 'page-selector'<select> et l'attribuer à location.href. L'affectation de location.href force le navigateur à accéder immédiatement à la nouvelle URL, et voici comment cela se passe:

<?php
  $selector[] =<<<HTML
<select id="page-selector" name="page-selector"
    onchange="location.href = document.getElementById('page-selector').value;">
HTML;

Un value="" vide comme option par défaut

Vous remarquerez peut-être que l'option "Sélectionner une page" default a une valeur vide; ce n'est pas une erreur mais à la place, par conception. Quand il est sélectionné et que le "onchange" est déclenché1 définir location.href sur une chaîne vide n'aura aucun effet, c'est exactement ce que nous voulons et cela ne nous oblige pas à écrire un code d'exception. Viola! 

<?php
    $selector[] = '<option value="">Select a Page</option>';
  1. La sélection de "Sélection d'une page" trigger "onchange" ne peut se produire que dans le navigateur, lorsque vous naviguez dans une page qui ne déclenche pas le rechargement de la page lorsqu'une autre option avait été sélectionnée, mais cela peut quand même arriver. devrait y répondre.
8
MikeSchinkel