CursosEmpresasBlogLiveConfPrecios

Creación de un Tema Personalizado en WordPress con Visual Studio Code

Clase 13 de 31 • Curso de WordPress Práctico

Contenido del curso

Comenzar con WordPress

Contruir vistas

Tomar examen
Resumen

¿Cómo crear un tema en WordPress desde cero?

Crear un tema en WordPress es uno de los pasos más importantes para personalizar la apariencia y funcionalidad de un sitio web. En este enfoque práctico, te guidaré paso a paso utilizando Visual Studio Code para llevar tus habilidades de desarrollo al siguiente nivel. Lo principal es crear una estructura básica de archivos necesarios dentro de tu carpeta de proyecto, como index.php, style.css, header.php, y más.

¿Cómo iniciar el proyecto?

Primero, abre Visual Studio Code y dirígete a "Open Folder" para seleccionar la carpeta de tu proyecto. Crea una nueva carpeta dentro de wp-content/themes/, la cual puedes llamar "PlatziTheme". Dentro de esta carpeta, los archivos que crearás son los siguientes:

  1. index.php - Actúa como la vista por defecto.
  2. style.css - Donde definirás tus estilos y atributos del tema.

Estos archivos formarán la columna vertebral de tu tema WordPress.

¿Cómo definir los atributos del tema?

Para definir los atributos del tema, comienza con comentarios dentro del style.css. Este archivo debe contener elementos importantes como:

/*!
Theme Name: Platzi
Theme URI: https://example.com
Author: Christian Dammann
Author URI: https://example.com
Description: Tema de demostración para un sitio de productos
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: platzi
*/

Este bloque proporciona a WordPress la información necesaria sobre tu tema y licencia.

¿Cómo estructurar el tema con PHP?

A continuación, crea el archivo header.php que contendrá el encabezado HTML5 estándar y las funciones WP integradas para cargar dependencias.

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

De manera similar, footer.php terminará con la carga de los scripts justo antes de cerrar la etiqueta </body>.

<?php wp_footer(); ?>
</body>
</html>

¿Cómo añadir soportes y funcionalidades?

El archivo functions.php es crucial para agregar características a tu tema. Por ejemplo, puedes usarlo para habilitar imágenes destacadas y otras funciones de WordPress.

<?php
function init_theme_supports() {
    add_theme_support('post-thumbnails');
    add_theme_support('title-tag');
}
add_action('after_setup_theme', 'init_theme_supports');

Estas funcionalidades permiten que tu tema soporte ciertas características de WordPress que mejoran la experiencia del usuario.

¿Cómo adicionar una imagen de previsualización?

Para agregar una imagen de previsualización que represente a tu tema en el administrador de WordPress, coloca una imagen llamada screenshot.png dentro de tu carpeta de tema. Esta imagen, preferiblemente de 880x660 píxeles para garantizar una buena visualización, será la que los usuarios vean cuando seleccionen un tema.

¿Cuál es el siguiente paso?

Ahora que has configurado lo básico, tu tema debería aparecer en el administrador de apariencia de WordPress. Aunque todavía es básico, puedes continuar personalizándolo escribiendo más estilos CSS, creando plantillas para tus páginas, y añadiendo metadatos adicionales. ¡No te detengas aquí! Con las bases que ya has aprendido, sigue explorando cómo puedes mejorar y particularizar tu tema, ya sea a través de más piezas de código o explorando los miles de plugins disponibles que pueden enriquecer tu sitio web.