WordPress: Cómo crear y mostrar Custom Fields o campos personalizados




¿Quieres aprender diseño y desarrollo en WordPress más avanzado? Échale un vistazo a mi Academia 🤓 🔸 Suscríbete a mi canal (si quieres :P)🔸 :
❔¿Quieres contactar conmigo?❔ Mándame un mensaje a:

💡 Para consultar el código o más información visita💡:

¡Buenos días! En este vídeo-tutorial vamos a ver cómo crear y mostrar campos personalizados (o custom fields) en WordPress. ¡Vamos allá!

Transcripción del vídeo:

Para esta tarea vamos a necesitar un plugin así que nos vamos a Plugins – Añadir nuevo y buscamos este plugin que se llama Advanced Custom Fields. Lo instalamos, lo activamos y nos vamos a Custom Fields – Custom Fields para crear nuestro primer campo.

Antes de crear un campo el plugin nos pide crear un grupo así que simplemente es darle aquí y darle un nombre al grupo por ejemplo Pizzas, y aquí en añadir campo vamos a crear nuestro primer campo. Voy a darle el nombre de Ingredientes como hemos hablado, el nombre del campo se va a poner solo, este campo es obligatorio, es muy importante. El tipo de campo será un texto y las instrucciones serán por ejemplo que los ingredientes se tienen que poner en minúscula y separados por comas. Luego estas instrucciones aparecerán en el editor del post. Vamos a poner que este campo es obligatorio y el resto de valores podemos dejarlos por defecto.

Ahora le damos a publicar y ya tenemos creado este campo y si nos vamos al editor de la entrada y actualizamos veremos que aquí tenemos este campo para rellenar. Y el prepend es lo que sale aquí de “Ingredientes:”. Vamos a rellenar los ingredientes, vamos a ponerlos separados por comas y vamos a publicar. Una vez hecho esto y si nos vamos a la entrada veremos que esta información no nos aparece en ningún lado porque la hemos creado pero no hemos dicho dónde va a aparecer así que vamos a por el tercer paso para mostrar este campo.

La forma correcta de mostrar estos campos es a través del código, modificando la estructura del tema así que como véis aquí estoy en la carpeta de la web (por FTP) y nos vamos a la carpeta del tema. Y por ejemplo si queremos modificar la entrada sería el single.php. Pero este tema está hecho de tal manera que si os fijáis aquí el contenido se carga desde otro archivo que es content.php así que nos vamos a content.php.

Aquí si os fijáis está el div del header de la entrada, entry-header, y lo que nos interesa es esto de aquí, que es una condicional para mostrar el título de lo que es una entrada del blog y aquí debajo del título vamos a poner lo siguiente. Vamos a abrir un párrafo y vamos a poner “Ingredientes: ” para que el campo personalizado luego nos imprima ingredientes justo después. Y para mostrar el campo personalizado lo que tenemos que poner es esto: the_field(”) y entre comillas ponemos el nombre del campo. El nombre es que se nos ha creado aquí automáticamente que es “ingredientes”. Lo podemos copiar desde aquí y lo pegamos justo en esta función para no equivocarnos. Y finalmente vamos a cerrar este párrafo para que no haya un error en el HTML. Y si volvemos a la entrada y cambiamos estos ingredientes por cualquier otro y actualizamos veremos que todo se mantiene pero sólo cambian los ingredientes.

Vamos a hacer un ejemplo más para que se os quede todo bien. Vamos a crear otro campo pero esta vez vamos a crear un campo de precio para indicar el precio de esta pizza. El nombre del campo como véis se crea solo y vamos a poner aquí el tipo de campo Número en vez de texto y vamos a ponerlo requerido. Vamos a rellenar lo de instrucciones y vamos a actualizar. Ahora recargamos esta entrada y vemos que ya nos aparece el campo de precio, vamos a ponerle 15 y actualizamos.

Como antes, si recargamos aquí no aparece nada así que para modificar esto nos vamos a la estructura de nuestro post y voy a copiar esto que hemos puesto antes para utilizar también esta estructura. La pego aquí y ahora en lugar de ingredientes vamos a poner precio para que ponga Precio:, the_field, como el nombre ahora es el precio, pues vamos a poner “precio”. Lo copiamos de aquí si queréis para no equivocarnos, lo ponemos y al final podemos poner el simbolito del Euro, para que ponga Precio:, el numerito y el €.

Guardamos esto y ahora si volvemos a nuestra entrada y la recargamos veremos que nos indica el precio de esta pizza. Y si vamos al editor y cambiamos éste número, pues obviamente nos saldrá lo que le indiquemos.

Y ya hemos terminado. Ya lo sabéis: para cualquier duda, pregunta, sugerencia o soborno me podéis encontrar en los siguientes lugares. Hasta la próxima 😀

🌐Web:
👱LinkedIn:
🌈Instagram:


Fuente – Source

WordPress: Cómo crear y mostrar Custom Fields o campos personalizados

Necesitas ayuda con wp? Entonces WPVideo es tu sitio.
Encuentra lo que buscas entre cientos de miles de videos y experiencias personales de otros usuarios. Todos los que empezamos con wp deberíamos tener acceso a esta web, ojalá yo hubiera tenido algo así cuando empecé mi camino como webmaster 🙂
Pero ahora quiero y puedo poner esta web a vuestra disposición.
Disfrutadla 😉

Need help with wp? Then WPVideo is your site.
Find what you are looking for among hundreds of thousands of videos and personal experiences of other users. All of us who started with wp should have access to this website, I wish I had something like that when I started my journey as webmaster 🙂
But now I want and I can put this website at your disposal.
Enjoy it 😉

https://www.wpvideo.eu

Publicado en Ecommerce, Plugins, Temas (Themes), Tutoriales (Tutorials) y etiquetado .

Deja un comentario

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