Cómo crear una barra de anuncios fija en el pie de WordPress manualmente

Muchos sitios web muestra una barra con información en el pie de página de WordPress para mostrar anuncios, promociones, ofertas, alertas o simplemente, que se ha publicado un artículo de gran importancia. En este artículo te mostraremos cómo crear una barra de anuncios fija en el pie de página mediante código, es decir, manualmente.

barra de anuncios

El HTML

Lo primero que tenemos que hacer es implementar el HTML de nuestra barra de anuncios fija. Para ello, pega el siguiente código al final de tu documento HTML, es decir, antes de que se cierre el tag </body>.

Si tienes dudas sobre dónde colocar este código, por regla general, el cierre del body suele ubicarse en el archivo footer.php del tema que estés utilizando actualmente.

<div id="barra">
 En nuestra tienda online puedes disfrutar de un <a href="/menaje"><strong>5% de descuento en todos los artículos de menaje.</strong></a> Promoción válida hasta el día 31/08/2017. 
</div>

El CSS

Una vez implementado el código HTML, abre el principal fichero .css de tu tema y pega el siguiente código. No olvides cambiar el valor de las propiedades background y color para que se ajusten al diseño de tu tema.

#barra{
 background: #f54d17;
 color: #fff;
 display: block;
 position: fixed;
 bottom: 0;
 width: 100%;
 padding: 10px 0px;
 text-align: center;
}

#barra a{ 
 color: #fff; 
 text-decoration:underline; 
 font-weight: normal; 
}

Como ves no es nada complicado. Simplemente lo que hago es definir que el elemento #barra tenga un ancho del 100% (width:100%) y utilizamos las propiedades position:fixed y bottom:0 para que nuestra barra de anuncios se mantenga fija y se coloque al final de la página, respectivamente.

Si en lugar de en el pie, quieres situarla en la parte superior de la página, sustituye la propiedad bottom:0 por top:0.

Una vez que hemos añadido los estilos básicos a nuestra barra de anuncios, aún tenemos que realizar ciertos “apaños” para que asegurarnos que nuestra barra se va a ver bien. Lo primero que tenemos que tener en cuenta son los dispositivos móviles. Obviamente, no queremos que la barra se muestre en dispositivos pequeños como smartphones y demás, ya que ocuparía un espacio necesario y no se leería muy bien.

En tu archivo CSS, simplemente añade lo siguiente. Si tu web ya utiliza media queries, solo debes añadir el #barra{display:none;} en la parte de las media queries de tu archivo CSS. Si no, pega esto en tu hoja de estilo.

@media only screen and (max-width: 767px) {
 #barra{ 
 display: none;
 }
}

Una última cosa, como hemos ubicado la barra en el pie de página, se pondrá encima de tu actual footer, escondiendo alguna de sus partes. Para solucionar esto, debes buscar el elemento footer en tu hoja de estilos y añadirle un padding, tal que así:

#footer{
 padding-bottom: 25px;
}

¿Cómo mostrar mensajes?

Enhorabuena, si has llegado a este punto debo decirte que tu web ya cuenta con una barra de anuncios fija para mostrar mensajes. Pero, ¿qué tenemos que hacer para mostrar mensajes?

A ver, hay que tener en cuenta que esta solución nos ahorra instalar plugins y sobrecargar la instalación, pero carece de ciertas funcionalidades que, estos plugins, suelen traernos por defecto. Desgraciadamente, no podremos modificar el contenido de nuestra barra dinámicamente desde el propio backoffice de WordPress. Para modificar el contenido de nuestra barra, tendremos que modificar manualmente el contenido del HTML que hemos introducido en el primer paso. Lo que tendremos que modificar es lo que está dentro de <div id=”barra”>. Por ejemplo:

<div id="barra">
 <strong>¡No te pierdas ninguno de nuestros posts!</strong> <a href="/newsletter">Suscríbete a nuestro newsletter</a>.
</div>

¿Cómo mostrar el últimos post publicado en la barra de anuncios?

Puedes utilizar la barra de anuncios parsa mostrar el último post publicado. Para ello, reemplaza el código HTML con el siguiente código:

<div id="barra">
<?php
 $args = array( 'numberposts' => '1', 'post_status' => 'publish' );
 $posts = wp_get_recent_posts( $args );
 printf( 'Último artículo: <a href="%1$s">%2$s</a>',
 esc_url( get_permalink( $posts[0]['ID'] ) ),
 apply_filters( 'the_title', $posts[0]['post_title'], $posts[0]['ID'] )
 );
 
?>
</div>

Y hasta aquí nuestro artículo en el que te enseñábamos cómo crear una barra de anuncios fija en el pie de WordPress manualmente. Espero que te haya gustado y, si te ha resultado útil, no dudes en compartirlo en redes sociales. El artículo ha sido extráido del original de CatsWhoCode. ¡Nos leemos!

Las mejores plantillas de WordPress para una peluquería

¿Quieres crear una web para una peluquería y no sabes cómo? Con WordPress es muy sencillo y no te costará mucho dinero, solamente necesitas las plantillas adecuadas. Para ello tendrás que instalarlas en tu WordPress, configurarlas en base a tus necesidades y, por último, disfrutar de ellas. En este artículo te mostramos las mejores plantillas de WordPress para una peluquería o salón de belleza.

Plantillas de WordPress para una peluquería

A continuación te mostramos una recopilación de las mejores plantillas de WordPress para una peluquería, a nuestro juicio.

Beauty

Plantillas para una peluquería
Fuente: themeforest.net

Beauty es un theme responsive para WordPress. ¿Qué significa diseño responsive? Pues que es apto para verse en toda clase de dispositivos, ya sea ordenador, móvil, tablet… Asi que no te preocupes si quieres que tu web se vea en dispositivos móviles, porque se mostrará perfectamente. Todas las plantillas que te mostraremos en este artículo, son responsive.

Este tema cuenta con cinco variaciones para su portada: Hair Salon (enfocada a una peluquería), Barber Shop (enfocada a una barbería), Personal (por si eres freelance), Beauty Wide (enfocada a un salón de belleza) y Shop (por si quieres vender tus productos de peluquería y belleza online). Para este artículo, analizaremos la variación principal, es decir, la Hair Salon.

Medipoint es una plantilla súper completa y cuenta con todo lo necesario para tu web. Entre sus características: galería de imágenes organizada mediante categorías, tabla de precios, sistema de reservas, testimonios de clientes, listado de servicios, tienda online integrada con WooCommerce, blog donde ir publicando noticias sobre la propia peluquería o novedades del sector, listado de empleados de la peluquería (cada uno con enlaces a sus propias redes sociales), formulario de contacto, formulario de suscripción a newsletter, enlaces a redes sociales…

En cuanto al diseño, se trata de un layout muy profesional que utiliza los colores típicos del sector para sembrar confianza en el visitante. Haciendo uso de los colores claros, oscuros y dorados, y mediante bloques full-width, este tema transmite seriedad y pulcritud a partes iguales.

El precio de esta plantilla es de 69 dólares.

Trend Salon

Plantillas para una peluquería
Fuente: themeforest.net

Trend Salon es una plantilla de WordPress que puedes utilizar si lo que quieres es tener tu propia web donde promocionar tu peluquería. El theme cuenta con todo lo necesario para enseñar a tus clientes todo lo que ofrecéis: listado de servicios, listado de ofertas, sistema de reservas, contadores animados donde indicar a tus usuarios el número de clientes que han pasado por tu peluquería y más datos relacionados, listado de empleados de la peluquería (cada uno con enlaces a sus propias redes sociales), tabla de precios, testimonios de clientes, galería de imágenes (con multitud de diseños), blog donde ir publicando noticias sobre la propia peluquería o novedades del sector, formulario de contacto, formulario de suscripción a newsletter, tienda online integrada con WooCommerce, enlaces a redes sociales…

Pero si hay algo que no me gusta de Trend Salon, ya que como has visto, de funcionalidades va bien servido, es su diseño. Lo encuentro tosco e intrusivo. Aunque te da la posibilidad de cambiar los colores principales mediante un configurador de temas, hay algo en él que, sinceramente, me repele un poco. Pero claro, como todo en la vida, es cuestión de gustos. Supongo…

