En esta sección vamos a ver como es la estructura básica de un tema.
Cuando queramos crear un tema, lo único que tenemos que hacer es en el wp-content/themes crear una carpeta. Ahora en la sección de temas de nuestro WP aparecerá como un tema dañado porque le falta la hoja de estilos que es la que vamos a crear.
Lo primero que hacemos dentro de la carpeta que hemos creado es crear un archivo denominado index.php y una hoja de estilo que se llame style.css. En el momento que hacemos eso ya en la sección de temas ya reconoce nuestro tema ya que tiene lo mínimo necesario para poder funcionar.
Imagen de la plantilla
Tenemos que subir una imagen en formato .png que se denomine screenshot.png. cuyo tamaño suele ser de 880×660, esta es la medida estándar.
Completar la lista de detalles del Theme
Tenemos que utilizar una serie de comentarios especiales que nos sirven para justamente poder mostrar dicha información.
Ejm
/* Theme Name: Ejm Perros Theme Uri: https://sutilweb.com Author: Francisco Paredes Author URI: https://franciscoparedesparralejo.com Description: Este es mi primer tema como diseñador de temas de WP Version: 0.0.1 Tags: perros, canes, sabuesos, dogs, html5, wordpress, responsive, design */
Para saber de temas de versiones podemos visitar la página https://wemverg.org donde nos explican todo. Normalmente se ponen 3 números:
- 0.0.1 (Cambio mayor, cambio menor, correcciones de bugs).
Muy importante en Tags poner los Tags que queramos si subimos nuestro tema para compartir, con que Tags quieren que se nos encuentre nuestro tema. Activamos el tema y no sale nada, a partir de aquí empezamos a trabajar con el tema. Esta hoja de estilos no está vinculada con mi archivo index.php, por lo que lo siguiente es hacer algunas cosas con dicho archivo. Es importante irse a la documentación oficial de WP, que es https://codex.wordpress.org.
Código php del index.php
Veamos el código
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php bloginfo('description'); ?></title>
<meta name="description" content="<?php bloginfo('description'); ?>">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
<h1>Hola WordPress</h1>
<h2><code>bloginfo()</code></h2>
<p>Nombre: <mark><?php bloginfo('name'); ?></mark></p>
<p>Descripción: <mark><?php bloginfo('description'); ?></mark></p>
<p>URL HOME: <mark><?php bloginfo('home'); ?></mark></p>
<p>URL Hoja Estilos: <mark><?php bloginfo('stylesheet_url'); ?></mark></p>
<p>URL del Theme: <mark><?php bloginfo('template_url'); ?></mark></p>
<p>Idioma: <mark><?php bloginfo('language'); ?></mark></p>
<p>Juego de caracteres: <mark><?php bloginfo('charset'); ?></mark></p>
</body>
</html>