X

Cómo mostrar todas las publicaciones en un menú desplegable

Snippets de IsItWP

¿Está buscando una forma de mostrar una lista de todas sus publicaciones en un menú desplegable? Si bien probablemente exista un plugin para esto, hemos creado un fragmento de código rápido que puede usar para mostrar todas las publicaciones en un menú desplegable en WordPress.

Puede ajustar el número de publicaciones mostradas cambiando el valor de -1 dentro de la matriz $args.

Instrucciones:

Todo lo que tiene que hacer es agregar este código al archivo index.php de su tema:

<form action="<? bloginfo('url'); ?>" method="get">
<select name="page_id" id="page_id">
<?php
global $post;
$args = array( 'numberposts' => -1);
$posts = get_posts($args);
foreach( $posts as $post ) : setup_postdata($post); ?>
	<option value="<? echo $post->ID; ?>"><?php the_title(); ?></option>
<?php endforeach; ?>
</select>
<input type="submit" name="submit" value="view" />
</form>

Nota: Si es la primera vez que agregas fragmentos de código en WordPress, consulta nuestra guía sobre cómo agregar fragmentos de código correctamente en WordPress, para que no rompas accidentalmente tu sitio.

Si te gustó este fragmento de código, considera echar un vistazo a nuestros otros artículos en el sitio como: Más de 50 de los mejores temas de WooCommerce para tu tienda online y cómo crear un formulario de donaciones de WordPress.

