Archivo de la etiqueta: wordpress

Slideshow Simple en WordPress

Una de las cosas más usadas en la actualidad son los slideshows (pasadores de imágenes) hace un buen tiempo atrás no había otra opción más que usar flash para esto, sin embargo, ahora hay una gran cantidad de librerías javascript que podemos utilizar.

Personalmente soy un gran fanático de jQuery, librería que utilizaré para este ejemplo.

Vamos a crear un slide de imágenes simple, con un efecto fade-in / fade-out entre cada imagen. Tomaré las imágenes de la carpeta “images” incluida en nuestro tema.  Además condicionaremos el slideshow para que solo aparezca en el home de nuestro sitio.

Iniciamos agregando las librerías javascript a nuestro tema.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/functions.js"></script>

Éstas líneas las incluimos dentro de nuestras etiquetas <head> </head> de nuestro archivo header.php.

En primer lugar agregamos la librería jquery desde un repositorio que actualiza automáticamente a la última versión.

Luego agregamos el plugin jquery-cycle mismo que podemos descargar y documentarnos en esta dirección. Para incluirlo a nuestro tema debemos utilizar  bloginfo(‘template_directory’); que da como resultado el directorio de nuestro template en el sitio.

Nuestros archivos .js los hemos  incluidos en una carpeta llamada js , de nuevo, para trabajar de forma más ordenada.

Agregamos también un archivo llamado functions.js que recomiendo crear para incluir nuestros propios fragmentos de código js.

Este jQuery plugin (cycle) es de los más básicos que tenemos por ahi, yo les recomiendo buscar el que más se adapte a sus necesidades, lean bien la documentación e incluyanlo en sus proyectos.

El plugin a grandes rasgos, toma un grupo de imágenes dentro de un div con un id determinado y  hace un pase con efectos. Claro que ustedes pueden usar sus propios id’s y divs y estilizar como deseen el tamaño y demás con CSS. Yo usaré el id “slider” para mi ejemplo e incluiré un grupo de imágenes guardadas en la carpeta “images” de mi tema, algo importante es que estas imágenes tengan el mismo tamaño, en mi caso son de 930×367.


<div id="slider">
<img src="<?php bloginfo('template_directory'); ?>/images/banner.jpg" alt="" />
<img src="<?php bloginfo('template_directory'); ?>/images/banner1.jpg" alt="" />
<img src="<?php bloginfo('template_directory'); ?>/images/banner3.jpg" alt="" />
<img src="<?php bloginfo('template_directory'); ?>/images/banner4.jpg" alt="" />
</div>

Como vemos, volvemos a utilizar  bloginfo(‘template_directory’); para obtener la dirección de nuestro tema, seguido de nuestro directorio images.

Ahora, y como mi plugin lo permite, agregaré un área de navegación con botones para ir atrás, adelante y un listado de números para cada slide.

<div id="pager_wrapper">
<span id="prev"></span>
<div id="pager"></div>
<span id="next"></span>
</div>

El id “pager_wrapper” define nuestros botónes atrás, adelante, incluyendo cada uno de éstos en un elemento span con un id específico para cada botón. como vemos en medio tenemos un div más con el id “pager”, éste contendrá un número correlativo para cada imagen en nuestro slide.

En conjunto nuestro código quedaría así:


<div id="slider_wrapper">

<div id="slider">
<img src="<?php bloginfo('template_directory'); ?>/images/banner.jpg" alt="" />
<img src="<?php bloginfo('template_directory'); ?>/images/banner1.jpg" alt="" />
<img src="<?php bloginfo('template_directory'); ?>/images/banner3.jpg" alt="" />
<img src="<?php bloginfo('template_directory'); ?>/images/banner4.jpg" alt="" />
</div>

<div id="pager_wrapper">
<span id="prev"></span>
<div id="pager"></div>
<span id="next"></span>
</div>

</div>

Ahora agregamos nuestro css con la maquetación de los divs y demás.
Luego tomamos nuestro archivo functions.js y agregamos el siguiente código javascript.

$(document).ready(function(){
$('#slider').cycle({
fx:     'fade',
delay:    2000,
timeout:  2000,
pager: '#pager',
prev:    '#prev',
next:    '#next'
});
$('#nav li ul') .append ("<li class='bottom_bg_list'>thi sis it</li>");
$('#nav li ul') .append ("<li class='top_bg_list'>thi sis it</li>");
});

Como vemos, éste código le dice a mi plugin que utilice el id #slider, con otras varibles más como el efecto, los id’s para los botones anterior y siguiente, etc.

Mi resultado final fué éste:

Agregar un condicional al SlideShow.

Al agregar el fragmento del slideshow a nuestro archivo header, éste se repetirá en cada página en donde  se llame a dicho archivo. Para evitar esto, agregaremos una condición que muestre el slideshow solamente en el homepage de nuestro tema. Para esto utilizaremos uno de los Conditional tags de wordpress llamado is_home, con el la condición el código queda así.


