En este vídeo-tutorial vemos cómo implementar el script de Hotjar en WordPress paso a paso, muy rápido y sin usar plugins.

Hotjar es una herramienta muy popular para obtener una información más avanzada sobre el comportamiento de los usuarios en nuestra web como mapas de calor, movimientos del cursor, etc. Veamos cómo implementarlo en WordPress, que es extremandamente sencillo.

Instalar Hotjar en WordPress es tan sencillo como insertar el siguiente código en el functions.php de tu theme activo:

add_action('wp_head', 'bps_hotjar_script', 99);
function bps_hotjar_script () { ?>
<!-- Codigo de Hotjar aqui -->
<?php }

Donde pone “<!– Codigo de Hotjar aqui –>” debes insertar el código de seguimiento que te ofrece Hotjar cuando te creas una cuenta nueva.

Si ya tienes una cuenta creada para obtener el código pueder irte a Sites & Organizations y darle al botón Tracking Code

Una vez insertado el código te debería quedar algo así:

Listo, ya puedes empezar a espiar a tus usuarios ????

En este vídeo-tutorial te voy a enseñar cómo instalar y usar en WordPress cualquier fuente en WordPress que tengas descargada en formato que sea desde el lugar que sea y sin usar plugins.

En un post anterior ya vimos cómo añadir Google Fonts en WordPress. Pero no todas las fuentes que hay en Internet las tiene Google y a veces tenemos que cargar una fuente que hemos comprado o conseguido en cualquier otro lugar.

Partimos del punto en el que cuentas con un o varios archivos de fuentes, ya sea del formato TTF, OTF, WOFF o WOFF2.

Si tienes varios archivos de fuente quiere decir que cuentas con más de una variación de esta fuente. Una variación puede ser fuente regular, italic, bold… Por ejemplo la fuente Montserrat de Google Fonts tiene 18 variaciones:

En este punto te recomiendo cargar solo aquellas variaciones que realmente vas a usar en la web, para no sobrecargarla.

Una vez que tengas tus archivos de fuentes a mano, empezamos con el proceso de cargarlas en WordPress. En mi ejemplo voy a cargar la fuente Medicall y cuento con una sola variación:

Crear archivo font-face de la fuente

El archivo fontface es el que se encarga de recopilar aquella información sobre la fuente que luego nos permite usarla en la web. Esa información es el nombre de la fuente, sus variaciones, sus diferentes formatos…

No lo vamos a crear a mano. Tenemos la herramienta Transfonter que nos hace todo el trabajo.

Seguimos estos pasos:

1. Subimos el archivo (o los archivos) de fuente
2. Marcamos los formatos* que queremos soportar
3. Hacemos click en Convert

* El soporte de diferentes formatos de fuentes depende del navegador. El formato más avanzado es WOFF2 pero no todos los navegadores lo soportan así que te recomiendo cargar los 4 formatos y el navegador ya usará el formato que más le conviene.

El resto de opciones las podemos dejar por defecto así que la configuración que te recomiendo es esta:

Una vez que hagas click en Convert podrás descargar el archivo de font-face con los diferentes formatos de tu fuente:

En mi caso recibo esto:

Una vez que lo tenemos, vamos a por el siguiente paso.

Subimos la fuente a WordPress

Ahora se trata de subir estos archivos descargados a nuestro WordPress.

Seguimos estos pasos:

1. Accedemos por FTP a la raíz de nuestra web
2. Vamos a la carpeta de nuestro tema activo en wp-content/themes/tema-activo
3. Si no existe una carpeta llamada fonts, la creamos

   

4. Dentro, creamos otra carpeta con el nombre de la fuente que tenemos descargada. En mi caso pongo medicall
5. Subimos todos los archivos generados dentro de esa carpeta

   

Hacemos esto para tener nuestros archivos ordenados, cosa que te facilita la vida si luego quieres añadir más fuentes.

Con esto ya tienes los archivos de fuente subidos a WordPress. Ahora toca cargar esa fuente.

Cargar la fuente

Esto lo podemos hacer desde el archivo functions.php en el carpeta de tu theme. Tendrás que insertar el siguiente código al final del todo:

