Creando un theme para wordpress I

Creando un theme para wordpress I

Ya vimos en la pasada publicación los elementos básicos necesarios para crear un theme para wordpress. Continuamos ahora, partiendo de que ya lo tenemos instalado en nuestro servidor local xampp. Si no sabes hacerlo, aquí tienes un tutorial para aprender a hacerlo.

Hay que tener en cuenta que las notaciones, los nombres de los ficheros … etc están predeterminados. Los themes de wordpress lo encontrarás en el directorio c:\xampp\htdocs\[nombre-de-la-instalacion-wordpress]\wp-content\themes\[nombre-del-tema], siendo [nombre-de-la-instalacion-wordpress] la instalación de wordpress y [nombre-del-tema] la carpeta que hemos creado en donde ubicaremos los ficheros y carpetas de la plantilla.

Los ficheros básicos e indispensables para que wordpress reconozca el theme son: index.php, style.css y screenshot.png. Poco a poco iremos incorporando más archivos que completen la funcionalidad del theme. En index.php irá el código html básico que indicamos en la publicación anterior. al inicio del fichero style.css deberá ir el siguiente texto:

/*
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twentythirteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

Esta información es imprescindible incluirla y no deben cambiarse ningún tag, puesto que no lo reconocerá wordpress. Ya veremos como podemos ir personalizandola. Más adelante, iremos incluyendo todo el código css de la página. Si no recuerdas éste texto, puedes copiar y pegar de la página oficial de wordpress.

Si entras en la administración de wordpress y buscas en apariencia el tema que acabas de crear, verás que no dispone de ninguna imagen. Hay que crear un fichero .png con las dimensiones 1200×900 píxeles. Cuando lo tengas diseñado, guardalo en formato gráfico indicado en la carpeta de tu theme.

Te parecera increible, pero ya tienes en funcionamiento tu primera plantilla wordpress. Solo tienes que escribir la dirección: localhost/[nombre-instalacion-wordpress] y te aparecerá el theme el mensaje que hay entre los tags <body> y </body>. Realmente una plantilla con cero funcionalidades, pero de eso trata este tutorial, de ir creandolas hasta que lleguemos al resultado final.

Seguimos el siguiente tutorial aprendiendo como se incluyen las librerias css y javascript que necesitaremos para nuestro themes.

No Comments

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.