<?php if (is_home()) { ?>
<div id="slider_wrapper">

<div id="slider">
<img src="<?php bloginfo('template_directory'); ?>/images/banner.jpg" alt="" />
<img src="<?php bloginfo('template_directory'); ?>/images/banner1.jpg" alt="" />
<img src="<?php bloginfo('template_directory'); ?>/images/banner3.jpg" alt="" />
<img src="<?php bloginfo('template_directory'); ?>/images/banner4.jpg" alt="" />
</div>

<div id="pager_wrapper">
<span id="prev"></span>
<div id="pager"></div>
<span id="next"></span>
</div>

</div>
<?php } ? >

 

Referencia WordPress: Conditional_Tags, is_home

Aqui pueden descargar  los archivos que se construyeron en el transcurso de este tutorial.

Es todo por ahora, sus comentarios son siempre bienvenidos, éxitos y hasta que el tiempo sea grato.

Mapeo de Dominios en WordPress Multisitios

En definitiva, el Mapeo de Dominios en WordPress Multisitios, es una de las características más avanzadas de este sistema, y si estás pensando en ofrecer desarrollo o soporte de sitios web con WordPress, entonces definitivamente este es uno de los puntos más importantes, y que debes conocer, al igual que todos los tutoriales que conforman nuestra Guía Completa de WordPress Multisitios.

En el tutorial de Activación de WordPress Multisitios mencionaba que la mejor manera en la que yo recomendaba la activación, era en base a subdominios y no en base a subcarpetas, sin embargo, esta operación debe pasar sobre ciertos requerimientos, una de ellas, es que tu servidor tenga suporte para Wildcard DNS.

Qué son los WildCard DNS?

Mejor conocidos como comidínes para sitios web (traducido al español), Son llamados así porque permiten utilizar cualquier nombre en los dominios de tercer nivel.

Ejemplos:

  1. jpalencia.wpguate.com
  2. csanchez.wpguate.com
  3. agarcia.wpguate.com

En este caso haremos la explicación con Control Panel, si deseas hacerlo en un Panel Plesk u otro, te recomiendo leer la Documentación Oficial, en donde encontrarás todo lo necesario sobre WordPress Multisitios.

Los pasos son bastante sencillos, y son los siguientes:

  1. Ingresar en tu Control Panel: www.tudominio.com/cpanel
  2. Buscar la sección de Dominios
  3. Ingresar al área de subdominios
  4. Seleccionar el dominio donde se encuentra tu instalación de WordPress
  5. Crear un nuevo subdominio únicamente con (*) asterisco
  6. Guardar o Crear el subdominio

Eso es todo lo que necesitas para poder tener soporte para Wildcard DNS’s.

Hasta aquí todo parece muy sencillo, sin embargo ahora viene la parte poco complicada.

El Mapeo de Domino como tal:

WordPress MU Domain Mapping es el plugin que se utiliza para poder llevar a cabo toda la configuración necesaria para el Mapeo, por lo que necesitamos descargarlo e instalarlo, una vez instalado, debes activarlo para la red, todo esto como el Super Administrador desde la Red de tu WordPress Multisitios.

La configuración de WordPress Mu Domain Mapping es muy sencilla, y hemos encontrado una Guía Completa, (aunque está en inglés), esta guía es muy fácil de entender, y trabaja siempre con Control Panel.

Si te animas a intentar crear una red bastante completa con WordPress Multisitios, seguro te sorprenderás de lo bondadosa que puede ser esta instalación, y todo lo que puedes lograr con ella.

No dudes en preguntar si tienes alguna duda, estamos para resolver las que tengas.

Crear Múltiples Sitios en WordPress

Si estás pensando en crear una red de sitios en WordPress, seguramente antes de leer este mini tutorial, te interesará leer la Guía Completa de WordPress Multisitios y Cómo Activar WordPress Multisitios?, luego de eso, podrás continuar con este mini tutorial.

Bien, una vez te hayas leído los artículos antes mencionados, y hayas seguido los pasos de la Activación de WordPress Multisitios, ya estarás preparado para empezar a crear múltiples sitios en WordPress, y esto es muy sencillo.

Lo primero que debes hacer, es ingresar a la instalación de WordPress, y cuando ya hayas activado WordPress para soportar múltiples sitios, te aparecerá una nueva opción en el Menú de Bienvenida, la cuál será Administrador de la Red.

Una vez lo tengas localizado, debes acceder a esta opción, y verás que el panel de administración cambia ligeramente.

Cuando te encuentres en el escritorio de Administrador de la Red, tendrás la opción de crear un Nuevo Sitio en el Widget “AHORA MISMO”. Debes de hacer click en: Crear Nuevo Sitio.

Una vez hayas ingresado, WordPress te pedirá unos datos simples sobre la creación de tu nuevo sitio, estos datos son:

  1. Dirección del sitio
  2. Título del Sitio
  3. Correo del Administrador

Y por último, Añadir sitio.

Una vez completados todos los pasos, puedes ver todos tus sitios, en panel Sitios.

Cuando observas todos los sitios, te aparecen los siguientes datos:

  1. Editar (si deseas editar alguna configuración del sitio)
  2. Escritorio (para acceder al escritorio del sitio que deseas)
  3. Visitar (ir al sitio web)