add_action('wp_enqueue_scripts', function () {
wp_enqueue_style('medicall-font-css', get_stylesheet_directory_uri() . '/fonts/medicall/stylesheet.css');
});

En mi caso cargo la fuente medicall así que le pongo el nombre medicall-font-css y la ruta a esa fuente es /fonts/medicall/stylesheet.css. En tu caso tendrás que corregir la ruta indicando el nombre de carpeta que le has puesto a tu fuente.

Con esto la fuente ya está cargando en nuestro WordPress. Solo queda aplicarla en algún elemento de la web 🙂

Aplicar la fuente

Esto lo hacemos por CSS. Simplemente tenemos que aplicar el font-family: a Aquellos textos donde queremos usar esta fuente. Pero ¿qué ponemos en el font-family?

Para saberlo puedes abrir el archivo stylesheet.css que te ha generado el Transfonter y ver la línea de font-family:

Sabiendo esto, puedes acceder a tu forma preferida de añadir CSS en WordPress y usar por ejemplo la siguiente línea de CSS:

h1 {
font-family: 'medicall'
}

De esta forma aplicamos la nueva fuente subida a todos los H1 de nuestra web.

¡Listo! Ya tienes tu fuente subida a WordPress y funcionando perfectamente 🙂

¡Buenos días! En este vídeo-tutorial vamos a ver cómo implementar y usar el efecto Lightbox en WordPress sin utilizar plugins. ¡Vamos allá!

Como ya sabréis la mayoría, Lightbox es ese efecto que se produce al hacer click sobre una imagen, que la amplía y oscurece el fondo, para que podamos apreciar mejor esa imagen. También se le llama efecto “mesa de luz”.

En desarrollo web este efecto se implementa mediante una librería de JavaScript, normalmente. Existen varias librerías que hacen este efecto (como el efecto Fluidbox que hemos visto hace bastantes vídeos). La que vamos a utilizar en este caso es la librería Lightbox desarrollada por Lokesh Dhakar ya que cuenta con algunas opciones que Fluidbox no traía por defecto.

Sin más preámbulos, veamos los pasos que hemos seguido en el vídeo.

Preparamos la galería de WordPress

En este paso simplemente creamos nuestro entorno de pruebas, en este caso una galería nativa de WordPress que viene con Gutenberg.

Muy importante: a la hora de crear la galería, en la opción Enlazado a, tenemos que elegir Archivo de medios, para que el efecto Lightbox funcione correctamente.

Si ya tenéis una galería creada, con Gutenberg o de cualquier otra forma, podéis saltaros este paso.

Cargamos el JavaScript de Lightbox

Para hacerlo nos vamos a la raíz de nuestro WordPress por FTP y abrimos el archivo functions.php que se encuentra en la carpeta del tema (en wp-content/themes/nombre-del-tema). Una vez ahí, nos vamos al final del todo y pegamos el siguiente código:

//Librería Lighbox

function bps_scripts_lightbox () {
    wp_enqueue_script('lightbox-js', '//cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/js/lightbox.min.js', array('jquery'));
    wp_enqueue_style('lightbox-css', '//cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.min.css');
    wp_enqueue_script('lightbox-init', get_stylesheet_directory_uri() . '/js/lightbox-init.js', array('jquery'));
}

add_action('wp_enqueue_scripts', 'bps_scripts_lightbox');

Lo que hacemos aquí es cargar tres archivos nuevos en nuestro WordPress:

• El archivo de JavaScript base de Lighbox
• El archivo de CSS base de Lightbox
• Un archivo lightbox-init.js, donde vamos a aplicar el efecto a nuestra galería

Para que nos entendamos, con los dos primeros archivos simplemente hemos preparado una base para que el efecto funcione. Ahora lo que tenemos que hacer es decirle a qué elementos (en este caso fotos) de nuestro WordPress se va a aplicar esta mesa de luz.

El tercer archivo de momento no existe así que lo siguiente que haremos es:

• Volvemos a la carpeta del tema
• Accedemos a la carpeta /js/ (si no existe, la creamos, para tener el código ordenado y no perderse)
• Creamos el archivo lightbox-init.js, con este mismo nombre.

Con esto ya tenemos todo lo necesario para que el efecto funcione, y sólo nos queda un único paso.

Aplicamos el efecto Lighbox a nuestra galería de WordPress

Lo que tenemos que hacer ahora es decirle a Lighbox qué elementos de nuestra web queremos que se pongan en una mesa de luz cuando hagamos click encima.

Para hacerlo nos dirigimos al archivo lightbox-init.js recién creado e insertamos el siguiente código:

jQuery(document).ready(function () {
	jQuery(".wp-block-gallery figure a").each(function() { jQuery(this).attr('data-lightbox', 'lightbox')});
})

Lo que hará este código es añadir un atributo especial a nuestras fotos para que Lightbox las reconozca y les aplique su efecto.

Si no estás utilizando la galería nativa de Gutenberg este código no te funcionará ya que deberás cambiar la parte de .wp-block-gallery figure a por el selector que apunte al enlace de las fotos (esto es un poco complicado de explicar en texto así que si te pierdes, vuelve al vídeo del principio para ver a qué me refiero).

¡Y ya estamos! Si has seguido bien todos los pasos, ahora al volver a la galería y recargar, si haces click sobre una imagen la verás ampliada y centrada en tu pantalla.

Opciones de Lighbox

Algo que no menciono en el vídeo es que la librería Lighbox trae por defecto algunas opciones para que podamos personalizar el efecto a nuestro gusto.

Las puedes encontrar en opciones de Lightbox y se implementan de la siguiente manera:

jQuery(document).ready(function () {
	jQuery(".wp-block-gallery figure a").each(function() { jQuery(this).attr('data-lightbox', 'lightbox')});

	lightbox.option({
	      'resizeDuration': 500,
	      'imageFadeDuration': 500,
	      'wrapAround': true
	    })

})

Como puedes ver, simplemente añadimos una pequeña función debajo del código que ya teníamos, y ahí personalizamos estas opciones según las instrucciones que nos ofrece Lokesh.

¡Buenos días! En este vídeo vamos a ver cómo personalizar el logo de la página de login de WordPress, o wp-admin, sin utilizar plugins. ¡Vamos allá!

Veamos los pasos que hemos seguido en el vídeo y aprovecho para compartiros el código que he utilizado

Paso 1: cambiamos el logo de WordPress

Para cambiar el logo insertamos el siguiente código en el archivo functions.php en el directorio de nuestro tema o en el plugin de Snippets.

Si trabajáis con el functions.php aseguraos de hacerlo en un child theme ya que si insertáis el código en theme normal y luego actualizáis el theme, los cambios se perderán.

El código para personalizar el logo es el siguiente, donde sólo le faltaría insertar la URL del logo entre los paréntesis de url().

//Cambiamos el logo
add_action( 'login_enqueue_scripts', 'bs_change_login_logo' );
function bs_change_login_logo() { ?> 

<style type="text/css"> 
  
#login h1 a {
background-image: url();
} 
					  
</style>
					  
<?php }

Paso 2: personalizamos la URL del logo

El siguiente paso sería cambiar la URL del logo ya que por defecto nos lleva a wordpress.org. Para hacerlo simplemente añadimos el siguiente código debajo del anterior:

			  					  
//Cambiamos la URL del logo			  
add_filter( 'login_headerurl', 'bs_login_logo_url' );
function bs_login_logo_url($url) {
    return '#';}

Una vez insertado podemos personalizar el la URL indicándola entre las comillas del return o dejando el símbolo del hashtag para que la URL no lleve a ningún sitio.

Paso 3: cambiamos o quitamos el título del logo

Hacemos mismo que en el paso dos pero en este caso personalizamos el título de la URL del logo (texto que aparece cuando pasamos el ratón por encima del logo) y lo hacemos con este código.

//Cambiamos el título de la URL del logo
add_filter( 'login_headertitle', 'bs_login_logo_url_title' );
function bs_login_logo_url_title() {
    return '';}

Igual que antes, indicamos el texto en el return o lo dejamos en blanco para que no aparezca nada.

Opcional: desactivamos la URL del logo

Si no queremos que el logo nos lleve a ningún sitio y sea simplemente decorativo podemos añadir la siguiente línea al CSS de la primera función para que quede así:

#login h1 a {
background-image: url();
pointer-events:none
}

¡Y ya lo tenemos! Yo soy muy fan de hacer las cosas en WordPress sin utilizar plugins (siempre que sea práctico) así que ya hay varios vídeos en el blog donde enseño a hacerlo. Si te interesa puedes echarle un vistazo al blog y ver cómo puedes prescindir de plugins para hacer que tu WordPress sea más ligero 🙂

¡Buenos días! En este vídeo os voy a enseñar cómo crear iconos de redes sociales en WordPress sin utilizar plugins, con la técnica SVG Sprite. ¡Vamos allá!

Antes de empezar, si quieres aprender a crear botones para compartir entradas en redes sociales en WordPress, échale un vistazo a este otro artículo 🙂

Dicho esto vamos a repasar los pasos que hemos seguido para insertar estos iconos.

Paso 1: definimos los iconos SVG

La web donde extraemos los iconos es la IcoMoon pero también hay otras opciones como por ejemplo Flaticon.

Podemos utilizar tanto el archivo functions.php como el plugin de Snippets, que siempre recomiendo. El código que utilizo en el vídeo es el siguiente:

function bps_sprite_svg () {?>
<svg display="none" xmlns="http://www.w3.org/2000/svg">

//Etiquetas <symbol> aquí

</svg>
<?php }

add_action('wp_head', 'bps_sprite_svg');

Sólo faltaría insertar las etiquetas <symbol> dentro de la etiqueta <svg> en la función, tal como vemos en el vídeo

Paso 2: mostramos los iconos en la página

Ahora nos vamos al editor HTML de la página o entrada donde queremos insertar los iconos y utilizamos el código proporcionado por IcoMoon, que en mi caso ha sido el siguiente:

<svg class="icon icon-facebook"><use xlink:href="#icon-facebook"></use></svg>
<svg class="icon icon-instagram"><use xlink:href="#icon-instagram"></use></svg>
<svg class="icon icon-linkedin2"><use xlink:href="#icon-linkedin2"></use></svg>

Paso 3: personalizamos los iconos SVG con CSS

Aquí cada uno lo puede poner a su gusto, pero os comparto el código que he utilizado en el vídeo para tener una referencia:

.icon {
width:45px;
height:45px;
background-color:#6cc;
padding:8px;
fill:#fff;
margin:20px 10px;
border:3px solid #6cc;
transition:0.5s all
}

.icon:hover {
background-color:transparent;
fill:#6cc;
transition:0.5s all
}

Importante: arreglar el stripping de HTML

Hay varias formas para evitar que WordPress edite nuestro HTML:

• Crear un shortcode de WordPress con el HTML de los iconos dentro.
• Utilizar el Widget de HTML en una zona de Widgets o con un Page Builder
• Utilizar un plugin que mantiene nuestro HTML intacto.

En el vídeo he optado por el último método y el plugin que he utilizado es el siguiente: Preserved HTML Editor Markup Plus. Aunque esté desactualizado es un plugin que funciona perfectamente para esta tarea.

Paso 4: añadimos los enlaces a redes sociales

Aquí no hay mucho misterio, simplemente envolvemos nuestras etiquetas <svg> con un enlace <a> y ya lo tenemos listo 🙂 También os recomiendo añadir el atributo target=”_blank” para que las redes sociales se abran en una nueva pestaña, tal que así:

<a href="#" target="_blank"><svg class="icon icon-facebook"><use xlink:href="#icon-facebook"></use></svg></a>
<a href="#" target="_blank"><svg class="icon icon-instagram"><use xlink:href="#icon-instagram"></use></svg></a>
<a href="#" target="_blank"><svg class="icon icon-linkedin2"><use xlink:href="#icon-linkedin2"></use></svg></a>

¡Buenos días! En este vídeo vamos a ver cómo crear un aviso de cookies en WordPress sin utilizar plugins. ¡Vamos allá!

El recurso para insertar el aviso de cookies en WordPress que hemos utilizado en el vídeo es el siguiente: Osano Cookie Consent.

Repasemos los pasos que hemos seguido:

Crear y personalizar el aviso de cookies

Para ello simplemente seguimos los pasos que nos marca la herramienta hasta llegar al tercer paso, donde nos permite copiar el código que vamos a insertar en nuestra web.

Insertar el script de cookies en WordPress

Para ello podemos utilizar uno de varios métodos de insertar PHP en WordPress. Lo hacemos a través de PHP para aprovechar la acción de WordPress que nos permite insertar este script justo antes de la etiqueta </head>. En mi caso utilizo el plugin de Snippets para esta tarea.

La función que he utilizado en el vídeo es la siguiente:

add_action('wp_head', 'bps_cookie_script');

function bps_cookie_script () {
?>

//Aquí va el script

<?php
}

Recordad insertar vuestro propio código personalizado dentro de la función para que quede algo parecido a esto:

add_action('wp_head', 'bps_cookie_script');

function bps_cookie_script () {
?>

<!-- Begin Cookie Consent plugin by Silktide - http://silktide.com/cookieconsent -->
<script type="text/javascript">
window.cookieconsent_options = {"message":"Típico aviso de cookies. Si sigues navegando significa que aceptas su uso.","dismiss":"¡Genial!","learnMore":"Más info","link":"https://pro.empresiona.com/politica-de-cookies/","theme":"dark-bottom"};
</script>

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/1.0.10/cookieconsent.min.js"></script>
<!-- End Cookie Consent plugin -->

<?php
}

Personalizar el CSS

Este último paso es opcional pero nos servirá para adaptar el mensaje de cookies al diseño de nuestra web. Aquí no puedo dar una solución genérica ya que el diseño de cada uno es diferente pero puedo compartir el código que he utilizado en el vídeo:

.cc_container {
background-color:rgba(34, 34, 34, 0.82);
}

.cc_container .cc_btn, .cc_container .cc_btn:visited {
background-color:#6cc !Important;
color:#fff !important;
}

.cc_container a, .cc_container a:visited {
color:#6cc !important
}

¡Buenos días! En este artículo vamos a ver cómo crear un Custom Post Type en una web hecha con WordPress sin utilizar plugins. ¡Vamos allá!

Antes de todo, un muy breve resumen de qué es un Custom Post Type en WordPress (en adelante CPT) y para qué sirve.

¿Qué es un Custom Post Type?

Por defecto WordPress trae algunos tipos de posts como entradas, medios, páginas… En dos palabras, un CPT es un tipo de post que no es ni una página ni una entrada ni cualquier otro tipo de post que viene por defecto con WordPress.

En el ejemplo hoy voy a crear un CPT de portafolio para almacenar ahí los trabajos, ya que mi tema no lo trae por defecto y voy a dividirlo en dos pasos.

Paso 1: crear el código con GenerateWP

Para no escribir todo el código de cero, podemos aprovechar una maravillosa herramienta que se encarga de construir el código para diferentes elementos de WordPress según las preferencias que elijamos. Se trata de Generate WP. Así que el procedimiento sería el siguiente:

1. Accedemos a Generate WP.

2. En el apartado Tools and Generators vamos a Content > Post Type Generator.

A partir de aquí todo depende del tipo de post que vamos a generar. La herramienta es bastante intuitiva pero os dejo un pequeño resumen de lo que hace cada pestaña.

General

Aquí le vamos a dar un nombre a la función que creará este CPT, indicaremos si se añade soporte a Child Themes (si usáis uno, activarla) y  la parte de Text Domain es opcional, sirve en los casos que querráis publicar el plugin y permitir su traducción.

Post Type

Aquí la opción interesante es la de Post Type Key, ya que será la parte de la URL de definirá nuestro CPT. Por ejemplo, si tengo un portafolio, puedo poner portafolio como Post Type Key y las URLs de los trabajo serán algo como dominio.com/portafolio/trabajo-1… Las demas opciones ya se entienden bastante bien.

Labels

Esta parte es la que más palo puede dar ya que se trata de traducir todos los nombres de nuestro CPT en todas sus versiónes y lugares que va a aparecer. Simplemente cambiamos “item” por nuestro CPT (en mi caso “trabajo”) y vamos traduciéndolos uno por uno.