El precio de esta plantilla es de 59 dólares.

Hair Beauty

Plantillas para una peluquería
Fuente: themeforest.net

Y por último tenemos Hair Clinic, una plantilla con un diseño que nada tiene que envidiar a la que primero te hemos enseñado, Beauty. Si te gustan los temas dinámicos, fluidos y que cuidan hasta el más mínimo detalle, estoy seguro que Hair Beauty te encantará.

Entre sus funciones: slider 100% configurable con animaciones, listado de servicios, galería de imágenes organizado por categorías, tabla de precios, listado de patrocinadores o marcas con las que trabajáis, sistema de reservas, tienda online integrada con WooCommerce, formulario de contacto, formulario de suscripción a newsletter, enlaces a redes sociales…

Sobre el diseño, tal y como he dicho antes, es una autentica delicia. El uso de imágenes y de la tipografía es soberbía y, aunque utiliza las animaciones para captar la atención del usuario, no abusa de ellas tal y como hacen muchos otros temas…

El precio de esta plantilla es de 59 dólares.

Y hasta aquí las mejores plantillas de WordPress para una peluquería. Espero que os haya gustado y las sepáis aplicar a vuestros propios proyectos. El icono de la imagen destacada del artículo es obra de Gan Khoon Lay. ¡Nos leemos!

Los 4 mejores plugins para mostrar una tabla de precios en WordPress

Hace poco nos escribió uno de nuestros usuarios a través de Facebook indicándonos que quería insertar una tabla de precios en su sitio web, y preguntándonos cuál era el mejor plugin para ello. Como sabéis, WordPress tiene infinidad de plugins para infinidad de funciones. Es por eso que decidí compilar los mejores plugins para mostrar una tabla de precios en WordPress y, de paso, aparte de contestar a este usuario, compartir esa información con todos vosotros.

¿Qué es una tabla de precios?

Las tablas de precios juegan un rol muy importante en la web de toda empresa que ofrece productos o servicios. Mediante ellas, informamos al usuario de los distintos planes y precios que puede contratar y sus múltiples características.

Lo ideal es que cuenten con un diseño atractivo y que muestren la información de forma clara y concisa para atraer al usuario a que contrate los distintos servicios. Para ello se utilizan muchas estratagemas como por ejemplo, las animaciones, los elementos resaltados, los tooltips y las listas de características bien definidas.

Sin más dilación, a continuación os mostraré los cuatro mejores plugins para crear tablas de precios.

Easy Pricing Tables

tabla de precios

Este práctico plugin es el ideal si lo que quieres es mostrar los precios de tus servicios en un sitio web. Cuenta con varios diseños predefinidos (que van desde el más minimalista, hasta el más ostentoso), una interfaz sencilla y un sesudo personalizador por si deseas probar distintas configuraciones y así ver cual te viene mejor.

Entre sus características:

  • Totalmente responsive y desarrollado para que funcione en cualquier tema.
  • Todos los diseños predefinidos se desarrollaron siguiendo los estándares en términos de maximizar las tasas de conversión.
  • Cuenta con un personalizador la mar de completo.
  • Las tablas se pueden organizar mediante la función drag&drop (arrastrar y soltar)
  • Soporta CSS personalizado.

Pricing Table by Supsystic

tabla de precios

Supsystic es un equipo de desarrollo muy conocido dentro del mundillo de WordPress, que se dejan la piel en crear plugins para el CMS. Han desarrollado plugins para multitud de funciones como chats, botones para compartir en redes sociales, galerías de imágenes… En esta ocasión, decidieron crear un plugin que generase tablas de precios y, como todo lo que hacen, no les ha salido nada mal.

Entre sus características:

  • Constructor de tablas sencillo mediante drag&drop (arrastrar y soltar) que, mediante tooltips, te guiará en todo el proceso de la creación de las tablas.
  • Soporta la inserción de vídeos dentro de las tablas.
  • Soporta CSS personalizado.

