Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Tutorial Crear Theme Wordpress
Tutorial Crear Theme Wordpress
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.
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
EL INDEX.PHP ............................................................................................................................................. 10
EL CONTENIDO ........................................................................................................................................... 19
CÓMO INCLUIR LOS LINKS RECOMENDADOS DENTRO DE NUESTRA BARRA LATERAL ................................ 39
FORMULARIO DE BÚSQUEDA..................................................................................................................... 41
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á.
-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
Herramientas
- 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.
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
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.
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.
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".
4. Descargar Wordpress
5. Instalar Wordpress
define('DB_NAME', 'basedatos_blog');
define('DB_USER', 'root');
define('DB_PASSWORD', '');
define('DB_HOST', 'localhost');
- 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
Pasos
Inicio >> todos los programas >> Wamp Server >> Start Wamp Server
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
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
<?php bloginfo(’stylesheet_url’); ?> es una función php con la cuál llamamos el archivo
style.css, el código php se abre con <?php y se cierra con ?>
</head> de esta forma cerramos la etiqueta head, es decir es donde el head (cabecera)
termina
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í.
Pasos
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
Explicación
<?php bloginfo('name');? es una función de php que llama el título de tu blog, el título de
tu blog lo puedes ver y cambiar yendo al área de administración de tu blog y dando clic en
el menú General.
<?php bloginfo(’url’); ?> es una función de php que llama la URL de tu blog, en este
caso el dato que obtiene es http://localhost/wordpress/
<a href=" "></a> son etiquetas HTML lo que haya dentro de las comillas se convierte en
un link.
<h1> 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.
Explicación
<?php bloginfo('description'); ?> 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 <div> y ciérrala </div> dentro de esta etiqueta debe ir el
código que acabas de escribir, quedaría de la siguiente forma.
<div>
</div>
La etiqueta <div> lo que hace es crear un caja invisible, la cual separa el título y la
descripción de tu blog de todo lo demás, adicionalmente más adelante nos será de mucha
utilidad cuando estemos trabajando con el archivo style.css
<div id="header">
<div id="header">
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
</div>
7. Copia todo el código que hay desde la etiqueta </div> hacía arriba, absolutamente todo
y pégalo en un nuevo archivo, guarda el archivo en tu carpeta tutorial con el nombre de
header.php
8. Reemplaza todo el código que copiaste del index.php al header.php con la siguiente
línea de código <?php get_header(); ?>
<?php get_header(); ?> es una función de php la cuál llama otro archivo php en este
caso el header.php, básicamente lo que estamos haciendo es fragmentar el código y
dividirlo en diferentes archivos por orden y para respetar la estructura de Wordpress.
</body>
</html>
El BUCLE (The Loop)
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
3. Introduce una nueva etiqueta <div id="container"> después del código <?php
get_header(); ?> de tu archivo index.php así:
<div id="container">
</div>
<?php endwhile;?>
<?php endif;?>
Explicación
Creo que es en estos momentos es donde vale la pena explicar un poquito el concepto de
Bucle o en inglés The Loop en Wordpress.
El Bucle (The Loop) es un término que se refiere al proceso principal de WordPress, se
llama bucle o en inglés the loop, porque un bucle es un trozo de código que se repite
mientras se cumpla una condición, luego cuando no se cumpla más se termina el bucle.
Wordpress utiliza el Bucle (The Loop) para mostrar cada uno de los artículos, por ejemplo
el título, la fecha y la categoría pueden ser codificados dentro del Bucle para que se
repitan por cada artículo.
Entonces nuestro Bucle consiste en el código que se encuentra dentro de la etiqueta <div
id="container">
endwhile; cierra el while (mientras que), es decir cuando ya no hayan mas posts para
mostrar endwhile; cierra el ciclo.
Este código es el que hace que si tú tienes 10 posts actualmente en tu blog, éstos sean
mostrados en tu página uno tras otro desde el más reciente, seguido del siguiente artículo
más reciente y así sucesivamente.
Explicación
Para que veas que hace la línea de código que acabas de adicionar, ve a tu
blog http://localhost/wordpress/ ahora puedes notar que adicional al título y descripción
de tu blog, tienes ahora un subtítulo ¡Hola, mundo! el cuál es el título del único post que
hay en tu blog, puedes entrar al área de administración de tu blog y crear varios posts
como prueba para que veas cómo se listan, yo por ejemplo cree dos post más, así que mi
blog por ahora luce como lo muestra la siguiente imagen.
<h2> Esta etiqueta HTML significa heading 2, en HTML existen H1, H2, H3, H4, H5, H6,
siendo H1 la de mayor tamaño la cuál utilizamos para el título de blog, ahora utilizaremos
<h2> para los títulos de cada uno de los artículos.
<a href=" "></a> son etiquetas HTML lo que haya dentro de las comillas se convierte en
un link.
<?php the_permalink();?> es una función php que llama la URL de cada artículo o post,
los Permalinks son las URLs permanentes de cada uno de tus artículos.
Básicamente la línea de código que acabamos de escribir obtiene la URL de cada uno de
tus artículos, y la convierte en un link con el nombre del título del artículo y además
con <h2> le damos el valor de subtítulo dentro de tu blog.
El CONTENIDO
Pasos
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
3. Escribe el siguiente código exactamente una línea antes del <?php endwhile;?>
4. Introduce una nueva etiqueta <div class="entry"> alrededor del código que creaste en
el punto anterior, para qué? para que sepas donde finalizan los títulos de los posts y
donde comienza su contenido, además porqué será muy útil cuando estés trabajando con
el archivo style.css, ya que puedes definir la apariencia que tendrá el contenido de tus
posts sin afectar lo demás.
Explicación
<?php the_content(); ?> Es una función php con la que se llama el contenido de cada
uno de los posts.
En conclusión no puedes tener un DIV con el mismo id, es decir no puede existir en la
misma página dos <div id="container"> cuando quieras reutilizar algo una y otra vez
utiliza class.
5. Introduce una nueva etiqueta <div class="post"> alrededor del título y del contenido
de tus posts, para qué? para separar un post del otro.
El Post Meta Data es información que les puedes mostrar a los visitantes de tu blog sobre
cada post, esta información es usualmente, el autor del post, la fecha y la hora de
publicación, bajo que categoría está ese post en particular y cuantos comentarios ha
tenido.
Cada que tú creas un post en tu blog, la información Post Meta Data es guardada en la
base de datos de tu blog de forma automática, lo que vamos a hacer es llamar esa
información de la base de datos para mostrársela a los usuarios del blog.
Pasos
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
3. Copia y pega el código que hay en este link PostMetaData y pégalo exactamente
debajo del código <?php the_content(); ?> de tu archivo index.php
Este código es muy estandar, muchos Themes lo tienen así, tu puedes utilizar este mismo
código para los diferentes Themes que crees, o puedes modificar algunas líneas, por
ejemplo si borras la parte del código que dice <?php the_time(' g:ia') ?> no se mostraría
la hora.
Explicación
<? php the_time() ?> es una función php que me devuelve la fecha y la hora en la que el
post fue publicado.
<?php the_category(', ') ?> es la función php que llama las categorías que fijaste para el
post, la coma (,) sirve para separar cada una las categorías si es que el post tiene más de
una.
<?php the_author(); ?> es la función php que llama el nombre del autor del post.
<?php comments_popup_link, 'No hay comentarios »' será lo que se muestre
cuando tu post no tenga ningún comentario, '1 Comentario »' para cuando tu post
tenga un comentario y '% Comentarios »' para cuando tu post tenga más de un
comentario.
LINKS SIGUIENTE Y ANTERIOR
Los links Siguiente y Anterior permiten que los usuarios y lectores naveguen a través de
tu blog, por defecto Wordpress tiene configurado mostrar 10 Post por cada página, es
decir si tú has creado ya más de 10 Posts, verás al final de la página los links Siguiente y
Anterior que permiten avanzar y retroceder para ver los demás Posts.
El valor por defecto de 10 Posts puede ser cambiado por el número de Posts que quieras
que sea mostrado por cada página, para cambiarlo puedes ir al área de administración de
tu blog http://localhost/wordpress/wp-admin, entra al menú opciones de lectura, y allí
hay una casilla que dice " las páginas del blog mostrarán un máximo de " (10) entradas,
modifica el valor por el número que tú quieras.
Pasos
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
Explicación
<div class="navigation"> crea un Div (Caja invisible) el cuál como lo habíamos dicho
antes, sirve para separar este código de todo lo demás, si si... exacto tienes razón y
también podemos manipular su apariencia desde el archivo style.css sin afectar lo demás.
Muy Bien! ya lo tienes claro.
Abre tu explorador de internet http://localhost/wordpress/ , seguramente no veas el link
de siguiente, recuerda que por defecto Wordpress está configurado para mostrar estos
links después de tener más de 10 posts, entonces abre el panel de administración de tu
blog http://localhost/wordpress/wp-admin ubica el menú opciones de lectura y cambia
el valor de 10 a un número que sea menor al total de posts que tienes, si tienes 5 posts
entonces cámbialo a 4, para que puedas ver cómo funciona.
Por ejemplo yo tengo tres post que he creado en este tutorial, entonces cambié el valor a
2, para que muestre dos Post por página, y así el link siguiente se activará.
LA BARRA LATERAL (Sidebar) Y LAS CATEGORÍAS
La Barra Lateral es la columna vertical que tienen casi todos los blogs, también es
conocida como el menú, la barra lateral puede estar ubicada al lado izquierdo o derecho
del blog y es allí donde normalmente encontramos por ejemplo los últimos posts
publicados, información sobre el autor, vínculos a otros blogs recomendados por el autor,
es en la barra lateral donde los usuarios de tu blog encontrarán los vínculos que le
permitirán navegar en todo el sitio de una manera fácil.
Pasos
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
Explicación
4. Crea un nuevo archivo con el editor de texto que estés trabajando y guarda el archivo
con el nombre de sidebar.php dentro de la carpeta tutorial.
<div class="sidebar">
<ul>
<li><h2>Categorías</h2>
</li>
</ul>
</div>
Recuerda que es muy importante que tabules tu código, mira como se ve el mío.
Explicación
<div class="sidebar"> creamos un Div (Caja invisible) con la clase "sidebar", creo que ya
sabes para que hacemos esto, es para separar nuestra barra lateral de todo lo demás.
<ul>
</ul>
Para que veas esta parte del código en funcionamiento, debes ir al panel de
administración de tu blog http://localhost/wordpress/wp-admin y selecciona la
opción Entradas >> Categorías, allí crea dos categorías más, por defecto Wordpress trae
una categoría llamada General, pero tú puedes crear cuantas más quieras.
Posteriormente crea dos posts más, pero asegúrate que queden bajo las categorías que
acabas de crear, cuando tu creas un post puedes seleccionar bajo que categorías quieres
que quede, si una categoría no tiene ningún post, entonces no será mostrada.
Por ejemplo, yo cree 3 Categorías Cursos, Tutoriales y CSS como pueden ver la
categoría CSS no está listada, porque no tiene ningún post, si voy y creo un post que
quede bajo esa categoría, automáticamente será listada en el blog.
LISTADO DE PÁGINAS COMO LINKS DENTRO DE LA BARRA LATERA
(sidebar)
La mayoría de los blogs tienen en su barra lateral un listado similar a un menú, donde el
usuario puede navegar a través de estos links por todas las páginas del blog.
Pasos
Inicio >> todos los programas >> Wamp Server >> Start Wamp Server
2. Abre el archivo sidebar.php con el bloc de notas o con el editor de texto que estés
usando, recuerda que el sidebar.php debe estar en la carpeta tutorial en la siguiente
ruta C:\wamp\www\wordpress\wp-content\themes\tutorial
Esta función php llama la lista de las páginas de tu blog y las convierte en links, esta
función tiene varios parámetros entre los cuales está el title_li, este parámetro sirve para
darle el nombre a la lista, por ejemplo Páginas, después de agregar esa línea de código
mi blog se ve así.
Bueno, en el siguiente link puedes ver el código de cómo va hasta ahora mi sidebar.php
EXPLICACIÓN DE LAS ETIQUETAS UL y LI
Quiero hacer un paréntesis en este capítulo y explicar las etiquetas HTML UL y LI, en este
capítulo sólo vamos a ver una explicación no hay que hacer nada, seguiremos con la
creación de nuestro theme en el próximo capítulo.
La etiqueta UL sirve para definir una lista no ordenada de elementos y la etiqueta LI define
cada elemento de la lista.
Bueno y esto para qué? porque lo estoy explicando? en el capítulo anterior listado de
páginas como links, estuvimos trabajando con estas etiquetas HTML de igual forma
utilizamos UL para definir la lista y LI para definir cada elemento de la lista, pero resulta
que hay algunas funciones de php en Wordpress que crean automáticamente estas
etiquetas haciendo parte del trabajo por nosotros.
Veamos…
Normalmente los blogs muestran en su barra la lateral unos links con el nombre de los
meses donde están agrupados todos los posts que has publicado, esos son los archivos,
vamos a ver en este capítulo como incluirlos dentro de nuestra barra lateral.
Pasos
Inicio >> todos los programas >> Wamp Server >> Start Wamp Server
2. Abre el archivo sidebar.php con el bloc de notas o con el editor de texto que estés
usando, recuerda que el sidebar.php debe estar en la carpeta tutorial en la siguiente
ruta C:\wamp\www\wordpress\wp-content\themes\tutorial
<ul>
</ul>
</li>
Después de incluir estas líneas de código guarda los cambios, ahora nuestro sidebar.php
lucirá así.
Para recordar lo que llevamos hasta ahora dentro de nuestro sidebar.php encerré como lo
puedes ver en la imagen anterior tres grupitos, el primero es el que hace que se listen los
links de las páginas, el segundo lista las categorías y el tercero que fue el que acabamos
de añadir y que lista los archivos por mes.
Explicación
Pasos
Inicio >> todos los programas >> Wamp Server >> Start Wamp Server
2. Abre el archivo sidebar.php con el bloc de notas o con el editor de texto que estés
usando, recuerda que el sidebar.php debe estar en la carpeta tutorial en la siguiente
ruta C:\wamp\www\wordpress\wp-content\themes\tutorial
Explicación
Abre tu explorador de internet http://localhost/wordpress/ ahora puedes ver algo similar
a la siguiente imagen.
Pasos
Inicio >> todos los programas >> Wamp Server >> Start Wamp Server
2. Crea un nuevo archivo con el bloc de notas o con el editor de texto que estés usando,
copia el código de mi searchform a este nuevo archivo y guárdalo dentro de la carpeta
tutorial con el nombre de searchform.php.
3. Abre el archivo sidebar.php con el bloc de notas o con el editor de texto que estés
usando, recuerda que el sidebar.php debe estar en la carpeta tutorial en la siguiente
ruta C:\wamp\www\wordpress\wp-content\themes\tutorial
4. Dentro del archivo sidebar.php escribe las siguientes líneas de código exactamente
antes de la lista de las páginas.
<li id="search">
</li>
La siguiente imagen muestra donde van esas líneas de código.
Explicación
Además, esa línea de código está dentro de un <li> al cual le hemos dado un id="search",
si le das un ID puedes darle más tarde estilo con CSS.
Preparar la barra lateral para admitir widgets se conoce como "widgetize", consiste en
preparar tu barra lateral para que funcione con el widget plugin con el cual se pueden
adicionar elementos a tu barra lateral sin necesidad de modificar el código, por ejemplo tu
puedes poner un calendario en tu barra lateral añadiendo un código especifico en tu
sidebar.php, pero también puedes hacer eso mismo sin necesidad de añadir el código
añadiendo un widget llamado calendario, esto se hace desde el panel de administración
de tu blog.
Para que los widgets funcionen en tu blog, vamos a "widgetize" la barra lateral
(sidebar.php)
Pasos
Inicio >> todos los programas >> Wamp Server >> Start Wamp Server
2. Crea un nuevo archivo con el bloc de notas o con el editor de texto que estés usando,
copia el código de mi functions a este nuevo archivo y guárdalo dentro de la carpeta
tutorial con el nombre de functions.php.
3. Abre el archivo sidebar.php con el bloc de notas o con el editor de texto que estés
usando, recuerda que el sidebar.php debe estar en la carpeta tutorial en la siguiente
ruta C:\wamp\www\wordpress\wp-content\themes\tutorial
Bueno, con esas dos líneas de código hemos conseguido que nuestro sidebar o barra
lateral sea dinámica, que quiere decir eso, muy simple, que ahora puedes añadirle
elementos y quitárselos sin necesidad de escribir una sola línea de código y todo desde el
panel de administración de tu blog.
Quieres ver un ejemplo? la barra lateral de nuestro blog luce actualmente así: Un
formulario de búsqueda, el listado de links de las páginas, el listado de links de las
categorías, los archivos por mes y los enlaces, pero ahora puedes quitar, añadir y cambiar
el orden de los elementos que hay en esta barra lateral y todo eso desde el panel de
administración, porqué? porque ahora tenemos una barra lateral dinámica.
Cuando ya hayas practicado con esto, te pido un favor, ve y desactiva todos los widgets
que añadiste, para que quede igual a como lo teníamos, así podrás seguir el tutorial sin
confundirte.
CREAR EL PIE DE PÁGINA O FOOTER
El footer es la parte final que normalmente tienen los blogs o sitios web donde se puede
poner por ejemplo el copyright del blog, quién diseño el theme (a partir de ahora
aparecerá tu nombre, porque dejarás de utilizar themes creados por otros).
Pasos
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
Explicación
4. Borra las etiquetas </body> y </html> del archivo index.php son las dos etiquetas que
siguen después de la línea que acabas de adicionar, esas dos etiquetas se deben borrar
porque deben ir al final del archivo que vamos a crear a continuación.
5. Crea un nuevo archivo con el editor de texto que estés trabajando y guarda el archivo
con el nombre de footer.php dentro de la carpeta tutorial.
6. Escribe el siguiente código dentro del archivo footer.php que acabas de crear.
<div id="footer">
<p>
</p>
</div>
Explicación
En este caso una breve explicación, porque la línea de código utilizada ya la habíamos
usado.
Bueno como puedes ver esas dos funciones están dentro de la etiqueta <a href></a> y
básicamente lo que hicimos es que el nombre del blog aparezca en el footer como un link.
7. Digita las dos etiquetas que borraste en el punto 4, al final del archivo footer.php
Aún nos falta crear algunos archivos que son utilizados por Wordpress para desplegar la
información en tu blog, por ejemplo el resultado de una búsqueda en wordpress es
desplegada en base al archivo search.php.
Lo mejor de todo es que muchos de estos archivos son iguales al index.php basta con
copiar el código y hacerle algunos cambios mínimos y listo.
Pasos
1. Crea un nuevo archivo con el bloc de notas o con el editor de texto que estés usando y
guárdalo con el nombre de archive.php
Explicación
Cambiar esa línea de código hace que ahora los archivos muestren sólo un extracto de
cada post y no el post completo, como una especie de resumen, puedes ir a tu blog y
luego le das clic en el enlace de archivos para que veas el cambio, esa página de
archivos es desplegada en base al archivo llamado archive.php, vale la pena resaltar algo,
seguro ya lo tienes claro, si el archive.php no existe, wordpress se basa en la jerarquía de
archivos de plantilla para ubicar el archivo que le sirve para desplegar la información,
entonces si archive.php no existe, wordpress utilizará el index.php.
5. Crea un nuevo archivo con el bloc de notas o con el editor de texto que estés usando y
guárdalo con el nombre de category.php
Simple, cuando vayas a tu blog y le des clic al enlace de categorías, wordpress buscará
inicialmente el archivo category.php para mostrar la información, si category.php no existe
entonces buscará el archive.php y si este no existe buscará el index.php.
8. Crea un nuevo archivo con el bloc de notas o con el editor de texto que estés usando y
guárdalo con el nombre de search.php
11. Crea dos nuevos archivos y guárdalos con los nombres de page.php y single.php
respectivamente.
12. Copia y pega el código del index.php en cada uno de estos dos archivos.
<?php edit_post_link('Edit','<p>','</p>');?>
Explicación
La segunda línea crea el botón editar páginas, siempre y cuando estés logueado como
administrador.
15. Mira la imagen anterior, borra el código Post Meta Data del archivo page.php
Explicación
Al igual que hicimos en el page.php esa línea permite dividir un post en varios sub-posts
Explicación
Pasos
Inicio >> todos los programas >> Wamp Server >> Start Wamp Server
3. Una vez estés en tu blog, clic derecho >> ver código fuente, copia todo el código que
veas en pantalla desde el inicio hasta el final.
4. Ve a siguiente link para validar el código, Validador XHTML, pega el código y presiona
el botón "Check"
Puedes ver que el resultado es que pasó, si hay algún error allí aparecería el número de
errores, además te mostraría donde están los errores y una posible solución, si has
seguido el tutorial desde el inicio, entonces te debe estar mostrando también que pasaste
la verificación.
INTRODUCCIÓN CSS (style.css)
Podemos decir que lo que llevamos hasta ahora es como un 30% de la creación de un
theme, el 70% restante corresponde al diseño con CSS, hasta aquí has aprendido XHTML
y PHP, vamos muy bien, prepárate para aprender un poco de CSS, y sí digo un poco
porque esta tecnología es muy potente así que lo que te voy a mostrar no es sino una
mínima parte de lo que puedes hacer.
Una vez termines este tutorial, te aconsejaría que te hagas a un manual de CSS para que
le saques todo el potencial que tiene este fabuloso lenguaje.
Comencemos!
Pasos
Inicio >> todos los programas >> Wamp Server >> Start Wamp Server
2. Abre el archivo style.css con el bloc de notas o con el editor de texto que estés usando,
recuerda que el style.css debe estar en la carpeta tutorial en la siguiente
ruta C:\wamp\www\wordpress\wp-content\themes\tutorial
/*
Version: 1.0
*/
Explicación
Esa información la interpreta wordpress, por eso cuando entras al panel de administración
de tu blog, al apartado de estilo >> temas, verás que hay un tema con el nombre tutorial y
la descripción que dice Theme para un Tutorial, esa es la información que ponemos
inicialmente en el archivo CSS.
Mientras vamos creando nuestro código CSS, debemos abrir varios navegadores de
internet como (Firefox, Internet Explorer, Google Chrome) ya que hay una mala noticia,
los navegadores interpretan algunas líneas de código CSS de forma diferente, entonces
tenemos que ir revisando que el diseño se vea igual en todos los navegadores o al menos
en los más populares.
Vamos a ver de manera resumida una explicación sobre la sintaxis del CSS y cómo es
que funciona.
SELECTOR {propiedad:valor;}
Ejemplo:
H1 {color:#000000;}
En el ejemplo el selector es una etiqueta HTML, porque en CSS podemos utilizar
etiquetas HTML o selectores propios creados por nosotros, esa línea de código hace que
todos los textos que estén alrededor de una etiqueta <H1> siempre tengan color negro.
2. Agrupamiento
Selectores: Si se desea definir una regla que aplique a varios selectores, desde 2 hasta
los que queramos.
Ejemplo:
H1, P {color:#000000;}
En el ejemplo estamos dándole estilo a dos selectores al mismo tiempo, tanto la etiqueta
<H1> como <p> tendrán su texto color negro.
Ejemplo:
Los selectores de clase, que se conocen comúnmente como clases, son selectores que
podemos reutilizar a lo largo de nuestro código HTML para darle el mismo estilo a
diferentes partes de nuestra página, son utilizados normalmente para agrupar estilos que
se repiten constantemente, Las clases siempre comienzan con un punto.
.NOMBRE_CLASE {propiedad:valor;}
Ejemplo:
.float-left{float:left;}
Esta clase la podemos utilizar todas las veces que queramos hacer flotar un elemento a la
izquierda.
4. Selectores ID
Los selectores ID deben ser usados una sola vez a diferencia de los selectores de clase.
#NOMBRE_SELECTOR_ID {propiedad:valor;}
Ejemplo:
Bueno, esto es solo una breve introducción que te servirá para entender mejor el código
CSS con el que vamos a darle estilo a nuestro Theme, pero no olvides que CSS es de
práctica, así que no pretendamos entenderlo de la noche a la mañana, verás cómo te irá
pareciendo cada vez más fácil y práctico.
COMENCEMOS A CREAR EL CÓDIGO CSS
Pasos
Inicio >> todos los programas >> Wamp Server >> Start Wamp Server
2. Abre el archivo style.css, header.php y footer.php con el bloc de notas o con el editor
de texto que estés usando, recuerda estos archivos deben estar en la carpeta tutorial en
la siguiente ruta C:\wamp\www\wordpress\wp-content\themes\tutorial
<div id="wrapper">
</div>
#wrapper{
width: 980px;
text-align: left;
Explicación
<div id="wrapper"> esta línea de código crea un div o caja que contendrá todos los
elementos de nuestro theme, como es el header, el contenido, la barra lateral, el footer,
con ese div vamos a definir el tamaño que tendrá el theme, si 750px (resolución de
800x600) ó 980px (resolución 1024 x 768)
Como puedes notar le dimos un id con el nombre de "wrapper" para poderle dar estilo con
CSS, es en el archivo CSS donde le indicaremos el tamaño en pixeles.
</div> Esta etiqueta cierra la línea de código anterior.
Mi consejo es que no copies y pegues, sería bueno que al principio digites el código así
aprenderás más rápido, luego si podrás copiar y pegar, además si utilizas un editor de
CSS o por ejemplo DreamWeaver verás que es muy fácil escribirlo, el mismo programa te
va mostrando los valores que tiene cada propiedad.
Explicación
Cada línea es una propiedad con su respectivo valor, como lo había comentado en el
capítulo anterior, la estructura del código CSS normalmente es:
Selector {propiedad:valor;}
Un selector puede ser una etiqueta HTML como es el caso anterior, el <body> es una
etiqueta HTML, lo que estamos haciendo con el código CSS anterior y en orden es lo
siguiente:
background color blanco, color de texto negro, el tipo de fuente verdana, arial, helvetica,
sans-serif , el tamaño de fuente de 12px, el margen de cero, que el texto siempre esté
alineado a la izquierda y por último asegurarse que todo comience alineado arriba.
Todos estos estilos serán aplicados a todo el blog, porqué? porque todo está dentro de
las etiquetas <body></body>, ahora tu preguntarás y que pasa si yo quiero que el texto de
mi barra lateral sea de tamaño 14px y que el color de fuente sea blanco y no negro.
Fácil, el código CSS da "prioridades", si tu defines para la barra lateral otro texto el tomará
ese y no el del <body>.
El header tiene un color azúl de fondo, el área del container es donde se muestran los
posts, la barra lateral de color gris y finalmente el footer color verde.
9. Valida tu código CSS al igual que hicimos con el código HTML, para eso ingresa
a Validar CSS y copia y pega todo el código de tu archivo style.css y da clic en botón
Check.
Los comentarios son una parte muy importante de los blogs, en parte es lo que los ha
hecho tan populares, mediante la plantilla de comentarios permitiremos que los usuarios
de nuestro blog puedan expresarse y compartir con nosotros y los demás usuarios del
blog.
Pasos
Inicio >> todos los programas >> Wamp Server >> Start Wamp Server
2. Crea un archivo con el bloc de notas o con el editor de texto que estés usando, y
guárdalo con el nombre comments.php en la carpeta tutorial que está ubicada en la ruta
C:\wamp\www\wordpress\wp-content\themes\tutorial
4. Digite el siguiente código debajo del </div> <!--And Entry--> del archivo single.php
<div class=”comments-template”>
</div>
Ahora puedes conservar este primer theme como base para crear todos los demás
themes que quieras, lo único que tendrás que hacer más adelante será modificar el
style.css para darle el estilo que quieras, pero en esencia la estructura que acabas de
crear te servirá para cualquier theme que desees crear en el futuro.
Por favor cuando hayan creado su primer theme y quieran compartirlo, no olviden
escribirme un e-mail con seguridad visitaré su blog.
Sí estás interesado en los Negocios Online y quieres aprender técnicas efectivas de
Marketing en Internet, visita mi sitio web MarketingOptimo.com, constantemente estoy
publicando contenidos relacionados con los negocios en la red. Si consideras que es un
tema importante e interesante para ti y quieres estar al tanto, recuerda suscribirte a
nuestros boletines electrónicos.
Saludos,
Cristian Gil
Director: MarketingOptimo.com