Options

Aquí podemos indicar qué campos tendrá nuestro CPT (título, imagen destacada…), si aparecerá en los resultados de búsqueda de la web… La más interesante aquí es la de Enable Archives ya que permite que se crea una página que tenga un listado de nuestros posts (en mi caso sería la página dominio.com/trabajos con el listado de todos los trabajos).

También podemos cambiar el slug de la URL en caso que lo queramos diferente del Post Type Key.

Visibility

Aquí indicamos quién puede ver nuestro CPT, dónde va a aparecer en el dashboard de WordPress, etc. Un detallito interesante aquí es indicar el dashicon, es decir el icono que aparecerá para nuestro CPT en en el dashboard de WordPress.

Query | Permalinks | Capabilities | Rest API

Estas pestañas podemos dejarlas por defecto ya que sirven para hacer cosas más avanzada.

Una vez creado el código, lo copiamos y pasamos al paso 2.

Paso 2: crear el snippet con el código generado

Este paso es muy simple. Ahora que tenemos el código generado debemos ejecutarlo en nuestra web. Para hacerlo os dejo 2 opciones:

1. Insertarlo en el archivo functions.php del tema. No lo recomiendo ya que si cambiamos de tema, el CPT creado se quedará en el functions.php del tema antiguo y no se cargará.
2. Insertarlo en el plugin Code Sippets. Recomiendo este método ya que este plugin permite insertar pequeños trozos de código que funcionarán con cualquier theme que tengamos activado.

Ahora si lo hemos hecho todo bien, nuestro CPT debe aparecernos en el panel de control de WordPress y podremos crear nuestros custom posts.

También te puede interesar

WordPress: Cómo añadir un widget area
WordPress: Cómo instalar el píxel de Facebook sin plugin
WordPress: Cómo regenerar las miniaturas o thumbnails

¡Buenos días! En este artículo vamos a ver cómo instalar el píxel de Facebook en WordPress de manera manual, sin usar plugins. ¡Vamos allá!

Insertar el píxel de Facebook manualmente es muy simple. Prefiero enseñarlos éste método ya que es muy rápido y así os podéis ahorrar un plugin (que siempre se agradece).

Antes de todo os recomiendo instalaros la extensión de Chrome de Facebook Pixel para ver al momento cuando el píxel empieza a funcionar.

Así que seguiremos estos pasos:

1. Nos dirigimos al Administrador de anuncios de Facebook y buscamos la configuración del píxel. Si ya tenemos un píxel creado, podemos encontrarlo en Anuncios de Facebook (menu de hamburguesa en la esquina superior izquierda) > Píxeles > [Nuestro píxel] > Configurar.

2. Seleccionamos la opción Instalar el código tú mismo de forma manual y copiamos el bloque de código que empieza por <!– Facebook Pixel Code –>.

3. Nos dirigimos a la carpeta de nuestro tema por FTP (wp-content/themes/mitema) y abrimos el archivo header.php.

4. Buscamos la etiqueta </head>, pegamos el código justo antes de esa etiqueta y guardamos.

5. Limpiamos el caché para asegurarnos de que se apliquen los cambios.

¡Ya está! Ahora si refrescamos la página veremos que se han aplicado los cambios y la extensión de Facebook Pixel debería mostrar un aviso de que hay un píxel instalado.

También te puede interesar

Cómo conectar Google Analytics a la web hecha en WordPress
WordPress: Resolver “Remove query strings from static resources”
WordPress: Cómo obtener el ID de una página, post, categoría y otros

¡Buenos días! Hoy vamos a ver cómo se crea una galería de imágenes con los recursos nativos de WordPress, sin utilizar plugins. ¡Vamos allá!

1. Accedemos al editor de la página o entrada donde queremos insertar la galería.

2. Le damos al botón Añadir objeto y luego Crear galería.

3. Marcamos las imágenes que queremos incluir en la galería y le damos a Crear una nueva galería.

En el siguiente menú podemos reordenar las fotos, elegir el número de columnas, decidir el comportamiento cuando se haga un click en la foto, posilibidad de poner un orden aleatorio a las imágenes y elegir el tamaño de foto a mostrar.

