miércoles, 4 de enero de 2017

Buenos días , aquí tienes tu dosis diaria de WordPress ☕ 

                                                           

Tu dosis diaria de WordPress

Tutorial Divi: Cómo añadir una letra capital

Es cuestión de gustos pero hay gente a la que le encantan las letras capitales, también conocidas como letras capitulares. Son esas letras al principio de un párrafo que son de un tamaño notablemente superior al resto, muy utilizadas en los antiguos libros medievales.

Me refiero a algo como esto…

También las habrás visto en libros e incluso periódicos, pues es un detalle de estilo que gusta a muchos diseñadores y, al final, a los lectores, que se acostumbran a ver este tipo de adornos, de estilo.

Pues bien, si eres de gusto clásico y quieres añadir letras capitales en Divi quizás deberías saber que es algo que viene ya incluido por defecto en Divi y en todos los temas de Elegant Themes.

Cómo añadir letra capital en Divi

Por lo que crear una letra capital en Divi es tan fácil como envolverla en este shortcode:

[dropcap][/dropcap]

Así, si tienes un texto de este tipo:

En un lugar de la Mancha, de cuyo nombre no quiero acordarme …

Solo tendrías que añadir el shortcode para tener tu letra capital:

[dropcap]E[/dropcap]n un lugar de la Mancha, de cuyo nombre no quiero acordarme …

Pasarías de esto…

A esto otro…

Es cuestión de gustos en cualquier caso.

Ahora bien, si no te gustan los estilos por defecto, pues parte de la belleza de las letras capitales es que se distingan del resto de las tipografías, puedes añadirle los estilos que quieras

Cómo cambiar los estilos de letra capital en Divi

Para cambiar el estilo por defecto de la letra capital a otro que te guste más solo tienes que añadir un poco de código a tu CSS personalizado, ya sea en el personalizador de WordPress o en las opciones generales de Divi, algo así por ejemplo:

