- Desde
- 10 Ene 2012
- Mensajes
- 927
Estimados en el día de hoy les enseñare algunas cosas sobre themes wordpress, basicamente son:
-Como utilizar bien 2 plugins para custom fields y custom post types
-Como implementar el slider de Flexslider de forma gratis y legal
-Como ahorrarse 49 dolares y el uso de un plugin en su wordpress para dejarlo mas lindo
Para este tutorial necesitamos:
-El script de Flexslider: http://www.woothemes.com/flexslider/
-El plugin Advanced Custom Fields ACF { Advanced Custom Fields Plugin for WordPress
-El plugin Custom Post Type UI Custom Post Type UI | WebDevStudios.com
-El archivo functions.php
-Clases CSS a gusto
Para este tutorial pretenderé que ya saben como hacer un llamado a un script en wordpress y como implementar el slider de Flexslider en un sitio, aunque sea en un html.
Lo que haremos es partiendo de esto permitir que dicho slider trabaje con el loop de nuestros post o un loop de un custom post type que creemos. Tanto para uno u otro caso crearemos también customs fields para poder editar algunas cosas del slider tales como donde saldra la foto y donde saldrá el texto pudiendo cambiar el orden en un pantallazo y al siguiente retomarlo nuevamente.
Para crear los custom post utilizaremos el plugin Custom Post Type UI, se que existen varias opciones para hacer esto pero este cuenta con una particularidad, y es que podremos exportar el dofigo de nuestro custom post para integrarlo al functions.php de esta forma creamos los tipos de entradas que precisemos y luego simplemente quitamos el plugin.
La creación de un tipo de post es realmente simple, basta con ir al menu del plugin y completar los campos referentes, también pueden agregar taxonomías.
Lo importante una vez creados todos los tipos de entradas que requieran es ir a la opción "Manage post types" donde verán cada custom post creado y podrán editarlos borrarlos, o la opción que realmente nos interesa, exportarlos.
Algo a tener en cuenta es que el código generado al exportar tiene algunos errores en el comillado (algunas comillas de mas), pero les dejare un ejemplo de como debería quedarles (este ejemplo tiene casi todas las opciones del tipo de enetrada activas, sepan aplicarlo a sus opciones).
Ya solucionados los errores en el código, pueden pegar el resultado directamente en functions.php o incluirlo, personalmente opto por la segunda ya que al tener esta función en un archivo externo tenemos la ventaja de un rápido acceso no solo para editar sino para replicar en otros themes.
Ahora agregaremos los custom fields de una forma casi similar usando el plugin Advanced Custom Fields que nos facilita una amplia librería de campos personalizados como textareas, selects, etc, y tambien nos deja exportar el resultado final.
lo importante es configurar la condición de en que tipos de entradas se deben mostrar los campos personalizados, y optar por el tipo de campo adecuado.
A modo de ejemplo generalmente uso:
Un select para elegir cosas como colores, tamaños y posiciones.
Text para lineas de texto tales como url's o textos cortos.
Campos de imagen para permitir usar en el slider una imagen diferente a la destacada.
Ahora acá es donde haremos la magia, la idea es que usemos customfields junto con CSS para que según lo marcado en campo personalizado varie la clase del componente y con el varié el aspecto.
Por ejemplo podemos hacer dos clases, una left, y otra right con el css como se muestra a continuación:
.right {float:right;}
.left {float:left;}
Con esto todo lo que tenga clase left flotara a la izquierda y lo que tenga clase right flotara a la derecha, ahora solo queda asignar esta clase de alguna forma a algún objeto del slider.
Para hacer esto iremos por ejemplo a la parte del slider donde mostramos la imagen y colocamos en dentro de la etiqueta img la etiqueta
class="<?php the_field('nombre_de_campo'); ?>"
se entiende que nombre_de_campo deben cambiarlo por el nombre del campo personalizado que crearon, pueden verlo en el plugin, es el que esta en minúsculas.
Así pues tendrán una clase que cambia según lo marcado en el administrador a la hora de crear la entrada, lo mismo pueden hacer con colores tamaños y cualquier clase que se les ocurra.
-Como utilizar bien 2 plugins para custom fields y custom post types
-Como implementar el slider de Flexslider de forma gratis y legal
-Como ahorrarse 49 dolares y el uso de un plugin en su wordpress para dejarlo mas lindo
Para este tutorial necesitamos:
-El script de Flexslider: http://www.woothemes.com/flexslider/
-El plugin Advanced Custom Fields ACF { Advanced Custom Fields Plugin for WordPress
-El plugin Custom Post Type UI Custom Post Type UI | WebDevStudios.com
-El archivo functions.php
-Clases CSS a gusto
Para este tutorial pretenderé que ya saben como hacer un llamado a un script en wordpress y como implementar el slider de Flexslider en un sitio, aunque sea en un html.
Lo que haremos es partiendo de esto permitir que dicho slider trabaje con el loop de nuestros post o un loop de un custom post type que creemos. Tanto para uno u otro caso crearemos también customs fields para poder editar algunas cosas del slider tales como donde saldra la foto y donde saldrá el texto pudiendo cambiar el orden en un pantallazo y al siguiente retomarlo nuevamente.
Para crear los custom post utilizaremos el plugin Custom Post Type UI, se que existen varias opciones para hacer esto pero este cuenta con una particularidad, y es que podremos exportar el dofigo de nuestro custom post para integrarlo al functions.php de esta forma creamos los tipos de entradas que precisemos y luego simplemente quitamos el plugin.
La creación de un tipo de post es realmente simple, basta con ir al menu del plugin y completar los campos referentes, también pueden agregar taxonomías.
Lo importante una vez creados todos los tipos de entradas que requieran es ir a la opción "Manage post types" donde verán cada custom post creado y podrán editarlos borrarlos, o la opción que realmente nos interesa, exportarlos.
Algo a tener en cuenta es que el código generado al exportar tiene algunos errores en el comillado (algunas comillas de mas), pero les dejare un ejemplo de como debería quedarles (este ejemplo tiene casi todas las opciones del tipo de enetrada activas, sepan aplicarlo a sus opciones).
Ya solucionados los errores en el código, pueden pegar el resultado directamente en functions.php o incluirlo, personalmente opto por la segunda ya que al tener esta función en un archivo externo tenemos la ventaja de un rápido acceso no solo para editar sino para replicar en otros themes.
Ahora agregaremos los custom fields de una forma casi similar usando el plugin Advanced Custom Fields que nos facilita una amplia librería de campos personalizados como textareas, selects, etc, y tambien nos deja exportar el resultado final.
lo importante es configurar la condición de en que tipos de entradas se deben mostrar los campos personalizados, y optar por el tipo de campo adecuado.
A modo de ejemplo generalmente uso:
Un select para elegir cosas como colores, tamaños y posiciones.
Text para lineas de texto tales como url's o textos cortos.
Campos de imagen para permitir usar en el slider una imagen diferente a la destacada.
Ahora acá es donde haremos la magia, la idea es que usemos customfields junto con CSS para que según lo marcado en campo personalizado varie la clase del componente y con el varié el aspecto.
Por ejemplo podemos hacer dos clases, una left, y otra right con el css como se muestra a continuación:
.right {float:right;}
.left {float:left;}
Con esto todo lo que tenga clase left flotara a la izquierda y lo que tenga clase right flotara a la derecha, ahora solo queda asignar esta clase de alguna forma a algún objeto del slider.
Para hacer esto iremos por ejemplo a la parte del slider donde mostramos la imagen y colocamos en dentro de la etiqueta img la etiqueta
class="<?php the_field('nombre_de_campo'); ?>"
se entiende que nombre_de_campo deben cambiarlo por el nombre del campo personalizado que crearon, pueden verlo en el plugin, es el que esta en minúsculas.
Así pues tendrán una clase que cambia según lo marcado en el administrador a la hora de crear la entrada, lo mismo pueden hacer con colores tamaños y cualquier clase que se les ocurra.
