19th Ave New York, NY 95822, USA
+1 916-875-2235
+1 916-875-2235

Como crear un theme de Wordpress desde 0

En este post aprenderás a crear un theme de WordPress desde 0. Para ello, damos por supuesto que tienes conocimientos de HTML, CSS, PHP y algunos más básicos de WordPress, al menos cómo instalarlo y gestionarlo.

Crear un theme de WordPress no es complicado, pero explicarlo lleva algo de tiempo, por eso en vez de crear un super post, vamos a crear varios y en cada uno explicaremos una parte.

Si por el contrario, ya has creado tu theme y sólo buscas un manual de WordPress, puedes ojear el nuestro.

 

Tabla de contenidos:

#0 Dónde comprar un theme de WordPress
#1 Documentación técnica
#2 Archivos de un theme de WordPress
#3 El loop

Bonus:

#4 Breadcrumbs
#5 Recomendaciones de seguridad
#5 Plugins básicos [Proximamente]
#6 Vistas personalizadas [Proximamente]
#7 Algunas funciones de seguridad [Proximamente]
#8 Uso del plugin Types [Proximamente]

 

Archivos para tu theme de WordPress

 

Después de seguir todos estos pasos y recomendaciones, serás capaz de crear un theme de WordPress desde cero. Además, se debe tener en cuenta que antes de todos estos pasos, lo ideal es tener un diseño definido. También preparar los estilos para que tu nuevo theme sea Responsive.

0 Dónde comprar un theme de WordPress

Existen muchas webs donde comprar un theme de WordPress de calidad, pero si prefieres no gastarte un € en este aspecto también dispones de opciones gratuitas. La pega es que nunca sabes si contienen código malicioso (a no ser que lo revises, fichero a fichero), además de que no suelen contar con soporte técnico ni casi documentación.

Si lo que buscas es algo 100% adaptado a tus necesidades, la mejor opción es pagar a un diseñador y un programador para que creen un theme de WordPress a tu medida. Es la opción más cara, pero normalmente la que mejor funciona.

Y la tercera opción, que es comprar un theme. Hay muchos lugares en internet dónde comprarlo, aquí os listamos algunos de ellos:

1. ThemeForest

themeforest

2. Cyberchimps

cyberchimps

3. Elegant themes

elegantthemes

4. Wpzoom

wpzoom

Estas son sólo algunas de las más famosas. La lista puede aumentar con el paso del tiempo. El siguiente paso es conocer dónde está la documentación básica para crear o modificar un theme de WordPress.

1 Documentación técnica

El mejor lugar dónde buscar información sobre WordPress es en el codex.wordpress.org. Ahí puedes encontrar información de todo lo relacionado con WordPress. Lo que ahora queremos buscar es documentaciñon relacionada con los themes:

Página principal: http://codex.wordpress.org/Theme_Development
Sobre su estructura:  http://codex.wordpress.org/Theme_Development#Anatomy_of_a_Theme
Sobre sus ficheros: http://codex.wordpress.org/Theme_Development#Template_Files
Sobre header.php: http://codex.wordpress.org/Theme_Development#Document_Head_.28header.php.29
Sobre menús: http://codex.wordpress.org/Theme_Development#Navigation_Menus_.28header.php.29
Sobre sidebar.php: http://codex.wordpress.org/Theme_Development#Widgets_.28sidebar.php.29
Sobre footer.php: http://codex.wordpress.org/Theme_Development#Footer_.28footer.php.29
Sobre index.php: http://codex.wordpress.org/Theme_Development#Index_.28index.php.29
Sobre archive.php: http://codex.wordpress.org/Theme_Development#Archive_.28archive.php.29
Sobre page.php: http://codex.wordpress.org/Theme_Development#Pages_.28page.php.29
Sobre single.php: http://codex.wordpress.org/Theme_Development#Single_Post_.28single.php.29
Sobre comments.php: http://codex.wordpress.org/Theme_Development#Comments_.28comments.php.29
Sobre search.php: http://codex.wordpress.org/Theme_Development#Search_Results_.28search.php.29

Si vas a la principal, tendrás un listado con todos los contenidos. Ya ves que toda la documentación está en inglés, pero aún no dominando el idioma, es fácil de seguir y entender.

 

Crear theme de WordPress desde cero

2 Archivos de un theme de WordPress

En tu instalación de WordPress se crea un directorio llamado wp-content y dentro de el otro llamado themes. En themes es donde se guardan las carpetas de cada theme, y es ahí donde vamos a crear un directorio con el nombre de nuestro nuevo theme.

Un theme de WordPress sólo necesita dos archivos para funcionar, el style.css y el index.php. Con estos dos archivos ya funcionaría, pero vamos a crear un theme, que aunque sencillo, nos permitirá personalizarlo mucho más.

Archivos que vamos a crear:

Archivo Descripción Código
style.css Hoja de estilos de nuestro tema Ver
index.php Es la página principal por defecto Ver
functions.php Archivo en el que guardaremos nuestras funciones Ver
404.php La página de error a la que nos redirigirá si no existe lo que buscamos Ver
sidebar.php Será la barra lateral Ver
single.php La vista de cada entrada del blog Ver
page.php La vista de cada página del blog Ver
search.php La vista de resultados cuando realizamos una búsqueda Ver
category.php La vista del listado de posts de una categoría  Ver
tag.php La vista del listado de posts de un tag  Ver
header.php Código para la cabecera de nuestro blog  Ver
footer.php Código para el pié de página de nuestro blog  Ver
vista1.php Una vista específica para nuestras páginas  Ver
/img Directorio para guardar imágenes
/js Directorio para guardar archivos javascripts
screenshot.png Imagen que mostrará WordPress para mostrar nuestro tema
favicon.ico Nuestro favicon

Opcionalmente podemos crear más archivos, como otros templates/vistas, pero ahora vamos a trabajar con estos archivos y directorios. En el apartado Ver  de cada fichero encontraréis el código de ese archivo y una explicación de lo que hace. Es altamente personalizable, tanto con HTML y CSS como con PHP.

3 El loop

Descripción:

El Loop de WordPress es donde reside todo el potencial de este CMS. Es un bucle, que nos muestra todas las entradas, post, páginas u otros tipos que creemos, y que además nos permite filtrarlas.

Código:

4 Breadcrumbs

Descripción:

Es una pequeña función que podemos añadir a functions.php para poder mostrar la ruta o el camino de migas de pan en nuestro theme.

Código:

Después de añadir esto en functions.php, para mostralo bastará con añadir el siguiente código donde queramos.

Código de cada archivo del theme

style.css


Descripción:

En el archivo style.css de nuestro theme de WordPress es dónde se guardarán los estilos. Es necesario comenzar este archivo con las siguientes líneas, ya que WordPress leerá esta información y la utilizará en el listado de themes.

Código:

index.php


Descripción:

En el archivo index.php de nuestro theme de WordPress es dónde se encuentran los contenidos de la página principal. Éstos pueden ser estáticos o dinámicos. Las funciones get_header, get_sidebar y get_footer lo que hacen es cargar el contenido de los archivos header.php, sidebar.php y footer.php. Si en la página principal no quieres mostrar el sidebar, basta con que elimines esa línea.

Código:

functions.php


Descripción:

En el archivo functions.php de nuestro theme de WordPress es dónde se guardan las funciones para que nuestro theme funcione correctamente, y además, podamos añadir nuevas funcionalidades. A continuación el código de alguna de ellas.

Código:

404.php


Descripción:

En el archivo 404.php de nuestro theme de WordPress es la página que se mostrará en caso de que no exista la página que busca el visitante. Más info

Código:

sidebar.php


Descripción:

En el archivo sidebar.php de nuestro theme de WordPress es el archivo dónde se guarda el código relativo a la barra lateral. En muchos casos, quizás prefiramos no mostrarla. Para que esto funcione, es necesario añadir la función en functions.php

Código:

single.php


Descripción:

En el archivo single.php de nuestro theme de WordPress es el archivo dónde se guarda el código relativo a la vista de los contenidos o posts.

Código:

page.php


Descripción:

En el archivo page.php de nuestro theme de WordPress es el archivo dónde se guarda el código relativo a la vista de las páginas que creas.

Código:


Descripción:

En el archivo search.php de nuestro theme de WordPress es el archivo dónde se guarda el código relativo a la vista de las consultas realizadas en nuestro formulario.

Código:

category.php


Descripción:

En el archivo category.php de nuestro theme de WordPress es el archivo dónde se guarda el código relativo a la vista de las categorías.

Código:

tag.php


Descripción:

En el archivo tag.php de nuestro theme de WordPress es el archivo dónde se guarda el código relativo a la vista de las tag o etiquetas. El código es el mismo que en category.php

Código:

header.php


Descripción:

En el archivo header.php de nuestro theme de WordPress es el archivo dónde se guarda el código relativo a la cabecera o header. Utilizamos varias funciones para mostrar el título y otras configuraciones. Tambien mostramos el menú de forma dinámica gracias a la función que añadimos a nuestro functions.php

Código:


Descripción:

En el archivo footer.php de nuestro theme de WordPress es el archivo dónde se guarda el código relativo al pié o footer.

Código:

vista1.php


Descripción:

En el archivo vista1.php de nuestro theme de WordPress es el archivo dónde se guarda el código relativo a una nueva vistaque hemos creado. El nombre es uno al azar, y podemos crear tantas vistas como necesitemos.

Código:


En este manual te hemos explicado la forma de crear tú mismo un theme de WordPress a medida, desde cero. Si aún así crees que no estás capacitado o no tienes el tiempo suficiente, puedes ponerte en contacto con nosotros y lo crearemos por tí.

2 comments

[…] vuestro WordPress. Desde mantener actualizados los plugins, hasta intentar diseñar vuestros themes desde cero. Hoy vamos a intentar ayudaros a ocultar vuestro nombre de […]

[…] tipografías, etc. Algunos son gratis, otros de pago, pero también es posible crearlo tú mismo desde cero, si sabes […]

Leave a reply