Los mejores tips de desarrollo web para optimizar WordPress

Muchas webs se basan sobre WordPress para funcionar. Un error que cometen estos proyectos es utilizar la plantilla que viene por defecto; lo primero que debería de hacer el propietario del proyecto es personalizarla al máximo, desplegando aquellas funciones que realmente va a necesitar.

Cómo expertos en el desarrollo web Barcelona, hemos preparado una lista de consejos avanzados sobre WordPress que te van a resultar muy interesantes.

¿Cómo personalizar tu plantilla de WordPress?

No hace falta tener nociones avanzadas sobre , en cualquier caso podemos crear diseños originales con tan sólo copiar y pegar algunos trozos de códigos. Ahora bien, cuanto más sepas, más podrás personalizar.

Personalización de botones

Si el tema que has elegido no te da la opción de poner botones, o no conoces ningún fiable que te pueda ayudar con ello, tan sólo tienes que copiar este trozo de código:

<!-Botón standard-> <button type="button" class="btn btn-default">Default</button> <!-Botones avanzados-> <button type="button" class="btn btn-primary">Primary</button> <!-Botones de acción -> <button type="button" class="btn btn-success">Success</button> <!-Botones de mensajes de alerta -> <button type="button" class="btn btn-info">Info</button> <!-Botón de Error o Warning -> <button type="button" class="btn btn-warning">Warning</button> <!-Botón que indica una acción negativa. -> <button type="button" class="btn btn-danger">Danger</button> <!-Botón que valida y deriva a un link -> <button type="button" class="btn btn-link">Link</button>

Sólo tienes que copiar el botón que buscas y personalizar los detalles del código para lograr la opción deseada.

Función Carrusel

El carrusel es un recurso muy estético para utilizar en WordPress. Consiste en mostrar una sucesión de imágenes que se deslizarán de forma automático.

Lo más común es encontrar temas en WordPress que nos permitan utilizar un par de , y que no podamos agregar un tercero (algo que, cómo seguro que ya sabemos, es muy práctico), a no ser que no pasemos a la versión .

Hay muchos códigos para poner el Carrusel, pero este sin duda es el más sencillo:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!- Indicators -> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0″ class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1″></li> <li data-target="#carousel-example-generic" data-slide-to="2″></li> </ol> <!- Wrapper for slides -> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> ... </div> <!- Controls -> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>

Agregando componentes

Desde nuestra empresa de Seo Barcelona recomendamos trabajar con componentes; estamos hablando de unos pequeños iconos que le dan personalidad al diseño: es decir, lo hace diferente. Aunque encontremos otra web que tenga nuestra misma plantilla, estos elementos ayudarán a marcar la diferencia.

Se pueden agregar a un cuadro de opciones, ponerse al lado del texto de los diferentes botones...

El código que podemos utilizar para implantarlos es este:

<button type="button" class="btn btn-default" aria-label="Left Align"> <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span> </button> <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star </button>

Imágenes en miniatura

Un diseño que sea demasiado plano, con todo texto, no sólo no será interesante de cara a Google, si no que el usuario lo considerará aburrido, por lo que lo más probable es que se decante por un proyecto de la competencia.

Un buen recurso que te ofrecemos desde nuestra empresa de Desarrollo web Barcelona es la utilización de Thumbnails . No son más que pequeñas miniaturas que nos ayudarán a construir espacios. Podemos utilizar miniaturas para nuestras últimas entradas, para ofrecer nuestros servicios, o para lo que se nos ocurra.

Existen muchos plugins para trabajar con thumbnails ; antes que empezar a copiar trozos de código, vale la pena instalar un buen plugin.

Plugins para dar más presencia a WordPress

Y terminamos describiéndote algunos de los plugins que pueden cambiar el estilo de tu WordPress por completo:

• Cards: Permite conseguir que tu proyecto web funcione a través de un sistema de tarjetas o cartas, recurso utilizado para destacar lo más importante de la página.
• Masonry layout: Permite trabajar en modo cuadrícula, gestionando a la perfección la información del blog.
• TwotoneFX: Este plugin te permite trabajar con un color de origen y un color de destino final, aplicarlo a una imagen y conseguir que esta aparezca con las dos tonalidades.
• Parallax: Mejora el rendimiento global de la web; se adaptará mucho mejor a los dispositivos móviles, conseguirá un movimiento más fluido en vertical, además de simplificar la navegación a nivel global.
• Animate it: Y finalmente podemos utilizar este plugin para permitir movimiento en una entrada, página o widget. Puede integrar una larga serie de efectos... pero habrá que llevar mucho cuidado con lo que se hace, ya que usar este plugin de forma intensiva puede ralentizar nuestra web.

Con estos consejos de desarrollo web Barcelona conseguirás la máxima difusión de tu proyecto WordPress.