Crear un tema de Wordpress. Clase 1

Hoy vamos a revisar cómo crear un tema (theme o plantilla) de Wordpress, desde cero.
Cosas que debes saber antes de iniciar: HTML, CSS y PHP.

En este primer post, te voy a mostrar cómo son los dos archivos básico:
style.css e index.php.

Con ellos tu tema ya existirá y podrás activarlo. Pero sólo verás el esqueleto de tu tema.

En las dos siguientes clases, veremos los archivos adicionales y más código necesario (PHP, HTML, CSS, Javascript) para que tu tema se vea como quieres.

Para crear los archivos puedes usar Notepad ++  o tu editor favorito y para subir los archivos vía FTP puedes usar Filezilla. Estos dos programas son GLP es decir, son software libre y de código abierto.

Antes de comenzar, te pido que crees en tu wordpress, tres entradas, con su título, imagen destacada y texto.

Comenzamos:

1.- Primero tienes que crear el archivo: style.css
Dentro incluyes los siguiente:

/* 
Theme Name: chaveztoro
Theme URI: http://chaveztorotec.blogspot.pe/
Description: Tema para aprender a hacer un Theme de Wordpress
Author: Carlos Chávez Toro
Author URI: http://chaveztorotec.blogspot.pe/
Version: 0.1
.
Puedes usarla libremente.
.
*/

Por supuesto, debes cambiar mis datos por los tuyos. Y al final indicar si es de uso libre o no.

2.- Crea el archivo: index.php 
Dentro incluye lo siguiente (si sabes PHP, entenderás casi todo. Lo que no entiendas lo veremos en la siguiente clase):

<?php
get_header();

if (have_posts()) :
while (have_posts()) :
the_post();
?>

<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

<?php
  if ( has_post_thumbnail() ) {the_post_thumbnail();}
the_excerpt();
   endwhile;
endif;

get_sidebar();
get_footer();
?>

3.- Crea tu carpeta dentro de wp-content/themes/
En mi caso, el tema se llama chaveztoro.
Y la ruta sería: wp-content/themes/chaveztoro/

Esto lo puedes hacer vía FTP o vía cpanel

4.- Copia  style.css e  index.php 
En mi caso dentro de la carpeta: wp-content/themes/chaveztoro/

Esto lo puedes hacer vía FTP o vía cpanel

5.- Entra al administrador de tu Wordpress 
y selecciona tu tema.
En Apariencia / Temas.
Debe aparecer por su nombre, aunque sin gráfico.


6.- Pruebalo vía tu navegador:
Debería ver algo cómo esto:

Bueno, eso es todo por hoy.
Nos vemos en la siguiente clase.

chaveztoro

ACCESOPERU.COM