Y eso es todo, ahora disfruta de crear Multisitios en WordPress, y ten una red completa como la de WordPress.Com.

Cómo Activar WordPress Multisitios?

Como comentábamos en el artículos Guía Completa de WordPress Multisitios, WordPress MU y WordPress ahora son uno solo, activar la opción de multisitios es completamente a criterio de cada usuario de WordPress ya que no viene activada de manera predeterminada, hay que activarla de una manera muy sencilla.

Cómo activarlo?

Cabe aclarar que la función nativa para WordPress Multisitios, únicamente está disponible a partir de las versiones 3+ de WordPress, por lo que si tienes una versión anterior, realmente deberías considerar actualizarlo, para poder llevar a cabo tu cometido tras ativar esta función.

Es tan sencillo que no te tomará más de 5 minutos poder activarlo (en realidad 3). Los pasos que debes seguir son los siguientes:

  1. Abre tu archivo wp-config.php
  2. Busca el comentario /* That´s all, stop editing! Happy Blogging. */ (al final del archivo).
  3. Bajo la línea anterior escribe: define(‘WP_ALLOW_MULTISITE’, true);
  4. Sal del administrador y vuelve a ingresar.
Con los pasos anteriores ya tendrás tu instalación de WordPress Multisitios lista para ser configurada, para ello debes efectuar los siguientes pasos:
  1. Busca el Panel de Herramientas
  2. Ingresar en Configuración de la Red
  3. Sigue los pasos que se te indica (deberás copiar algunos datos en tu archivo wp-config.php y .htaccess).
  4. Te recomiendo instalar la opción de Subdominios en lugar de Subcarpetas, ya que luego veremos el Mapeo de Dominios.
  5. Si la opción de Subdominios te marca un error tras activarla, seguro querrás leer primero el Mapeo de Dominios para el soporte de Wildcard DNS’s.
  6. Nuevamente sal del administrador y vuelve a ingresar.
Tus archivos deberían lucir parecidos a los siguientes:
wp-config.php
define ('WP_ALLOW_MULTISITE', true);
define( 'MULTISITE', true );
define( 'SUBDOMAIN_INSTALL', true );
$base = '/';
define( 'DOMAIN_CURRENT_SITE', 'wpguate.com' );
define( 'PATH_CURRENT_SITE', '/' );
define( 'SITE_ID_CURRENT_SITE', 1 );
define( 'BLOG_ID_CURRENT_SITE', 1 );
.htaccess
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]

# uploaded files
RewriteRule ^files/(.+) wp-includes/ms-files.php?file=$1 [L]

RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule . index.php [L]
Y bien, eso es todo, ahora tu instalación de WordPress ya está lista para poder utilizarse como una Red de Sitios.

Guía Completa de WordPress Multisitios

Conversando recientemente con El Team, consideramos necesario crear una Guía Completa de WordPress Multisitios en Español, ya que únicamente se encuentran en inglés la mayoría, y a decir verdad, la opción de Multisitios es una de las características más complejas de WordPress, pero es de la que más oportunidades se pueden obtener hoy en día.

Cuando me refiero a oportunidad, se te pueden ocurrir muchas ideas, y todas son válidas, pero me refiero a una oportunidad tangible, y es la oportunidad de negocios que nos provee WordPress Multisitios, por qué de negocios?, bien, te pongo un caso práctico (mi caso).

Muchas personas nos encontramos hoy en día proveyendo servicios y soluciones en base a WordPress para pequeñas, medianas, y grandes empresas, o grandes proyectos..!!

Sin embargo, qué sucede cuando tienes una cantidad de clientes considerables, con sus sitios web en WordPress? el trabajo se puede tornar un poco aburrido al momento de actualizar los sitios, los plugins, y muchas otras cosas.

Qué te parecería la idea de tener todos tus clientes en una misma base de datos, con usuarios independientes, themes independientes, y características completamente autoadministrables únicamente por quienes tengan permisos suficientes? Genial, no?.

La característica de WordPress Multisitios no es nada nuevo, ya tiene algunos años rondando la web, proyecto que era independiente de la instalación natural de WordPress, y se llamaba WordPress Mu, hasta que en la versión 3.0 de WordPress se lanzó de manera nativa tras una pequeña activación.

Pues bien, considerando que es una opción de la que vale la pena sacar todo el provecho posible, hemos desarrollo una serie de mini tutoriales, que al terminarlos, conformarán la Guía Completa de WordPress Multisitios, y son los siguientes:

  1. Activación de WordPress Multisitios
  2. Creación de Múltiples Sitios
  3. Mapeo de Dominios
  4. Agregar usuarios a un sitio en particular
  5. Seguridad en WordPress Multisitios
  6. Activar themes para un único sitio
  7. Copias de Seguridad en WordPress
Se te ocurre algún otro tema que creas vale la pena agregar en WordPress Multisitios?, Si es así dilo y con gusto lo introduciremos en esta Guía Completa de WordPress Multisitios.