.et-dropcap {     font-size: 95px;     line-height: 0.7;     color: #8B3C90;     font-family: Times;     padding-top: 10px; }

Con lo que tendrías esto otro…

Otro modo es añadir los estilos en línea, dentro del shortcode, algo así por ejemplo:

[dropcap style="font-size: 95px;"]E[/dropcap]n un lugar de La Mancha de cuyo nombre no quiero acordarme …

Como ves, las letras capitales son un estupendo recurso de estilo para muchos tipos de webs, que pueden atraer la atención del lector, algo que nunca debes infravalorar.

Tampoco son para ponerlas en todos los párrafos, por eso no suele ser buena idea incluirlas por defecto, pero sí puedes darle algo de "clase" a tus publicaciones eligiendo bien dónde poner una letra capital.

Sigue leyendo…
2017-01-05  • Fernando

Si quieres saber más sobre lo que ofrecemos en Ayuda WordPress echa un vistazo a los siguientes enlaces …  

Curso de WordPress presencial en Madrid

Hosting especializado WordPress
100% fiable

TU EXPERTO WORDPRESS ONLINE

FORMACIÓN WORDPRESS ONLINE

Facebook Twitter Google Youtube

Ayuda WordPress

Recibes este correo electrónico porque estás registrado en nuestro sitio o has realizado compras.

Darme de Baja

martes, 3 de enero de 2017

Buenos días , aquí tienes tu dosis diaria de WordPress ☕ 

                                                           

Tu dosis diaria de WordPress

Cómo recuperar los botones de subrayado y justificado en el editor de WordPress

Por si no te has dado cuenta, con la actualización a WordPress 4.7 el equipo de desarrollo decidió algunos cambios en el editor, y entre ellos estaban la eliminación de dos botones de la barra de herramientas: el de texto subrayado y del de texto justificado.

No entraré en el debate sobre si es una buena decisión o no, porque hay para todos los gustos, pero sí que te daré soluciones si quieres recuperarlos, ambos, o solo alguno.

Recuperar los botones de subrayado y justificado

Si quieres recuperar ambos botones tenemos un par de opciones:

Re-add text underline and justify

Estupendo plugin que añade una opción nueva a los ajustes de escritura para devolver ambos botones al editor y, además, te da la opción de volver a ponerlos donde estaban antes (el de subrayado en la primera fila de botones y el de justificado en la segunda).

Si no eliges la opción de reorganizarlos te pondrá ambos en la segunda fila de botones. También tienes la opción de dejar todo por defecto, con lo que no tendría sentido el plugin, pero bueno, ahí está.

Resumiendo, las opciones serían estas:

  • Por defecto: Todo sigue como está desde WordPress 4.7, sin botones de subrayado ni justificado.
  • Volver a añadir botones y reorganizar: Vuelves a tener los botones como estaban en WordPress 4.6.
  • Volver a añadir botones: Vuelves a tener los botones pero ambos en la segunda fila.

Tú eliges.

Restore Lost Functionality

Un viejo conocido, que va incorporando en sus ajustes todas aquellas cosas que se van quitando de WordPress, y por supuesto también puedes recuperar los botones de subrayado y justificado de texto.

Además de esto, como siempre, puedes recuperar viejas funcionalidades de WordPress que han ido desapareciendo o cambiando en sucesivas versiones, como el orden de los campos de comentarios, el gestor de enlaces, el botón de enlaces cortos y muchas más.

Simplemente ve al nuevo menú en

Ajustes -> Restore Lost Funcionality
y reactiva lo que gustes. En el caso que nos ocupa en realidad te anima a instalar otro plugin, el que viene a continuación…

Tiny MCE Advanced

Otro veterano, que como cambia el editor de WordPress por un Tiny MCE completo, puedes añadir y organizar los botones como quieras, por supuesto tus queridos (o no) botones de subrayado y justificado total de texto.

Recuperar solo el botón de justificado de texto

Si eres de los que estás de acuerdo en haber quitado el botón de subrayado, por temas de accesibilidad y usabilidad, entonces tu plugin es Who Stole the Text Justify Button?!

Con este significativo título (¡¿Quién ha robado del botón de justificar texto?!) el plugin, solo con instalarlo y activarlo, devuelve a la segunda fila del editor de WordPress el añorado botón para justificar texto.

Y no, no voy a entrar en el debate ¿vale?

Pero tú puedes debatir lo que quieras, para eso están los comentarios.

Sigue leyendo…
2017-01-04  • Fernando

Si quieres saber más sobre lo que ofrecemos en Ayuda WordPress echa un vistazo a los siguientes enlaces …  

Curso de WordPress presencial en Madrid

Hosting especializado WordPress
100% fiable

TU EXPERTO WORDPRESS ONLINE

FORMACIÓN WORDPRESS ONLINE

Facebook Twitter Google Youtube

Ayuda WordPress

Recibes este correo electrónico porque estás registrado en nuestro sitio o has realizado compras.

Darme de Baja

lunes, 2 de enero de 2017

Buenos días , aquí tienes tu dosis diaria de WordPress ☕ 

                                                           

Tu dosis diaria de WordPress

Cómo solucionar el aviso "Defer Parsing JavaScript"

Uno de los errores más comunes que observamos en las herramientas de análisis de optimización web como GTMetrix, Pingdom Tools o Google PageSpeed es el denominado "Defer Parsing JavaScript", que traducido vendría a ser algo así como "Aplazar la carga de JavaScript".

Pero primero …

¿Qué es eso de Defer Parsing JavaScript?

La mayoría de los JavaScripts se cargan en todas las páginas de tu web.

Cuando se solicita una página el navegador lee el código, y donde se realice una llamada a un JavaScript, lo ejecuta para obtener los datos en vez de cargar primero los elementos necesarios de la página.

Y es tarea del propietario de la web, o sea tuya, asegurar que todos los contenidos principales se carguen primero, y luego los elementos secundarios como comentarios, botones de compartir, widgets, imágenes, etc.

La idea es cargar primero lo que reclama el lector, tu visitante, que no es ni más ni menos que tu contenido.

Pero resulta que cuando hay JavaScript en el código el navegador va cargando y mostrando lo que contenga el código en el orden en el que se lo encuentre, lo que en muchas ocasiones retrasa la carga del contenido, lo importante.

Además, el JavaScript tiene la manía de cargarse en la cabecera, por lo que casi siempre se cargará antes que tu contenido.

Es por eso que tienes que aplazar la carga/entrega del JavaScript para que se cargue primero el contenido, y luego ya el resto de elementos secundarios.

Así que, cuando revisas tu web en analizadores como Pingdom, GT Metrix o Google PageSpeed Insights, verás el aviso de error llamado "Defer parsing of javascript". Si ves este aviso es que deberías hacer algo, y los pasos serían los siguientes.

¿Por qué es importante aplazar la carga de JavaScript?

Importa, y mucho, debido a que Google utiliza la velocidad de carga de las páginas como factor de posicionamiento, y sobre todo porque a los usuarios les encanta que las páginas web carguen rápido ¿verdad?

Google mide la velocidad de tus páginas desde el primer momento en que se la solicita y hasta que la página empieza a cargar. Esto implica que debes conseguir que tu página cargue lo más rápido posible.

Ese tiempo de carga inicial es lo que usa Google, y tus visitantes, para juzgar tu web. De hecho, Google está recomendando activamente que se cargue primero el contenido visible.

Así que si hace que tus visitantes sean felices, y hace feliz a Google ¿no crees que deberías hacer algo?

Cómo aplazar la carga de JavaScript (Defer Parsing Javascript) en WordPress

Lo más inmediato, y que funciona en el 99,99% de los casos es añadir el siguiente código a tu plugin de personalizaciones o al archivo

functions.php
de tu tema activo:
// Aplazar JavaScripts // Aplaza la carga de jQuery usando la propiedad HTML5 defer if (!(is_admin() )) {     function defer_parsing_of_js ( $url ) {         if ( FALSE === strpos( $url, '.js' ) ) return $url;         if ( strpos( $url, 'jquery.js' ) ) return $url;         // return "$url' defer ";         return "$url' defer onload='";     }     add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 ); }

Lo que hace este código es forzar a que los JavaScripts se carguen solamente una vez se haya cargado tu contenido.

Más maneras de aplazar la carga de JavaScript en WordPress

En el improbable caso de que no te funcione el código anterior hay otras posibles soluciones, a saber…

Añade el atributo 'defer' a tus JavaScripts

Solo tienes que añadir el atributo '

defer
' a cada JavaScript de tu código, por ejemplo:
<script type="text/javascript" defer="defer" src="TU_CÓDIGO_AQUÍ"></script>

Y, por supuesto, lo mejor es cargar el JavaScript siempre al fondo del documento HTML (tu web), justo antes de la etiqueta de cierre de

body
(
</body>
) en vez de cargarlos dentro de la etiqueta
head
, como suele suceder.

Cambiar la ubicación por defecto de JavaScripts de WordPress

WordPress, por defecto, añade todo el JavaScript de su propio núcleo y plugins en la cabecera HTML, usando la función

wp_head()
o al final de la página usando
wp_footer()
.

Y la idea es mover todo el JavaScript en la cabecera

wp_head()
al final de la página, en
wp_footer()
.

Para conseguirlo añade el siguiente código al archivo

functions.php
del tema activo o, como siempre, a tu plugin de personalizaciones:
if(!is_admin()) {     // Movemos todo el JS de la cabecera (header) al pié (footer)     remove_action('wp_head', 'wp_print_scripts');     remove_action('wp_head', 'wp_print_head_scripts', 9);     remove_action('wp_head', 'wp_enqueue_scripts', 1);     add_action('wp_footer', 'wp_print_scripts', 5);     add_action('wp_footer', 'wp_enqueue_scripts', 5);     add_action('wp_footer', 'wp_print_head_scripts', 5); }

Crea un JavaScript aparte

La otra opción es crear un JavaScript separado en el que incluirás todos los JavaScripts que necesites.

  1. Crea un archivo JavaScript en la carpeta de tu tema activo y nómbralo como aplaza.js
  2. En ese archivo mete todos los JavaScripts que necesite tu web, en el orden en el que quieras que carguen
  3. Guarda el archivo y añade el siguiente código antes de la etiqueta de cierre de cabecera (
    </head>
    ):
<script type="text/javascript"> function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "aplaza.js"; document.body.appendChild(element); } if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload; </script>

Nota importante. Asegúrate de que el archivo está en la carpeta de tu tema activo, por ejemplo

/wp-content/themes/nombre-de-mi-tema/
.

Lo que de verdad importa

El primer y principal factor, tanto para los visitantes como para Google, es entregar el contenido a tus visitantes, y tan rápido como sea posible.

La idea es que tus visitantes no deberían tener que esperar a que se cargue tu contenido hasta que no se cargue el JavaScript.

Sigue leyendo…
2017-01-03  • Fernando

Si quieres saber más sobre lo que ofrecemos en Ayuda WordPress echa un vistazo a los siguientes enlaces …  

Curso de WordPress presencial en Madrid

Hosting especializado WordPress
100% fiable

TU EXPERTO WORDPRESS ONLINE

FORMACIÓN WORDPRESS ONLINE

Facebook Twitter Google Youtube

Ayuda WordPress

Recibes este correo electrónico porque estás registrado en nuestro sitio o has realizado compras.

Darme de Baja

Seguidores

Archivo del blog