Tutorial Divi: Cómo editar las plantillas de archivo con el editor visual

Cuando activamos el tema Divi en nuestra instalación de WordPress, podemos maquetar con el editor visual las páginas y las entradas pero, en principio, no podemos editar las plantillas de archivo: ni categorías, ni taxonomías...

Así que, si no sabemos código, podemos utilizar el tema Divi para maquetar visualmente nuestras páginas, pero no podremos editar las plantillas.

A partir de ahora, con un poquito de conocimiento de cómo funciona WordPress, podemos tener un Divi muy mejorado.

Conociendo la jerarquía de las plantillas de WordPress y con una simple línea de código, podemos hackear Divi para poder editar estas plantillas con el editor visual.

Editar plantilla de archivo con Divi

Para maquetar el contenido de la plantilla de archivo con el editor visual de Divi, tenemos que crear una plantilla con Divi, conocer qué archivo del tema Divi debemos editar (o crear nuevo, si no existe) e incluir un código corto con el ID del diseño que hemos creado.

Vamos a ir paso por paso para conseguir esto:

Crear la plantilla de Divi con el diseño que le queremos dar a la página de archivo

Vamos a la Biblioteca de Divi y creamos un nueva plantilla. El tipo de plantilla tiene que ser “Diseño” (“Layout“) y es importante que no sea global.

Ajustes de nueva plantilla

En este diseño podemos incluir todos los módulos que necesitemos, pero es importante que en el diseño incluyamos un módulo que recoja las entradas del Custom Post Type para el que estamos creando este diseño, ya que posteriormente lo vamos a incluir en la plantilla de ese CPT y se trata de la página de archivo.

En nuestro caso, el CPT es “Proyectos“, así que incluiremos un “Portafolios”.

Crear un tema hijo

Para poder editar los archivos del tema sin perder actualizaciones de Divi, debemos crear un tema hijo. Para conseguir esto, necesitamos acceder por FTP a los archivos de nuestro sitio web, o si lo prefieres con un plugin.

Localizar el archivo que debemos editar o crear en nuestro tema hijo

Una vez tengamos nuestra carpeta con el tema hijo, debemos crear en esa carpeta un archivo que se llame con un nombre concreto, que WordPress entiende como archivo de la plantilla.

Para saber qué nombre le tenemos que dar a este archivo de plantilla, debemos conocer el famoso esquema de la estructura de un tema de WordPress.

Según este esquema, para editar la plantilla de archivos, debemos editar o crear el archivo archive.php. Esto es así en todas las instalaciones de WordPress, independientemente del tema que tengan instalado.

Si quisiéramos editar una de las páginas de un Custom Post Type, deberíamos editar el archivo single-slug.php. En nuestro caso, como tenemos instalado el tema Divi, que viene con el Custom Post Type que se llama “Proyectos”, cuyo slug es “project”, debemos editar o crear el archivo single-project.php.

Insertar en la plantilla el módulo de la Biblioteca de Divi

Para insertar en la plantilla de archivo la plantilla que hemos creado y que tenemos guardada en la Biblioteca de Divi, tenemos que hacer lo siguiente:

Creamos un archivo que se llame archive.php. Esto lo podemos hacer con nuestro editor de código favorito (yo uso Sublime Text) o con el bloc de notas, y copiamos el siguiente código:

El número que aparece entre comillas es la ID de la plantilla tipo diseño o “layout” que hemos creado previamente con nuestro editor visual y hemos guardado en la Biblioteca de Divi.

¿Cómo podemos averiguar la ID de una plantilla de la Biblioteca de Divi? Vamos a la Biblioteca de Divi, ponemos el cursor encima del nombre del módulo, y miramos en la barra de estado. El número que aparece es la ID del diseño.

ID de la plantilla o módulo de Divi

Visitamos la página y vemos la magia

Visitamos misitioweb.com/project y comprobamos que se carga nuestro propio diseño en la página de archivo.

Tocando un poquito de código y comprendiendo ligeramente el esquema de plantillas de WordPress, podemos dar un paso muy grande en el diseño de nuestras páginas web con Divi.

Otras aplicaciones

Conociendo este sistema, podemos ir mucho más allá y conseguir diseñar páginas con una experiencia de usuario muy mejorada.

Por ejemplo, podemos incluir automáticamente un sistema de navegación por los mensajes en todas las entradas. Esto mejoraría notablemente la usabilidad de nuestra web, de una manera muy sencilla. Ya sabrías cómo hacerlo, ¿no? Veamos cómo sería:

1. Creas una plantilla con un módulo de “Navegación por los mensajes” en la Biblioteca de Divi.
2. Miras cuál es su ID.
3. Editas o creas el archivo single.php (o single-slug.php) de tu tema hijo.
3. Pegas este código en el lugar donde quieras colocar el módulo de navegación, sustituyendo los números que están entre comillas por la ID de la plantilla:

Así, aparecería el módulo de navegación por los mensajes en todas las entradas (si has editado single.php) o en las entradas de una determinada categoría (si has editado single-slug).

Como ves, este sistema es muy sencillo y a la vez muy útil. En mi opinión, Divi es el mejor tema comercial para WordPress que existe actualmente. Si, además, aprendemos un poquito sobre cómo funciona WordPress, conseguimos una herramienta muy valiosa.

Te invito a que compartas en los comentarios cómo utilizas este sistema para que todos podamos ver ejemplos de plantillas de Divi mejoradas.

Valora este artículo para mejorar la calidad del blog ...

FlojitoNo está malEstá bienMe ha servidoFantástico (27 votos, promedio: 4,59 de 5)
Cargando…

Autor: Ana Cirujano

Ana Cirujano, diseñadora gráfica y web freelance especializada en WordPress. Me encanta trabajar como si estuviera de vacaciones y lo cuento en Easy Workation. Practico yoga e impro y me chifla hablar sobre tipografía en la web.

Comparte esta entrada en
468 ad

ESTA WEB UTILIZA COOKIES PARA OFRECER LA MEJOR EXPERIENCIA POSIBLE. SI SIGUES NAVEGANDO DAS TU CONSENTIMIENTO PARA LA ACEPTACIÓN DE COOKIES Y NUESTRA POLÍTICA DE PRIVACIDAD más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar