Tutorial Crear Theme Wordpress

(1)

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.

(2)

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

Cristian Gil

Gil

(3)

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.

(4)

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

(5)

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.

(6)

- 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í

(7)

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.

(8)

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');

(9)

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/

(10)

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.

(11)

<html> Es la etiqueta con la que se inicia todo documento HTML.

<head> es donde inicia la cabecera del documento HTML

<?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

<body> es donde el cuerpo del documento HTML comienza

</body> final del cuerpo

(12)

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.

(13)

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

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 <h1><a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a></h1> entre la etiqueta <body> y </body> 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

<?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.

Basicamente la línea de código que acabamos de escribir <h1><a href=”<?php

(14)

convierte en un link con el título de tu blog y además con <h1> 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 <?php bloginfo('description'); ?> 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

<?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>

<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>

<?php bloginfo('description'); ?>

</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

6. Adiciónale un id a la etiqueta <div> que acabas de crear así. <div id="header">

Entonces nuestro código ahora luce así: <div id="header">

(15)

<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>

<?php bloginfo('description'); ?>

</div>

Ahora nuestra etiqueta <div> tiene un nombre.

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

Aquí tienes una muestra de mi código 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. Por ahora el código de tu index.php debe estar así:

<?php get_header(); ?>

</body>

(16)

El BUCLE (The Loop)

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>

3. Escribe el siguiente código dentro de la etiqueta <div> que acabas de crear: <?php if(have_posts()):?><?php while(have_posts()):the_post();?>

<?php endwhile;?>

<?php endif;?>

Entonces tenemos nuestro index.php de la siguiente forma:

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.

(17)

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">

if(have_posts()) revisa tu base de datos para verificar si hay posts.

while(have_posts()) mientras hayan posts, ejecuta the_post().

the_post() llama los posts para que sean mostrados

endwhile; cierra el while (mientras que), es decir cuando ya no hayan mas posts para mostrar endwhile; cierra el ciclo.

endif; cierra el if (sí).

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.

4. Escribe el siguiente código <h2><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h2> exactamente antes de la línea <?php endwhile; ?>

Entonces tenemos nuestro index.php de la siguiente forma.

(18)

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.

<?php the_title();?> es una función php que llama el título de tu artículo

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.

(19)

El CONTENIDO

El contenido del blog corresponde al título y al cuerpo de cada post. Pasos

3. Escribe el siguiente código exactamente una línea antes del <?php endwhile;?> <?php the_content(); ?>

Abre tu explorador de internet http://localhost/wordpress/ ahora verás el contenido de cada uno de tus artículos, si aún no has creado posts de prueba, ve al área de

(20)

Así se ve por lo pronto el mío.

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.

(21)

Explicación

<?php the_content(); ?> Es una función php con la que se llama el contenido de cada uno de los posts.

Cuál es la diferencia entre id y class?

Con el id le damos nombre a los bloques DIV, recuerdas el <div id="container">, la diferencia radica en que id es para darle un nombre único a un DIV, en

cambio class puede ser aplicado a varios DIV u otros elementos dentro del código HTML. 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.

Ve a tu explorador de internet http://localhost/wordpress/ y da clic en ver >> código

fuente, notarás como dentro del código sólo encontrarás un id="header" un sólo

id="container" pero verás multiples class="entry" los cuales están alrededor del contenido de cada posts que hayas creado.

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.

(22)

(23)

POST META DATA

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

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

(24)

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.

Abre tu explorador de internet http://localhost/wordpress/ ahora verás la información Post Meta Data de cada uno de tus posts.

Explicación

<p class="postmetadata"> la p es la etiqueta HTML de parrafo y class="postmetadata" sirve para separar el código Post Meta Data de los Posts, de esta forma me queda el código más organizado y más adelante puedo darle la apariencia que yo quiera a esta parte del código sin afectar nada más, la apariencia se controla con el archivo style.css <? 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.

(25)

<?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.

(26)

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

3. Escribe el siguiente código exactamente después de la línea <?php endwhile;?>

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.

