Crear una lista de productos con WordPress 3.0 usando Entradas personalizadas, campos personalizados y taxonomías

Una de las grandes novedades que incorpora WordPress 3.0 es la posibilidad de crear Entradas Personalizadas (Custom Post Types), es decir un nuevo tipo de entradas parecidas a las Entradas normales y a las Páginas, y que aparecerán también de manera separada en el menú de la izquierda del administrador de WordPress. ¿Qué ventajas nos ofrecen las Entradas Personalizadas? Una mayor facilidad de uso de nuestro tema, estructurando mejor los distintos tipos de entradas. Por ejemplo, si queremos insertar una lista de productos con una serie de características comunes, podemos crear una estradas personalizadas que se llamen Producto y que estén configuradas de manera específica para insertar dichos productos. En vez de decirle a nuestro cliente que cree una entrada normal y que rellene toda una serie de campos personalizados sólo utilizables para insertar un producto pero no para cualquier otra entrada, que no se equivoque con las categorías que son sólo para productos y no para el resto de entradas, etc.. ahora símplemente tendrá que hacer click en “Productos” y rellenar cada campo específico para ese tipo de entrada.

Pero como siempre, esto se verá mejor con un ejemplo. Vamos a crear una entrada personalizada que se llame “Productos”. Con el permiso de Friendware (su web la hice yo hace un par de años) vamos a usar algunos de sus juegos para PC. Cada producto va a tener un título, una descripción, un precio, un fabricante, una plataforma y una imagen.

Vamos a usar campos personalizados para el precio y el fabricante y taxonomías personalizadas para la Plataforma (en realidad Fabricante debería ser una taxonomía, pero lo pongo como campo personalizado para ver mejor cómo se crean varios).

En el administrador vamos a tener en el menú de la izquierda:

Si hacemos click sobre Añadir tendremos:

Y al hacer click sobre Editar tendremos una tabla con todos los productos:



Pero ahora viene lo mejor.
Si tenemos activados los enlaces permanentes podemos ir a una url que sea por ejemplo www.miweb.es/Productos/ donde se vean todos los productos introducidos con los estilos que hayamos definido:



Bien, ya sabemos lo que vamos a crear. Ahora vamos a ver paso a paso cómo crearlo.
No he visto ningún artículo completo que indique todos lo pasos de manera completa. Por ello me he basado en diferentes artículos y webs. Sus enlaces están al final del artículo.

Paso 1: Crear una Entrada Personalizada

La mejor manera que he encontrado para crear una Entrada Personalizada es utilizando la clase creada por Matt Wiebe. La razón es que además de crear una función que nos permite crear Entradas Personalizadas con gran facilidad, añade a la función que habitualmente crea entradas personalizadas (register_post_type) una serie de funcionalidades extra:

1. URLs personalizadas para cada Entrada Personalizada. (ejemplos http://miweb.com/productos/, http://miweb.com/productos/page/2/, http://miweb.com/productos/feed/ )
2. Archivos personalizados para cada Entrada Personalizada, por ejemplo producto/index.php o producto.php en el directorio de nuestro tema.
3. Páginas individuales personalizadas: WP busca el fichero single-producto.php (en su defecto por single.php). Con esta función podemos usar producto/single.php para una mejor organización..
4. Añade clases a body_class() y a post_class().
5. Auto genera las etiquetas apropiadas para el Administrador si no suministras una.

El punto 1 me parece muy importante, ya que WordPress 3.0, al menos en la beta 2, no crea por defecto una url donde podamos ver todas las entradas de una misma entrada personalizada (por ejemplo, todos los productos).

El código, que habría que llevar al archivo functions.php, lo podemos descargar desde la web de Matt Wiebe. Una vez tengamos ese código pegado en el archivo functions.php de nuestro tema, escribiremos a continuación para crear la Entrada Personalizada “Producto”:

Aquí está el código completo. Hay que tener en cuenta que Matt Wiebe está continuamente mejorando esta función añadiendo nuevas características, por lo que estad pendientes de sus actualizaciones.

Del código de Matt Wiebe hay que destacar esta parte:

La línea que pone ‘supports’ crea una cadena con los campos que soporta la Entrada Personalizada, en este caso el Título (title), el Contenido (editor) y la Imagen Destacada (thumbnail). Podemos ver todos los componentes posibles y más información sobre register_post_type en la web de wordpress. Como vemos, podríamos haber añadido ‘author’, ‘excerpt’ o ‘custom-fields’ por ejemplo.

Ahora podemos crear en el directorio de nuestro tema un archivo producto.php que recoja todos los productos introducidos y un archivo single-producto.php que muestre cada producto individual.

Archivo producto.php:

Ojo: En la línea p class=”caracteristicas” hemos incluido la taxonomía “Plataforma” que aún no hemos creado (la creamos más abajo).

Archivo single-producto.php:

Una vez tengamos todo este código listo podremos introducir nuestros Productos y podremos verlos todos en la url www.nuestraweb.com/Productos gracias a producto.php y podremos ver cada producto en concreto en la url www.nuestraweb.com/Productos/nombre-del-producto gracias a single-producto.php (hay que tener activados los enlaces permanentes. Si sale “página no encontrada” volved a grabar los enlaces permanentes ya que a veces necesitan actualizarse).

Paso 2- Crear los Campos Personalizados

A continuación vamos a crear los Campos Personalizados Precio y Fabricante para nuestras Entradas Personalizadas. Lo haremos siguiendo este artículo de Nettuts+. Ahora podremos darle a nuestros campos personalizados nombre propios claros para saber lo que es cada uno (en este caso Precio y Fabricante). Para ello añadimos a functions.php este código:

La primera linea indica que cuando se inicialice el panel de administración se llame a la función admin_init(). Esta función dice a WordPress que añada un área llamada “Opciones Producto” para cualquier Entrada Personalizada llamada Producto y que use la función meta_options() para mostrar los campos del formulario. Puedes leer más sobre add_meta_box aquí. meta_options() obtendrá entonces cualquier valor preexistente y lo mostrará en el formulario. Las dos lineas de acción que siguen a la primera línea hacen que cuando se grabe una entrada se llame a las funciones guardar_precio() y guardar_fabricante() que utilizan update_post_meta() para añadir o actualizar los campos personalizados “Precio” y “Fabricante”.

Paso 3 – Crear Taxonomías personalizadas asociadas

Una vez tengamos nuestras Entradas Personalizadas es posible que queramos tener una serie de Taxonomías que nos ayuden a clasificar los distintos productos según determinadas categorías. Podemos ver más información sobre las taxonomías en el artículo Taxonomías en WordPress.

Vamos a crear, como dijimos, una Taxonomía personalizada llamada “Plataforma”, donde podremos poner si el juego es para PC CD-ROM, Playstation 3, etc… Para ello escribimos en functions.php:

Puedes encontrar más información sobre la función register_taxonomy() en la web de WordPress. Aquí creamos una nueva Taxonomía llamada “Plataforma” y la asociamos a la entrada personalizada “Producto”. Para poder ver luego la taxonomía escribiríamos (como hemos visto más arriba en producto.php):

Paso 4 – Crear la tabla de productos en el panel de administración

Vimos al principio de este artículo que al hacer click sobre Editar en Producto salía una tabla con el nombre de cada producto, su descripción, precio, fabricante y plataforma. Esto no se crea por defecto. Para conseguirlo, tal y como vemos en el mismo artículo de nettuts+, hay que añadir en functions.php:

En prod_edit_columns() tenemos un array donde los índices (keys) de cada variable se usan para referenciar cierta información de las entradas que definimos en la segunda función, prod_custom_columns() y donde los valores son las cabeceras de las columnas. En prod_edit_columns() hay 6 columnas pero sólo mostramos 4 en prod_custom_columns() ya que ‘cb’ y ‘title’ son parte de los índices por defecto de WordPress para los que ya tiene asociaciones creadas.

Bueno, ¡y eso sería todo! Con este código adecuadamente incluído podemos tener las pantallas que veíamos al principio del artículo. Pero como véis hay mucho campo para ampliar las posibilidades que se nos ofrecen con las Entradas Personalizadas. Aquí hemos hecho una lista de Productos, pero podría haber sido las habitaciones de un hotel, una lista de canciones de distintos autores, una lista de libros o cualquier cosa que se nos ocurra.

Otras lecturas recomendadas

Smarter Custom Post Types
Rock-Solid WordPress 3.0 Themes using Custom Post Types
Custom post types in WordPress
Showing custom post types on your home/blog page
Custom Post Types in WordPress 3.0
Extending Custom Post Types in WordPress 3.0
Introducing WordPress 3 Custom Taxonomies

54 comentarios en “Crear una lista de productos con WordPress 3.0 usando Entradas personalizadas, campos personalizados y taxonomías

  1. muy beno el artículo,

    realmente te felicito.

    trabajando todo el código, he visto que hay un error a la hora de crear los “custom field”, más bien a la hora de grabarlos, ya que si luego se realizan cambios en function.php, si pierden todos los valores de los “custom field” para todos los “post”.

    Nettuts+, comenta en su página este error.

    saludos

    1. Hola dni,

      Si, he visto comentarios al respecto en el articulo de Nettuts+, tal y como comentó Toni. La verdad es que llevo unos meses muy liado (además de haber tenido una niña ; ) ) y no he podido dedicarle tiempo al blog. Espero que a partir de la semana que viene vuelva a publicar y contestar preguntas en condiciones. Mira en las contestaciones al artículo de Nettuts, hay una referencia al problema que me indicas y una posible solución que no he podido probar aún. En cuanto encuentre un rato actualizo el artículo. Gracias.

  2. tal cual lo dice toni, quiero cargar un producto y no me muestra el campo correspondiente para registrarlo …

    sería bueno encontrar la solucion, dado que mi blog se ve muy diferente a las imagenes que has posteado al inicio del articulo

    1. Hola Martin,

      Espero poder revisar el artículo completo en pocos días. Se hizo con la beta de WordPress 3 y quizás haya que realizar cambios.

  3. tremendo aporte…

    apropósito, llegué aquí buscando como usar la función add_rewrite_rule de wordpress, he leido bastante y he implmentado los concejos al pié de la letra pero no logro hacer que wordpress reconozca la regla, alguna idea por ahí??

    gracias

  4. Bueno, logré arreglar el bug de los campos personalizados que se borran solos ,

    el fix es el siguiente: hay que agregar una línea a la función que guarda los campos personalizados; las mismas entonces quedan así:


    function guardar_precio(){
    global $post;
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
    return $post->ID;
    }
    update_post_meta($post->ID, "precio", $_POST["precio"]);
    }
    function guardar_presentacion(){
    global $post;
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
    return $post->ID;
    }
    update_post_meta($post->ID, "presentacion", $_POST["presentacion"]);
    }

    y ahora sí quedan grabados los inputs de los campos personalizados!

    saludos

  5. Me vino de 100, estoy renovando mi sitio y con tu post se me vinieron muchas cosas a la cabeza Juan.

    No había leído los comentarios, tenía también el mismo error que se borraban los post al editar functions.php. Gracias Martin!

  6. Para darle un mejor toque de diseño a los label e input les dejo el siguiente code:

    Saludos

  7. Hola Juan, me encanto el tuto, ahora bien queria saber que plugin es el mas completo y recomendable para hacer esto mismo, pero no a mano

  8. Buenas noches,

    Muchas gracias por el artículo, me ha sido de gran ayuda. Configurando todo en local funciona perfectamente, pero en el servidor, con la version 3.0.3 y la 3.0.4 me da un error

    Parse error: syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or ‘}’ in /var/www/vhosts/pegasa.es/httpdocs/wp-content/themes/pegasa/functions.php on line 44

    A alguien más le ha pasado.

    Muchas gracias de antemano.

  9. Muy buen tutorial, gracias.

    Pero tengo un problema, no muestra los productos; no tenia activos los permalinks, los active, actualize el del producto y aún asi me dice “No encontrado”

    Ps. note que si cambiaba el en lace de miweb.com/producto por miweb.com/productos si me muestra el listado, pero al querer ver el producto el en lace se cambia automaticamente a miweb.com/producto y no muestra nada.

    1. Hola woch, ¿Qué enlace tienes para ir al producto en cuestión? miweb.com/productos/nombre-del-producto?
      Intenta sino volver a grabar los enlaces permanentes.

  10. Bueno, después de solucionar el tema de la compatibilidad de la función no consigo listar los productos.

    La página http://www.misitio.com/Producto/nombre-producto si que me muestra el producto, pero no me cuando quiero ver
    http://www.misitio.com/Producto me dice “No se encuentra la pagina”. Luego parece que hay problemas también cuando hay una página single.php, que deja de funcionar single-producto.php

    Alguna solución???

    Muchas gracias!

  11. Hola, mil gracias por el tutorial, he realizado todos los pasos con la última version del script de Matt Wiebe, quisiera saber si en la administración hay forma de que en la table que se crea uno pueda filtrar los resultados según el título de la columna.
    y otra dudahice algo y la opción de editar y eliminar se me borró que puede ser, gracias, buenísimo el tuto me sirvió mucho.

    1. Hola. Ayer actualicé tambien a la última versión del script y me occurre lo mismo. No puedo editar ni borrar entradas creadas anteriormente con custom post type y verve meta boxes. Gracias por el tutorial, está genial.

  12. Muy bueno el articulo, la verdad he buscado muchos ejemplos de cosas para wordpress y me sorprendi cuando vi este, es de gran ayuda, muchas gracias, voy a probarlos.

  13. Pues a mi todo esto de las taxonomias y las entradas personalizadas me parece innecesario… Hasta hace poco no tenía ni idea de lo que eran y diseñe una web con todo lo que se supone que hacen éstas tan sólo haciendo un bueno uso de las condicionales y de los campos personalizados. Podéis verla online: Susurrame.es

    El resultado es el mismo y basta con tener conocimientos básicos de WP.

  14. Hola, estoy revisando información sobre los custom post fields, y me gustaría si podríais confirmar que al crear varios campos personalizados para un Post Type, por ejemplo ‘producto’, estos campos también apareceran y se guardarán vacios en los post normales de wordpress. He creado un Post Type ‘producto’ con 4 campos nuevos, y cuando hago un nuevo post del blog (no ‘producto’ ) al guardar el post me aparecen los 4 campos vacíos del post type ‘producto’. Esto es así? si creo 4 post types con varios campos, se guardan todos juntos y vacíos?

    Gracias y saludos

    1. Hola Javier,

      Si creas campos personalizados para las entradas personalizadas estas te deberían de salir al crear una entrada personalizada de ese tipo, pero no en el resto de entradas….

      1. Gracias por la respuesta. Los campos personalizados no salen visibles como tales para el resto de entradas, pero si que se muestran al activar las ‘opciones de pantalla’ -> Campos personalizados.

        He usado este código:

        Me preocupa que se vayan acumulando campos en la base de datos y que se guarden vacíos incluso al crear una entrada básica.

          1. Confirmado, se guardan los campos vacios en la tabla wp_postmeta.

            Entonces, ¿esto por definición de los campos personalizados debería ser así o puede ser un error mio de programación con los campos personalizados?

            Pienso que es un tema importante antes de empezar a crear campos personalizados para cualquier proyecto.

            Gracias y saludos.

          2. Buenas a todos,
            Ante todo muy buen articulo.
            No se si serviria, pero para evitar que se graben los campos vacíos se me ocurre añadir la siguiente linea en la función de guardado del campo.

            Simplemente lo que he añadido es el condicional para que solo actualice con el campo tipo si el post_type es igual a mi tipo de entrada.

            Un saludo

  15. Hola Juan, estuve utilizando este tutorial, mi problema es que cuando voy a crear un producto no me aparece la opción de seleccionar la Plataforma, porque sera??
    si podes responderme a mi correo mejor, sino no hay problema
    muchas gracias y felicitaciones por el tutorial.!

    Saludos.!

  16. Por más que lo intento no logro listar los elementos de mi tipo de post, el single-viaje funciona, pero el viaje.php me lleva a la home page y no aparece nada. En este momento estoy usando el tema prospect. Si alguien saber que está ocurriendo, por favor ayudeme

    1. Ya no se preocupen por responder. Logré solucionar el problema creando una variación para que se listara perfectamente y poner administrar la forma (aunque me dio un poco de flojera hacerlo XD)

  17. Estimados.
    Realice este ejemplo y me funciona OK, tengo otro y también me funciona OK, ahora mi pregunta, necesito dejar que se registren los usuarios y este esta en “autor”, ósea cualquiera puede registrarse e ingresar nuevos productos…
    Pero probé que al ingresar en “añadir”, y me voy al tiro a realizar clic en “Publicar” sin escribir ningún texto en ninguna parte, queda registrado como un nuevo Producto, pero este esta todo en blanco…
    ósea que se puede realizar para “validar los campos” en Producto al igual que en “Entradas”?
    Gracias de ante mano..

  18. Desde ya muchas gracias por la informacion valiosa relacionado a WordPress que realizas , la verdad del caso aqui viendo muchos articulos que me han interesado y he aprendido mucho.
    Tanto tanto con el articulo de Taxonomías en WordPress https://www.emenia.es/taxonomias-en-wordpress/ ,
    tambien como crear Entradas Personalidas
    https://www.emenia.es/nuevo-wordpress-3-1-archivos-entradas-personalizadas/
    y todo me ha funcionado de maravilla. sumando todo eso, más este articulo esta genial…..

    Pero disculpa mi ignorancia al respecto ( estoy haciendo mis pininos en PHP ) , lo que sucede que cuando exporto la ENTRADA creada de SERIES ( al igual que PRODUCTOS ) en la cual ya le implemente varias taxonomias .
    No puedo realizarlo por fechas y menos realizarlo escogiendo las TAXONOMIAS que deseo.

    Porque al exportar la ENTRADA PERSONALIZADA ” SERIES ” unicamente se puede realizar todo de golpe. Ya tengo muchos articulos vinculados , y en la medida que avanza el tiempo el ARCHIVO de EXPORTACION aumenta su TAMAÑO.

    ¿ quisiera saber si se puede realizar algo al respecto , o habrá que añadir alguna funcion al PLUGIN IMPORT ?

    Gracias por Todo y espero no incomodar a nadie.
    Suerte XD

    1. Hola!

      Entiendo que estás exportando a través de Herramientas/Exportar? Si queda demasiado grande para poderlo importar en otro WordPress (es eso lo que necesitas?) puedes intentar exportar directamente la base de datos entrando en tu phpmyadmin o troceando el archivo XML que genera la exportación. En este último caso tendrás que tener cuidado de que los archivos troceados tengan bien las cabeceras etc..

      1. Desde ya Gracias por tus consejos .
        Si la exportacion lo esta realizando atravez de Herramientas / Exportar .Voy a poner en PRACTICA tus valiosos consejos probando ambas alternativas.
        Gracias , y Exito XD

  19. Hola, muy buen post. Antes de formular mi pregunta quiero que sepan que soy un novatillo en esto del WordPress, así que por fa, paciencia jeje.

    Bien, mis preguntas son: ¿dónde y cómo debo pegar el código de Matt W.?
    ¿Y cuál es el código que debo pegar?

    Saludos desde Dominicana.

    Gracias de antemano.

  20. excelente tuto… pero tengo una duda….??? se podrian mostrar esos videojuegos ordenados por taxonomia (en este caso plataforma) independientemente del orden en el que se hayan introducido en el backend???

  21. Hola, me funciona perfecto y de maravila el tuto…

    Pero como siempre wordpress es un reto a las ideas…las cosas se van complicando!!!

    Tengo una pregunta….

    Yo cree el custom post type para libros, pero además creé otro para Videos, como haciendo los dos por separado se iba mal pues estan juntos así:

    Y ahora viene el truco…

    quiero agregar 2 meta box a libros y otro distinto para videos pero duplicandolo y cambiando los valores no funciona….alguna sugerencia?

    Asi quedó mi código, y no hace falta que lo digan…está mal porque murió….con el metabox de libros… o sea autor y editorial funcionó perfect…para videos hice duplicarlo y que todo colapsara y se ve en blanco

    De ante mano te agradezco una ayuda

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *