Divi, diseñar una plantilla predeterminada para cargar Custom Posts

Divi es una de las plantillas más avanzadas y populares para el diseño y maquetación de páginas web en WordPress.

Ello se debe a su poderoso constructor visual, que de forma cómoda y sencilla nos permite crear secciones, columnas e integrar un buen número de módulos predefinidos para ir dando forma y dinamismo a nuestras páginas.

Su avanzado constructor permite tal grado de detalle y ajuste que en ocasiones he conseguido recrear casi al 100% diseños de otras plantillas de temáticas diversas (diseños muy bonitos pero muy limitados en cuanto a opciones de personalización, al no tener la versatilidad de Divi).

Pero uno de los problemas con los que siempre me encuentro es a la hora de generar contenido dinámico, como entradas o custom post, pues con Divi es fácil crear páginas internas impactantes con diseños muy bonitos y elaborados, pero cuando cargamos una entrada (post), la cosa cambia y mucho.

Mientras una portada bien maquetada con el constructor Divi presenta un aspecto atractivo y elaborado:

Una entrada por defecto, la vemos así:

La razón es simple, cuando WordPress carga un contenido de tipo post o entrada, recurre a un archivo llamado single.php. Este archivo tiene un diseño muy minimalista únicamente para mostrar la información del post (título, contenido, sección de comentarios, sidebars…).

Si nosotros queremos dar un formato más elaborado a una entrada, tenemos que generarlo en el «content» de la misma, es decir, utilizar el constructor Divi para maquetar todo el contenido tal y como lo necesitamos.

Podemos agilizarlo creando una plantilla base (sin información) e importándola en cada entrada que necesitemos, sustituyendo la información de la plantilla por nuestra propia información. Un trabajo que no es muy productivo.

Lo ideal es, que cuando creemos una entrada o custom post, se cargue automáticamente la plantilla diseñada para tal fin, sustituyendo de forma dinámica el contenido de la misma (título, contenido, imagen destacada, campos personalizados si los hubiese…)

Bien, de eso va este post.

Este artículo se encuentra disponible en vídeo, por si te apetece seguirlo más de este modo:

Vamos a imaginar, y siguiendo con el ejemplo de la portada que hemos visto anteriormente, que estamos diseñando la web para un concesionario de vehículos y queremos generar fichas con un diseño ya establecido, para cada vehículo que publiquemos, por ejemplo:

Pero queremos que cuando se redacten los datos del vehículo, se sustituyan los textos predefinidos de la plantilla por los de nuestra entrada.

Antes de comenzar, vamos a crear un tema hijo para Divi, pues vamos a necesitar desarrollar nuestro propio archivo single.php y para no interferir con el tema principal o perderlo cuando exista una actualización de Divi, lo ideal es hacerlo en un tema hijo o child theme.

Creamos un tema hijo de Divi

Nos situamos en el directorio themes de nuestro proyecto, donde está la plantilla Divi, y creamos un nuevo directorio con el nombre que vayamos a darle al child theme (pero sin espacios ni caracteres especiales), por ejemplo «coches».

Dentro de coches solamente necesitamos crear dos únicos archivos.

Un archivo style.css con el siguiente código comentado:

/*
Theme Name: Coches Theme
Theme URI: https://danisanchez.net
Description:  Plantilla Coches by Gestionatuweb
Author: Daniel Sánchez (Gestionatuweb)
Author URI: https://danisanchez.net
Template: Divi
*/

Los nombres del tema, autor, etc, podemos redactarlos a nuestra elección, pero es muy importante que en Template, especifiquemos el nombre del directorio del tema padre, es decir Divi.

Y también necesitamos crear un archivo functions.php con una función donde referenciaremos al archivo de estilos principal de Divi:

<?php 
    function estilos_adicionales(){
        wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
    }
    add_action('wp_enqueue_scripts', 'estilos_adicionales');
?>

Con estos 2 archivos creados ya podemos activar el child theme desde el menú Apariencia – Temas de WordPress.

Custom Post para añadir vehículos

Ahora vamos a añadir el custom post para crear vehículos. Este código lo vamos a añadir al archivo functions.php que acabamos de crear en el child theme, debajo de la función que referencia a los estilos y por supuesto, dentro de las llaves de PHP <?php ….. ?> o tendremos errores.

//Custom Post Vehículos
    function post_Vehiculos(){
        $labels = array(
            'name'               => _x('Vehículos', 'coches'),
            'singular_name'      => _x('Vehículo', 'post type singular name', 'coches'),
            'menu_name'          => _x('Vehículos', 'admin menu', 'coches'),
            'name_admin_bar'     => _x('Vehículos', 'add new on admin bar', 'coches'),
            'add_new'            => _x('Añadir Vehículo', 'book', 'coches'),
            'add_new_item'       => __('Añadir Nuevo Vehículo', 'coches'),
            'new_item'           => __('Nuevos Vehículos', 'coches'),
            'edit_item'          => __('Editar Vehículo', 'coches'),
            'view_item'          => __('Ver Vehículo', 'coches'),
            'all_items'          => __('Todos los Vehículos', 'coches'),
            'search_items'       => __('Buscar Vehículos', 'coches'),
            'parent_item_colon'  => __('Parent Vehículos:', 'coches'),
            'not_found'          => __('No se han encontrado Vehículos', 'coches'),
            'not_found_in_trash' => __('No se han encontrado Vehículos en la papelera', 'coches')
        );
        
        $args = array(
            'labels'             => $labels,
            'description'        => __('Description.', 'coches'),
            'public'             => true,
            'publicly_queryable' => true,
            'show_ui'            => true,
            'show_in_menu'       => true,
            'query_var'          => true,
            'rewrite'            => array('slug' => 'vehiculos'),
            'capability_type'    => 'post',
            'has_archive'        => true,
            'hierarchical'       => false,
            'menu_position'      => 6,
            'supports'           => array('title', 'editor', 'author', 'thumbnail'),
        );
        register_post_type('vehiculos', $args);
    }
    add_action('init', 'post_Vehiculos');