Responsive Pricing Table

tabla de precios

Seguro que has oido esa palabra antes: Responsive. ¿Sabes lo que significa? Pues que es apto para verse en toda clase de dispositivos, ya sea ordenador, móvil, tablet… Asi que no te preocupes si quieres que tu tabla de precios se vea bien en dispositivos móviles, porque se mostrará perfectamente.

Responsive Pricing Tables cuenta con un panel de control muy intuitivo que hace que el hecho de crear una tabla de precios sea coser y cantar. Además, si tienes algún problema, puedes consultar su completa documentación o contactar directamente con los desarrolladores.

Entre sus características:

  • El proceso de creación de tablas es simple con los típicos campos que sueles encontrar en casi todas las tablas de precios de Internet (título, descripción, precios, periodo de tiempo, iconos y botones para pagar)
  • Puedes resaltar planes específicos.
  • Puedes insertar estas tablas en cualquier tipo de contenido, ya sean posts o páginas.

WRC Pricing Tables

tabla de precios

Si quieres personalizar todos y cada uno de los aspectos de tu tabla de precios, creo que WRC Pricing Tables es lo que andas buscando. Este plugin te permite incluir un número ilimitado de filas y columnas en tus tablas de precios.

Entre sus características:

  • Gestiona tus tablas utilizando simples shortcodes.
  • Potente personalizador que te ayudará con cada opción de tus tablas.
  • Puedes incluir tooltips para cada característica que incluyas en tus paquetes.
  • Incluye animaciones sencillas, como agrandar las columnas al posarse encima con el ratón, o desactivar las sombras si es un paquete resaltado.

Y hasta aquí nuestro artículo en el que te enseñábamos los 4 mejores plugins para mostrar una tabla de precios en WordPress. Espero que te haya gustado y, si te ha resultado útil, no dudes en compartirlo en redes sociales. El icono de la imagen destacada es obra de Oliviu Stoian. ¡Nos leemos!

 

Cómo mostrar los últimos posts de una categoría concreta en WordPress

¿Quieres mostrar los últimos posts de una categoría concreta en WordPress? El widget de Entradas recientes que viene por defecto en WordPress muestra posts de todas las categorías, y no tiene opción para filtrar por la que categoría que queramos. En este artículo, te mostraré como mostrar de manera sencilla los últimos posts de una categoría concreta en WordPress.

Filtrando posts por categoría

Si solo quieres crear una página para mostrar los posts más recientes de una categoría en particular, WordPress ya cuenta con distintas páginas para cada categoría.

Puedes añadir enlaces en todas las páginas de categorías yendo a Apariencia > Widgets e insertando el widget “Categorías” en el sidebar donde quieras mostrarlo. Además, también puedes añadir categorías en tus menús de navegación.

Por otro lado, si lo que quieres es mostrar los últimos posts de una categoría concreta en el sidebar de tu sitio web, debo decirte que desgraciadamente no hay ningún widget para ello. El widget de Entradas recientes que viene por defecto no te permite filtrar los posts ni por categoría, ni por etiquetas.

Por suerte, hay otra manera. A continuación, te mostraré cómo mostrar los últimos posts de una categoría concreta en WordPress de forma sencilla.

Método 1. Mostrar los últimos posts de una categoría mediante un plugin

Este es el método más sencillo, y el recomendado a los usuarios más novatos.

Lo primero que tienes que hacer es instalar y activar el plugin Recent Posts Widget Extended. Para ello, ve a la sección Plugins del backoffice de tu WordPress y selecciona la opción de Añadir Nuevo. En la página de Añadir Nuevo Plugin, busca el plugin que queremos instalar haciendo uso del campo de búsqueda que se sitúa en la parte superior derecha de la página.

Teclea el nombre del plugin (que como te hemos indicado es “Recent Posts Widget Extended”) y presiona ENTER para iniciar la búsqueda. Si has seguido los pasos al pie de la letra, este plugin te debería aparecer como el primer resultado de la búsqueda. Instálalo y actívalo para poder utilizarlo.

