it-swarm-es.com

Mostrar un WP ¿Menú personalizado en una selección de HTML con navegación automática?

Como parte de un tema para un cliente, quiero poder mostrar un menú personalizado (definido a través del administrador) en un cuadro de selección que cambia automáticamente las páginas después de cambiar la selección .

¿Hay un complemento (o un fragmento de código útil) que logrará esto?

3
Keith S.

El nuevo sistema de menú de WordPress es maravilloso e infinitamente frustrante , dependiendo de lo que esté tratando de hacer y del día de la semana que sea. :) Es una gran idea, pero está lejos de ser madura, así que, si bien es una función que aplaudo, estaré más contenta cuando se lance v3.3 o v3.4 de WordPress y obtengamos muchos más casos de uso directamente compatibles con la API del sistema de menús. .

Dicho esto, no estoy seguro de si existe un complemento para hacer lo que está buscando, pero ¿qué le parece el código que necesita para escribir su propio complemento? O simplemente puede incluirlo en el archivo functions.php de tu tema; cualquiera que sea su preferencia.

Lo que estoy proporcionando es un ejemplo totalmente autónomo que puede guardar como test.phpin el directorio raíz de su sitio web para probarlo. Si su dominio fuera example.com, se cargaría para probar en:

http://example.com/test.php

Esto es lo que parece en acción:

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

Desde el código a continuación, debería ser fácil incorporar la función get_page_selector() en su tema y llamarla cuando necesite esta funcionalidad:

<?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);
}

¿Entonces te preguntarás cómo funciona?

La función wp_get_nav_menu_items()

WordPress 3.0 almacena sus menús en la tabla wp_posts como post_type tipo de nav_menu_item. La wp_get_nav_menu_items() indirectamente solo llama a la función get_posts(). El primer parámetro para wp_get_nav_menu_items() es 1.) un nombre de menú (que es el que usé: "Mi menú de selección"), 2.) una ID de elemento de menú (es decir, el elemento de menú publicar ID la base de datos) o 3.) una barra de menú (la barra del término de taxonomía del menú; sí, los menús se implementan usando términos de taxonomía con una taxonomía de 'nav_menu'.)

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

Más allá del primer parámetro, reenvía a get_posts() la mayoría (¿no a todos?) Del $args que se pasa a wp_get_nav_menu_items(), por lo que puede tratarlo como un tipo de mensaje personalizado (aunque a más largo plazo cuando mejoran el menú API, que probablemente no será una gran idea, pero ¿hoy? Hacer heno mientras brilla el sol!)

Filtrar elementos de menú con meta_key y meta_value

El uso subyacente de WordPress de las publicaciones para los elementos del menú es la razón por la que podemos consultar meta_key y meta_value; WordPress usa una serie de meta_keys con el prefijo _menu_item para la información adicional que necesita para cada elemento del menú. _menu_item_object contendrá page para cada elemento del menú que corresponda a un WordPress "Page"post type. (Si desea incluir elementos además de Páginas, necesitará investigar un poco más de lo que hice aquí, pero al menos le di las herramientas que necesita para realizar la investigación usted mismo).

Aquí hay una captura de pantalla que utiliza Navicat para MySQL de una consulta que muestra los meta registros de varios nav_menu_items:

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

Agarrando la URL de la página con get_post_link()

A continuación, señalaré que obtenga la URL de la página desde la función get_post_link() y que estoy configurando el <option> 'del HTML value para que sea la URL ...

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

Usando la onchange de Javascript para navegar a nuestra página seleccionada

... Para poder tomarlo de la propiedad value del elemento 'page-selector'<select> y asignarlo a location.href. Asignar location.href hace que el navegador navegue inmediatamente a la nueva URL, y eso, en pocas palabras, es cómo se hace todo:

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

Un value="" vacío como la opción predeterminada

Es posible que tenga en cuenta que la opción "Seleccionar una página"predeterminada tiene un valor vacío; Eso no es un error sino un diseño. Cuando se selecciona y se activa el "onchange"1 establecer location.href en una cadena vacía no tendrá ningún efecto, que es exactamente lo que queremos y no requiere que escribamos un código de excepción. ¡Viola!

<?php
    $selector[] = '<option value="">Select a Page</option>';
  1. Al seleccionar "Seleccionar una página"desencadenador "onchange" solo puede pasar en un navegador de navegación a una página que no active una recarga de página donde anteriormente se había seleccionado otra opción, pero Aún puede suceder así que deberíamos abordarlo.
8
MikeSchinkel