Cerrar
Image Alt

Campos personalizados para las Entradas personalizadas en WordPress

Vamos a seguir donde lo dejamos en el artículo anterior en el que hablábamos sobre las entradas personalizadas en WordPress 3.1. Habíamos creado unas entradas personalizadas a las que llamamos Videojuegos. A la hora de crear un Videojuego nuevo teníamos esto en el panel de administración:

Crear una nueva entrada personalizada en WordPress

Los campos que podemos utilizar son los habituales para todas las entradas: el título, el contenido, los campos personalizados generales, etc…

Pero imaginaros que esta web nos la ha encargado un cliente y este nos dice que quiere una serie de campos definidos en nuestra entrada personalizada. Imaginaros que quiere un campo donde introducir la plataforma del videojuego (si es para PC, para Playstation 3, XBox 360, etc..), que quiere otro campo que indique en qué idioma está el videojuego, otro con el precio y otro que indique la edad recomendada. Lo que queremos conseguir es esto:

nuevos campos personalizados en wordpress

Esto lo conseguimos creando campos personalizados, lo cual da mucho más sentido al uso de las Entradas Personalizadas ya que ahora hay una razón para tenerlas aparte del resto de las entradas: su formato es totalmente distinto.

Creando los Campos Personalizados con add_meta_box()

La creación de nuevos campos personalizados gira alrededor de la función de WordPress add_meta_box(). Vamos a ver cómo funciona:

Parámetros:

$id – (alfanumérico) (requerido) Atributo ‘id’ que aparecerá en el DIV que rodeará el campo personalizado.

$title – (alfanumérico) (requerido) – El nombre de tu campo personalizado que aparecerá en su cabecera.

$callback – (alfanumérico) (requerido) – Función que crea el código HTML de la sección donde se introducen y editan los campos personalizados.

$page – (alfanumérico) (requerido) – El tipo de entrada donde se va a ver el campo personalizado. Puede ser ‘post’ para una entrada normal, ‘page’ para que aparezca en las páginas, ‘entrada_personalizada’ que será el slug de la entrada personalizada donde queremos que aparezcan los campos personalizados (en nuestro caso ‘videojuegos’)

$context – (alfanumérico) (opcional) – Parte de la página donde van a aparecer los campos personalizados. Puede ser ‘normal’, ‘advanced’ o ‘side’ (en la columna de la derecha). Por defecto es ‘advanced’. Tanto ‘normal’ como ‘advanced’ sitúan los campos personalizados en la columna central, pero con ‘normal’ saldrán arriba y con ‘advanced’ saldrán abajo de todo.

$priority – (alfanumérico) (opcional) La prioridad o importancia de cada campo personalizado, para mostrar unos antes de otros. Puede ser ‘high’, ‘core’, ‘default’ o ‘low’. Por defecto es ‘default’.

$callback_args – (array) (opcional) Argumentos para una función de callback en el caso de que exista. El callback recibirá el objeto $post con cualquier parámetro que se le pase con esta variable. Por defecto es ‘null’.

Para crear estos campos personalizados tenemos que abrir el archivo functions.php de nuestro tema.

Ahora que sabemos esto vamos a empezar con nuestro código (Ver el artículo Creating Custom Write panels in WordPress). Abrimos el archivo functions.php y escribimos:

Vemos que primero hemos creado una variable ($key) al que le damos el nombre que va a agrupar todos estos campos personalizados. Luego creamos un array que tendrá en su interior un nuevo array por cada campo personalizado. En cada campo personalizado tendremos un nombre, un título y una descripción.

Luego creamos una función llamada crear_meta_box donde estará la función de wordpress add_meta_box(). Vemos que como parámetros hemos pasado:

– El id que aparecerá en el HTML de los campos personalizados (‘nuevo-meta-boxes’). Si vemos el código fuente la página veremos algo así comenzando el formulario de los nuevos campos personalizados:

– Como título hemos puesto el contenido de la variable $key junto a «Características».

– La función que va a crear el código HTML la llamamos ‘mostrar_meta_box’. La veremos más adelante.

– El nombre de los campos personalizados donde se van a mostrar (‘videojuegos’). Si hubiéramos puesto ‘page’ se vería en todas las Páginas y si hubiéramos puesto ‘post’ se vería en todas las Entradas.