Ahora veremos la nueva sección «Vehículos» en nuestro panel administrador:

Antes de introducir ningún vehículo vamos a crear la plantilla que servirá de Template para nuestros vehículos.

Plantilla para cargar vehículos

Para ello nos dirigimos al menú Divi – Biblioteca de Divi y añadimos una nueva disposición a la que llamaremos, por ejemplo «plantilla-vehículos«, y en tipo de diseño seleccionamos «Diseño«, pues será un diseño de página completo.

Una vez creado elegimos el diseño para la ficha de los vehículos, en este ejemplo utilizaremos el diseño predefinido para vehículos que existe en el catálogo de plantillas de Divi:

Localizamos el diseño y clic en Use This Layout:

Una vez cargada la plantilla, de momento no vamos a hacer nada más, guardamos los cambios.

Añadiendo campos personalizados a los vehículos

Para introducir datos específicos del vehículo, tales como el precio, descripción o información adicional, vamos a integrar campos personalizados usando el plugin Advanced Custom Fields, por lo que procedemos a instalarlo desde la sección de plugins:

Una vez instalado y activo veremos un nuevo menú «Campos Personalizados«:

Solo tenemos que crear un nuevo grupo de campos y añadir tantos campos como datos necesitemos insertar en nuestros vehículos. Para el ejemplo vamos a crear 3 campos:

• Precio de tipo numérico.
• Descripción de tipo área de texto.
• Especificaciones físicas de tipo área de texto.

Muy importante, en el apartado Ubicación, definimos que estos campos será utilizados en los Post Type «Vehículos» y en el Post «plantillas-vehículos», que es el nombre que dimos a nuestra plantilla Divi para cargar vehículos.

Guardamos los cambios y nos dirigimos al apartado Vehículos donde crearemos un vehículo de prueba:

Al fondo de la pantalla de edición aparecen los campos personalizados que acabamos de incorporar con Advanced Custom Fields:

Modificar la plantilla Divi predefinida para cargar vehículos

Ahora nos dirigimos a Divi – Biblioteca de Divi donde vamos a editar la plantilla que hemos creado para cargar vehículos, y sustituiremos los textos predefinidos por la información que escribamos en las entradas de vehículos.

Para sustituir el título por defecto, por el título de nuestra entrada, nos situamos en el módulo de edición de texto y sobre la esquina superior derecha del editor aparecerá un icono similar a unos discos apilados con el texto «Usar contenido dinámico».

Al hacer clic aparece una serie de opciones que podemos usar como sustitución al texto predefinido. La que nos interesa es «Diseño/Archive Title«, que cargará el título de la entrada.

Podemos así mismo modificar la imagen destacada del vehículo por la imagen destacada que hayamos seleccionado en la entrada, para ellos nos vamos a la edición del módulo de imagen, quitamos la imagen por defecto, hacemos clic en el icono de contenido dinámico y seleccionamos «Imagen principal«:

Podemos utilizar los campos personalizados para añadir debajo del título, el precio del vehículo. Solo tenemos que añadir un módulo de texto simple y utilizar el icono de contenido dinámico para asignar el campo personalizado «precio»:

Nos dará la posibilidad de añadir texto antes y después del valor del campo personalizado.

Una vez terminemos de definir todas las secciones que llevarán contenido dinámico, guardamos la plantilla.

Ahora tenemos que generar nuestro propio archivo single.php para que WordPress no cargue el archivo por defecto y podamos usar la plantilla que acabamos de crear.

Crear nuestro propio single.php para cargar la plantilla de vehículos

Para ello nos dirigimos al directorio principal de nuestro child theme y creamos un nuevo archivo llamado single-vehiculos.php. Es muy importante que después de la palabra single, encadenemos con un (-) el nombre que hayamos dado a nuestro custom post, en este caso «vehiculos«, de lo contrario no funcionará.

Este es el código que debemos insertar en nuestro nuevo single-vehiculos.php

Nota: No puedo pegar directamente el código, pues esta web utiliza Divi y el siguiente código contiene llamadas a funciones de Divi que se ejecutan al llamar al código, dando como resultado errores en la visualización, por lo que finalmente he optado por poner una captura de imagen del código.

<?php get_header(); ?>

<div id="main-content">
    <div class="container">
    <?php echo do_shortcode('[et_pb_section global_module="XXX"][/et_pb_section]');?>
    </div> <!--.container-->
</div> <!--#main-content-->

<?php get_footer(); ?>

Tenemos que prestar especial atención a la línea de:

 global_module="100"

Pues ese número (100) tenemos que sustituirlo por el ID de la plantilla Divi que hemos creado para cargar los vehículos.

Para conocer el ID de la plantilla podemos dirigirnos a Divi – Biblioteca de Divi, y si pasamos el ratón por la opción editar, veremos abajo la URL de referencia con el ID de la plantilla:

Donde post=100, 100 es el ID de la plantilla.

Una vez guardados el archivo single-vehiculos.php, podemos volver al vehículo que creamos anteriormente y visualizarlo.

Si hemos hecho todo correctamente, se cargará la plantilla que hemos creado para los vehículos, pero usando la información dinámica que hemos predefinido:

Y eso es todo.

Recuerda que puedes adquirir Divi desde mi enlace de afiliado con descuentos de hasta el 20%, así me ayudarás a seguir creando contenidos sobre Divi en mi Blog y en Youtube.