Crear un theme para wordpress paso a paso inicio

Pues bien, como podéis leer arriba nos hemos decidido a crear un tutorial sobre como crear un Theme para WordPress desde cero y paso a paso, para crear el tutorial hemos decidido clonar el Theme Florence, es un theme muy liviano que carga muy rápido y tiene un diseño muy bonito.

El tutorial se hará en varios artículos donde iremos explicando cada plantilla del Theme, desgranaremos el código linea por linea para que lo podáis entender sin problemas, nosotros clonaremos la apariencia del Theme pero no sus funciones internas, ya que crearemos un panel de administración personalizado solo con las funciones necesarias para el Theme, lo haremos de manera que no sea necesario utilizar ningún Plugin.

Hoy empezaremos por lo más básico, el esqueleto principal de nuestro Theme para que WordPress lo pueda identificar como tal y lo podamos así activar en el admin como un Theme normal y corriente, nosotros trabajaremos en local, para ellos utilizamos Xampp, lo tenéis disponible para Windows, Linux y Mac, lógicamente necesitaréis descargar la última versión de WordPress.

Bien, empecemos con la materia, lo primero que debemos hacer es crear una base de datos en Xampp llamada florence, una vez creada vamos a la carpeta xampp\htdocs/ y creamos una nueva carpeta llamada florence, dentro de ella copiamos los archivos de WordPress que previamente hemos descargado, una vez copiados cambiamos el nombre al archivo wp-config-sample.php por wp-config.php y lo abrimos con nuestro ID de programación favorito, simplemente rellenamos los datos de nuestra base de datos y usuario y lo guardamos, ya podemos realizar la instalación de nuestro WordPress en la ruta localhost/florence/.

Ahora es hora de crear la carpeta y los archivos necesarios para nuestro Theme, vamos a la ruta xampp\htdocs\florence\wp-content\themes y creamos una carpeta llamada florence, ahora abrimos nuestro ID de programación favorito y creamos tres archivos PHP nuevos y un archivo CSS también nuevo, al archivo CSS lo llamamos style.css, a los archivos PHP los llamaremos, header.php, footer.php e index.php, estos son los cuatro archivos necesarios para que WordPress detecte nuestro Theme como tal.

Pasemos al código, en nuestro archivo hedaer.php copiaremos y pegaremos el siguiente código.




<?php
echo '<!DOCTYPE html>';
echo 
'<html lang="es-ES">';
    echo 
'<head>';
        echo 
'<link rel="stylesheet" type="text/css" href="'.get_bloginfo("stylesheet_url").'" media="screen" />';
    echo 
'</head>';
    echo 
'<body>';
?>

Ahora en el archivo footer.php copiaremos y pegaremos el siguiente código.




<?php
    
echo '</body>';
echo 
'</html>';
?>

Lo siguiente va nuestro archivo index.php, en el copiaremos y pegaremos el siguiente código.




<?php
get_header
();


get_footer();
?>

Y por último y más importante iremos a nuestro archivo style.css y copiaremos y pegaremos el siguiente código.