(27)

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á.

(28)

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

1. Abre el 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 la siguiente línea de código exactamente antes de la etiqueta </body>

<?php get_sidebar(); ?>

Explicación

<?php get_sidebar(); ?> función php que llama el archivo sidebar.php

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.

5. Escribe el siguiente código dentro del archivo sidebar.php

<div class="sidebar">

(29)

<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> Etiqueta HTML para crear una lista desordenada.

<li> Etiqueta HTML para crear un elemento dentro de la lista desordenada.

<h2> Etiqueta HTML para subtítulos.

Guarda los cambios del index.php y del sidebar.php y abre tu explorador de internet http://localhost/wordpress/ ahora verás el subtítulo Categorías

(30)

6. Copia y pega el siguiente código después de la siguiente línea de código <li><h2>Categorías</h2> y antes de la etiqueta </li>

<ul>

<?php wp_list_cats('sort_column=name&optioncount=1'); ?>

</ul>

(31)

Explicación

Esta función php requiere de una etiqueta UL a su alrededor, pero no necesita de la etiqueta LI ya que ésta es generada automáticamente, puedes comprobarlo yendo a tu blog http://localhost/wordpress/, luego clic en ver >> código fuente, y verás que cada categoría tiene una etiqueta LI alrededor.

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.

(32)

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

1. Abre el 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

3. Escribe la siguiente línea de código exactamente antes de esta línea de código <li><h2>Categorías</h2>

<?php wp_list_pages('title_li=<h2>Páginas</h2>'); ?>

(33)

Explicación

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í.

Abre tu explorador de internet http://localhost/wordpress/ ahora puedes ver algo similar a la imagen anterior, seguramente en tu lista sólo aparezca Información, ya que es la página que viene por defecto en la instalación de Wordpress, pero tú puedes crear todas las páginas que quieras, e inclusive crear sub-páginas, para eso ve al panel de

administración de tu blog http://localhost/wordpress/wp-admin, y selecciona la opción Páginas >> Crear.

(34)

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.

También puedes tener una lista dentro de otra 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.

(35)

Veamos…

El anterior código corresponde a nuestro sidebar.php, así es como lo llevamos, si vas a tu blog http://localhost/wordpress/ y vez el código fuente (ver >> código fuente) verás como encuentras las etiquetas LI alrededor de cada link de tus páginas y de igual forma pasa con las categorías, en el código fuente puedes notar que hay una etiqueta LI alrededor de cada una de las categorías.

(36)

COMO INCLUIR LOS ARCHIVOS DENTRO DE NUESTRA BARRA LATERAL

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

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

3. Escribe la siguiente línea de código exactamente después de la lista de categorías <li><h2>Archivos por mes</h2>

<ul>

<?php wp_get_archives('type=monthly'); ?>

</ul>

(37)

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

Abre tu explorador de internet http://localhost/wordpress/ ahora puedes ver algo similar a la siguiente imagen.

(38)

(39)

CÓMO INCLUIR LOS LINKS RECOMENDADOS DENTRO DE NUESTRA BARRA LATERAL

Es común encontrar dentro de la barra lateral de muchos blogs un listado de links recomendados a otros blogs o sitios web, es lo que se conoce como Blogroll o links recomendados, vamos a ver en este capítulo como incluir el blogroll dentro de nuestra barra lateral.

Pasos

3. Escribe la siguiente línea de código después de la lista archivos. <?php get_links_list(); ?>

(40)

Toda instalación de Wordpress trae por defecto un listado de enlaces o links

recomendados (Blogroll), lo que debemos hacer es ir al área de administración de nuestro blog y borrar los que no queramos, e ir adicionando los links a los blogs que queremos recomendar.

Para esto ve al panel de administración de tu blog http://localhost/wordpress/wp-admin, entra a la opción Enlaces y desde allí puedes borrar y añadir los que quieras.

(41)

FORMULARIO DE BÚSQUEDA