Una vez activado, ve a Apariencia > Widgets y agrega el widget Recent Posts Extended a tu sidebar.

últimos posts

Como habrás visto, este nuevo plugin cuenta con multitud de opciones. Podrás desde mostrar la miniatura del post, la fecha, el extracto, y mucho más. Para nuestro fin, debes seleccionar la categoría (o categorías) por la que quieras que se filtren los posts en la opción “Limit to category”.

No olvides hacer clic en el botón “Guardar” una vez hayas acabado.

Ojo, el plugin Recent Posts Extended no solo te permite mostrar los últimos posts de una categoría concreta en un widget, también te da la posibilidad de los shortcodes para que insertes estos posts en páginas y/o otros posts.

Para ello, edita el post o la página en donde quieras mostrar estos últimos posts y, en el editor de contenido, agrega el siguiente shortcode:

[rpwe limit=”10″ excerpt=”true” cat=”15″]

Este shortcode mostrará los últimos 10 posts de la categoría con ID 15, y además, incluirá el extracto de cada uno de ellos. No olvides reemplazar el ID de la categoría por el de la que quieras mostrar estos últimos posts.

Método 2. Mostrar los últimos posts de una categoría mediante código

Para este método es necesario añadir código en los ficheros del tema de WordPress que estés utilizando actualmente. Si no has hecho esto nunca antes, te aconsejo que eches un vistazo a nuestro artículo. ¿Cómo editar ficheros de WordPress mediante un cliente FTP?

Tendrás que añadir el siguiente código en el fichero de tu tema de WordPress donde quieras mostrar los últimos posts de una categoría concreta.

<?php $catquery = new WP_Query( 'cat=15&posts_per_page=10' ); ?>
<ul>

<?php while($catquery->have_posts()) : $catquery->the_post(); ?>

<li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li>
<?php endwhile;
 wp_reset_postdata();
?>

En la primera línea del código creamos una nueva query en la que indicamos la categoría de la que queremos extraer los últimos posts. Reemplaza el ID 15 que hemos puesto en el código, por el ID de la categoría de la que quieras mostrar los posts más recientes. Lo único que hará este código será mostrar el título de esos posts en una lista.

Puedes modificar esto para que se muestre el contenido completo añadiendo este código:

<?php $catquery = new WP_Query( 'cat=15&posts_per_page=10' ); ?>
<ul>
<?php while($catquery->have_posts()) : $catquery->the_post(); ?>
<li><h3><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
<ul><li><?php the_content(); ?></li>
</ul>
</li>
<?php endwhile; ?> 
</ul>
<?php wp_reset_postdata(); ?>

Puedes modificar the_content por the_excerpt para mostrar el extracto, en lugar del cuerpo entero del post.

Y hasta aquí nuestro artículo sobre cómo mostrar los últimos posts de una categoría concreta en WordPress. Espero que te haya gustado y, si te ha resultado útil, no dudes en compartirlo en redes sociales. El artículo está basado en el original de WPBeginner y el icono de la imagen destacada es obra de AfterGrind. ¡Nos leemos!

 

Cómo instalar un HTTPS en tu WordPress

HTTPS (HTTP + SSL) es un protocolo de aplicación que garantiza una conexión segura entre el cliente y el servidor. Desde hace cosa de poco, este protocolo se ha vuelto la mar de importante puesto que Google marca las webs sin SSL como No seguras. En este artículo te mostrarmos cómo agregar soporte HTTPS a tu sitio web desarrollado con WordPress, con el fin de que los visitantes se sientan mucho más seguros.

Hazte con un certificado SSL

Lo primero que tienes que hacer es ponerte en contacto con tu proveedor de hosting y solicitarles instalar un certificado SSL en tu sitio web. Muchos alojamientos te pedirán pagar una tasa anual que va desde los 20€ hasta los 150€ al año, dependiendo del certificado.

Actualiza la URL de WordPress

Una vez has contratado el certificado SSL en tu cuenta, a partir de ahora, para acceder a tu web lo tendrás que hacer mediante la URL https://tuweb.com. Si puedes acceder a tu sitio web a través de esta dirección, ha llegado la hora de configurar WordPress para el protocolo HTTPS.

