Bienvenido al día 1 de 3 de nuestra serie sobre cómo agregar estilos personalizados a los formatos de publicación de blog de Divi. Por defecto, Divi viene con seis formatos de publicación de blog: Estándar, Video, Audio, Cita, Galería y Enlace. En esta serie te enseñamos a personalizarlos con php y css.
Durante los próximos 3 días, lo guiaré a través de la personalización de todos los formatos de publicación de blog de Divi: Estándar, Cita, Enlace, Video, Audio y Galería. Editar todos esos (para los diseños que tengo en mente) requiere editar el archivo de plantilla single.php. Para hacer esto correctamente, debemos crear un tema secundario Divi que contenga nuestro archivo de plantilla Single.php alterado. Y antes de hacer eso, también debemos crear una instalación local de WordPress usando Desktopserver. Esto proporcionará un espacio de desarrollo seguro para que podamos jugar sin arriesgar nada en un sitio web en vivo.
Como sugiere el título de esta publicación, necesitaremos tres días para cubrir todo, de principio a fin. Hoy, le mostraré cómo crear una instalación local de WordPress usando Desktopserver y crear el tema secundario que usaremos para albergar nuestros formatos de publicación de blog alterados.
Consideraría que esta serie es más «avanzada» que la mayoría de los tutoriales publicados aquí. Pero, si es un principiante, esta serie es en realidad una gran oportunidad para que mejore sus habilidades de desarrollo y se ramifique en algo nuevo en una serie de publicaciones seguras, gratuitas y guiadas.
¡Empecemos!
Aquí hay un vistazo rápido a los diseños que lograremos en esta serie. Después de sentar las bases para ellos en la publicación de hoy, le mostraré cómo editar el archivo single.php (la plantilla para todos los formatos de publicación de nuestro blog) y luego cómo diseñar aún más esa plantilla para cada formato con CSS. ¡Será todo un viaje!
Preparación de sus activos de desarrollo
Esto es lo que deberá seguir junto con el tutorial de hoy y los tutoriales que he creado para los próximos 2 días:
- Un editor de código como Atom, Sublime, Brackets o Notepad++ (lo que prefieras)
- Una instalación local de WordPress usando DesktopServer (a menos que ya tenga uno)
- ¡Un tema Divi Child, que crearemos!
Recomiendo encarecidamente que si va a seguir esta serie, lo haga en una instalación de WordPress configurada solo para pruebas y desarrollo. Lo último que quiero es que la gente experimente con su sitio web en vivo y arruine algo.
Si no está seguro de cómo configurar una instalación de desarrollo local de WordPress, le recomiendo usar la versión gratuita de desktopserver . Debería tenerlo listo y funcionando con una instalación local de WordPress en solo unos minutos (sin exagerar).
Configuración de DesktopServer en su computadora
Aquí hay algunos pasos para comenzar con DesktopServer.
Visite su sitio web y descargue la versión gratuita haciendo clic en el botón «Gratis – Agregar al carrito» en la columna de la derecha.
En la página de pago, complete su información personal, acepte sus términos y haga clic en comprar.
En la página de confirmación de compra, seleccione la descarga adecuada para su sistema operativo. Sugiero instalar la última versión de Mac o Windows.
Descomprima su descarga y ejecute la instalación de la aplicación en su computadora.
Ahora puede encontrar la aplicación DesktopServer en una carpeta llamada «xampplite», en la raíz de su unidad de disco local (C:).
Una vez que haya instalado Desktopserver, lea sus instrucciones para ayudarlo a comenzar a configurar su instalación local de wordpress.
Creación de su tema Divi Child para esta serie
Para crear un tema secundario Divi, debe acceder a los archivos de su tema de WordPress. Si siguió los valores predeterminados al instalar DesktopServer, los archivos de su tema deberían estar ubicados en su carpeta de documentos dentro de una carpeta etiquetada como «Sitios web».
Localice la carpeta de temas y agregue una nueva carpeta llamada «hijo».
Ahora va a agregar su archivo style.css a la carpeta de su tema secundario. Este es el primero de 3 archivos que conformarán su tema hijo.
Abra su editor de texto y cree un nuevo archivo con el siguiente encabezado CSS en la parte superior del documento.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
/* Theme Name: Divi Child Theme URI: Description: Divi Child Theme Author: Author URI: Template: Divi Version: 1.0.0 License: License URI: Tags: Text Domain: */ |
Puede agregar el resto de la información para que el encabezado CSS del tema secundario se ajuste a su sitio según sea necesario.
Guarde su nuevo archivo con el nombre y la extensión «style.css». Y agréguelo a la carpeta del tema secundario:
El siguiente archivo que debe agregar a la carpeta de su tema secundario es el archivo functions.php.
Regrese a su editor de texto y cree otro archivo nuevo y agregue el siguiente código php en la parte superior del documento:
|
01
02
03
04
05
06
07
08
09
10
11
12
|
<?php function my_theme_enqueue_styles() { $parent_style = 'parent_style'; wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get('Version') );}add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );?> |
Guarde el archivo con el nombre exacto y la extensión «functions.php» y agréguelo a su carpeta secundaria:
El archivo final que necesita para su tema hijo es el archivo single.php de Divi. Además de agregar un nuevo CSS al archivo style.css de su tema secundario, usaremos una copia del archivo single.php de Divi para editar el diseño de los diferentes tipos de publicaciones.
Para encontrar el archivo single.php, vaya a la carpeta del tema Divi (principal).
Copie el archivo single.php y péguelo en la carpeta de su tema secundario:
Ahora estamos listos para personalizar el archivo single.php de su tema hijo.
Activa tu nuevo tema infantil
Antes de comenzar a personalizar el archivo de plantilla single.php, continúe y active su nuevo tema secundario.
Desde el tablero de wordpress, vaya a Apariencia → Temas y seleccione el botón Activar en su nuevo tema secundario llamado Divi Child.
¡Eso es todo por ahora!
Sé que esto no es demasiado emocionante todavía, pero espero que te quedes conmigo. Es importante sentar las bases adecuadas para sus proyectos y esta publicación es un excelente lugar para comenzar.
¿Qué viene mañana?
Ahora, con su instalación local de WordPress y el tema secundario activado, está listo para la siguiente parte de esta serie. Mañana le mostraré cómo editar el archivo single.php de Divi para crear un diseño completamente único para los formatos de publicación de su blog.
Espero leer sus comentarios a continuación. La configuración de un tema secundario en un servidor local puede generar algunos problemas para los principiantes, por lo que intentaré responder todas las preguntas que pueda. Sin embargo, si tiene más problemas técnicos, nuestro equipo de soporte está listo y dispuesto a ayudarlo también. ¡Sin mencionar a la gente de Desktop Server!
¡Salud!