4. Le damos a Inserta galería

¡Y ya está! Ahora si publicamos la página o entrada, tendremos nuestra galería en el lugar que hemos indicado.

También te puede interesar

Cómo optimizar las imágenes de tu página web
WordPress: Cómo añadir iconos a los botones del menú
WordPress: Cómo insertar un mapa de Google Maps

¡Aloha! En este vídeo-tutorial te comparto cómo incrustar un tweet de Twitter en tu web hecha en WordPress sin que afecte la velocidad de carga de tu web.

Incrustar un tweet concreto en WordPress

Insertar un tweet en WordPress es muy sencillo. De hecho hay dos formas de hacerlo.

Con Gutenberg

Cada tweet de Twitter tiene una URL única.

Gutenberg nos permite insertar tweets concretos con el bloque Twitter si le indicamos la URL de ese tweet:

Simplemente pegamos el enlace al tweet y ya lo tendremos visible en nuestro WordPress:

Con HTML puro

Si no usamos Gutenberg tenemos la opción de insertar el tweet con puro HTML. Para ello, primero abrimos las opciones de un tweet (en la esquina superior derecha) y hacemos click en la opción Tweet insertado:

Una vez dentro nos da la opción de personalizar el tweet o podemos insertarlo tal cual.

Para insertarlo primero hacemos click en Copy Code y nos llevamos el código HTML a un widget de HTML o donde queramos insertar el tweet. El único requisito es que sea un lugar que acepte la inserción de HTML puro:

El resultado en la web es exactamente el mismo:

El problema de insertar los tweets así sin mas es que pueden afectar negativamente la velocidad de carga de tu web. Ya que estás aquí te enseño cómo evitar que esto pase.

Optimizar la velocidad de carga del tweet incrustado

Al insetar un tweet (o cualquier otro recurso de una fuente externa) se suelen hacer unas peticiones extra a diferentes archivos JS y CSS.

Si no queremos ralentizar nuestra web con estos recursos, podemos retrasar su carga hasta que el usuario interactúe con la web.

Te cuento cómo hacerlo en dos pasos:

1. Descargar y activar el plugin Flying Scripts
2. Escribir platform.twitter.com en las opciones del plugin, en Ajustes > Flying Scripts

Y esto es todo 🙂 Lo que hace el plugin es que los recursos con las palabras clave que hemos introducido no van a cargar hasta que el usuario no interactúe de alguna forma con la web.

¡Buenos días! En este vídeo os enseñaré cómo cambiar la imagen que viene por defecto en nuestros productos de WooCommerce que no tienen foto. ¡Vamos allá!

Como vemos, cambiar el placeholder de los productos de WooCoomerce es bastante simple. Como en muchos casos, sólo se trata de insertar el siguiente trozo de código en el archivo functions.php en el directorio de nuestro theme o en el plugin de Snippets:

add_filter( 'woocommerce_placeholder_img_src', 'bp_woo_placeholder', 10 );
function bp_woo_placeholder( $image_url ) {
 $image_url = '';
 return $image_url;}

Ahora sólo quedaría insertar entre las comillas vacías la URL de la imagen que queremos que se muestre.

El tamaño de la imagen puede variar según el theme que se utilice. En mi caso, por ejemplo, el tamaño de la imagen del producto es de 530x530px así que son las dimensiones que utilizo para la imagen.

También te puede interesar

WooCommerce: Cómo poner la tienda en modo catálogo
WooCommerce: Cómo importar contenido demo o de prueba
WooCommerce: Cómo ocultar las breadcrumbs o migas de pan

¡Buenos días! En este artículo os voy a enseñar cómo añadir los botones de compartir en redes sociales nuestras entradas de WordPress, tanto sin plugin como con plugin.

Yo os recomiendo el primer método ya que resulta mucho más ligero para nuestro WordPress y nos permite ahorrarnos otro plugin.

Añadir botones de compartir en redes sociales sin plugin

Repasemos los pasos que hemos seguido en el vídeo:

Paso 1: creamos la función con los botones

La página donde hemos prestado el código para los enlaces es la siguiente: HTML Share Buttons.