El primer paso es super sencillo. Solo tienes que entrar al backoffice de WordPress e ir a la sección Ajustes > Generales.

HTTPS

Simplemente debes modificar el campo Dirección de WordPress (URL) y el campo Dirección del sitio (URL) a HTTPS, como puedes ver en la imagen de más arriba. Guarda los cambios y comprueba la parte pública de tu web para ver si todo se ve correctamente.

Fuerza la administración a SSL

Utiliza un cliente FTP para editar el archivo wp-config.php, que se ubica en el directorio raíz de tu instalación de WordPress. Ahora, añade lo siguiente:

define('FORCE_SSL_ADMIN', true);

Esta constante fuerza la administración a que soporte el SSL que hemos contratado en pasos anteriores. Así, agregaremos una capa adicional de seguridad en el admin de WordPress.

Redirecciona el HTTP a HTTPS

En este punto, el HTTPS ya debe estar funcionando en tu sitio web. Pero aún quedan cositas por hacer. La primera es redirigir el tráfico de HTTP a HTTPS.

Durante años, muchos webs han enlazado contenido de tu sitio web con el protocolo HTTP, por lo que un montón de gente seguirá accediendo a tu sitio web mediante la versión http://.

Así que, lo que tienes que hacer es redirigir todo ese tráfico a tu sitio web HTTPS. Podemos realizar esta redirección editando el fichero .htaccess de la web, que se ubica en el directorio raíz de tu instalación de WordPress. Abre el fichero y añade lo siguiente dentro del tag <ifModule mod_rewrite.c>.

RewriteCond %{HTTPS} !=on
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

Ojo, las redirecciones del .htaccess pueden ser un poco puñeteras, ya que a veces funcionarán perfectamente en un host y en otros no.

Si el código de arriba no funciona correctamente, simplemente elimina las líneas que acabamos de agregar al .htaccess y ponte en contacto con tu proveedor de hosting. Seguro que te ayudan en todo lo posible, y te proporcionan las sentencias correctas que funcionan en sus servidores.

Convierte todos tus links a HTTPS

Ok, ya tenemos el HTTPS configurado correctamente, y el tráfico HTTP se redirige automáticamente a tu sitio web HTTPS. Pero aún queda algo por hacer: sustituir todos los enlaces HTTP de tu web por su equivalente HTTPS. Realizaremos esto en dos pasos bien diferenciados:

Enlaces en los ficheros del tema

Comencemos por tu tema. Si utilizas un tema del repositorio oficial de WordPress, o de cualquier marketplace disponible, y no has realizado ningún cambio en sus ficheros, salta al siguiente paso. Sin embargo, si utilizas un tema personalizado o un tema que has modificado, es posible que tengas algunos enlaces en el código que apunten a HTTP.

Echa un vistazo a los ficheros de tu tema (especialmente al header.php y al footer.php) y sustituye cada enlace de HTTP, a HTTPS.

Enlaces dentro de la base de datos

A la hora de redactar contenido en WordPress, es posible que alguna vez hayas insertado un enlace interno con HTTP. Para actualizar estos enlaces, puedes ir editando uno a uno cada post y página, pero créeme cuando te digo que es una tarea muy tediosa.

Para evitar esto, existe una solución sencillo y rápida que actualizará todos los enlaces de nuestro contenido de un plumazo: utilizar una consulta SQL.

Existen varias maneras de ejecutar consultas SQL en tu sitio web. Si tienes un WordPress, tienes un alojamiento, y si tienes un alojamiento, tienes un panel de control que lo administra. Pues bien, dicho panel de control, por regla general, suele contar con la aplicación PHPMyAdmin, un gestor de base de datos que nos permitirá ejecutar queries en nuestro contenido.

Antes de ejecutar la consulta, asegúrate de realizar una copia de seguridad de la BD, por si algo sale mal. Ya con nuestra copia hecha, ejecuta estas dos queries.

