Tutorial Crear Theme Wordpress

Autor: Cristian Gil Director MarketingOptimo.com

COPYRIGHT Este manual fue creado expresamente con fines EDUCATIVOS, es de libre distribución, siempre y cuando no se altere su contenido. Está prohibido copiar o reproducir partes del mismo sin permiso expreso del autor.

ACERCA DEL AUTOR

Hola, mi nombre es Cristian Gil, tenía por pasa tiempo diseñar y desarrollar aplicaciones para la web, digo tenía porque ahora mi pasión es otra, es el Marketing por Internet. Cuando era diseñador y desarrollador web, me gustaba mucho estudiar sobre nuevas tecnologías, programación y temas técnicos, en ese entonces fue cuando aprendí a crear Themes para Wordpress, cree un par de tutoriales al respecto que compartí en un blog que tuve de diseño y desarrollo web, solo hasta hace poco decidí unir ese material en un manual paso a paso para compartirlo en internet y que otras personas pudieran beneficiarse de él. Así es como nace este tutorial Cómo Crear un Theme para Wordpress Desde Cero. Aprovecho este espacio para invitarte a mi sitio web MarketingOptimo.com, es allí donde estoy compartiendo constantemente información relacionada con el Marketing en Internet y los negocios online. Si consideras que es un tema importante para ti y quieres estar al tanto, recuerda suscribirte a nuestros boletines electrónicos.

Un saludo muy especial,

Cristian Gil Director: MarketingOptimo.com

Una de las plataformas de blogging más utilizada actualmente es Wordpress, y una de sus características más fascinantes son los Themes, en este tutorial enseñamos paso a paso como crear un theme desde cero. Si realmente quieres aprender a crear tu propio Theme para Wordpress, este tutorial es para ti.

TABLA DE CONTENIDO

Contenido INTRODUCCIÓN ........................................................................................................................................... 5 INSTALACIÓN DE WORDPRESS ..................................................................................................................... 7 EL INDEX.PHP ............................................................................................................................................. 10 LA CABECERA (HEADER) ............................................................................................................................. 13 EL BUCLE (THE LOOP) ................................................................................................................................. 16 EL CONTENIDO ........................................................................................................................................... 19 POST META DATA ...................................................................................................................................... 23 LINKS SIGUIENTE Y ANTERIOR .................................................................................................................... 26 LA BARRA LATERAL (SIDEBAR) Y LAS CATEGORÍAS ..................................................................................... 28 LISTADO DE PÁGINAS COMO LINKS DENTRO DE LA BARRA LATERA (SIDEBAR) .......................................... 32 EXPLICACIÓN DE LAS ETIQUETAS UL Y LI .................................................................................................... 34 COMO INCLUIR LOS ARCHIVOS DENTRO DE NUESTRA BARRA LATERAL ..................................................... 36 CÓMO INCLUIR LOS LINKS RECOMENDADOS DENTRO DE NUESTRA BARRA LATERAL ................................ 39 FORMULARIO DE BÚSQUEDA..................................................................................................................... 41 PREPARA LA BARRA LATERAL PARA LOS WIDGETS .................................................................................... 43 CREAR EL PIE DE PÁGINA O FOOTER .......................................................................................................... 45 CREACIÓN DE LOS SUB-ARCHIVOS DE PLANTILLA ...................................................................................... 47 VALIDAR EL CÓDIGO .................................................................................................................................. 52 INTRODUCCIÓN CSS (STYLE.CSS) ................................................................................................................ 53 COMENCEMOS A CREAR EL CÓDIGO CSS .................................................................................................... 57 PLANTILLA DE COMENTARIOS .................................................................................................................... 61

