Archivo de la etiqueta: Wordpress

Agregar panel de opciones a un theme wordpress

Como dice el titulo, en este tutorial agregaremos un panel de opciones a nuestro theme de wordpress, explicaremos como funciona y como utilizarlo facilmente en la configuración de tu plantilla.

¿Para que Agregar panel de opciones a un theme wordpress? Cuando se trabaja para clientes con plantillas de desarrollo propio es muy importante que algunas opciones del front End de la web puedan ser editadas por el cliente, con esto podemos evitar llamadas como: Hola, Necesito cambiar el teléfono de la web, ¿puedes ayudarme? :-/.

¿Cómo evitamos esto? Muy fácil, agregando un panel de opciones a la web del cliente, que es el tema a tratar en este tutorial, para ello utilizaremos el plugin Options Framework Theme, pero con la particularidad de que estará integrado en tu theme, para evitar inconvenientes de instalación y configuración de plugins.

Para desarrollar este tutorial utilizaremos la plantilla Music Theme desarrollada por mí en el tutoriales De HTML a WordPress, agregaremos a esta plantilla un panel de opciones donde podremos controlar  los siguientes datos básicos:

  • Información de contacto: Teléfono, Email, Dirección, Cp.
  • Configuración general: Logo, Activar/Desactivar el slider, activar/Desactivar el buscador, Seleccionar la categoría del slider.

1.- ¿Que es Options FrameWork? ¿Para qué sirve?

A pesar de que wordpress cuenta con Settings API para agregar un panel de opciones a un theme, o cualquier tipo de configuración extra, nosotros ocuparemos este plugins el cual hace el trabajo sucio por nosotros ahorrándonos mucho tiempo de trabajo.

Options FrameWork: Es un frameWork que nos permite centrarnos en el desarrollo de nuestro theme en vez de centrar nuestra atención en crear un panel de opciones desde cero. Se puede utilizar tanto en proyectos personales como comerciales. Para ver todas sus funcionalidades y descripción completa visita la web del autor.

2.-Descarga y configuración inicial de Options FrameWork

Para iniciar con el tutorial nos descargamos el plugin Options framework theme  en GitHub, nos descargamos esta versión ya que es mucho más fácil de integrar a wordpress y además trae datos de ejemplo para que te hagas una idea de cómo funciona este framework.

Una vez descargado el plugin, copiamos la carpeta inc y el archivo options.php en el directorio de nuestro theme.

grey Agregar panel de opciones a un theme wordpress

Agregamos el siguiente código en el archivo functions.php:

El código anterior simplemente dice que si existe la función optionsframework_init, busque en el directorio inc el archivo options-framework.php, para poder utilizar las opciones disponibles en el plugin.

Con esto ya tenemos registrado el plugin, sin necesidad de instalación y activación previa, y de esta forma podrás instalar tu plantilla sin preocuparte por el plugin del panel de opciones. Si vas a tu panel de control en Apariencia, podrás ver que ya tienes un enlace a theme Options de tu theme.

grey Agregar panel de opciones a un theme wordpress

3.-Prepararnos para agregar opciones al theme

Sí abres el archivo options.php en un editor de código podrás ver todo el código de ejemplo que nos facilitan en este archivo, yo como lo conozco lo borrare e iré agregando lo que me interese para este tutorial.

Con el archivo options.php vacío empezamos a pegar los siguientes trozos de código:

Con esta función obtenemos el nombre del theme, que será utilizado en la configuración interna del plugin.Se define para almacenar las opciones en la base de datos y hacer referencia a ellos en el theme, por defecto se utiliza el nombre del theme el cual es tomado desde el archivo style.css de la plantilla, se muestra en minúsculas y sin espacios, pero esto se puede cambiar si es necesario. Debes de tener en cuenta que si cambia el identificador, las opciones serán restablecidas a su valor por defecto.

En esta función se definen una serie de opciones que se utilizan para generar la página de configuración de nuestro theme y guardarlas en la base de datos.

4.-Panel de opciones básico

En esta parte del tutorial crearé un panel de opciones básico, el cual contará con dos pestañas (datos de contactosconfiguración general), todo el código que estaré explicando estará dentro de la función antes mencionada.

Agregamos los dos apartados de configuración.

Con el siguiente código agregamos dos pestañas al panel de administración de nuestra plantilla.

Solo debemos configurar la opción name que se refiere al nombre que mostrará la pestaña, como muestra la siguiente imagen.

grey Agregar panel de opciones a un theme wordpress

Agregando campos en la pestaña configuración general

En la pestaña de configuración general utilizaremos los siguientes tipos de campos, para agregar campos de entrada a una pestaña, basta con agregar el código correspondiente al campo deseado y colocarlo debajo del código que hace referencia a dicha pestaña.

Configuración del logo

Para mostrar el logo en la web utilizaremos el input Type:upload:, con este campo podemos subir el logo de la web de una forma muy sencilla, así podemos cambiarlo cuando queramos, sin ir a meterle mano al código.

Para ello agregamos el siguiente código en el archivo options.php, debajo del array de configuración general agregado anteriormente.

grey Agregar panel de opciones a un theme wordpress
Ahora ya tenemos el input upload en nuestro panel de control, ¿cómo lo utilizamos para mostrarlo en la web? muy sencillo, crearemos un script php el cual muestre un texto si no hay imagen, y si hay imagen que la muestre.

El input upload nos devuelve la url de la imagen subida en el panel de control, para mostrar estos datos option theme framework utiliza la siguiente función.

Donde lo más importante es el primer parámetro, que hace referencia al ID del campo agregado, en este caso es:logo_uploader.

Utilizando la función anterior agregamos este código donde queremos mostrar el logo de la web.

Configuración del slider

Para configurar el slider de la web necesitaré 3 datos, estos datos serán decididos por el usuario desde el panel de control del theme. Queremos saber si está activo o no, la categoría desde donde extraer los artículos y el número de post a mostrar en el slider, se pueden agregar tantas opciones como necesites para programar las funcionalidades del slider, para este ejemplo solo utilizare estas tres.

Slider Activo o no – input Type:checkbox: Este campo lo utilizaré para activar el slider de la web si esta marcado, y desactivarlo si no lo esta.

grey Agregar panel de opciones a un theme wordpress

El checkbox nos devuelve 1 si esta seleccionado y 0 si no está seleccionado, sabiendo esto ya podemos crear un simple condicional para meter el código del slider dentro de él y que solo se muestre si obtenemos 1 (activo). Veamos el siguiente código.

Con esto ya controlamos desde el panel de administración de nuestro theme el estado del slider, visible o no.

Número de post a mostrar- Input type:select: Este campo lo utilizare para agregar un desplegable de números del 1 al 8, que se utilizara para elegir el número de imágenes a mostrar en el slider de la web. Agregaré el código y luego lo explico en detalle.

grey Agregar panel de opciones a un theme wordpress

Ya teniendo el menú desplegable en el panel de opciones de nuestro theme, solo nos queda obtener la selección, asignarla a una variable y utilizarla en el loop del slider, como hemos visto antes para obtener lo seleccionado en el panel de administración utilizaremos la siguiente función.

Con este código almacenamos en la variable $img_slider el número seleccionado por el usuario en la configuración del theme.

Más abajo agregaré un ejemplo de cómo utilizar estos datos en el loop de wordpress, terminemos de agregar y obtener el dato de la categoría del slider.

Categoría del slider – Input type:select: En este caso el select lo utilizaremos para seleccionar la categoría de la cual queremos extraer los artículos a mostrar en el slider.

grey Agregar panel de opciones a un theme wordpress

Ya contamos con el número de imágenes y la categoría que queremos utilizar para el slider, teniendo estos datos podemos aprovecharlos para personalizar nuestro loop y obtener las entradas que nos interesan, para ello utilizaremos el siguiente código.

En el código anterior puedes ver como utilizo el valor de estas variables para filtrar el loop de wordpress, este código solo es a modo de ejemplo, si por cualquier cosa alguien lo necesita completo sin problema puedo facilitarlo, pero en este tutorial solo pongo parte de este para mostrar cómo utilizar los datos obtenidos desde el panel de opciones del theme.

Del código anterior podemos destacar las siguientes líneas, que son las que limitan el loop a unas entradas especificadas por los valores de las variables, esta no es más que una forma de utilizarlo, con esto puede hacer todo lo que se te ocurra y más.

Agregar Datos de contacto al panel de opciones del theme

Dejare el código completo para esta pestaña ya que son todos campos de texto y se obtienen igual que los datos obtenidos anteriormente, con este código le facilitamos al usuario el cambio de sus datos de contacto sin necesidad de tocar el código de la web.

¿Como obtengo estos datos?

Para obtener estos datos utilizaremos la misma función.

Y con los datos ya guardados en sus respectivas variables, simplemente usaremos otro condicional que verifique si hay texto en el campo, si hay texto lo muestra de lo contrario no muestra nada. En mi caso utilice una lista desordenada para listar estos datos de la siguiente manera.

5.-Campos disponibles en options frameWork

text input – textarea

Como puedes imaginarte nos muestra un input type text y un textArea, el input type text tienes la opción de mostrarlo pequeño agregando en sus opciones la clase mini, el código para activar cada uno de estos es el siguiente.

grey Agregar panel de opciones a un theme wordpress

checkbox

Muestra un checkbox, nos devuelve 1 si esta marcado y 0 si no lo esta, puede decidir si dejarlo marcado o no por defecto, utilizando su opción ‘std’ => ’1′.

grey Agregar panel de opciones a un theme wordpress

select

Para los input type select se utiliza un array para guardar las opciones que queremos mostrar, luego ese array se lo asignamos a la opción ‘options’ => $test_array); del select, como muestro en el siguiente código, dejare 3 4 formas de utilizar los array de datos, uno que agregamos los datos manualmente, otro que nos muestra un listado de categoría de wordpress y otro que nos muestra un listado de páginas.

grey Agregar panel de opciones a un theme wordpress

radio button

grey Agregar panel de opciones a un theme wordpress

upload (image uploader)

Este campo nos devuelve la url de la imagen subida, utiliza el gestor multimedia de wordpress para subir los archivos y nos muestra una vista previa de la imagen actual.

grey Agregar panel de opciones a un theme wordpress

Otros tipos de entrada más avanzados.

Para la explicación de cada una de estas entradas lamento decirle que tendrán que leer el archivo index.php del option framework theme que nos descargamos, no lo explico aquí por qué me he alargado mucho con este tutorial y para explicarlas a medias mejor que cada uno publique sus dudas y yo trato de ayudarles, los tipos de entrada avanzados con los que cuenta este framework son las siguientes:

  • images (uso de imágenes en lugar de radio buttons)
  • background (un conjunto de opciones para definir un background)
  • multicheck
  • color (jquery color picker)
  • typography (un conjunto de opciones para definir su tipografía)
  • editor(Editor de código tipo TyniMCE)

Conclusión

Disculpen que me he alargado tanto, siempre me pasa igual, espero que este tutorial les anime a crear plantillas que les quiten problemas futuros con los clientes.

Para cualquier suda que tengan referente a este tutorial pueden dejar sus comentarios, tanto en la web, por twitter o por nuestra fan Page de Facebook, no te quedes con dudas pregunta que te ayudaré en todo lo que pueda.

Un saludo enorme y espero que el tutorial sea de provecho.

Mostrar widget en el contenido de tus post o página

Nunca has tenido la necesidad de agregar una encuesta dentro del contenido de una página o post de tu blog wordpress? este post de ayudará a resolver este caso de forma sencilla cuando se te presente de nuevo.

Aveces integrar o mostrar widget en el contenido de tus post o páginas te puede sacar de un gran apuro, hace poco en un proyecto que tenia en marcha me vi en la necesidad que hacer esto, y como siempre hice una búsqueda rápida para ver que encontraba sobre este tema, en esta búsqueda tuve suerte y encontré un plugins que me hace exactamente el trabajo que necesitaba.

Mostrar widget en el contenido de tus post o página

  • 1. Lo primero es descargarnos el plugins Widget Shortcode.
  • 2. Una vez descargado el plugins instalarlo, ya sea desde el gestor de plugins de wordpress o subiendo los archivos del plugins al directorio wp-content/plugins
  • Una vez instalado ya pasamos a utilizar este plugins, sin tener que realizar ningún tipo de configuración

Como utilizar el plugins Widget Shortcode

El plugin Widget Shortcode, lo que hace es agregar un ID a todos los widget que tienes tu blos, además de agregarle un ID le asigna en la parte inferior izquierda un Shortcode el cual podemos pegar en cualquier parte de la web para mostrar el widget en cuestión.

grey Mostrar widget en el contenido de tus post o página

La sintaxis para utilizar este plugin es bastante sencilla:

También nos da la posibilidad de utilizar los parámetros before_widget, after_widget, before_title y after_title para anular la salida por defecto del widget. Además, puede utilizar el parámetros ‘title’ false para suprimir el título del widget, Por ejemplo.

De esta forma tan sencilla podemos agregar, mapas, encuestas, listados de páginas, listados de categorías y todo lo que sea widget en wordpress de una forma bastante fácil.

Espero que este tip pueda servirle alguna vez, un saludo.

Optimizar wordpress para SEO

El posicionamiento de nuestro blog es un punto muy importante si queremos que salga adelante, trataremos los puntos básicos que debemos de tener en cuenta para dejar nuestro blog mínima mente configurado para SEO.

Optimizar wordpress Seo, cada día se crean miles de blog utilizando el gestor de contenido de wordpress, así como se crean también hay otros mucho que nadie sabe de su existencia, si no quieres que tu blog caiga entre estos últimos trata de optimizar tu blog correctamente y ademas escribir contenido de calidad.

Trataremos algunos de los temas importantes para que nuestro blog al menos este preparado para publicar contenido de calidad, una ves configurado correctamente tu blog y teniendo claro los detalles al escribir y crear una entrada lo único que queda es publicar contenido de calidad relacionado con el tema que se desarrolla en tu blog.

Entremos en materia, espero lo tratado en este post le sea de ayuda.

grey Optimizar wordpress para SEO

Optimizar WordPress Para SEO

1.-Titulo y Descripción:

Una ves termine la instalación de su blog con wordpress, lo primero que debe hacer es entrar en su panel de Administración –> Ajustes –> General, es aqui donde empezamos configurando lo más básico de nuestro blog.

El título de nuestro blog debe ser simple y descriptivo, la descripción como su nombre lo indica debe describir de que se habla en nuestro blog de un forma resumida, no agregue un párrafo muy largo, simplemente describe tu sitio en pocas palabras utilizando siempre el tema principal de tu blog que es lo importante.

grey Optimizar wordpress para SEO

2.-Enlaces permanentes (Permalinks)

Este punto es muy importante para modificar la configuración por defecto para que los permalinks sean mas amigables con los buscadores.

La misión principal de configurar los enlaces permanentes, es hacer que las direcciones sean limpias y amigables, de forma que en lugar de leer una serie de símbolos sin sentido para los humanos, leamos algo mas claro y que nos brinde un poco de información a nosotros y a los buscadores.

Este tipo de conversión de enlaces se realiza utilizando una característica del servidor llamada Mod_rewrite, que usa un archivo llamado .htaccess localizado en la carpeta principal de tu web. WordPress ya dispone de una funcionalidad incluida para generar URLs agradables, y todo lo que tienes que hacer es habilitar esta opción.

Para configurar tus URL amigable entra en Administración –> Ajustes –> Enlaces permanentes, por defecto wordpress trae esta configuración.

grey Optimizar wordpress para SEO

La mejor configuración para las url sera colorar el titulo de tus entradas o páginas, para ello selecciona la opción Estructura personalizada y agregamos %postname%, si quieres puede agregar alguna exención como .HTML solo agregando %postname%.html, de esta forma ya obtenemos una url amigable para nuestro blog, ya los buscadores nos nos odian tanto como antes.

grey Optimizar wordpress para SEO

3.-Modificando las Etiquetas de Título de tu Plantilla en WordPress

Algunas plantillas de wordpress para colocar el titulo de cada página solo utilizan la función the_title(), con esto solo obtendremos el titulo de la pagina, entrada o categoría en la que nos encontramos, hay una forma mucho más amigable a los buscadores de colocar el titulo en tu plantilla.

Para mejorar el titulo de las páginas entra en Apariencia –> Editor Header.php, y busca la etiqueta title, y si solo tienes un código como este:

Cambia lo que esta dentro de la etiqueta title por esto:

De esta forma obtenemos un titulo contextual dependiendo de la página en la que nos encontramos, de esta forma damos más información a los buscadores web.

4.-Permitir aparecer en los buscadores

Aunque pareca obvio, debes permir que tu blog sea visible para los buscadores. Esta comprobación se suele realizar en el inicio de la instalación de wordpress y si la tenemos desactivada nos aparecerá en el escritorio del panel de administración algo así como: “Buscadores bloqueados”.

Esto puede parecer algo tonto, pero si abres un blog quizas quiera mantenerlo anonimo a los buscadores hasta que estes listo para publicarlo, puede tenerlo de pruebas o dejarlo cerrado hasta generar algo de contenido.

Para administrar esta opción lo asemos desde Administración –> Ajustes –> Privacidad

grey Optimizar wordpress para SEO

5.-Notificaciones automáticas

WordPress nos da la opción de avisar de forma automática a un listado de sitios a los que avisar cuando escribimos algo en nuestro blog. WordPress trae por defecto un servicio de notificación automático, que busca en una lista que nosotros mismos introducimos, avisando uno a uno de la nueva entrada. Este tipo de servicios, aunque no nos reportan visitas de forma automática,pueden ser la fuente de actualización de otros sitios, por lo que es importante tener una lista lo más amplia posible.

Para ver o agregar nuevos sitios a la lista podemos entrar en Ajustes –> Escritura y al final agregamos los sitios que queramos separados por comas o uno por cada línea.

grey Optimizar wordpress para SEO

Listado y más información en codex.wordpress.org

6.-Utilizar pingbacks y trackbacks

Otro punto importante es permitir los pinback y trackback, es decir, las notificaciones vía comentarios de enlaces de otros blog, esta opcion se activa en Ajustes –> Comentarios –> Permitir notificaciones de enlace desde otros sitios (pingbacks y trackbacks), por defecto esta activada.

grey Optimizar wordpress para SEO

  • TrackBack:son enlaces inversos que le permiten saber que sitios enlazan hacia el suyo, es una buena forma de animar a la gente a enlazar sus contenidos
  • PingBack:es un método para que los autores de la web soliciten una notificación cuando alguien enlaza uno de sus post. El envío y la recepción de esta información es transparente al usuario. Esto permite a autores no perder de vista quién los está enlazando.

Buenas costumbres al escribir una entrada

Una ves configurada las opciones básica de wordpress pasamos a crear contenido para nuestro blog, para tener contenido bien estructurado y de buena calidad nosotros debemos ser cuidadosos a la hora de escribir entradas y seguir una serie de normas para conseguir nuestro objetivo del buen posicionamiento.