En el vídeo he explicado el procedimiento para crear esta función en WordPress y os dejo aquí el código final:

function bs_social_share() {
if(is_singular('post')) {
echo '<div class="social-share">

<a href="http://www.facebook.com/sharer.php?u='.get_permalink().'" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/facebook.png" alt="Facebook" />
</a>

<a href="https://twitter.com/share?url='.get_permalink().'&text='.get_the_title().'&hashtags=empresiona&via=bohdanps" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/twitter.png" alt="Twitter" />
</a>

<a href="http://www.linkedin.com/shareArticle?mini=true&amp;url='.get_permalink().'" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/linkedin.png" alt="LinkedIn" />
</a>

</div>';
}}

Os recuerdo que podéis cambiar las imágenes en la etiqueta <img> por vuestros propios iconos o incluso podéis crear iconos vectoriales de redes sociales como enseñé a hacer en un vídeo anterior (que es como lo tengo implementado en mi blog).

También os dejo el enlace a la página donde se explican los parámetros de URL de Twitter con más detalle.

Paso 2: mostramos los botones

Aquí os muestro tres opciones:

1. Mostrarlos a través de un shortcode
2. Mostrarlos modificando la template de los posts
3. Mostrarlos a través de un hook de WordPress

Mostrar con shortcode

Para mostrar los botones a través de un shortcode utilizamos el siguiente código final:

function bs_social_share() {
if(is_singular('post')) {
return '<div class="social-share">

<a href="http://www.facebook.com/sharer.php?u='.get_permalink().'" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/facebook.png" alt="Facebook" />
</a>

<a href="https://twitter.com/share?url='.get_permalink().'&text='.get_the_title().'&hashtags=empresiona&via=bohdanps" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/twitter.png" alt="Twitter" />
</a>

<a href="http://www.linkedin.com/shareArticle?mini=true&amp;url='.get_permalink().'" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/linkedin.png" alt="LinkedIn" />
</a>

</div>';
}}

add_shortcode('social-share','bs_social_share');

Ten en cuenta que en este caso en la función se utiliza un return y no un echo para imprimir el shortcode.

Modificar la template

Para mostrar los botones modificando la template simplemente insertaremos la función anterior en algún lugar del archivo php encargado de mostrar la entrada, tal como enseño en el vídeo:

bs_social_share();

Si te has perdido en este paso de modificar la template te recomiendo echarle un vistazo a este otro artículo sobre cómo modificar el HTML en WordPress que te será de gran ayuda 🙂

A través de hooks

Y finalmente para mostrarlos a través de un hook (en este caso de Genesis), que es mi método preferido y el que recomiendo, simplemente añadimos esta acción después de la función del principio de la entrada:

add_action('genesis_entry_footer','bs_social_share');

En este caso utilizo el hook genesis_entry_footer para mostrar esos botones en el footer de la entrada pero puedes consultar más hooks y lugares donde insertar la función aquí: Genesis Visual Hook Guide.

Recuerda que si utilizas este método, tienes que imprimir los botones con echo, y no con return.

Paso 3: estilizamos los botones

Os comparto el código CSS que he utilizado en el vídeo:

.social-share img {
width: 35px;
margin:0 10px;
border: 0;
box-shadow: none;
display: inline-block;
}

Os remito de nuevo a la entrada de cómo crear iconos vectoriales en WordPress ya que es una manera mucho más ligera y flexible de mostrar iconos en WordPress.

¡Y con esto ya estamos! Veamos finalmente cómo podemos hacer lo mismo utilizando un plugin, aunque es un método que no recomiendo pero que podéis utilizar si os da miedo el código o simplemente para ir más rápido.

Añadir botones de compartir en redes sociales con plugin

El plugin que he utilizado en el vídeo es el siguiente: AddToAny Share Buttons.

He elegido este plugin por su ligereza y porque trae un diseño muy limpio y elegante.

También te puede interesar

Cómo insertar publicaciones de Facebook en WordPress
Cómo insertar el perfil de LinkedIn en WordPress
WordPress: Cómo mostrar las últimas publicaciones de Instagram
WordPress: Cómo añadir las etiquetas Open Graph de Facebook