Parte de la página donde se van a mostrar (‘normal’).

Su prioridad (‘high’ o alta).

Formulario de los Campos Personalizados

Perfecto. Seguimos con nuestro código. A continuación creamos la función «mostrar_meta_box()» de la que hablábamos antes:

En este caso se aplicaría a textarea que tenga un id=»textarea».

Actualización: Ver comentario de Marcos de cómo hacerlo desde WordPress 3.3

Grabación de los Campos Personalizados con update_post_meta()

Ahora necesitaremos crear una función que gestione la grabación del contenido de los campos personalizados. Para ello usamos la función de WordPress update_post_meta(). Vamos a ver cómo funciona:

Parámetros:

$post_id – (numérico) (requerido) El ID de la entrada que contiene el campo que vas a editar. Por defecto, Ninguno.

$meta_key – (alfanumérico) (requerido) – La clave del campo personalizado que vas a editar. Por defecto Ninguno. En nuestro ejemplo está en la variable $key.

$meta_value – (mixto) (requerido) – El nuevo valor del campo personalizado. Por defecto Ninguno.

$prev_value – (mixto) (opcional) – El valor antiguo del campo personalizado que quieres cambiar. Sirve para diferenciar en el caso de que haya diversos campo con la misma clave, ya que sino se actualizarán todos. Por defecto Ninguno.

Ahora que ya sabemos como funciona vamos a crear la función que se encargará de grabar los campos personalizados:

Vemos que hacemos otra vez un foreach para recorrer todos los campos personalizados. Grabamos los valores de los campos que llegan del $_POST del formulario en un array, les paramos la función wp_verify_nonce por seguridad y comprobamos que el usuario tiene permiso para editar la entrada.

Llamada a las funciones creadas con add_action()

Ahora que ya tenemos nuestras funciones para crear los campos personalizados y para grabarlos tenemos que decirle a WordPress que las ejectute y cuando las ha de ejecutar. Para ello escribimos a continuación:

Y ya tendríamos nuestros campos personalizados para cada videojuego. Si hacemos click en «Videojuegos» veremos esto:

Nueva tabla en el panel de administración con los campos personalizados

Pero claro, quedaría mucho mejor si pudieramos ver en un solo golpe de vista nuestros campos personalizados y sus valores:

Conseguir esto no es muy complicado. Abrimos de nuevo el archivo functions.php de nuestro tema. Primero vamos a crear los títulos de las columnas y luego vamos a poner sus valores:

Mostrando los campos personalizados en la web

Eso sería todo en cuanto al área del panel de administración. Pero ahora necesitamos mostrar los campos personalizados en nuestra web. Partimos de donde estábamos en el artículo anterior. Teníamos esto:

El código era este:

Vamos a añadir los campos personalizados. Tendríamos que añadir dentro del loop lo siguiente (los bloques que están comentados, uno crea el array con los campos personalizados que lo llamamos $data y el otro los muestra):

Tenemos ya entonces nuestros campos personalizados:

Y eso sería todo. El artículo se ha hecho más largo de lo previsto, por lo que dejaré para el siguiente la parte de las taxonomías y así redondear nuestras nuevas entradas personalizadas.