UPDATE wp_posts SET post_content = replace(post_content, 'http://tuweb.com', 'https://tuweb.com' ) ;
UPDATE wp_posts SET post_content = replace(post_content, 'http://www.tuweb.com', 'https://www.tuweb.com' ) ;

No olvides reemplazar el tuweb.com de la consulta, por el dominio de tu web.

Y hasta aquí nuestro artículo sobre cómo instalar un HTTPS en tu WordPress de forma sencilla. Espero que te haya gustado y, si te ha resultado útil, no dudes en compartirlo en redes sociales. El artículo ha sido extraído de CatsWhoCode y el icono de la imagen destacada es obra de Monjin Friends. ¡Nos leemos!

 

 

 

Cómo añadir un vídeo de YouTube como fondo de tu WordPress

Son muchos los sitios web que utilizan vídeos como fondo de sus páginas para que luzcan mucho más interesantes. Si se hace con cuidado, un fondo en movimiento llamará instantáneamente la atención de tus visitantes. En este artículo, te mostraremos cómo agregar un vídeo de YouTube como fondo de tus páginas de WordPress.

Lo primero que tienes que hacer es instalar y activar el plugin mb.YTPlayer for background videos. Para ello, ve a la sección Plugins del backoffice de tu WordPress y selecciona la opción de Añadir Nuevo. En la página de Añadir Nuevo Plugin, busca el plugin que queremos instalar haciendo uso del campo de búsqueda que se sitúa en la parte superior derecha de la página.

Teclea el nombre del plugin (que como te hemos indicado es “mb.YTPlayer for background videos”) y presiona ENTER para iniciar la búsqueda. Si has seguido los pasos al pie de la letra, este plugin te debería aparecer como el primer resultado de la búsqueda. Instálalo y actívalo para poder utilizarlo.

Una vez activado, ve a la nueva sección llamada “mb.ideas > YT Player” que aparecerá en el menú lateral izquierdo dentro del admin de WordPress.

Comienza introduciendo la URL del vídeo de YouTube que quieras añadir como fondo. Las opciones por defecto funcionan perfectamente en la mayoría de sitios web, pero siempre puedes ajustarlas según tus necesidades.

vídeo de YouTube

Puedes añadir controles al vídeo, modificar el aspect ratio, definir la calidad del vídeo, el tiempo en el que empieza y acaba, etc. Y no solo eso, también puedes mutear el vídeo, esconder o mostrar los controles y que se reproduzca en bucle.

Como he dicho antes, revisa todas las opciones para ver si siguen al pie de la letra tus necesidades. Si estás satisfecho con la configuración, haz clic en el botón Guardar cambios.

Ahora puedes visitar la parte pública de tu sitio web, para ver el vídeo de YouTube como fondo de tu web.

Si acaso no puedes ver el vídeo, seguramente se deba a que tu tema de WordPress cuenta con un contenedor que tiene una imagen de fondo o un color sólido. Para solucionarlo, debes eliminar el fondo de ese contenedor. Puedes hacerlo editando la hoja de estilo de tu tema.

Vídeo de YouTube como fondo en un post o página concreta

Si quieres, puedes definir un vídeo de YouTube como fondo de un post o página concreta de tu WordPress. Todo lo que necesitas es editar un post o página y hacer clic en el botón YTPlayer del editor de contenido de WordPress.

vídeo de YouTube

Cuando hagas clic en botón, abrirás el generador de shortcodes del YTPlayer. Te sonarán sus opciones puesto que son casi las mismas que las de página de configuración del plugin. Debes introducir la URL del vídeo de YouTube y configurar sus opciones según tus necesidades. Una vez satisfecho, haz clic en el botón “Insert Shortcode”.

El plugin añadirá el shortcode en tu post o página. Para verlo en acción, simplemente tienes que visitar esa página o post en la parte pública de tu web.

Y hasta aquí nuestro artículo sobre cómo añadir un vídeo de YouTube como fondo de tu WordPress. Espero que te haya gustado y, si te ha resultado útil, no dudes en compartirlo en redes sociales. El artículo ha sido extraído de WPBeginner. ¡Nos leemos!