Comentarios   Deja una respuesta

  1. Señor, estoy usando el tipo de publicación de portafolio de Avada y su código funciona bien, pero rompe todo el diseño de la página normal.

    Agregué ‘post_type’ => ‘avada_portfolio’,

    El menú desplegable funciona bien, pero todo el contenido normal de la página tiene miniaturas de portafolio.
    ¿Cómo puedo arreglar esto?
    Por favor, ayuda.

    — Seleccionar elemento —

    -1,
    ‘post_type’ => ‘avada_portfolio’,
    );
    $posts = get_posts($args);
    foreach( $posts as $post ) : setup_postdata($post); ?>

    1. La muestra de código que incluyó tiene algunos errores de sintaxis. Por ejemplo, el PHP y el HTML no están separados correctamente.

  2. Hola, pero cuando haces clic en una opción seleccionada, el enlace no funciona.
    ¿Cómo solucionarlo?

    1. Si se hace clic en el botón de envío, ¿la consola muestra algún mensaje de error?

  3. Hola,

    Por favor, quería saber cómo mostrar este desplegable en otra página que no sea index.php.

    1. En este caso, necesitaría agregar el código al archivo de plantilla del tema correspondiente.

  4. Quiero poner un código corto en un widget de texto para mostrar un menú desplegable con enlaces a todas mis publicaciones. Por lo tanto, necesito un código php para poner en el plugin PHPCode Snppets. ¿Me puedes ayudar?

  5. Kevin, tu código me funciona bien. Solo necesito confirmar, ¿podemos eliminar /?submit=view de la URL una vez que haces clic en el botón de ver publicación al final de la URL, se agrega automáticamente? ¿Cómo elimino eso?

    1. Esto parece ser agregado por WordPress. Podrías intentar eliminar la cadena de consulta con JavaScript después de que la página cargue, pero no se recomienda.

  6. Hola, estoy trabajando en una aplicación web de clasificados en WordPress. ¿Tienes un código de fragmento que cambie la selección desplegable (Categoría) a una vista de lista? Como el estilo de publicación de anuncios de Olx.in. Para que el usuario pueda seleccionar fácilmente viendo todo a la vez en lugar de desplazarse hacia abajo. Espero que entiendas mi problema.

  7. Agregué el código anterior a mi barra lateral en un widget de texto, pero no aparece nada en el área desplegable (está en blanco). ¿Alguna idea de por qué? ¡Gracias!

  8. Marta Mystkowska Johnsson October 30, 2014 at 8:21 am

    Hola, gran tutorial, pero me pregunto si es posible hacer dos menús desplegables. El primero elige una categoría y el segundo muestra todas las publicaciones de esa categoría y luego hay un botón (enlace) que permite ir a la publicación elegida. ¿Crees que es posible? Escribí algo de código que toma valores codificados y cambia la lista con javascript, pero me gustaría que fuera dinámico, ahora tengo que agregar cada nueva publicación a mi lista codificada en la categoría correcta, mucho lío... ¡Gracias!

    1. Sí, algo así podría hacerse, sin embargo, necesitarías usar ajax para obtener todas las publicaciones dentro de una categoría específica cuando se selecciona. No es solo una cuestión de un simple cambio al código anterior.

  9. Hola Kevin, gracias por tu tutorial. ¿Cómo crear una opción seleccionada? Uso tu código mostrando el título de mi tipo de publicación personalizado, pero cuando selecciono uno y presiono el botón de enviar, vuelve al primero (es decir, nada seleccionado).

    1. Este fragmento solo crea el menú, no hace nada más. Sin embargo, puedes usar el siguiente script en el sitio hermano de wpsnipp.com, jqsnipp.com, para el lado de jquery.

      http://jqsnipp.com/create-jquery-select-dropdown/

      Luego, en el fragmento de código anterior, cambia

      <option value="ID; ?>”>por

      Esto agregará el permalink al valor y el javascript en jqsnipp te permitirá saltar a la ubicación cuando selecciones el elemento del menú.

      1. Muchas gracias

  10. Hola Kevin,
    Muchas gracias por publicar esto. Estuve buscando por todas partes cómo lograrlo con tipos de publicación personalizados. ¿Sabes cómo puedo lograr esto para que cuando se seleccione el elemento del menú desplegable, vaya automáticamente a la página sin tener que tener un botón de "enviar"?
    ¡Gracias!

    1. Hola Chris,

      En lugar de solo $post->ID para el valor, podrías agregar

      get_permalink($post->ID) luego usa javascript para ver qué opción ha sido seleccionada.
      Si estás usando jQuery, tengo un fragmento en mi otro sitio http://jqsnipp.com que puedes
      usar para este tipo de cosas. http://jqsnipp.com/create-jquery-select-dropdown/

  11. Roberta Mahasti April 4, 2014 at 12:10 pm

    Hola, ¿puedo listar los elementos de mi portafolio? Lo estoy intentando pero... 🙂

    1. Hola Roberta,

      Supongo que quieres mostrar un tipo de publicación personalizado. Necesitas agregar el tipo de publicación al array $args. Si agregas 'post_type' => 'post', eso debería funcionar después de que cambies 'post' por el nombre de tu tipo de publicación personalizado.

      1. Roberta Mahasti April 4, 2014 at 8:16 pm

        Gracias ^^

      2. Roberta Mahasti April 4, 2014 at 8:16 pm

        Gracias ^^

  12. Hola, ¿hay alguna forma de cambiar el tamaño del menú desplegable o del campo del menú desplegable?

    Gracias

    1. En CSS, agrega
      .dropbox {
      height: 30px; /* Cambia según tu preferencia*/
      }

  13. Gracias por este fragmento. Disculpa mi inglés, haré lo mejor que pueda 🙂 Necesito una "primera línea" como "Por favor elige...". ¿Puedes ayudarme a poner esta línea en tu código? garfield853

  14. Ferry Verhoeve August 9, 2013 at 8:04 am

    ¿Dónde coloco esto??

    1. Hola Ferry, coloca el código donde desees mostrarlo en tu tema.

      1. Ferry Verhoeve August 9, 2013 at 8:51 am

        gracias

  15. ¡¡¡Perfecto!!!

  16. ¿Qué pasa si quisieras hacerlo por categoría? ¿Mostrar todas las publicaciones de cada categoría?

  17. ¿Funciona esto también con tipos de publicación personalizados?

    1. Hola Fin, sí, puedes agregar el tipo de publicación al array de argumentos, por ejemplo:

      array(
      ‘numberposts’ => -1,
      ‘post_type’=> ‘post’,
      );

      1. ¡Esto funciona muy bien y gracias!

        ¿Puedes darme un consejo para mostrar todas las publicaciones de una categoría determinada?

        1. Simplemente agrega 'cat' y el ID de la categoría

          array( 'numberposts' => -1, 'post_type' => 'post', 'cat' => '2', );

          1. ¡Gracias Kevin!

          2. Hola Kevin, gracias por publicar el código en esta página. Me ha sido de gran ayuda para organizar la barra lateral en (enlace eliminado). Por favor, en la caja "Churches of NY", me gustaría que la caja comenzara con "Select Post" — ¿cómo puedo implementar esa opción? Además, ¿cómo puedo hacer que la selección vaya directamente a la publicación sin la caja "view"? Gracias.

Agrega un comentario

Nos complace que hayas elegido dejar un comentario. Ten en cuenta que todos los comentarios se moderan de acuerdo con nuestra política de privacidad, y todos los enlaces son nofollow. NO uses palabras clave en el campo del nombre. Tengamos una conversación personal y significativa.

Lista de verificación para lanzar WordPress

La lista de verificación definitiva para lanzar WordPress

Hemos recopilado todos los elementos esenciales de la lista de verificación para el lanzamiento de tu próximo sitio web de WordPress en un práctico ebook.
¡Sí, envíame el eBook gratis!