Comentarios

  • Es increíble lo que he aprendido en un solo día con tu blog realmente Dios te devuelva el triplicado la bondad de compartir información, y aportando un granito de lo que aprendí, encontre que se puede mostrar los resultado de la entrada personalizada en la home del template de esta forma

    con esto muestra la descripción, el thumbail y el titulo.

    PD: QUizas haya alguna forma mejor a mi me funcionó esta.

    5 abril, 2011
    contestar
  • Carlos Sanchez

    Gracias maestro!! hace tiempo q necesitaba aprender algo de esto….

    8 abril, 2011
    contestar
  • martin

    Hola Juan

    se puede hacer que los campos personalizados varíen dependiendo de alguna variable?

    me explico: estoy armando una web para una casa de motoimplementos (cortacesped, motosierras, etc) y quiero ingresar cada motoimplemento en una entrada personalizada a la que voy a llamar ‘producto’, es decir, será una entrada personalizada pero en el fondo bastante genérica, donde voy a distinguir cada motoimplemento desde una taxonomia la cual se va a llamar ‘motoimplemento’, y ésta taxonomia va a estar integrada por los motoimplementos en si : motosierras, cortacespedes, generadores, bordeadores de cesped, etc etc etc.

    Entonces, lo que quisiera es modificar tu explicacion para que los campos personalizados que se muestren en la edicion del post varíen dependiendo que taxonomia tiene asignado cada producto. Se entiende?

    Considero que para ello primero debería obtener la taxonomia asociada a cada producto , y ahi armar un condicional que me cargue un array distinto para cada taxonomia, es decir, que en vez de ser un solo array fijo (como el de tu ejemplo) que el array varíe dependiendo que taxonomia se le asignó al post.

    es posible tal cosa? estoy trabajando en ello pero no tengo bien claro como lograrlo, aun

    saludos!

    9 mayo, 2011
    contestar
      • martin

        gracias Juan,

        pero no es eso lo que trato de hacer,

        lo que quiero hacer es modificar tu funcion ‘mostrar_meta_box’, para que e?ta determine cual término de la taxonomia ‘motoimplemento’ tiene asignado el post, y si, por ej, el termino asignado es ‘motosierra’ se carge ‘x’ array en dicha funcion, ahora si el termino es ‘bordeadora de cesped’ se cargue el array ‘y’ ,

        se entiende? quiero cargar distintos arrays dependiendo de uan variable, estoy modificando las funciones que tu muestras, no estoy interesado en las funciones de plantilla aún. Estoy en ello, intento y luego cuento,

        gracias
        un abrazo

        9 mayo, 2011
        contestar
        • Alberto

          Hola Martín. Casi 4 años depués de que Juan escriba este post, el tema sigue vivo.
          Yo tengo el mismo problema que tu. Pretendo que los campos personalizados cambien en función de si la entrada es de un tipo y otro. ¿Encontraste la solución? Sería interesante que la compartieses.
          Gracias de antemano.

          29 enero, 2015
          contestar
          • Saludos

            Prueba con las funciones condicionales is_category()
            Dentro de un if, puedes indicar que si es de una categoria == «algo»
            entonces que haga una cosa
            else
            otra cosa
            endif

            15 junio, 2015
  • martin

    bueno, hasta ahora el intento ha sido en vano, no estoy obteniendo el resultado que quiero

    primero modifiqué los arrays con los campos :

    no me funciona, ya que me muestra los mismos campos personalizados tanto para las entradas con el termino ‘motoguadana’ como para las con el termino ‘cortadora de cesped’
    estara el error en la manera de determinar cual es el termino de la taxonomia señalada (wp_get_object_terms)?

    saludos

    10 mayo, 2011
    contestar
      • martin

        gracias Juan

        wp_get_object_terms debería devolverme un array, quizas tenga que recorrerlo y comparar, cuando lo intenté ayer no me salio tampoco

        10 mayo, 2011
        contestar
  • Hola gente,
    puede ser que el falte alguna parte a este código? porque estuve probando y no logre que me apareciera la opción «videojuegos» en el backend.
    Realmente me interesa mucho el tema.
    Tenes unas entradas de wordpress realmente interesantes.
    Saludos.

    17 agosto, 2011
    contestar
  • Bueno, ya lo resolví… me costo (tengo las neuronas quemadas) 😛

    17 agosto, 2011
    contestar
      • David

        Hola Juan, te rogaria que me dijeras como poner los campos personalizados como tu haces en este post, Peeero…. en las entradas normales de wordpress. Se que se puede pero nose como.

        Muchas Gracias

        12 septiembre, 2011
        contestar
        • Jordi

          Hola, ¿has podido poner los campos en las entradas normales?

          Gracias

          23 noviembre, 2011
          contestar
      • Me faltaba una línea de código. ¿se pueden agregar categorías que sean exclusivas de esta sección?

        20 febrero, 2012
        contestar
  • Buenos dias.
    He provado el código y no me aparece nada de nada.
    Creeis que el código es correcto?

    3 septiembre, 2011
    contestar
  • Francisco

    Gran artículo, en la parte:

    Nueva tabla en el panel de administración con los campos personalizados

    Al hacer eso, borra otra opciones que salen por defecto como «Fecha» y como las que te da el all-in-seo-pack que son «SEO keywords» entre otros…

    ¿Como puedo hacer que salgan también?

    Un saludo

    8 septiembre, 2011
    contestar
  • Francisco

    Además, una duda adicional… como puedo hacer que la característica pueda permitir ordenar los post?

    Por ejemplo, al hacer click en nombre, ordena de A-Z o Z-A … pero hacer un click por ejemplo para ordenar por una característica como «edad» o algo así.

    Un saludo

    8 septiembre, 2011
    contestar
  • Bueno.. tengo un problemilla, he seguido paso a paso todo el tutorial pero no consigo que me muestre los campos personalizados. Y también me interesaría saber como se hace lo que pregunta Francisco.

    un saludo

    29 octubre, 2011
    contestar
  • Hola una pregunta en temas de woo yo he visto que se puede poner diferentes layout para cada post con campos personalizados también imagen para hacer slide eso como se puede hacer poner un campo para poner varias imagenes y que sea un slide???

    18 noviembre, 2011
    contestar
  • Gonzalo

    Me encanta el post pero al probarlo me surgia un problema, lo encontre!
    Al mostar los campos en la web, en el array pusiste Videojuegos, con mayucula y en el functions.php, la variable $key lo tienes como videojuegos en minusculas.
    Muchas gracias, trabajare con esto a ver que consigo

    23 diciembre, 2011
    contestar
  • Matias

    Juan, gracias a tu post logramos personalizar las entradas. Ahora surge un inconveniente, de qué forma puedo llamar a esa «categoría» de entradas desde el menú del sitio?. Si listo las categorías en «Menú» no me aparecen las creadas a partir del tutorial y lo que quiero es ir a todas las entradas de determinada «categoría» directamente desde el menú.

    Desde ya muchas gracias por la ayuda.
    Matías

    13 enero, 2012
    contestar
      • Matias

        Si aparecen las entradas individuales, lo que no aparece son las categorías de esas entradas. Lo que queremos es que liste desde el menú todas las entradas de una categoría.
        Muchas gracias nuevamente.
        Matías

        16 enero, 2012
        contestar
  • Ana

    Hola! ante todo muchísimas gracias porque esto me ha resultado de muchísima utilidad.
    Tengo 2 consultas. Quiero que algunos campos sean input=text y otros textareas. Eso es posible?
    Otra cosa. Donde debo agregar el script para que aparezcan las funciones en el textarea?
    Desde ya, muchísimas gracias por tu tiempo

    31 enero, 2012
    contestar
  • Claudio

    Estimado Juan, no he podido lograr agregar un checkbox ni un select ya que cada tutorial que encuentro tiene formas distintas de programar los campos personalizados y cuando trato de usar esas formas me salen errores que la verdad no sé como solucionarlos ya que no soy programados, es posible que me des alguna idea o el código para poder agregarlos? Muchas gracias desde ya.

    1 marzo, 2012
    contestar
  • Hola amigos,

    No se que hago mal, pero no consigo mostrar mis campos personalizados en mi entrada personalizada llamada «Fiestas».
    Por mas que reviso mi código no visualizo el error. Si fueran tan amables de ayudarme estaré enormemente agradecido. Les copio mi código de la entrada personalizada así como el de los campos personalizados para que puedan verlo:

    7 mayo, 2012
    contestar
    • iuupsss no puse la etiqueta para el code, bueno, es copy paste del codigo del articulo cambiano la funcion:

      por:

      7 mayo, 2012
      contestar
  • Greed

    Hola, me gustaría saber como podría hacer que el input de precio fuera a la derecha y no a la izquierda al editar el post. (que fuera junto a las imágenes destacadas (solo cree el campo precio, ya que solo necesito ese, pero quiero que vaya a la derecha)

    29 junio, 2012
    contestar
  • Kurokarsu

    Hola, que tengría que hacer para crear un checkbox??? y luego para obtenerlo y ponerlo como condicional??

    29 junio, 2012
    contestar
  • marcos

    Eres un crack. Muchísimas gracias por este post. Me ha sido de gran ayuda.

    22 noviembre, 2012
    contestar
  • marcos

    Juan, mira, quizás se pueda hacer un update con una cosa que he descubierto. Para añadir el tiny se puede usar una función que han incorporado en la 3.3 y que nos ahorra el jquery.

    http://codex.wordpress.org/Function_Reference/wp_editor

    entonces, por ejemplo, en un text area llamado valor_dirigido:

    22 noviembre, 2012
    contestar
  • marcos

    Lol, a la tercera (esperemos) va la vencida:

    22 noviembre, 2012
    contestar
  • Stalin Lozada

    No he podido imprimir los campos, tengo la ultima versión de wordpress.

    30 noviembre, 2012
    contestar
  • Me quito el sombrero ante este tutorial!!! Genial!!!

     

    PD: Hay una cosa que no logro que funcione, la parte de
    Nueva tabla en el panel de administración con los campos personalizados
     

    Un saludo y gracias por todo!!!

    31 octubre, 2013
    contestar
  • Anukode

    Hola a tod@s!!

    Vengo utilizando este magnífico Script en un sitio que realicé hace ya un tiempo y he podido comprobar que muestra un error en el Back-end en los input de las entradas nuevas realizadas para post, páginas y post type. (Desde la versión de PHP 5.4.25 reporta este error solo para entradas nuevas. Las ya publicadas no se ven afectadas).

    El BUG es este:

    Anteriormente corría con la versión PHP 5.2.17 y ningún problema.

     

     

    Un saludo y gracias de antemano!!

     

     

    22 febrero, 2014
    contestar
  • Jorge

    Buenas tardes Juan,

     

    En primer lugar muchas gracias por tu blog, estoy aprendiendo mucho.

    Tengo un problema con el jquery para mostrar el editor de texto del textarea.  No se donde debo colocar el jquery para que funcione. En cuanto a la función que aporta Marcos, tampoco consigo que funcione.

    Un saludo y muchas gracias.

     

     

    25 febrero, 2014
    contestar
  • Adrian

    Hola muchas gracias por la aportación,   pero que pasaría si quisiera mostrar estos campos, por ejemplo en alguna parte del index (ósea en la página principal). Donde ya no estarían en el custom post que he creado?

     

     

    13 marzo, 2014
    contestar
  • hola, y para agregar campos a la categoria es igual?

    Saludos.

    31 julio, 2014
    contestar
  • Mashirito

    Yo tengo este mismo problema, al crear una ficha nueva los campos personalizados me aparecen con el siguiente mensaje:

    Si los borro y guardo me aparecen ya en blanco las siguientes veces, pero me gustaría poder corregir el error. ¿Podrías ayudarme por favor?

     

    Gracias! 🙂

    14 agosto, 2014
    contestar
    • Jorge Almeida

      Te pasa cuando no hay datos guardados.
      Yo lo solucione con un Isset :

      y si es verdadero ( si la variable está definida y no es NULL ) lo recojo en otra variable ($value) que es lo que imprimo luego en el value del html :

      y si es verdadero ( si la variable está definida y no es NULL ) lo recojo en otra variable ($value) que es lo que imprimo luego en el value del html :

      espero que ayude.

      Genial el tutorial

      10 octubre, 2014
      contestar
  • Mashirito

    Por si a alguien le interesa lo solucione, lo hice de la siguiente manera en este el input:

    Consulté si la array tenía algún valor antes de nada con empty() en el mismo value=»» y si está vacio lo escribe.
    En lugar de esto:

    Puse esto:

    14 agosto, 2014
    contestar
    • Mashirito

      El editor va bastante mal 🙁 No hay manera en modo visual no me deja escribir y en modo texto, no pega bien el codigo como habrás visto

      Saludos

      14 agosto, 2014
      contestar
  • ¡¡FABULOSO!!
    Soy una aprendiz de aprendices y lo has explicado de tal forma, que hasta yo me veo capaz.
    Gracias por desentrañar los misterios de WordPress 🙂

    23 enero, 2015
    contestar
  • no carga media ni puede subir fotos

    11 mayo, 2016
    contestar
  • Matias Araus

    Mis felicitaciones por el gran trabajo que tiene cada entrada de su blog.
    Estan muy bien explicados y con los ejemplos, abortan todas las dudas que pueden quedar.

    Saludos y gracias por seguir compartiendo material de excelente calidad.

    20 junio, 2016
    contestar

Escribe un comentario