INTRODUCCIÓN Bueno, una breve introducción antes de comenzar, un Theme en wordpress es básicamente una piel (diseño) para tu blog, con la cuál puedes controlar la apariencia de tu blog y la forma en cómo la información es presentada al usuario. Puedes cambiar el theme de tu blog fácilmente y de esta manera cambiar el diseño de todo tu blog con unos cuantos clics, la idea detrás de este tutorial es que aprendas a crear tus propios themes y de esta forma le des a tu blog un estilo único o que ofrezcas servicio de diseñador web y crees themes para la venta. Cada theme tiene al menos dos archivos, index.php y style.css, con el index.php le indicas al theme donde va todo y con el style.css la apariencia que tendrá. Pero la estructura de un theme la componen normalmente los siguientes archivos -style.css -index.php -home.php -single.php -page.php -archive.php -category.php -search.php -404.php -comments.php -comments-popup.php -author.php -date.php No te preocupes por esta lista, ya los veremos en su momento y te sorprenderás por lo sencillo que es. Herramientas Para seguir este tutorial necesitas: - Instalar Wordpress en tu computador o si tienes un sitio web y no quieres hacer la instalación en tu PC entonces has una instalación de prueba en tu sitio web.

- El Bloc de notas o tu editor de texto favorito, también puedes usar DreamWeaver si lo tienes. - Incluye en tus favoritos Validador XTHML y Validador CSS , vamos a necesitar estas herramientas para chequear el código y asegurarnos que no contengan errores. Jerarquía dentro de un Theme de Wordpress Los archivos tienen jerarquía dentro de un Theme de Wordpress, esto es útil básicamente porque llegado el caso de que uno de los archivos no exista, Wordpress apuntaría al index.php.

En la anterior imagen hacen falta archivos, es simplemente para que se den una idea, ahora la jerarquía completa la pueden ver aquí

INSTALACIÓN DE WORDPRESS Pasos 1. Descargar Wamp Server Este es un paquete con el cuál instalarás el servidor Apache, bases de datos MySQL y PHPMyAdmin, los cuales son necesarios para correr una instalación de wordpress (o un blog) localmente. Descargar: Wamp Server 2. Instalar Wamp Server La instalación es muy sencilla y no requiere que cambies las opciones que trae por defecto, lo que debes hacer es darle clic en siguiente, siguiente hasta que termine, te preguntará al final si deseas ejecutar Wamp Server dile que si y listo, ahora tendrás un nuevo icono en la barra de tareas cerca al reloj, desde allí puedes manipular las herramientas del servidor, ten en cuenta que cada que prendas tu PC debes activar tu servidor por inicio >> todos los programas >> wamp server >> start wamp server, para verificar si quedó instalado tu servidor, abre tu navegador de internet y digita http://localhost/ debes ver una página de Wamp Server. 3. Crear la base de datos para tu blog Debes tener tu Wamp Server activo, Clic en el icono de Wamp Server en la barra de tareas y luego selecciona PHPMyAdmin.

Se abrirá la página de phpMyAdmin, Digita "basedatos_blog" en el campo donde dice crear nueva base de datos y dale clic al botón crear. tu puedes ponerle el nombre que quieras a tu base de datos, para efectos de este ejemplo yo la llamaré "basedatos_blog". Listo ya tienes creada la base de datos para tu blog. 4. Descargar Wordpress Ingresa a la página oficial de Wordpress y descarga el paquete en español Descargar: Wordpress en español 5. Instalar Wordpress - Descomprime el paquete que has descargado y copialo en esta ubicación C:\wamp\www\, luego abre el archivo wp-config-sample con tu bloc de notas o con tu editor de texto y rellena los datos de tu conexión a la base de datos así: define('DB_NAME', 'basedatos_blog'); define('DB_USER', 'root'); define('DB_PASSWORD', '');

define('DB_HOST', 'localhost'); - Guarda los cambios y renombra el archivo de wp-config-sample a wp-config. - Ejecuta el instalador de Wordpress digitando la siguiente dirección en tu navegador de internet http://localhost/wordpress/wp-admin/install.php - Digita el nombre que quieres para tu blog y la dirección de tu e-mail. - Listo Wordpress se ha instalado, toma nota del nombre de usuario y contraseña que vez en pantalla, si quieres de una vez inicia sesión para mostrate algo, una vez hayas ingresado, ubica en el lado izquierdo de la página el menú que dice Aspecto y allí ubica el link que dice Temas, dale clic, verás por defecto dos temas Wordpress Default y Wordpress Classic, estos temas o Themes son los que le dan el aspecto visual al blog, con solo darle clic sobre uno u otro mi blog cambiará de apariencia. En este tutorial vamos a aprender precisamente a crear un Theme para que nuestro Blog tenga un diseño único. Quieres ver actualmente como luce tu blog, digita esta dirección en tu navegador de internet http://localhost/wordpress/

EL Index.php Ahora sí comienza lo entretenido. Pasos 1. Abre el Wamp Server: Inicio >> todos los programas >> Wamp Server >> Start Wamp Server 2. Crea la carpeta para tu Them: Ve a la carpeta Themes de la instalación de Wordpress, la ruta es C:\wamp\www\wordpress\wp-content\themes, dentro de Themes crea una carpeta que se llame tutorial, dentro de la carpeta tutorial guardaremos todos los archivos que vayamos creando. 3. Crea el archivo index.php: Abre tu bloc de notas o tu editor de texto favorito, copia y pega el código de este archivo index a tu bloc de notas y guárdalo con el nombre de index.php 4. Crea el archivo style.css: Abre el bloc de notas y copia el código de este archivo style a tu bloc de notas y guárdalo con el nombre de style.css Explicación código index.php La siguiente imagen contiene exactamente el código que tu acabas de pegar en tu archivo index.php, en la imagen ves letras de diferentes colores, eso es porque lo estoy visualizando con DreamWeaver el cual tiene funcionalidades como marcar el código de colores para mayor claridad.

Es la etiqueta con la que se inicia todo documento HTML. es donde inicia la cabecera del documento HTML es una función php con la cuál llamamos el archivo style.css, el código php se abre con de esta forma cerramos la etiqueta head, es decir es donde el head (cabecera) termina es donde el cuerpo del documento HTML comienza final del cuerpo final del documento HTML

Muy bien, ingresa ahora al área de administración de tu blog, para eso copia y pega la siguiente dirección en tu navegador de internet http://localhost/wordpress/wp-admin e ingresa con el usuario y contraseña que te dio Wordpress cuando lo instalaste. Una vez hayas ingresado, ubica la opción Temas, cuando entres selecciona el tema llamado Tutorial, que es el que estamos creando, Wordpress te preguntará si deseas activarlo, dile que sí. Ahora copia y pega la siguiente dirección en tu navegador http://localhost/wordpress/ no verás nada, es decir una página totalmente en blanco, ese es tu blog, iremos avanzando para que veas como comienza a tomar forma.

LA CABECERA (Header) Es allí donde normalmente mostramos el nombre del blog, su descripción y también se utiliza para el menú de navegación. Pasos 1. Abre el Wamp Server: Inicio >> todos los programas >> Wamp Server >> Start Wamp Server 2. Abre el archivo index.php con el bloc de notas o con el editor de texto que estés usando, recuerda que el index.php debe estar en la carpeta tutorial en la siguiente ruta C:\wamp\www\wordpress\wp-content\themes\tutorial En estos momentos si pegas esta dirección en tu navegador http://localhost/wordpress/ verás una página en blanco. 3. Escribe el siguiente código entre la etiqueta y de tu archivo index.php Ahora guarda los cambios, ve nuevamente a http://localhost/wordpress/ y refresca la página, ahora vez el título de tu blog. Explicación es una función de php que llama la URL de tu blog, en este caso el dato que obtiene es http://localhost/wordpress/ son etiquetas HTML lo que haya dentro de las comillas se convierte en un link. Esta etiqueta HTML significa heading 1, en HTML existen H1, H2, H3, H4, H5, H6, siendo H1 la de mayor tamaño y H6 la de menor. Basicamente la línea de código que acabamos de escribir obtiene la URL del blog, y la

convierte en un link con el título de tu blog y además con le damos el valor de título principal. Ve nuevamente a la página http://localhost/wordpress/ y verás que el título de tu blog es tutorial, pero a su vez es un link que apunta a la URL del blog, ese es un comportamiento muy usual, la mayoría de páginas web en su logo o título de la web apuntan a la página principal. 4. Escribe el siguiente código después de la línea de código que escribiste en el punto anterior. Guarda los cambios, ve nuevamente a http://localhost/wordpress/ y refresca la página. Explicación es una función php con la que llamamos la descripción de tu blog, esta al igual que el título de tu blog se puede cambiar desde el área de administración en el menú General. 5. Introduce una nueva etiqueta y ciérrala dentro de esta etiqueta debe ir el código que acabas de escribir, quedaría de la siguiente forma.