Todos lo hemos visto hecho muchas veces. ¿De qué estoy hablando? El editor de WordPress, repleto de HTML o códigos cortos para crear un diseño de página personalizado. Eso puede estar muy bien si eres desarrollador y el único que trabaja en una página, pero ¿qué pasa si la página que creaste fuera para un cliente que quiere realizar cambios una vez que hayas terminado?

¡Desastre! Todo lo que necesitas es presionar una tecla incorrecta para arruinar por completo todo tu arduo trabajo y recibir un correo electrónico urgente de tu cliente notificándote que el cielo se ha caído.

Afortunadamente, existen varias formas de crear diseños personalizados en WordPress que facilitan la experiencia de edición para sus clientes y al mismo tiempo le brindan la flexibilidad que necesita un desarrollador.

Campos personalizados

Al crear una página en WordPress, es posible que hayas notado el cuadro de campos personalizados debajo del editor. Ese cuadro le permite ingresar un nombre de campo y un valor asociado a él. ¿Qué puedes hacer con eso y por qué es poderoso?

Supongamos que codificó una plantilla de página personalizada para la página de inicio de su cliente y desea que parte del texto sea editable. La forma más sencilla de hacerlo sería editar el texto directamente en el archivo de plantilla, pero no es muy fácil de usar. En cambio, el uso de campos personalizados puede permitirle exponer partes de una plantilla de página personalizada a sus clientes para que la editen, sin preocuparse de que rompan el diseño. Así es como…

Agregar un campo personalizado

Lo primero que deberá hacer es agregar un nuevo campo personalizado. En el cuadro de campos personalizados, seleccione un nombre existente o ingrese uno nuevo, luego ingrese el valor deseado. Para este ejemplo, haremos que el encabezado de nuestra plantilla de página personalizada sea editable. Así es como se ve nuestro nuevo campo personalizado.

Edite la plantilla de su página

Ahora que tenemos un campo personalizado, agreguémoslo a nuestra plantilla de página personalizada usando el siguiente código.

 <div class="my-heading"> <h1><?php echo get_post_meta( get_the_ID(), 'main-heading', true ); ?></h1> </div>

En ese fragmento estamos usando la función get_post_meta para extraer el valor de nuestro campo personalizado de la base de datos de WordPress y repetirlo dentro de una etiqueta h1. Nuestro campo personalizado se llama "encabezado principal", así que asegúrese de cambiarlo en la llamada a la función si el suyo es diferente.

Esta técnica que utiliza campos personalizados se puede repetir tantas veces como desee para permitir la edición de diferentes partes de su diseño.

Complemento de campos personalizados avanzados

Los campos personalizados funcionan bien, pero tienen sus limitaciones. Por un lado, cuando utiliza campos personalizados, pierde la capacidad de utilizar funciones básicas del editor, como negrita y cursiva. Tampoco son muy fáciles de usar si intentas hacer que algo que no sea texto, como una imagen, sea editable. Ahí es donde entra en juego uno de mis complementos favoritos, el complemento Campos personalizados avanzados (ACF).

ACF te permite hacer cosas realmente increíbles, como reemplazar el editor predeterminado con tu propia configuración de página personalizada. Eso es lo que estamos haciendo actualmente para muchas de las páginas personalizadas en el nuevo sitio web de WordPress de Connor Group. La página del equipo, por ejemplo, muestra una cuadrícula de miniaturas de empleados en las que se puede hacer clic y que se abren a una biografía del empleado. Hemos creado una interfaz sencilla utilizando ACF que permitirá al equipo de marketing de Connor Group agregar o eliminar empleados fácilmente a medida que van y vienen.

Agregar ese tipo de funcionalidad es fácil de lograr creando grupos de campos usando la interfaz de arrastrar y soltar de ACF. Cada grupo puede tener cualquier cantidad de tipos de campos diferentes e incluso incluir grupos anidados de campos repetidos que se pueden agregar o eliminar como la configuración de la página del equipo de Connor Group.

Los grupos de campos se pueden agregar a cualquier pantalla de edición posterior según un conjunto de reglas que usted defina. Por ejemplo, la configuración en la captura de pantalla anterior solo se aplica a la pantalla de edición de publicaciones cuando la publicación actual que se está editando es la página del Equipo.

Uso de campos personalizados avanzados en la plantilla de su página

Usar valores ACF en sus plantillas de página personalizadas debería resultarle familiar, ya que hacerlo es similar a usar los campos personalizados estándar de WordPress.

 <div class="mi-encabezado">
    <h1><?php the_field('título'); ?></h1>
</div>

Como puede ver en el ejemplo anterior, el código que estamos usando se parece sorprendentemente al código que usamos para los campos personalizados estándar. La única diferencia es que estamos usando la función ACF the_field en lugar de la función de WordPress get_post_meta. Al pasar esa función, el nombre de su campo generará cualquier contenido que se haya ingresado o la URL de una imagen si está utilizando un campo de imagen.

Advanced Custom Fields es un complemento verdaderamente poderoso que abre un mundo de posibilidades para los desarrolladores. Si aún no lo has hecho, te recomiendo que lo intentes. En mi experiencia, ha sido muy divertido implementarlo y la respuesta de nuestros clientes ha sido abrumadoramente positiva.

Constructores de páginas frontales

Los creadores de páginas front-end de WordPress son una opción relativamente nueva e intrigante. Si bien tendrás que sacrificar algo de flexibilidad como desarrollador, existen muchos escenarios en los que usar uno puede ahorrar mucho tiempo y hacer que la edición de una página sea mucho más intuitiva para tus clientes.

Desarrollo rápido

El uso de un creador de páginas le permite diseñar páginas de forma visual y rápida. Desde que creamos nuestro propio creador de páginas, ha habido muchos escenarios en los que ni siquiera abrimos Photoshop. En lugar de eso, hacemos nuestras maquetas en vivo en el navegador, las revisamos con el cliente y hacemos los cambios necesarios. Es posible que ese flujo de trabajo no funcione para todas las páginas que cree, por lo que depende de usted decidir qué solución es mejor en el contexto de lo que sus clientes intentan lograr.

Edición intuitiva

El objetivo de todo esto es facilitar la edición a sus clientes y eso es exactamente lo que puede hacer el uso de un creador de páginas de inicio. En lugar de trabajar en el administrador de WordPress, sus clientes podrán señalar y hacer clic en el contenido de sus páginas para editarlo en una interfaz intuitiva.

Conclusión

Cuando se trata de crear diseños personalizados en WordPress, a veces todo lo que necesita es una solución simple como los campos personalizados integrados. Otras veces, es posible que necesites algo más sólido, como el complemento Campos personalizados avanzados, o algo más intuitivo que permita un desarrollo rápido, como un creador de páginas de inicio. Al final del día, cada una de estas soluciones ayuda a lograr lo mismo: facilitar la edición de diseños personalizados en WordPress para sus clientes.

Estas son tres de mis soluciones favoritas que tengo en mi caja de herramientas de desarrollo de WordPress para crear sitios de clientes. ¿Qué soluciones ha encontrado que funcionan bien para usted y sus clientes?