Para esto debemos tomar muy en cuenta los siguientes puntos:

  • El titulo de la entrada: El titulo de la entrada es una parte muy importante de la misma. Ha de ser claro,contener palabras claves de la entrada y no muy largo. Hay que tratar de resumir en el titulo de que va la entrada que publicamos, y sobre todo que sea un titulo que llame la atención de nuestros visitantes.
  • Etiquetas y categorías:Ya que wordpress nos provee de un potente sistema de palabras claves debemos utilizarlo,es interesante agregar palabras claves en las páginas, categorías y en los artículos individuales de tu blog.

    La elección de las palabras claves para tu blog deben de ser minuciosamente elegida, agrega palabras clave en tu titulo, en el contenido y en el sistema de tags que nos proporciona wordpress, no agregues palabras claves que no tengan nada que ver con tu contenido ya que eso no te ayudara en nada ,ya que el usuario que llegue a tu web con una búsqueda que no tiene nada que ver con tu sitio lo dejara de inmediato por lo tanto no te sirve de nada agregar palabras claves in relevantes.

    Antes de publicar una entrada piensa bien el titulo, que sea un titulo directo, corto y que describa con exactitud el contenido de esa entrada, trata de agregar en ese titulo almeno una palabra clave con la que quieres indexar esa categoría,página o post.

  • Descripción de las imágenes:Algo que he visto que muchas personas pasan por alto es la descripción de las imagenes o texto alternativo, esto es muy interesantes utilizarlo tanto para mejorar la usavilidad de personas que utilizan lectores de pantalla como para ayudar a indexar mejor nuestro blog en los buscadores

    Google cuenta con un potente buscador de imágenes el cual puede generar algunas visitas a tu web solo con agregar esta etiqueta a tus imágenes, seguido de una buena descripción.

  • Uso de las palabras en negrita: Ademas de los tags de wordpress debe hacer uso de las palabras en negrita para señalar y hacer énfasis en las palabras con más carga semántica de contenido o articulo que publicas, es muy interesante hacer uso de esta etiqueta para resaltar aquellas palabras claves que nos interesan.
  • Enlaces internos: Hay que tratar de tener la costumbre de enlazar nuestro propio contenido, si tenemos contenido relacionado con lo que hablamos en algún post debemos enlazarlo, también podemos enlazar algunas palabras claves con la url interna de las etiquetas de tu blog.

    Los buscadores dan mucha importancia a los enlaces tanto interno como externos, por lo que debemos ser nosotros mismos los primeros en dotar de relación a nuestro contenido.

  • Actualización continua:A parte de estas técnicas o buenas costumbras al escribir en tu blog, debemos tratar de mantenerlo actualizándose cada cierto tiempo, no quiero decir que debes publicar una entrada cada día (aunque seria ideal :-]) pero si escribe una entrada cada mes o más es muy poco.

    Los buscadores tienen muy en cuenta el tiempo de actualización o en que una web agrega nuevo contenido.

  • Contenido de calidad: La calidad de nuestro contenido es lago un tanto subjetivo, pero hay algunas reglas que debemos seguir, como, por ejemplo, Nunca copiar y pegar contenido de terceros, escribir entradas demasiado cortas, lo ideal sería escribir contenido propio y si puede ser de calidad mucho mejor esto es muy bien visto por los buscadores.

  • Interacción e implicación con tus lectores: Que nuestro blog este repleto de comentarios favorece las visitas, que los usuarios se sientan protagonista o parte de nuestro blog, ademas de que el blog se enriquece con sus comentarios. En ocasiones, los comentarios son incluso más valiosos que el mismo contenido. Los motores de búsqueda también rastrean los comentarios.

Plugins interesantes para SEO en wordpress

Para continuar con la ayuda de mejorar el SEO de nuestro blog, a continuación hablaremos de 3 plugin que creo son esenciales para la indexar nuestro blog, aunque hay blogs que no los utilizan y son grandes comunidades, pero a los que recién empezamos seguro que nos pueden ser de gran ayuda.

ALL IN SEO PACK

De todos los complementos dedicados a mejorar el SEO de un blog, éste es el más popular. ¿Que hace exactamente? Hace algo realmente simple, pero que si no lo automatizara seria muy tedioso de hacer manualmente. Incerta el título de la entrada, las palabras claves y la descripción en la cabecera o en la página principal del blog, de esta forma conseguimos que el buscador lea mucho más información de cada post sin molestar al lector con grande lsita de tags o en laces.

La configuración de este plugins es bastante sencilla, cada uno me imagino lo ara de una forma, es plugins nos da la opción de agregar una descripción, palabras claves y un titulo a la pagina principal del blog, si rellenas estos campos, estas etiquetas sustituiran lo que agregaste en la configuración general de wordpress.

Ademas nos facilidad el trabaja de mejoramiento de títulos contextuales para cada página en la que nos encontremos, en pasos anteriores colocamos un titulo dinámico en nuestro head, con este pugins puedes hacerlo de forma visual y facil.

Te da la opción de no indexar algunas páginas como archivos, categorías, página de tags. Ademas puede generar de forma automática la descripción de cada entrada.

Despues de instalar y activar el plugins este pone a nuestra disposición una caja tipo formulario al final de la pagina de creación de entradas.

grey Optimizar wordpress para SEO

Este formulario nos da la opción de agregar mucho más información a nuestra entrada, podemos agregar un titulo distinto al que agregamos en el titulo visual de nuestra entrada, podemos agregar otros tags distintos a los de la entrada y una descripción mucho más optimizada.

Yo personalmente lo que hago es agregar en la parte que será visible al lector un titulo corto, directo y con alguna palabra clave de la entrada, y en este formulario agrego un titulo relacionado con el primero pero distinto, de esta forma tengo la opción de ser indexado con ambos titulos por los buscadores.

Esto lo he comprobado, publico una entrada de esta forma y a los 3-5 minutos busco este titulo en google y ya esta indexado perfectamente.

Prueba tu mismo!!!

Yoast WordPress SEO

Este plugin no lo he utilizado, lo he instalado para probarlo cuando estaba escribiendo este articulo, cuando entre a su panel de administración me quede sorprendido la cantidad de opciones que tiene este plegins, si es por opciones de configuración será buenísimo.

Les dejo un manual muy completo que encontre sobre este plugins, Estoy revisando este plugin me parece tremenda mente interesante, lo pondré a prueba y luego les comento sobre los resultados.

GOOGLE XML SITEMAP

Un sitemap no es mas que un mapa del sitio donde se le indica a los motores de búsqueda qué información hay en la web, en nuestro caso el blog.

