¿Te gustaria aprender a crear tu primer tema para tu blog o pagina en WordPress?
En este tutorial te vamos a explicar los detalles, paso a paso y desde cero a como entender y crear tu propia plantilla para WordPress. Si deseas hacer tu propio tema de WordPress debes de tener conocimientos mínimos de HTML, CSS y algo de PHP, asi que si todo ha quedado claro, comencemos:
Table of contents
Instalación de WordPress
- Descarga la última versión de WordPress (http://wordpress.org/download/).
- Extrae el contenido y súbelo a la carpeta raíz del servidor web.
- Crea una base de datos MySQL y escribe el nombre de la base de datos, el nombre de usuario y la contraseña. phpMyAdmin (http://www.phpmyadmin.net/) es el mejor software para este tipo de operaciones.
- Ve a la carpeta raíz del servidor web (donde subiste WordPress) y renombra el archivo wp-config-sample.php por wp-config.php.
- Abre el nuevo archivo para editarlo (descárgalo si no se puedes editarlo en el servidor).
- Encuentra el siguente código (en la parte superior del archivo):
define (‘DB_NAME’, ‘coloca nombre de la base de datos aquí’);
define (‘DB_USER’, ‘coloca tu nombre de usuario aquí’);
define (‘DB_PASSWORD’, ‘coloca tu contraseña aquí’); - Reemplaza los datos de inicio de sesión con el que te registraste anteriormente.
- Apunta tu navegador a la ubicación http://www.tudominioaqui.com/wp-admin/install.php y sigue las instrucciones.
- Después de terminar el asistente de instalación tendrás una instalación de WordPress totalmente funcional en tu servidor web, y serás capaz de subir algunos temas personalizados.
Carga nuevo tema wireframe de prueba
- Descarga el tema wireframe de prueba.
- Extrae el contenido de archivos descargados y lo subes a tu carpeta web del servidor \wp-content\themes\
- Accede a tu panel de control de WordPress (http://www.tudireccionaqui.com/wp-admin).
- Ir a “Presentación” y luego a “Temas” y selecciona el tema llamado “Prueba”.
Tu blog está listo (http://www.tudireccionaqui.com/) y tiene un tema simple de prueba. El archivo CSS es simple, básicamente, tiene algunas líneas y colores configuradas. De esta manera puedes ver fácilmente lo que se puede modificar.
Modificando el tema wireframe
Hay algunos archivos en la carpeta del tema. Vamos a hablar acerca de ellos.
screenshot.png
Esta es la imagen en miniatura del tema, lo verás en la página de presentación de WordPress en el panel de control. Cuando vayas a cambiar el look & feel de tu tema puedes cambiar esta imagen también.
screen.css
Este es el archivo CSS del tema (presentación visual). Además en la parte superior de este archivo puedes (y quizás deberías) especificar su nuevo nombre de tema, página de inicio, descripción, nombre del autor y página de inicio de los autores.
header.php
En este archivo se pueden cargar, archivos adicionales de CSS y JavaScript.
footer.php
Pie de página del tema (derechos de autor, fecha, autor, etc.)
sidebar.php
La barras laterales de este tema se definen aquí. Este es el lugar donde todos los widgets de tu WordPress se encontrarán.
index.php
Este es el archivo principal del tema, el cual contiene una gran cantidad de declaraciones condicionales en PHP (que no es difícil de entender porque son auto explicativas) para muchos propósitos diferentes. Este archivo generará páginas estáticas, posts, y otros archivos (si es necesario).
comments.php
Este archivo contiene el código para hacer el listado de comentarios y el formulario de los comentarios.
No tengas miedo a tratar de cambiarlo. Trata de dividir tu plantilla existente xHTML en partes (encabezado, pie de página, barra lateral, página principal) y pegar el código en este tema con cuidado. No hagas todo a la vez y te aseguro que en pocos minutos tendrás tu propio tema de WordPress. Eso sí, no te olvides de compartir con los demás.
Con esto ya tenemos todo listo para editar nuestros propios temas, es imprecindible que conozcas y realices estos pasos para después desarrollar el tema que se vera en la segunda parte de como crear temas para WordPress.