<style>
/*
Theme Name: Florence 1.0
Theme URI: https://tutorial.ricardfs.es
Author: Ricard FS
Author URI: https://ricardfs.es/
Version: 1.0

Description: Clonación del Theme original <a href="https://solopine.com/florence/">Florence</a>, está clonación se realiza como tutorial sobre como crear un Theme desde cero paso a paso para el blog de <a href="https://ricardfs.es">Ricard FS.</a>

Author: Ricard FS
Author URI: https://ricardfs,es
Theme URI: https://tutorial.ricardfs.es
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
body {
    margin:0 auto;
    width:100%;
    min-width:240px;
    color:#716D6E;
    background-color:#F5F5F5;
}
ul,
li {
    margin:0;
    padding:0;
    list-style:none;
}
img {
    border:none;
    max-width:100%;
}
a {
    text-decoration:none;
    color:#000;
    -webkit-transition-property:color, text;
    -webkit-transition-duration: 0.3s, 0.3s;
    -webkit-transition-timing-function: linear, ease-in;
    -moz-transition-property:color, text;
    -moz-transition-duration:0.3s;
    -moz-transition-timing-function: linear, ease-in;
    -o-transition-property:color, text;
    -o-transition-duration:0.3s;
    -o-transition-timing-function: linear, ease-in;
}
a:hover{
    color:#c2c2c2;
}
.alignnone,.aligncenter {
    display:block;
    margin-left:auto;
    margin-right:auto;
    margin-top:20px;
    margin-bottom:20px;
    border:none;
}
.alignleft {
    float:left;
    margin:20px 20px 20px 0;
    border:none;
}
.alignright {
    float:right;
    margin:20px 0 20px 20px;
    border:none;
}
code {
    color:#000;
    padding:5px 10px 5px 10px;
    font-size:15px;
    font-size:1.5rem;
}
p{
    margin:0;
    padding:0;
}
blockquote {
    font-size: 18px;
    font-style: italic;
    max-width: 450px;
    padding: 0.25em 40px;
    line-height: 1.45;
    position: relative;
    color: #383838;
    background:#ececec;
    margin:0 auto;
    margin-bottom:20px;
}
blockquote:before,
blockquote:after,
blockquote p {
    display: inline;
}
blockquote:before {
    content: '“';
}
blockquote:after {
    content: '”';
}
.container {
    width: 100%;
    max-width: 1100px;
    display: block;
    overflow: hidden;
    margin: 0 auto;
}
</style>

Como podéis ver en el archivo header.php lo único que hacemos de momento es declarar el doctype y el lenguaje, así como abrir y cerrar las etiquetas del HEAD y posteriormente abrir la etiqueta del BODY, entre las etiquetas HEAD hacemos la llamada a la hoja de estilos que también hemos creado,de momento ese es todo el código que pondremos en nuestro header.php, tranquilos, más adelante incluiremos mucho más.

En el archivo footer.php de momento lo único que hacemos es cerrar la etiqueta BODY que se abrió en el header y cerrar la etiqueta HTML que también se abrió en el header.

En el archivo index.php realizamos la llamada a dos funciones nativas de WordPress, get_header y get_footer, dichas funciones son las encargadas de llamar al archivo header.php y footer.php, por eso es muy importante que dichos archivos existan.

En el archivo style.css hemos declarado los principales estilos para nuestro WordPress, le damos una forma al BODY del Theme así como un color de fondo y un color al texto, le damos formato a las listas, imágenes, enlaces e imágenes alineadas a derecha, izquierda y centro, también le damos ya un formato a la etiqueta CODE y a la etiqueta BLOCKQUOTE, y por último creamos un contenedor que utilizaremos para casi todos los elementos principales con un ancho máximo de mil cien píxeles.

EDITADO 13/05/2020

Añadimos estas lineas de contenido para explicar el encabezado de la hoja de estilos a petición del comentario dejado por Mabel, podéis verlo al final del artículo, bien, como podéis ver lo primero que hacemos es declarar el nombre del Theme, en este caso “florence 1.0”, seguidamente la URL donde estará nuestro WordPress, será tutorial.ricardfs.es, desde está URL podréis ir viendo los cambios que iremos haciendo en el Theme paulatinamente en este tutorial.

Después declaramos la URL del autor del Theme y la versión del mismo, a continuación añadimos una pequeña descripción sobre el Theme en cuestión, todo este contenido es el que aparece en el admin de WordPress cuando activamos o desactivamos nuestro Theme.

El siguiente contenido de la cabecera de la hoja de estilos es necesario por si queremos subir nuestro Theme al repositorio de WordPress, añadimos de nuevo el nombre del autor y la URL del sitio del autor, así mismo añadimos la URL donde está visible el Theme.

Y por último pero no menos importante añadimos las licencias GNU, en este caso será la 2.0 o posteriores.

FIN DEL EDITADO

Si ahora activáis este nuevo Theme para WordPress y pasáis a verlo en funcionamiento comprobaréis que es una pantalla en blanco, es normal, solo hemos formado el esqueleto de nuestro Theme para WordPress, en siguientes artículos veremos más código y empezaremos a ver resultados más factibles.

Y como todo Theme de WordPress que se precie el nuestro debe llevar una imagen predeterminada que será la que se vea en el admin de WordPress a la hora de activar o desactivar el Theme, la podéis descargar a continuación.

12 mayo, 2020 por ricard

ricard
Soy Ricard FS, me dedico a la programación desde el año 2000, me dediqué en pleno a WordPress desde el año 2015, ahora creo Plugins y Theme para WordPress desde código cero, y me gusta la divulgación de código, por ello la creación de este blog.

Deja tu comentario

  1. Mabel dice:

    ¿podrías explicar un poco este código por favor?

    /*

    Theme Name: Florence 1.0

    Theme URI: https://tutorial.ricardfs.es

    Author: Ricard FS

    Author URI: https://ricardfs.es/

    Version: 1.0

    Description: Clonación del Theme original Florence, está clonación se realiza como tutorial sobre como crear un Theme desde cero paso a paso para el blog de Ricard FS.

    Author: Ricard FS

    Author URI: https://ricardfs,es

    Theme URI: https://tutorial.ricardfs.es

    License: GNU General Public License v2 or later

    License URI: http://www.gnu.org/licenses/gpl-2.0.html

    */

    1. ricard dice:

      Claro Mabel, será un placer, hoy no por que ya me coge muy tarde, pero mañana por la mañana añadiré la explicación de las cabeceras CSS al artículo, gracias por hacerme ver que se me había pasado.

      Un saludo

  2. Erma dice:

    Good post. I learn somthing totally new and challenging oon sites I stumbleupon on a
    daily basis. It will always be helpful to read through articles from otgher authors and use a little something
    from thekr web sites.

Deja una respuesta

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

:wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!: