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

Logo de Divi

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:

<?php get_header(); ?>
<div id=”main-content”>	
<?php echo do_shortcode('[et_pb_section global_module="352"][/et_pb_section]');?>
</div> <!– #main-content –>
<?php get_footer(); ?>

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:

<?php echo do_shortcode('[et_pb_section global_module="352"][/et_pb_section]');?>

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 Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(30 votos, promedio: 4.6)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

26 comentarios en “Tutorial Divi: Cómo editar las plantillas de archivo con el editor visual”

    1. Hola, Adolfo. ¡Gracias por tu comentario y ánimo con tu aprendizaje, verás que WordPress cada vez te gusta más!

  1. Hola @anacirujano:disqus ,

    Felicidades por el artículo y todo lo que nos has aportado 🙂

    Sería la bomba si pudieras dedicarnos un día un vídeo para poder analizarlo todo de forma mucho más visual!

    Un abrazo!

    1. ¡Hola, Pedro!
      Muchas gracias por tu comentario. Estoy de acuerdo contigo: ¡los tutoriales en vídeo son mucho más fáciles de seguir!

  2. Carlos Guerrero

    Hola Ana, gracias por tu artículo… soy usuario nuevo de WP y Divi con los que me he embarcado en un proyecto de revista y justo estaba buscando la forma de poder editar las páginas que crea WP con los artículos escritos por cada uno de los autores colaboradores y no he podido hacer nada porque no encuentro la forma de hacerlo… quería saber si lo que escribes en tu post se refiere también a editar estas páginas y si debo saber algo más para poder hacerlo…

        1. Hola, Carlos. Para editar las páginas de autor, tienes que editar (o crear nuevo en tu tema hijo, si no existe) el archivo author.php, que es una plantilla para las páginas de todos los autores. Sigue las mismas instrucciones que para el archivo archive.php. Si quisieras que un autor concreto tuviera un diseño diferente a los demás, puedes crear el archivo author-nombredeusuario.php o author-iddelusuario.php

          1. Carlos Guerrero

            Muchísimas gracias Ana por tu ayuda… probaré y espero poder resolverlo

          2. Hola Ana, se puede también editar para una pág de categoría en particular? sería así: archive-iddecategoria.php ???

          3. ¡Hola, Rodrigo! Sería category-slug.php.
            ¡Un saludo y gracias por preguntar!

  3. Hola Ana Cirujano , estoy intentando llevar acabo la guía pero me surge el siguiente problema, tengo en la barra lateral el Widget de archivos, tengo artículos en Julio, agosto y septiembre, si pulso cualquiera de estas secciones utiliza la plantilla asignada pero no filtra el resultado, es decir, me aparecen todos los artículos de los 3 meses, por favor si me pudieras indicar que puede estar sucediendo, gracias.

    1. Hola, Fran. El problema puede venir porque en ese caso es necesario conservar en la plantilla el código que contiene el loop de WordPress, para que este siga funcionando.

  4. @anacirujano:disqus Muy interesante! Tengo que probarlo, ya que es cierto que diseñar esas plantillas desde cero para algunos puede sernos muy complejo y si nos podemos apoyar en Divi mejor que mejor.

    Por cierto, hay una pequeña errata sin importancia en el comentario de #main-content. Falta un guión al principio y otro al final.

    ¡Muchas gracias!

      1. Me refiero a que un comentario en html se pone con dos guiones juntos. Pero parece que al ponerlo aquí lo interpreta como tal y tan siguiera se muestra. Es problema del editor. No le des mayor importancia. A mi ni siquiera me deja escribirlo bien. Se esconde al ser un comentario.
        Un saludo, Javier.

  5. Hola Ana y Fernando! Recién leo este post y me acordaba que hace poco tuve que hacer un blog con varias categorías para una clienta, y al encontrarme con esta limitación de Divi (y desconociendo éste truco) lo que opté fue por utilizar el tema Extra, que también integra el constructor Divi Builder y además añade la posibilidad de personalizar las página de categorías.
    Me gustaría saber qué opinión tienen ustedes al respecto, ¿Acaso es mejor aplicar este truco a Divi, o es lo mismo utilizar Extra?
    ¡Muchas gracias por el truco!

    1. Son temas distintos la verdad, Extra está más orientado a noticias, de ahí que tenga módulos específicos para ello y el constructor de diseños de categorías y tal.

      Usa el que mejor se adapte al diseño y funcionalidad de tu cliente, el truco de Ana o Extra.

  6. Julián Canepa

    Hola Ana! muchas gracias por este artículo, con esta guía pude personalizar, a través de plantillas generadas con el divi builder las paginas de archivo, categoria y el single. Me encuentro con un solo inconveniente y es que, en la plantilla de los posts (single) pude incluir el título y la imagen destacada (utilizando el módulo Post Title), pero no estoy pudiendo encontrar un módulo que me sirva para mostrar el contenido del post! Probé sin suerte con un módulo de texto, incluso busque entre los contenidos dinámicos que propone dentro del modulo de texto. Ojalá me puedas ayudar! muchas gracias

  7. Hola! Tengo el mismo problema que Julián Canepa. Necesito incluir una cabecera y un faldón a todas las entradas del blog. Tiene 698 noticias ya escritas, y no sé cómo hacerlo. Lo he intentado usando este truco, pero no consigo que se integre el texto íntegro de la noticia. No encuentro un módulo desde el que llamar al texto de forma genérica. Usando el del blog sale siempre la misma noticia (la primera, o la que se asigne). Y además sólo el estracto, nunca el texto completo.

    Una ayudita???

    Mil gracias por vuestros sabios consejos. Se agradecen webs tan útiles como esta.

  8. Miguel Almazán Barrero

    Hola Ana, si no lo he comprendido mal, esto sirve para editar por ejemplo las entradas al blog, y cuando cree otra, se haga igual que las anteriores??
    Aprovechando te hago otra pregunta. Tengo divi y woocommerce y no puedo editar los fondos de las páginas de woocommerce (productos, pago.etc) como si hago con el resto de páginas o entradas. Sabrías como? Gracias

Deja un comentario

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

 

Ir arriba Ir al contenido