Dentro de los elementos más comunes, necesarios e imprescindibles de un blog está el formulario de búsqueda, con el cual los usuarios pueden realizar búsquedas dentro de los archivos de nuestro blog, el cuadro de búsqueda puede estar ubicado en el header o en la barra lateral, para nuestro ejemplo vamos a ubicarlo en la barra lateral.

Pasos

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.

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">

<?php include(TEMPLATEPATH.'/searchform.php'); ?>

(42)

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.

(43)

PREPARA LA BARRA LATERAL PARA LOS WIDGETS

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

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.

4. Dentro del archivo sidebar.php escribe la siguiente línea de código exactamente después de la primera etiqueta <ul>

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>

Y esta otra línea de código exactamente antes de la última etiqueta </ul> <?php endif; ?>

En el siguiente link puedes ver el código de cómo va hasta ahora mi sidebar.php 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.

(44)

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.

Quieres ver cómo funciona, sencillo ve al panel de administración de tu

blog http://localhost/wordpress/wp-admin, ubica el menú widgets, añade los que quieras y luego chequea como va cambiando tu barra lateral.

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.

(45)

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

3. Escribe la siguiente línea de código exactamente después de la línea de código get_sidebar

<?php get_footer(); ?>

Explicación

<?php get_footer(); ?> función php que llama el archivo footer.php

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.

(46)

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

Guarda los cambios del index.php y del footer.php y abre tu explorador de

internet http://localhost/wordpress/ ahora verás en la parte inferior de la página el footer.

(47)

CREACIÓN DE LOS SUB-ARCHIVOS DE PLANTILLA

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.

Si quieres puedes ir al capítulo de introducción donde habíamos hablado sobre los archivos que normalmente componen un theme de wordpress.

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

2. Copia todo el código del index.php a archive.php y guarda los cambios. 3. En archive.php cambia el código the_content por the_excerpt

4. Guarda los cambios. 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

6. Copia todo el código de archive.php a category.php 7. Guarda los cambios.

(48)

Explicación

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.

Es bueno tener un archivo category.php pues te permite personalizar las categorías de forma diferente a la página de archivos o al propio home o index.

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

9. Copia todo el código de archive.php a search.php 10. Guarda los cambios.

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. 13. Guarda los cambios.

14. En el archivo page.php adiciona el siguiente código exactamente después de la línea <?php the_content(); ?>:

<?php link_pages('<p><strong>Pages:</strong>','</p>','number'); ?>

<?php edit_post_link('Edit','<p>','</p>');?>

Explicación

La primera línea de código crea links para las sub-páginas

La segunda línea crea el botón editar páginas, siempre y cuando estés logueado como administrador.

(49)

Para dividir una página en subpáginas, basta con ir el panel de administración de tu blog, editas una página dividiendo el texto con la etiqueta  y listo.

15. Mira la imagen anterior, borra el código Post Meta Data del archivo page.php 16. Borra también el código Post Nav Links de page.php

(50)

17. En el archivo single.php adiciona el siguiente código exactamente después del la línea <?php the_content() ?>:

<?php link_pages('<p><strong>Pages:</strong>','</p>','number'); ?>

Explicación

Al igual que hicimos en el page.php esa línea permite dividir un post en varios sub-posts 18. Reemplaza la función <?php posts_nav_link();?> con la siguiente línea de código <?php previous_post_link('« %link') ?> <?php next_post_link(' %link »') ?>

Explicación

Reemplazamos esa línea de código, porque en el archivo single.php no queremos llamar el link de la siguiente o anterior página, sino del siguiente o anterior post.

Puedes ir ahora a tu blog http://localhost/wordpress/ y navegar dando clic en el título de un post para que veas los cambios.

(51)

Aquí tienes los códigos de mis archivos para que

(52)

VALIDAR EL CÓDIGO

En el capítulo de introducción mencioné que necesitaríamos unas herramientas entre las cuales está el validador XHTML para asegurarnos que nuestro código no contenga errores, es importante hacer esta revisión antes de continuar.

Pasos