Este plugins sirve para indicar a los robots de los buscadores que inspecciona el blog, cuáles son los directorio o direcciones que deben visitar e indexar de forma más sencilla, si no colocamos el sitemap`este debe ir siguiendo enlaces para encontrar toda la información que le facilitamos en el sitemap, ademas este GOOGLE XML SITEMAP da mucha más información a los buscadores ya que puedes decidir la prioridad de indexación de tu contenido y ademas la frecuencia con que quieres que pasen los robot de los buscadores a escanear tu blog, claro esto no es una orden que les damos al buscador si no una sugerencia si el quiere te ara caso o no, seguramente lo ara cuando el crea conveniente.

Para más información sobre GOOGLE XML SITEMAP:

Web Oficial del plugins y su foro de soporte

Interacción en redes sociales

Hoy en dia las redes sociales forman una parte muy importante del SEO, es la forma mas directa de ínter actuar y de difundir contenido en la red, todo el mundo conoce el poder de redes sociales como Facebook, Google+ y de plataformas de microbloggin como twitter. Con las redes sociales buscamos lo mismo que buscamos optimizando nuestro sitio para los buscadores, obtener visitas y darnos a conocer al mayor numero de persona posible y si es posible que hablen sobre nuetra web.

¿Por que son importantes las redes sociales? Solo por el hecho de que alguien comparta nuestro contenido o haga referencia a nuestros tutoriales en twitter, google+ o cualquier red social, puede llegar a ser un escaparate mayor que aparecer en la primera página de resultados de búsqueda.

Si queremos dar a conocer nuestro blog, crea una cuenta en las principales redes sociales antes mencionadas. Esto cuesta algo de tiempo y los resultados varian, pero a la larga si te preocupas cor compartir buen contenido estaras bien metido en ellas y los que te siguen posiblemente hablen de tus articulos y de tu blog.

Plugins interesantes para compartir contenido en redes sociales

  • Plugins para twitter: En wordpress.org hay un apartado exclusivo para esta red social hay una inmensa cantidad de plugins solo para twitter, busca y eliges el que más te guste.
  • ShareThis: El plugin ShareThis es un servicio para compartir rápida y fácil que permite a sus usuarios compartir el contenido a 120 canales sociales.
  • Popup to Share: Popup muestra sharing botones de Facebook, Twitter, Google y más en un pop-up.
  • Sexy bookmarks: Añade un atractivo menú de marcadores sociales y el widget de contenido relacionado a tus mensajes, páginas, índice, o cualquier combinación de los tres.
  • Facebook: Si quieres un plugins wordpress completo este es el más indicado, contiene widget para tu sidebar y un sin numero de opciones muy interesantes.
  • Conclusión:

    En este artículo hablamos sobres la configuración, Optimización y Socialización de nuestro blog para mejor su posicionamiento en buscadores, esto esta muy bien, PERO, ademas de tener un blog bien configurado y posicionado en buscadores, debemos tener un blog que tenga un buen rendimiento, la velocidad en que carga nuestra web es esencial hoy en día, es muy bien vista por los buscadores.

    En proximos articulos seguiremos esta línea y hablaremos sobre:

    • Mejora del rendimiento de nuestro blog
    • Estadísticas y seguimiento

    Estos son temas que a mi entender van unidos directamente al buen posicionamiento de nuestro blog, debemos tener un blog que responda rápidamente a las peticiones de nuestro usuarios para que puedan navegar sin contra tiempo, de esta forma evitar abandonen el blog.

    Ademas debemos monitorizar el rendimiento de nuestro blog, visitas, temas mas visitados, estadísticas y demás, todo esto lo trataremos en otros articulos mas adelante.

    Espero le sean de ayuda estos tips para mejor el posicionamiento de nuestro blog.

    Sitios web recomendados para seo en wordpress

Agregar imagen destacada automáticamente los post de wordpress

Una imagen vale más que mil palabras y es bastante cierto, por eso en nuestro artículos agregamos imágenes que digan algo a los usuarios, en este tutorial agregaremos de forma automática una imagen destacada por si se nos olvida alguna vez.

Con este fragmento de código explicaremos como Agregar imagen destacada automáticamente a los post en wordpress., dejaré el código necesario y tratare de explicar cada trozo de código y la función que realiza cada linea.

Esta función ademas de capturar la primera imagen del post si no existe imagen destacada también puede agregar una imagen por defecto para este caso que el post no tenga ninguna imagen, es muy interesante ya que no todos los post tienen imagen y con esta opción podemos agregarle una por defecto.

Código completo para Agregar imagen destacada automáticamente

En esta función llamamos la imagen o las imágenes adjuntas si existen, utilizando las distintas funciones que wordpress nos proporciona,a continuación las más importantes.

Verificamos si hay imágenes destacadas

  • has_post_thumbnail($post->ID);: Con esta función preguntamos al sistema si hay o no imagen destacada y guardamos el resultado en la variable $already_has_thumb

Extraemos la primera imagen del post si no hay destacadas

Agregamos una condicional que dice: si no hay imagen adjunta if (!$already_has_thumb), mostramos la primera imagen del post utilizando la función get_children();en el code de wordpress explica perfectamente esta función y el funcionamiento con ejemplos de cada uno de estos parámetros.

Mostramos la imagen capturada

En esta parte con otro condicional preguntamos si hay algún valor en la variable $attached_image, que es la que contiene el valor de la función get_children() y si es así con un bucle foreach agregamos los datos capturados en la variable $attachment_id, ahora podemos postrar la imagen utilizando la función set_post_thumbnail($post->ID, $attachment_id); con sus dos parámetros, necesarios para saber respectivamente el post de donde vamos a extraer la imagen y el id o nombre de adjunto a mostrar.

Si no tenemos (else) ninguna imagen adjunta mostramos un archivo adjunto por defecto que podemos asignar nosotros mismos, simplemente agregando el ID de dicho archivo en esta parte del código.

Buscar el id del archivo por defecto

Para agregar una imagen predeterminada en los post si no hay imágenes destacadas o imágenes en el post, podemos crear una imagen personalizada subirla desde la Librería multimedia y fijarnos en el ID de esa imagen, lo agregamos en nuestra función y listo.

grey Agregar imagen destacada automáticamente los post de wordpress

Agregar la función auto_post_thumbnail() a los hook de wordpress

Esta es la última parte del código y creo que la más importante, la función anterior sin estos ganchos o hook no realiza ninguna acción, esta es la parte del código donde se le dice a la función cuando tiene que trabajar.

En nuestro caso nos interesa que esta función trabaje cuando se publica alguno de los tipos de post que trae wordpress, esto lo aremos utilizando la función add_action(), a esta función les pasamos 2 parámetros:

  • El primero: Nombre de la acción o hook que hace que se ejecute nuestra función
  • El segundo: Nombre de la función a ejecutar.

Si quiere aprender un poco más sobre las acciones de wordpress aquí tiene un listado completo de estas acciones.

Conclusión

Solo con pegar esta función y agregar el id de una imagen por defecto te ahorra trabajo como lo de agregar imágenes a tus post, es una función muy interesante y útil, espero la explicación le sea de utilidad y que se entienda perfectamente.

De HTML a WordPress – Theme WordPress part.3

En esta ultima parte del tutorial trataremos la conversión de la plantilla HTML a wordpress, aprenderemos a llamar los post de la base de datos, utilizar las etiquetas de plantillas, como trabajar con los campos personalizados y ademas a crear un loop personalizado dependiendo de que artículos queremos mostrar.

Hola, después de un largo tiempo sin poder retomar la serie de tutoriales regreso para empezar la conversión pasar de html a wordpress de nuestra plantilla, en la descarga les dejo la plantilla ya terminada, para explicar detalladamente el proceso de conversión a wordpress dividiré en tres partes este proceso, en las cuales trataremos los siguientes temas:

Pasar de html a wordpress – Primera parte:

Descargar resultado final de esta parte

Segunda parte:

Descargar resultado final de esta parte

  • Dividir la estructura del archivo index.php en: Header.php, index.php, footer.php y sidebar.php
  • Configuración del archivo single.php
  • Configurar los comentarios de cada post
  • Agregar paginación de los post desde el archivo single.php

Tercera parte:

  • Registrar posición de los widget para el sidebar
  • Utilizar campos personalizados de wordpress.
  • Crear el widget próximos conciertos utilizando campos personalizados
  • Crear widget próximos conciertos
  • Crear Widget últimos vídeos
  • Crear formulario de contacto con el plugins contactform

Empezamos la primera parte

En la parte anterior del tutorial maquetamos la plantilla con html y css, ahora utilizaremos esa plantilla html para crear los archivos básicos de una plantilla wordpress.

En nuestro caso no crearemos todos los archivos que tiene la plantilla por defecto de wordpress, ya que para su funcionamiento básico no es necesario, Nuestra plantilla estará constituida por los siguientes archivos:

  • index.php: Mostrara todas las entras del blog en la página principal, estará compuesto por el header, content, sidebar y el footer
  • header.php: Es el archivo donde agregaremos todos los meta datos de la web e incluiremos las hojas de estilos y los script necesarios.
  • Footer.php: Este archivo contiene la información del copy right de la web, un menú y alguna otra información opcional, se suele agregar zonas para widget en este archivo, en nuestro caso no será necesario.
  • sidebar.php: Este archivo contiene todo el contenido de la barra lateral, se puede agregar directamente esta información sin la necesidad de crear este archivo, pero tenerlo en un archivo independiente da la facilidad de editar la información en un solo lugar y que se refleje en allí donde se incluya el archivo.
  • single.php: Es el archivo que se muestra cuando se accede a una entrada concreta, este archivo incluye la plantilla de comentarios, en nuestro caso incluirá la plantilla de comentarios, el sidebar con un widget que muestre los artículos relacionados por categoría y la navegación de los artículos
  • page.php: WordPress tiene una funcionalidad que permite crear páginas que se comporten en gran medida como una página HTML estática, se utilizan generalmente para mostrar contenido estático en nuestro wordpress, la página por defecto muestra el contenido agregado en el panel de administración ala página y el sidebar, también tiene opción de activar o desactivar los comentarios.
  • functions:Es uno de los archivos más importantes de un theme wordpress, en este archivo se definen una serie de funciones y se hacen llamadas a funciones propias de la Api de WordPress.
  • style.css: Este es otro archivo muy importante, en el se definen los datos propios del tema en cuestión, Author, descripción, y otras informaciones que se visualizan en el gestor de themes en el panel de administración dewordpress.
  • 404.php: Cuando wordpress no puede encontrar los datos que busca, presenta este archivo. Por defecto no hay nada en esta página más que un breve comentario que indica al usuario el error (Error 404 – Not Found).
  • search.php: Este archivo muestra los resultados de búsqueda en el blog.
  • searchform.php: Aunque wordpress tiene una función personalizada que te devuelve el formulario de búsqueda utilizaremos este archivo para sobre escribir la salida html de esa función, de esta forma podemos maquetar el formulario de búsqueda a nuestro gusto o necesidad.

Estos son los archivos que utilizaremos para nuestra plantilla, WordPress funciona perfectamente solo utilizando (index.php, single.php, function.php, style.css), solo que de esa forma te brinda una funcionalidad muy limitada.

Si vas a seguir este tutorial deberías de instalar wordpress en local, para que vayas creando la plantilla por partes según pasa el tutorial.

Estructura de archivos básicos para nuestra plantilla

Para la estructura de los archivos utilizaremos la creada en el tutorial anterior y lo copiaremos dentro de la carpeta wp_content/themes, de esta forma ya tenemos los archivos base de nuestra plantilla.

grey De HTML a Wordpress   Theme WordPress part.3

Para empezar la creación de nuestra plantilla wordpress, renombrar el archivo index.html a index.php, dentro de esa misma carpeta crea otro archivo llamado functions.php, con esto ya estamos preparado para empezar a dinamizar nuestro archivo index.php.

Hacer que wordpress reconozca nuestra plantilla HTML en el panel de temas

Para que wordpress reconosca nuestros archivos como una plantilla en el panel de administración debemos editar el archivo style.css para agregar algunos datos requeridos por el sistema de wordpress para reconocer nuestra plantilla. Abre el archivo style.css y agrega los siguientes datos.

Con esto si entramos a nuestro panel de administración y en el apartado Apariencia –> Temas, podemos ver que ya wordpress reconoce nuestra plantilla, solo que no tiene ninguna imagen en miniatura, pueden copiar la que dejo en los archivos base del tutorial o crear la suya propia.

grey De HTML a Wordpress   Theme WordPress part.3

Si visualizamos la web en el navegador podemos ver que se pueden visualizar la estructura html pero sin ningún tipo de estilo aplicado, esto se debe a que debemos Cambiar la ruta relativa que utilizábamos anteriormente en nuestro diseño estático y debemos agregar la función que nos brinda wordpress para llamar la hoja de estilos, esto lo aremos en el siguiente paso, con lo cual empecemos a agregar las distintas etiquetas de plantilla que nos brinda wordpress.

Antes de empezar les dejo esta imagen donde pueden encontrar casi todas las etiquetas de plantillas de wordpress organizadas por categorías, pueden tenerla a mano e ir guiándose de ella, también recomendaré utilizar un editor de código que les ayude con referencias al código de wordpress y evitarán problemas de escritura, yo utilizo DreamWeaver y Eclipse, los dos tienen ayuda para la escritura del código en wordpress.

Ahora Trabajaremos dinamizando todo el archivo index.php, iremos agregando etiquetas de plantilla en orden descendente desde arriba hacia abajo hasta tener todo creado, Empecemos!!!.

Dinamizar información en el head

En nuestro archivo index.php en la parte del head cambiaremos el código estático por el ya dinámico, mayormente utilizaremos la función bloginfo(), les recomiendo echarle un vistazo en el code de wordpress.

En el archivo index.php borra todo el código desde el cierre de la etiqueta head hasta el inicio del documento (DOCTYPE) Como muestra la siguiente imagen.

grey De HTML a Wordpress   Theme WordPress part.3

Borra todo el código seleccionado anteriormente y sustitúyelo por el siguiente:

El código esta comentado y creo que se puede entender perfectamente para que sirve cada trozo de código.

Las funciones utilizadas fueron las siguientes:

  • language_attributes();: Muestra el atributo de idioma para la etiqueta HTML
  • bloginfo( 'charset' );: Muestra el conjunto de caracteres usado en tu blog,(EJ: UTF-8)
  • Para el titulo podemos usar bloginfo('name'); que nos devuelve el nombre que hemos puesto en el panel de administración, actualmente como se toma tan en serio el tema del SEO ayudamos un poco a nuestro blog colocando un titulo dinámico, que cambie dependiendo de la pagina que se encuentre el usuario, esto lo logramos con el código que colocamos entre las etiquetas title anteriormente.
  • bloginfo( 'stylesheet_url' );: Esta función nos devuelve la url del archivo style.css de nuestra plantilla.(stylesheet_url = http://example/home/wp/wp-content/themes/theme/style.css).
  • bloginfo( 'rss2_url' );Devuelve la URL del feed RSS 2.0 (/feed)
  • wp_head();: esta función no puede faltar en tu head ya que muchos plugins la utilizan como referencia para iniciarse.

Seguramente han notado que los script no aparecen en el head, los he eliminado del head para agregarlo desde el archivo functions.php, ¿por que? Sencillamente evitar que se carguen todos en todas las páginas sin necesidad y además de paso evitar tantas peticiones HTTP solo generando las necesaria en cada caso.

Por ejemplo: si no mostraremos el slider en todas las páginas, ¿para que cargar en el head el archivo jquery.tinycarousel.min.js, para eso crearemos una función en la que se cargue el script necesario en cada caso.

Agregar script de forma selectiva en el head de wordpress

Para agregar de forma automática los script necesarios a nuestro head wordpress cuenta con una acción wp_register_script(), aprovechando esto, crearemos una función y aremos que se ejecute con wp_enqueue_scripts(), puedes obtener más información sobre esta acción en el code de wordpress, en nuestro caso solo agregaremos de forma selectiva el script necesario para los comentarios.

Abre el archivo functions.php y agrega el siguiente código:

¿Como Funciona el código anterior?

Creamos la función wd_load_script(), dentro de esta función registramos y desactivamos los script utilizando las fuinciones wp_deregister_script y wp_register_script respectivamente, luego se llama con la función wp_enqueue_script() los script registrados con la función wp_register_script, esta función solo se utiliza cuando utilizamos un script que no sea registrado por defecto en wordpress, Aquí puedes ver una lista de los script registrados por defecto en wordpress.

Y por ultimo utilizando add_action('wp_enqueue_scripts', 'wd_load_script');, decimos a wordpress que cuando inicie los script que se ejecute la funcion wd_load_script que es donde cargamos los escript que necesitamos.

La funcion add_action() en wordpress son muy importante especialmente para los plugins, puedes informarte sobre ello aquí.)

En nuestro caso desactivamos la carga por defecto de jQuery y utilizamos en su lugar la versión alojada en la librería de API de google.

Script para los comentarios

Para los comentarios wordpress utiliza un script que es totalmente innecesario cargarlo en la página principal por ejemplo, por esta razón crearemos una función la cual solo cargue este script en las paginas single.php y page.php, el código utilizado es el siguiente.

El código anterior simplemente utilizamos una función la cual contiene una condicional if que pregunta si estamos en la en single.php o en page.php, si utilizáramos los comentarios en otras páginas pues debería de agregarlas a esta lista.

Luego tenemos la función wp_enqueue_script que llama nuestro script, en este caso comment-reply que es uno de los que registra wordpres por defecto con lo cual no hace falta registrarlo, y por último agregamos la accion que activara nuestra función, add_action('wp_print_scripts', 'wd_single_scripts');

Puedes probar que se están cargando correctamente los script, pre visualizando la web y mirando si existen en el código fuente.

Con esto concluimos con nuestro head, ya tenemos todos los datos que fluyen dinámica mente,la configuración de lenguaje del documento, la codificación del documento, el titulo del blog, la hoja de estilos y el canal rss, sabiendo que debes configurar el blog desde tu panel de administración y colocar los datos pertinentes en la descripción, el nombre y el juego de caracteres que utilizaras.

función body_class();

Ya que terminamos con el head, empezamos con el BODY, lo primero que aremos es agregar la etiqueta BODY la funcion body_class();, como misión principal agregar una clase a la etiqueta BODY dependiendo de la página en la que se encuentre el usuario, es de bastante utilidad cuando tenemos un blog temático en el que hay distintas categorías y cada categoría puede tomar un estilo diferente.

Crear menú Principal del blog

Para el menú principal del blog utilizaremos los menús personalizados de wordpress, una característica agregada en la versión 3.0.

Si entra a tu panel de Administración –> Apariencia Puedes ver como nuestra plantilla no tiene soporte para menús personalizados.

grey De HTML a Wordpress   Theme WordPress part.3

Para agregar nuestro menú personalizado lo primero que debemos hacer es dar a nuestra plantilla soporte para estos menús, para ello utilizamos la función register_nav_menu(), agrega el siguiente código en el archivo functions.php

grey De HTML a Wordpress   Theme WordPress part.3

Con el código anterior además de agregar soporte para menú personalizado, aprovechamos la función y registramos el menú principal del blog, hora si compruebas en el panel de administración nuestra plantilla te da la opcion de entrar en la configuración de menús personalizados.

grey De HTML a Wordpress   Theme WordPress part.3

Lo siguiente después de haber dado soporte y registrado el menú es habilitar un area en la plantilla donde se mostrará este menú, lo aremos con la función wp_nav_menu(), esta función proporciona un lugar donde los menús construidos en el panel de control se puede colocar de forma predeterminada.

En el archivo index.php eliminamos la lista desordenada que representa el menú estático de nuestra plantilla.

grey De HTML a Wordpress   Theme WordPress part.3

Sustituimos la lista por el siguiente código que hace la llamada del menú personalizado que registramos en el archivo functions.php

Utilizamos la funcion wp_nav_menu esta función tiene bastantes parámetros, de los cuales solo utilizamos los siguientes:

  • theme_location' => 'MenuPrincipal': (opcional) Es la ubicación donde podremos agregar nuestro menú desde el panel de administración.
  • 'container' => ' ': (Opcional)Pasando este parámetro evitamos que la UL sea envuelta con otras etiquetas, se permiten etiquetas nav y div, utilizamos false para que no tenga ningún envolvente.

Ya tenemos soporte para menús personalizado y tenemos un área definida para mostrar el menú en nuestra plantilla, el siguiente paso será crear las categorías que queremos mostrar en el menú y luego crearlo desde el panel de administración –> Apariencia –> Menú.

Crear categorías del Menú

vamos a crear las categorías o páginas que queremos mostrar en el menú, en nuestro caso solo agregaremos categorías, vamos al panel de administración –> Entradas –> categorías, rellenamos los campos necesarios y creamos las siguientes categorías:

  • Hip hop, Pop, Rap, Rock

grey De HTML a Wordpress   Theme WordPress part.3

Creae el menú en el panel de administración

Tenemos los items del menú, ahora crearemos el menú y le asignaremos la ubicación registrada anteriormente, para ello vamos al panel de administración –> Apariencia –> Menús, en el panel de la derecha agregamos el nombre del menú y pulsamos guardar menú, luego en el panel de la izquierda agregamos la ubicación Menú Principal y pulsamos guardar.

grey De HTML a Wordpress   Theme WordPress part.3

Ya tenemos el menú creado y en su posición, ahora solo nos queda agregar las categorías que creamos antes, para ellos en el panel categorías de la izquierda pulsamos Ver todo si no salen todas las categorías, la seleccionamos todas y pulsamos en añadir al menú.

grey De HTML a Wordpress   Theme WordPress part.3

Agregaremos un enlace personalizado para enlazar al index.php y que nos lleve ala página principal del blog, para ellos en la columna izquierda el bloque Enlaces personalizados, en el campo URL agregamos index.php, En el campo Etiqueta agregamos Home y pulsamos en Añadir menú, este item lo colocamos encima de los demas.

grey De HTML a Wordpress   Theme WordPress part.3

Con esto ya esta terminado el menú, si pre visualizas el bog en el navegador puedes ver el menú terminado, siempre puedes regresar y cambiar el orden, eliminar y agregar items al menú, es lo interesante que tiene esta forma de utilizar el menú.

Configurar El slider de imágenes

En esta parte hay varias opciones y detalle que considerar, para el slider podemos dejar que aparezcan todas las entras del blog, en nuestro caso configuraremos el slider para una categoría en especifico, se llamará Anuncios.

¿Por que una categoría para el slider? Esto es opcional yo decidí programarlo así por que me interesa que solo aparezcan imágenes de anuncios en este slider.

Teniendo todo esto en cuenta empecemos!!!

Para la imagen del slider aprobecharemos la función post-thumbnails();, Esta función nos da la facilidad de agregar soporte a imagenes de miniatura, ademas tiene la capacidad de generar imagenes de varios tamaño, par agregar diferentes tamaño de imagenes se utiliza la función add_image_size(); pasando los siguientes parámetros.

Bien para agregar soporte de imágenes en miniaturas y agregar los distintos tamaños que utilizaremos en la plantilla, agregaremos el siguiente código en el archivo functions.php

Al agregar esta función, puede entrar a editar o agregar un post y puede comprobar que existe un nuevo recuadro en el cual puede seleccionar la miniatura para ese post.

grey De HTML a Wordpress   Theme WordPress part.3

Bien, ya que tenemos las imágenes configuradas, creamos la categoría Anuncios y agregamos almenos 5 post donde estos tengan una imagen destacada con un tamaño mínimo de 400px x 190px, pueden general imágenes en esta web o utilizar las que dejo en los archivos base.

grey De HTML a Wordpress   Theme WordPress part.3grey De HTML a Wordpress   Theme WordPress part.3

De esta forma agregamos almeno 3 entradas más, una vez tenemos las entradas listas podemos empezar a dinamizar el código del slider con php y las funciones de wordpress.

Necesitamos llamar las entradas de la categoría anuncios, y que solo se muestren esos artículos en el slider, wordpress tiene una gran flexibilidad para crear consultas personalizadas un poco más avanzadas que el simple loop, para este caso utilizaremos la función WP_Query(), y llamaremos 5 post de la categoría anuncios y mostraremos solo la imagen de este articulo, empecemos.

Justo encima del div id="slider-wrapper" agrega el siguiente código:

grey De HTML a Wordpress   Theme WordPress part.3

En el código anterior almacenamos una nueva consulta (WP_Query) en la variable $query, además agregamos dos condiciones a esa consulta, que solo se muestren 5 post: (posts_per_page=5) y que los poat correspondan ala categoría 9: (cat=9), más adelante esta categoría tendremos que excluirla de la consulta que mostrará los post del blog por que esta categoría solo mostrará sus post en el slider.

Con esta consulta ya tenemos acceso a las imágenes de todos los post de la categoria ID=9. Ahora utilizaremos una lista desordenada (UL) para listar las imágenes en el slider utilizando la función the_post_thumbnail(); y pasaremos como parámetro el nombre que registramos en el archivo fuenctions.php para las imágenes del slider, para ello eliminamos las etiquetas LI que estan dentro de ul class="overview" y agregamos el siguiente código:

grey De HTML a Wordpress   Theme WordPress part.3

El código anterrior realiza la consulta a la base de datos y con el bucle while listamos las imagenes que se muestran en el slider, la imagen esta dentro de un enlace que con la función the_permalink(); enlaza a la vista completa del post, de esta forma ya obtenemos la cantidad de imágenes configurada al principio con el parámetro posts_per_page=5.

Para la paginación de las imágenes utilizaremos la variable $post_count, en la que esta almacenada la cantidad de post que tenemos, aprovecharemos esta variable en conjunto con el bucle forpara listar la cantidad de circulo de paaginación así como post hayan guardado en esta variable.

Eliminamos todas las etiquetas li que esten dentro de la etiqueta ul class="pager" y agregamos el siguiente código:

grey De HTML a Wordpress   Theme WordPress part.3

Lo que hace el código anterior es: con el bucle for comparar el valor de la variable $post_count y muestra en pantalla la cantidad de etiquetas li que sean necesarias hasta que se cumpla la condición $i < $post_count del bucle, de esta forma obtenemos la paginación dinámica mente dependiendo del número de post que se vayan a mostrar en el slider.

Para concluir cerramos la condicional if , colocamos enif justo antes de del cierre del div id="slider-wrapper".

grey De HTML a Wordpress   Theme WordPress part.3

Si ejecutas el blog en el navegador podrás ver que el slider ya funciona dinámica mente tomando las imágenes de la categoría Anuncios, este método tiene sus inconveniente, esto no deberíamos entregárselo así a un cliente ya que el cliente posiblemente no tenga ni idea de códigos, con lo cual si un día le da con mostrar menos imágenes en el slider, el cliente te llamará, lo más profesional sería agregar un simple panel de opciones para que este pueda controlar lo que muestra en el slider de forma fácil, pero eso ya se sale del objetivo de este tutorial.

Para finalizar agregamos el script del plugins tinycarousel en el head del archivo index.php, En este fragmento de código es donde se controla la configuración del slider, puedes agregar o quitar dependiendo el efecto que desees, para más información visita la página del plugins.

Configurando el logo de la web.

Para el logo de la web no tenemos mucho que hacer, mas que agregar el enlace a la página principal del blog, lo aremos con la función home_url();, tambien agregaremos el nombre de la web y el valor de la etiqueta title del enlace de forma dinámica, para ellos agregaremos el siguiente código dentro de la etiqueta h1 id="logo".

grey De HTML a Wordpress   Theme WordPress part.3grey De HTML a Wordpress   Theme WordPress part.3

El botón que esta debajo del logo lo dejo que decidan ustedes que poner en ese espacio, solo tienen que abrir el psd de la plantilla y agregar el texto que deseen y sustituir la imagen del botón, luego agregar el enlace de una categoría, post o página a la que quiera enlazar.

El loop en wordpress(Desplegar contenido del blog)

Antes de empezar a obtener dinámica mente los articulos del blog en la parte del contenido de la web, tratare de explicar una de las partes más importantes de wordpress, el LOOP, a continuación tratare de explicar su funcionamiento básico.

El loop es el encargado de mostrar el contenido en el blog, se utiliza casi para todas las llamadas de contenido de wordpress por eso su enorme importancia en saber como funciona.

Estructura básica del loop

¿Como funciona?if ( (have_posts() ) Si hay posts disponibles en la base de datos, while( (have_posts() ) mientras aya post, muéstrame el post the_post();, si hay post se ejecuta lo definido en la parte 1. Cuando se acaba el bucle while se muestra lo que salga en la parte 2. Si no se encuentra ningún post se muestra la parte 3.

Con este bucle conseguimos invocar todo lo contenido en la tabla wp_posts de la Base de Datos de nuestro blog y con ayuda de las etiquetas de plantillas podemos desplegar la información que necesitemos de cada post que es lo que aremos a continuación.

Desplegar dinámica mente los post

Después de esta breve explicación, empezamos a agregar etiquetas de plantillas para dinamizar la salida de los post del blog, para ello en el archivo index.php busca la etiqueta section id="content" role="main" y justo debajo de esta línea de código agregamos el inicio del loop, como muestro a continuación:

En el código anterior agregamos al loop la función query_posts();.

query_posts () Es la forma más fácil de modificar la consulta predeterminada que utiliza WordPress para mostrar mensajes. Utilice query_posts () para mostrar mensajes diferentes a los que normalmente aparecen en una URL específica.

En nuestro caso la utilizamos para evitar que se desplieguen los post de la categoría con ID=9, recomiendo leer en el code de wordpress esta función seguro que le ayudara bastante.

Para cerrar el bucle agregaremos endwhile; justo debajo del cierre de la etiqueta article, que es donde finaliza el post.

Si no hay post para mostrar agregaremos un mensaje de error, con lo cual agregamos else: después del cierre del bucle y para finalizar agregamos endif; después del código de error que agreguemos.

Ya con el bucle cargado empezaremos a dar dinamismo a las todas las partes que componen el post del blog, que en estos momento solo tenemos uno y en html, si esta trabajando en algún editor de código no se asuste si muestra algún error ya que es normal por que aun no hemos cerrado el bucle while ni la condicional if, asi que siga trabajando que más adelante cerraremos todo.

Agregando etiquetas de plantilla de wordpress

Titulo del post

Empezamos a sustituir las partes del post por las etiquetas de plantillas de wordpress, primero trabajaremos con el titulo, buscamos la etiqueta h2 y sustituimos el enlace por el siguiente código:

grey De HTML a Wordpress   Theme WordPress part.3

En el código anterior utilizamos las etiquetas de plantilla the_permalink() y the_title();, the_permalink(); debuelve el enlace de la entrada del post y the_title(); debuelve el titulo del post, bastante sencillo, ¿ verdad?.

Meta datos del post

Continuamos con los meta datos, en nuestro caso el autor, la categoría y la fecha del post, para obtener esa información utilizaremos las siguientes funciones:

Dentro de la etiqueta div class=”metadatos” agregamos las etiquetas anteriormente mensionadas y el código final será el siguiente:

grey De HTML a Wordpress   Theme WordPress part.3

Hay otras funciones interesantes relacionadas con las mencionadas anteriormente pero no quiero enrollarme mucho con esto ya que es de lo más sencillo.

Imagen en miniatura o post thumbnail

Para la imagen del post utilizaremos la función the_post_thumbnail();, crearé una estructura condicional el cual coloque una imagen por defecto si no existe imagen destacada en el post, el código será el siguiente:

grey De HTML a Wordpress   Theme WordPress part.3

Lo que hacemos es preguntar si hay imagen thumbnail, si no hay imagen thumbnail ejecutamos el código que agrega una imagen por defecto, si hay imagen thumbnail la muestra en pantalla.

Para llamar la imagen del post utilizamos la función the_post_thumbnail('index-thumbnail'); pasandole como parametro el nombre de la imagen registrada en el archivo functions.php.

Contenido del post

Para el contenido del post utilizaremos la función the_excerpt(); la cual nos devuelve un fragmento del post, tiene la opción de escribir el fragmento de código que quiere que se muestre al escribir el post, si no configura nada wordpress toma por defecto un extracto de las primeras 55 palabras del post.

Puede también utilizar la función the_content(); lo único es que debe siempre agregar el comentario ! - More - en la parte del post donde quiere que se corte el extracto para mostrar, es más productivo utilizar la función the_excerpt(); para mostrar extractos.

Botón leer más y número de comentarios

En la parte de abajo de cada post colocaremos el número de comentarios de la entrada y un botón leer más, para ello debajo del final del div entry-content colocamos el siguiente código:

En el código anterior creamos un div y dentro de este div colocamos el botón leer más y el número de comentario, para el número de comentario utilizamos la función comments_popup_link(), esta función nos debuelve el numero de comentarios que contiene la entrada, además de enlazar el área de los comentarios del post.

Para el botón leer más simplemente utilizamos un enlace y agregamos en el atributo href="" la función the_permalink(), esta función nos devuelve la url del post y entramos en su vista completa.

Para dar estilo tanto al botón como a los comentarios agregaremos el siguiente código css en nuestro archivo style.css.

Con esto concluimos con el botón y el número de comentarios, nuestras entradas quedarían así:

grey De HTML a Wordpress   Theme WordPress part.3

Para concluir con el loop, cerramos el bucle while, para ello despues del cierra de la etiqueta article class="post" colocamos el siguiente código:

Ademas de cerrar el bucle agregamos la sentencia else,de esta forma se ejecutará el código que agreguemos a continuación si no hay ningún post que mostrar en la base de dato, con lo cual después del código anterior agregaremos lo siguiente.

El código resultante del cierre del loop será el siguiente:

grey De HTML a Wordpress   Theme WordPress part.3

Por si te ocurre cualquier error te dejo el código completo de la dinamización del contenido del blog.

Footer Del blog

Para el footer tendremos poco trabajo, agregaremos el año del copyRight con la función the_time(), a la cual le pasamos como parámetro la “Y” esta nos devuelve el año actual, con esto mantenemos el año del copyRight actualizado, si quieres ver los parametros posibles a la función the_time() puedes ver el manual de php en pesañol.

CopyRight

Dentro del párrafo Agregamos la función the_time, el código resultante es el siguiente.

Menú Footer

Para el menú del footer debemos ir al archivo functions.php y registrarlo del mismo modo que el menú principal nuestro menú para el footer, para ellos abrimos el archivo function.php y donde registramos el menú principal, el código resultante será el siguiente:

grey De HTML a Wordpress   Theme WordPress part.3

Una vez registrado nuestro menú debemos sustituir la lista desordenada del footer por la función wp_nav_menu para llamar el menú que registramos anteriormente

grey De HTML a Wordpress   Theme WordPress part.3

Si entramos en el panel de administración –> Apariencia –> Menú, podemos ver una nueva área de menú llamada Footer Menú.

grey De HTML a Wordpress   Theme WordPress part.3

El siguiente paso es crear las páginas, categorias o post que quieras mostrar en este menú, este proceso no lo explicaré ya que en este paso he explicado todo el proceso necesario y me imagino que ya saben que deben hacer.

Con este paso terminamos la primera parte del tutorial, espero que se haya entendido todo, si tienen alguna duda no duden en dejar sus comentarios y tratare de ayudarlos en todo lo que pueda.

Conclusión

En esta parte del tutorial solo creamos el index del blog, ya nuestros post salen de forma dinámica de la base de datos, ya tenemos nuestro slider dinámico que toma los post agregados en una categoría especifica.

En la siguiente parte del tutorial trabajaremos con el archivo single.php que es donde mostraremos el post completo y agregaremos los comentarios, los comentarios aprenderemos a modificar la salida predeterminada y crearemos una estructura personalizada adaptada a nuestro diseño.

Recomiendo seguir la siguiente parte que es una de las más interesantes y difícil de encontrar en la red, les prometo que aprenderán cosas nuevas.

Pasar de PSD a HTML5 – Theme WordPress part.2

Descubrimos como se codifica una página web previamente diseñada en photoshop. Se utilizaran las nuevas tecnologías para maquetar en HTML5 y Css3.

Empesamos a Pasar de PSD a HTML5 nuestro diseño, en la primera parte del tutorial seguimos los pasos necesarios para diseñar una página web en photoshop, ahora vamos a transformar esa imagen en una página web con html5 y css3, dicho esto nos ponemos mano a la obra :-).

En esta parte del tutorial cortaremos las imágenes necesarias para la web, utilizaremos algunas técnicas css3 para evitar su uso excesivo..

Utilizaremos las nuevas etiquetas html5 para la estructura principal y para el estilo utilizaremos las nuevas propiedades css3 como: degradados, sombras, sombra en textos y transiciones.

Estructura de archivos y carpetas a utilizar

Como sabemos que estamos trabajando para lo que será una plantilla para wordpress en el futuro, teniéndolo en cuenta utilizaremos la siguiente estructura de archivos.

grey Pasar de PSD a HTML5   Theme Wordpress part.2

CSS: Albergará los archivos css, en nuestro caso solo tendrá el archivo reset.css y las fuentes que utilizaremos en la web.

Images: como lo indica su nombre estarán alojadas todas las imágenes de la plantilla, en nuestro caso también colocaremos una carpeta llamada tmp(temporal) para colocar las imágenes del slider y el post.

Js: aloja nuestros archivos JavaScript.

style.css: en este archivo tenemos la opción de importar desde la carpeta css los estilos de la pagina o agregarlos directamente en ella, en nuestro caso he importado la hoja de estilos reset.css y he agregado todos los estilos de la web en este archivo.

Una ves creada esta estructura de archivos y carpetas abrimos index.html en nuestro editor de código y empezamos a codificar el HTML, yo he utilizado DreamWeaver y Notepad ++.

Cortar las imágenes Necesarias

A la hora de cortar imágenes es muy tedioso buscar las capas, para facilitar este trabajo puedes seleccionar la Herramienta Mover y en la barra de opciones marcar la opción seleccionar automáticamente, de esta forma solo con hacer clic en un elemento del espacio de trabajo te seleccionará automáticamente la capa en el panel capas.

Para empezar a aplicar estilos a la página primero cortaremos las imágenes necesarias, empezaremos por la imagen de fondo, para el fondo utilizaremos 2 imagenes, una que es el fondo general de la web y otro el fondo central superior que es una especie de rayo de luz.

Fondos de la web

para el fondo general ocultamos todas las carpetas en el panel capas menos la de fondo, seleccionamos la herramienta Marco rectangular, creamos una selección de unos 100px x 100px.

grey Pasar de PSD a HTML5   Theme Wordpress part.2

Con la selección hecha vamos al menú edición > copiar combinado, luego creamos un nuevo documento (Ctrl + N) si te fijas al crear el nuevo documento ya viene con las dimensiones de la selección anterior, pegamos (Ctrl + V) la selección copiada anteriormente.

Para guardar la imagen ir al menú Archivos > Guardar para web y dispositivos (Ctrl+Alt+Shif+s) lo guardamos como page-bg.jpg en la carpeta imagen que creamos al principio del tutorial y lo configuramos de la siguiente manera.

grey Pasar de PSD a HTML5   Theme Wordpress part.2

De esta forma guardaremos todas las imágenes que cortemos, con la salvedad de que las imágenes que necesitan transparencia las guardaremos en png, pero lo demás será el mismo proceso.

Cortemos ahora la imagen de fondo central,ocultemos la capa de fondo verde para solo dejar activa las dos que forman los rayos, seleccionemos la herramienta marco rectangular y creamos una selección a todo ancho del área de trabajo 800px y de alto lo necesario para cubrir toda la imagen.

grey Pasar de PSD a HTML5   Theme Wordpress part.2

Para guardar esta imagen seguimos el proceso anterior solo que ahora seleccionamos la opción PNG-24 y guardamos la imagen en la carpeta images como: luz-body-bg.png, ya tenemos las dos imágenes necesarias para el fondo

Logo

Continuemos cortando imagenes, para el menú no será necesario ya que utilizaremos CSS3, la siguiente sería el logo de la web, para este utilizaremos otro metodo de corte de imagenes en photoshop, con la tecla ALT pulsada hacemos clic en el ojo de la carpeta logo para solo dejar visible esta, pulsamos Clic derecho > duplicar Grupo, en el nuevo cuadro seleccionamos Nuevo en el desplegable Documento, como muestra la imagen.

grey Pasar de PSD a HTML5   Theme Wordpress part.2

El resultado será un nuevo docuemnto con la mismas dimensiones que el Docuemtno general de la web, para recortarlo ir al Menú imagen > Cortar…, en el cuadro que te sale selecciona la opción Píxeles transparentes, con esto solo queda el área del documento donde exista un pixel al menos de la imagen, de esta forma no nos equivocamos cortando mas o menos área de la imagen, para terminar guardamos la imagen como logo.png

Esta forma de recorte solo suelo utilizarlas para imágenes que tienen fondo transparente y no se pueden visualizar correctamente las sombras o reflejos que tiene aplicado

Manejadores del slider

Para el slider solo necesitaremos los dos botones left y right, lo demas lo crearemos con css3, estos botones también se pueden crear fácilmente pero no quiero alargar mucho el tutorial.

Ocultamos todas las capas y dejamos visible solo la carpeta del botón left(Alt + clic en la carpeta), duplicamos en un nuevo documento la carpeta, pulsamos Alt + Clic sobre la mascara de la carpeta Nav Left para desactivarla y ocultamos la capa sombra.

grey Pasar de PSD a HTML5   Theme Wordpress part.2

Para terminar con el botón left recortamos la imagen, menú imagen > Cortar…, guardamos el botón como slider-ctrl-left.png.

Para recortar la sombra ocultamos todas las capas menos la capa sombra, vamos al menú imagen > cortar…, la guardamos como sombra-slider-control-l.png.

grey Pasar de PSD a HTML5   Theme Wordpress part.2

Para el botón de la Derecha solo abrimos la imagen del botón izquierdo en photoshop, vamos al menú Edición > Transformar > Voltear horizontal y lo guardamos como slider-ctrl-right.png y esta listo el botón derecho, el mismo proceso con la sombra y la guardamos como sombra-slider-control-r.png, con esto ya tenemos los botones del slider.

Fondo titulo post y widget sidebar

Para cortar el fondo del titulo de los post utilizaremos el mismo metodo que para los botones del slider, seleccionamos las dos capas correspondientes al fondo del titulo y pulsamos en duplicar capas en un documento nuevo, ir al menú imagen > cortar… y la guardamos como title-bg.png

Para el titulo del sidebar seguimos el mismo proceso anterior y lo guardamos como title-bg-sidebar.png.

División del contenedor principal

Para dividir los post del sidebar utilizaremos una imagen que se repetirá en forma vertical, seleccionemos la capa Somra sidebar, la duplicamos en un nuevo documento, creamos una nueva capa por debajo de esta y con la capa Somra sidebar seleccionada hacemos clic derecho > combinar hacia abajo, esto para eliminar los estilos de capa que contiene.

grey Pasar de PSD a HTML5   Theme Wordpress part.2

Con la herramienta Recortar hacemos una selección de unos 10px de alto y todo el ancho de la imagen, pulsamos enter y la guardamos como bg-content.png

Imágenes necesaria del sidebar

Para el sidebar solo necesitamos el icono de la lista, las imágenes de la lista vídeos la dejare en los archivos del tutorial, para recortar el icono seguir el mismo proceso, dupliquen la capa en un nuevo documento, ir a imagen > recortar… y guardarla como lista-noticia-arrow.png.

Imágenes necesaria del footer

En el footer solo necesitamos el botón de la derecha para subir arriba, sigue el mismo proceso para recortar la imagen y guárdala como goTop-footer.png

Ya tenemos todas las imágenes que utilizaremos para la web, el siguiente paso a seguir será la implementación de css3 para dar forma a nuestra web.

Para empezar utilizaremos el reset css de meyerweb.com copia los estilos y pegalos en el archivo reset.css que se encuentra dentro de la carpeta css.

Configuración de head

En nuestro head debemos agregar los archivos js,css y un archivo js para agregar compatibilidad con las versiones antiguas de IE.
El siguiente código lo agregaremos entre las etiquetas [head] y [/head]

Crear el Código Base, archivo index.html

Dentro del archivo index.html crearemos el código base de la página.

Si te fijas en el código anterior lo primero que vemos es el DOCTYPE que trae HTML5 con diferencia con la versión anterior que existían tres tipos de DOCTYPE, ahora con html5 solo existe uno y mucho más sencillo.

Como muestra el código anterior la página estará compuesta por 5 bloques principales, entre ellos tres etiquetas nuevas en HTML5.

DIV ID wrapper: Este bloque contendrá todos los demás bloques de la web, este define el ancho que utilizaremos.

NAV: Esta etiqueta delimita el área de navegación de la página y estará también el buscador.

HEADER: Dentro de esta etiqueta colocaremos el logos y el slider de la web.

DIV ID main: Este bloque delimitará el espacio reservado para nuestro contenido y la barra lateral o sidebar.

FOOTER:En este bloque se colocara la información del pie de página y un menú de navegación.

Creando el Menú Principal de la web

Para delimitar el menú utilizaremos la etiqueta de HTML Nav, dentro de ella utilizaremos una lista desordenada ul para crear el menú, para ello inserta dentro de la etiquena NAV el siguiente código:

dentro de la etiqueta nav también colocaremos el buscador de la página, para ello agregamos el siguiente código

Dentro del bloque NAV tenemos el menu principal de la web y el buscador, para el buscador utilizamos un formulario con sus respectivos input type text y button para enviar el formulario, si se fija he implementado una nueva etiqueta HTML5 en el formulario de busqueda, placeholder y button.

Con esto queda ya terminada la estructura de la barra de navegación.

Creando el Slider Show

Para el slider he utilizado el plugins jQuery Tiny Carousel, específicamente el ejemplo 2 de esta web, edite los estilos css y la estructura html para adaptarlo al diseño, hay un sin numero de plugins que hacen esta función, pero, me he decidido por esta opción por que es muy flexible al editarlo y ademas de imágenes te permite agregar html al contenido deslizante.

Dentro de la Etiqueta HEADER crearemos la estructura del slider, para ello colocaremos el siguiente código:

Código para el Logo

Para el logo utilizaremos un encabezado h1, dentro del h1 un enlace el cual aplicaremos más adelante unos estilo para colocare la imagen del logo de fondo, la estructura será la siguiente.

Debajo del logo colocaremos un botón que dará opción a ver mas vídeos, en la plantilla creada en photoshop no se explico la creación de ese botón, lo dejare para descargar entre los materiales del tutorial, para el botón agregaremos el siguiente código debajo del logo.

con esto ya damos pro terminada la estructura del HEADER, ahora pasaremos a crear la estructura del MAIN que es donde se colocarán los post y el sidebar o barra lateral.

Estructura del contenido principal y sidebar

Como muestra el código anterior el bloque main estará dividido en dos partes, una la section content que será la que albergue las entradas del blog y otra el bloque aside sidebar, que es donde se despligan los widget de wordpress.

En esta ocación he utilizado dos etiquetas de HTML5, SECTION Y ASIDE

Si se fija en el código he agregado un atributo role en cada etiqueta (aside, aection), este atributo indica el papel que el elemento actual juega en el contexto del documento. Además, la información de este atributo pueden ser utilizada para definir cada acción que se puede realizar en un elemento.

Para más información sobre el atributo role puedes entrar Aquí.

Área contenedora de los artículos del blog

Dentro de la etiqueta (SECION ID=”CONTENT”) colocaremos la etiqueta ARTICLE DE HTML5 y dentro de esta todas las partes del articulo.

El arículo cuenta con tres bloques principales que son:

  • HEADER:en este bloque agregaremos toda la información referente al artículo, categoría, autor, fecha,etc…
  • FIGURE: Etiqueta que envuelve la imagen del artículo.
  • DIV entry-content: en este bloque estará el extracto o resumen que se muestra en el index de los blog.

Estas son las partes principales del bloque article, con esto queda ya estructurado.

Widget para la barra lateral o sidebar

El código de los widget lo colocaremos dentro de la etiqueta aside, nuestra web consta de tres widget los cuales se detallan a continuación.

Widget Últimas noticias

Widget Últimos vídeos

Widget Contact form

Si se fija en todos los widget son una simple lista desordenada en la cual se agrega un contenido dentro de ella, luego con css acomodaremos cada elemneto en su lugar.

Estructura del Footer

En el footer solo tendremos un menú creado por una lista desordenada, un texto de CopyRight y un botón para subir, el código es el siguiente.

Con esto ya queda terminada la estructura de la web, el siguiente paso será cortar las imagenes necesaria para la web y aplicar estilos css para organizar la estructura que acabamos de crear, Puedes descargarte los archivos del tutorial, donde encontraras la estructura completa de la web.

Theme WordPress en Photoshop (Music Layou)

Este tutorial consta de tres fases que son: Diseño, Maquetación y conversión a wordpress. Esta es la primera parte en la cual desarrollaremos un diseño atractivo en photoshop, teniendo en cuenta que su objetivo final será una plantilla para wordpress.

Hola, este es el primer tutorial para web-desings.com referente al diseño web con photoshop. Este tutorial trata de un theme para WordPress que más adelante maquetaremos con HTML y CSS y lo convertirlo a WordPress.Será un proceso largo pero no nos adelantemos al tiempo primero comencemos con el diseño y ya hablaremos sobre la maquetación y su posterior conversión a wordpres.

Bien Empecemos, Este tutorial va orientado a personas que tengan unos conocimientos básicos al menos sobre el uso de las herramientas de photoshop ya que no puedo explicar todo con tanto detalle, quizás más adelante pueda hacerlo cuando empiece a gravar vídeos tutoriales.

Materiales para Descargar:

Descargar Fuente:Bauhaus 93

Decargar Degradados y Formas Utilizadas

Resultado que Obtendremos

grey Theme Wordpress en Photoshop (Music Layou)

1. Creando el Documento de trabajo en photoshop Cs5.

Para empezar Crear un documento (Ctrl + N) con unas medidas de 1200px x 1200px, 72 píxeles/pulgadas, color de fondo blanco(#ffffff), una vez creado el documento colocaremos las guías verticales para definir una anchura de 800px que será el ancho de la web. Para crear las guías tenemos que ir a vista > Guía Nueva, en el cuadro que aparece seleccionar la opción vertical y colocar 200px para la primera guía.

grey Theme Wordpress en Photoshop (Music Layou)

Para agregar la segunda Guía repetimos el mismo proceso, vista > guía Nueva, en el cuadro que aparece seleccionar la opción vertical y colocar 1000px para la segunda guía.

grey Theme Wordpress en Photoshop (Music Layou)

Ahora debería tener dos guías a 200px del borde del documento y con un área central de 800px entre las guías que será el área de trabajo que utilizaremos, todo lo que se creará desde ahora estará en ese espacio.

2. Creando el fondo de la web.

Para empezar con nuestro fondo crearemos una capa de color uniforme desde el panel de capas, con un color de relleno verde (#6d9110).

grey Theme Wordpress en Photoshop (Music Layou)

Re-nombremos la capa a fondo y conviértela en objeto inteligente (Clic derecho > Convertir a Objeto Inteligente), este paso es opcional, lo hago de esta forma por que le aplicaremos filtros a esta capa y el objeto inteligente me da la opción de poder editar esos filtros posteriormente.

grey Theme Wordpress en Photoshop (Music Layou)

Aplicamos ruido a la capa fondo, para ello vamos a Filtros > Ruido > Añadir ruido, con cantidad: 1%, Distribución: Gaussiano, Monocromático: si y pulsamos Ok.

grey Theme Wordpress en Photoshop (Music Layou)

Ahora crearemos unos rayos de luz para el fondo, para ello seleccionamos la herramienta forma personalizada y seleccionamos la forma que a continuación muestro en la imagen.

grey Theme Wordpress en Photoshop (Music Layou)

Si no tienes la forma la dejare para descargar entre los materiales del tutorial, para aplicar la forma haces clic y con la tecla Shif pulsada para crear un circulo perfecto, cuando lo tengas colócalo en el centro horizontal del documento y el centro vertical del circulo en el borde superior del documento, (tal cual está en la imagen).

Para eliminar los bordes selecciona la capa de la forma personalizada y agrégale una mascara de capa, con la mascara de capa seleccionada configura el blanco como color frontal y el negro color de fondo, selecciona la herramienta degradado configurado a radial y debes aplicarlo desde la parte superior del documento hasta el borde final de la forma personalizada.

grey Theme Wordpress en Photoshop (Music Layou)

Cambiamos el color de la forma personalizada a un verde oscuro(#437201). Creamos una nueva capa por encima de la forma personalizada renombrada a Brillo, le aplicaremos un degradado radial con el color blanco como frontal y el degradado que vaya de blanco a transparente y por último reducimos la opacidad de la capa al 40%, aplicarlo desde arriba hacia abajo y quedará un resultado como en la siguiente imagen.

grey Theme Wordpress en Photoshop (Music Layou)

Con esto ya tenemos el fondo terminado, para tener todo organizado puedes agrupar esas tres capas en una carpeta y llamarla fondo o como quieras, de esta forma iremos agrupando cada parte de la web que creemos.

3. Creando el menú de navegación principal.

Antes de empezar con el menú crearemos un borde de 5px en la parte superior del documento, para ello seleccione el color verde(#264602) como color frontal, selecciones la herramienta Rectángulo cree una linea de 5px de alto y a todo el ancho del documento, como en la imagen siguiente:

grey Theme Wordpress en Photoshop (Music Layou)

Agregamos una nueva guía horizontal a 100px del borde superior del documento, seleccionamos la herramienta Rectángulo redondeado con un radio de 10px, realizamos el rectángulo entre las dos lineas verticales de 800px y la que acabamos de crear de 100px, el rectángulo debe sobre salir del documento por la parte de arriba para que no se visualicen las esquinas superiores y la capa debe estar por debajo del borde superior que creamos anteriormente.

grey Theme Wordpress en Photoshop (Music Layou)

A esta barra de navegación agregaremos los siguiente estilos de capa.

grey Theme Wordpress en Photoshop (Music Layou)

grey Theme Wordpress en Photoshop (Music Layou)

grey Theme Wordpress en Photoshop (Music Layou)

grey Theme Wordpress en Photoshop (Music Layou)

seleccione la herramienta texto, configure el tipo de letra en Bauhaus 93, con un color verde(#658b15),Si no la tienes instalada puedes descargarla es gratuita y escribe las secciones que quieras agregar en tu web, nosotros utilizamos : Home, Rock, Pop, Rap, Salsa, otras.

grey Theme Wordpress en Photoshop (Music Layou)

Debería de quedar como en la imagen de arriba, ahora crearemos el efecto Hover para el texto, selecciona la herramienta texto y la palabra home y cambia el color a un verde mas oscuro(#264602) y agregaremos con la herramienta pluma un triangulo del mismo color que el borde superior como muestro en la imagen.

grey Theme Wordpress en Photoshop (Music Layou)

Para separar cada item del menú crearemos una linea de 1px de color(#aab5c) y otra de 1px de color(#e2e2e2) colocada como en la imagen de abajo.

grey Theme Wordpress en Photoshop (Music Layou)