Inicio >> todos los programas >> Wamp Server >> Start Wamp Server 2. Abre tu explorador de internet y ve a tu blog http://localhost/wordpress/

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.

(53)

INTRODUCCIÓN CSS (style.css)

En el capítulo de introducción, comenté que con el archivo style.css vamos a diseñar mediante código CSS (Hojas de estilo en cascada) la apariencia que tendrá nuestro blog. 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.

La mejor forma de aprender CSS es practicando, tenlo en cuenta. Comencemos!

Pasos

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 3. Verifica que el contenido del archivo style.css sea el siguiente. /*

Theme Name: Tutorial

Theme URI: http://www.unapunte.com

Description: Theme para un Tutorial

Version: 1.0

(54)

Author URI: http://www.unapunte.com

*/

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.

Ten presente como se abre un comentario y como se cierra en CSS, la información anterior y que está dentro de nuestro archivo CSS es un comentario, recuerda utilizar el /* para abrir tus comentarios y */ para cerrarlos, es muy útil comentar nuestro código por orden y para recordar más adelante que es lo que hace.

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.

1. Estructura de una regla CSS

SELECTOR {propiedad:valor;} Ejemplo:

(55)

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.

SELECTOR, SELECTOR {propiedad:valor;} 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.

Declaraciones: Si se desea se pueden agrupar varias declaraciones para un mismo selector, separadas por punto y coma, hay algunas propiedades como por ejemplo font que admiten varios valores.

SELECTOR: {propiedad:valor valor; ropiedad:valor; propiedad:valor;} Ejemplo:

H1 {font: 18pt helvetica; color:#000000; background:#FF0026;} 3. Selectores de Clase (Clases)

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:

(56)

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:

#Header {float: left; width: 980px;}

Recuerdas que en una parte del código digitamos <div id="header"> pues bien eso lo hicimos precisamente para darle estilo mediante CSS al header.

Entonces como es que funciona HTML con CSS, muy simple.

En el archivo header.php hay una línea de código <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> que es la encargada de vincular el archivo style.css al blog.

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.

(57)

COMENCEMOS A CREAR EL CÓDIGO CSS

Pasos

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

3. Digita el siguiente código después de la etiqueta <body> del archivo header.php <div id="wrapper">

4. Digita el siguiente código antes de la etiqueta </body> del archivo footer.php </div>

5. Digita el siguiente código en el archivo style.css #wrapper{

margin: 0 auto 0 auto;

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.

(58)

</div> Esta etiqueta cierra la línea de código anterior.

Y esta es la explicación del código CSS

6. Copia el código CSS de mi style.css y pégalo en tu archivo style.css

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:

(59)

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>.

Explicación del resto del código CSS

(60)

8. Abre tu explorador y ve a la dirección de tu blog http://localhost/wordpress/ ves todos los cambios que han surgido, mi blog luce ahora así.

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.

Puedes ver el código de mi archivo style.css

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.

Si no encuentra errores mostrará un mensaje como este:

Como lo había comentado anteriormente el trabajo con nuestro archivo style.css corresponde a un 70% del diseño de un theme para wordpress, por eso como dice Mr. Maker mi tiempo de trabajo ha terminado pero el suyo acaba de comenzar.

(61)

PLANTILLA DE COMENTARIOS

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

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

3. Copia el código de mi archivo comments en el archivo que acabas de crear. 4. Digite el siguiente código debajo del </div>  del archivo single.php <div class=”comments-template”>

<?php comments_template(); ?>

</div>

5. Guarde los cambios

6. Abre tu explorador y ve a la dirección de tu blog http://localhost/wordpress/ 7. Clic sobre un título de alguno de tus posts.

(62)

8. Ahora verás como al final del post aparece un formulario de comentarios como el que puedes ver en la siguiente imagen.

Felicitaciones, Así llegamos al termino de este tutorial para el diseño y creación de un Theme para Wordpress, espero lo hayan disfrutado y lo más importante que les haya servido para lo que estaban buscando.

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.

(63)

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.