Si estás editando tu plantilla de Wordpress y has querido subir una imagen header o logo te puedes topar con el siguiente problema:
La plantilla no te deja subir una imagen que no tenga una anchura y altura determinada en píxeles y te pide recortarla (Crop).
Si quieres evitar tener que recortar tu imagen ve al archivo functions.php de tu plantilla, busca la función add_theme_support( ‘custom-header’ ) y borra los valores de altura y ancho:
WebP (pronunciado «weppy») es un formato gráfico en forma de contenedor, que sustenta tanto compresión de imágenes con pérdida (mínima) como sin ella. Desde que la velocidad de carga de una web se ha convertido en un aspecto fundamental, y en un criterio decisivo a la hora de posicionar una página, un uso efectivo de las imágenes se ha hecho necesario. De esta necesidad han nacido formatos como el WebP o SVG (para imágenes vectoriales). Con ellos, los tiempos de carga de una web disminuyen considerablemente y el riesgo de ahuyentar al visitante es menor.
WebP es uno de los formatos más eficientes para las imágenes en Internet. El problema consiste en que aún no es un formato aceptado plenamente; Chrome lo sustenta de forma nativa al igual que Opera. A principios de 2019, el formato ya estaba disponible en una gran variedad de navegadores como Edge, Firefox, Opera Mobile y Mini, Android Browser, Baidu Browser, Vivaldi etc... (excepto Safari, tengo entendido).
Cómo usar WebP en Worppress
Ahora bien, si eres usuario de Wordpress, te preguntarás cómo puedes usar este formato WebP sin la necesidad de instalar ningún plugin (aunque los hay bastante útiles que te hacen el trabajo casi ellos solos, yo prefiero siempre la opción sin plugin). He aquí la respuesta:
Herramientas online para convertir a WepP:
Sube a cualquiera de estas webs de conversión la imagen que deseas comprimir y con el porcentaje de compresión que deseas y después descarga la imagen resultante. Asegúrate que el peso de la imagen es menor y estás conforme.
También puedes utilizar editores como Photoshop y Gimp.
Ver imágenes WebP en la Galería de Wordpress.
Los archivos soportados por defecto en la biblioteca de medios de Wordpress (aunque algunos proveedores de hosting pueden limitarlos por seguridad) son los siguientes:
.jpg, .jpeg, .png, .gif, .ico, .pdf, .doc, .docx, .ppt, .pptx, .pps, .ppsx, .odt, .xls, .xlsx, .psd, .mp3, .m4a, .ogg, .wav, .mp4, .m4v, .mov (QuickTime), .wmv, .avi, .mpg, .ogv (Ogg), .3gp, .3g2 (3GPP2)
Si intentas subir un archivo no soportado te saldrá un error que dice lo siguiente: "Ha habido un error al subir image.webp". Perdona, por razones de seguridad, este archivo no está permitido."
Por defecto, Wordpress no está preparado para subir este tipo de archivos a su galería de medios así que necesitarás modificar el archivo "funtions.php" de tu tema activo.
Con este código lograrás que Wordpress acepte la subida del formato webp y además que muestre las miniaturas en la biblioteca de medios.
//sube imágenes webp a Wordpress
//enable upload for webp image files.
function webp_upload_mimes($existing_mimes) {
$existing_mimes['webp'] = 'image/webp';
return $existing_mimes;
}
add_filter('mime_types', 'webp_upload_mimes');
//enable, show preview thumbnails for webp image files in Wordpress media manager.
//muestra miniaturas de imágenes webp en la galería de medios de Wordpress
function webp_is_displayable($result, $path) {
if ($result === false) {
$displayable_image_types = array(
IMAGETYPE_WEBP
);
$info = @getimagesize($path);
if (empty($info)) {
$result = false;
} elseif (!in_array($info[2], $displayable_image_types)) {
$result = false;
} else {
$result = true;
}
}
return $result;
}
add_filter('file_is_displayable_image', 'webp_is_displayable', 10, 2);
En resumen:
Subiendo a tu web imágenes comprimidas con el formato WebP lograrás acelerar la carga de tu web y mejorar la reputación de tu página en Google y demás webs que analizan la calidad de tu sitio.
Las etiquetas o labels de un blog sirven para categorizar la entrada. Es decir, ayudan a dividir tus entradas en diferentes categorías según su temática e importancia.
A veces, se da la ocasión en la que queremos borrar una etiqueta.
¿Cómo borrar etiquetas en Blogger?
Pues es sencillo, para eliminar etiquetas tienes que hacer que esa etiqueta no esté asociada a ninguna entrada.
Sigue los siguientes pasos:
- Loguéate en tu cuenta Blogger
- Selecciona el blog en el que quieres borrar la etiqueta
- Ve a "Entradas" o posts
- Busca los posts en los que se encuentra la etiqueta que quieres eliminar y selecciónalos
- Haz clic en el icono arriba a la derecha y selecciona el tag que quieres eliminar:
- después selecciona el icono etiquetas y elige de nuevo el nombre de la etiqueta que quieres borrar.
Hecho, ya has desasociado esa etiqueta de todas las entradas y, por tanto, se ha borrado todo rastro de dicha etiqueta.
Borrar todas las etiquetas usando HTML
Para borrar todas las etiquetas existentes de tu blog permanentemente y no volver a mostrar ninguna otra, puedes eliminar el siguiente código (antes haz una copia de seguridad de tu plantilla).
Puntualizo que esto hace que no te muestre más etiquetas aunque luego añadas otras nuevas que sí quieres.
Vamos, que no lo veo muy útil así que no lo recomiendo.
- Ve a tu Dashboard y dirígente a Plantilla (Template)
- Haz una copia de seguridad de la plantilla
- Haz clic en Editar HTML
- Pincha sobre cualquier punto del código que aparece y presiona Ctrl + F: Busca el siguiente código
Busca en tu plantilla </head>(recuerda haz una copia de seguridad siempre que modifiques la plantilla).
Pega justo antes de ]]></b:skin> el siguiente código:
Depende de lo que indexe GoogleBot de tu web.
Si Google no tiene indexadas tus etiquetas, el borrarlas no tendrá ningún efecto en la Búsqueda de Google.
En caso contrario, puede ser que al borrar la etiqueta se rompan enlaces externos y de error 404 Not Found a quien intente entrar por esa etiqueta.
A continuación os explico cómo eliminar 7 elementos de tu plantilla web que suelen estropear el diseño de la página.
1. Elimina la barra de navegación: navbar
Empezamos con el más tonto de todos. No hay ningún agujero de seguridad ni ninguna razón de peso por la que eliminar la barra de navegación de Blogger sólo es por mera estética.
Sigue estos pasos para borrarla:
Ve a la página principal de Blogger y selecciona la pestaña "Diseño". En uno de los elementos (gadgets) del diseño de tu web verás la opción "Barra de navegación" o "navbar" haz clic en "Editar" y selecciona "NO". Después, guarda los cambios.
En el caso de que no quieras borrarla, puedes cambiar el color de la barra de navegación navbar siguiendo esos mismos pasos. Clic para ampliar
2. Elimina elementos del footer de la entrada.
En el footer o pie de página de la entrada de tu blog, blogger añade un montón de cosas innecesarias como el autor, fecha de publicación...
Puedes eliminar cualquiera de esos elementos de la siguiente manera:
Ve a la página principal de blogger y pincha en la pestaña "Diseño" ahí encontrarás un elemento (gadget) llamado "Entradas del blog".
Haz clic en editar y se abrirá una ventana emergente en la que podrás eliminar o configurar los elementos de pie de página de las entradas de tu blog.
3. Elimina el mensaje "Mostrando entradas con la etiqueta x"
Este mensaje aparece en la página que se carga tras pulsar una etiqueta en concreto de tu blog.
Es feo de narices así que puedes borrarlo de la siguiente manera:
Ve a "Plantilla" presiona "Editar HTML". Haz clic en cualquier sitio del código y pulsa Ctrl + F para abrir la caja de búsqueda.
Busca el siguiente código:
<b:includable id='status-message'>
Cuando lo encuentres pulsa la flecha pequeña a su izquierda y borra todo este código:
4. Borra los bordes blancos alrededor de las imágenes.
Es cuestión de gustos pero si deseas eliminar los bordes blancos de las imágenes tendrás que editar el código CSS de tu plantilla
Ve al Dashboard o página principal de Blogger y pulsa sobre la etiqueta "Plantilla" y presiona "Personalizar" después elige "Avanzado" y busca la opción "Añadir CSS".
7. Elimina comentarios en las páginas About y Contacto.
Normalmente no se quieren comentarios en estas páginas así que eliminaremos la opción de comentar en ellas.
Ve a "Páginas" y haz clic en la página en cuestión. En el menú de la derecha pulsa "Opciones" y en la sección "Comentarios" haz clic sobre "No permitir, ocultar los publicados"
A más de uno nos mata la curiosidad por saber si alguien visita nuestra web, de dónde viene, si usa móvil, tablet o pc y cuánto tiempo está en la página...
Es cierto que existen unas estadísticas de Blogger que son fiables pero entonces, ¿por qué usar Analytics en lugar de las analíticas de Blogger?
Porque son superficiales, muy poco completas y, parece que tienes más visitas de las que en realidad tienes porque cada página vista cuenta como un visitante (la verdad es que tus páginas vistas no son tus visitas, lo siento).
Afortunadamente podemos abrir una cuenta con Google Analytics y crear un código de seguimiento que pegaremos en nuestra web y todos nuestros deseos de cotillear al visitante, se cumplirán.
(Otra de las opciones que tenemos es crear una cuenta de Google WebMasters pero eso lo trataremos en otro post).
Registra tu cuenta
Para comenzar, crea tu cuenta, rellena los datos que el Sr. Google te solicite (no son muchos):
Completa los campos necesarios debajo de los títulos "Configuración de la propiedad web" y "Configuración de cuenta". En este paso es donde debes introducir información relacionada con tu sitio web, como el nombre y el URL del sitio.
Paso 1 del registro. Clic para más resolución.
Paso 2 del registro. Clic para más resolución.
Pincha la opción "Obtener ID de seguimiento". Aceptas condiciones de uso para continuar.
Obtendrás el código o ID que necesitarás pegar en tu sitio web y será algo así:
Hay varias formas de implementar el código de seguimiento de Google Analytics en tu blog Blogger.
Una de ellas es ir a "Plantilla" > "Editar HTML".
Pincha sobre el código y presiona Ctrl+F
Busca </head>
Pega justo encima de el código de seguimiento,
También puedes pegarlo justo encima de la etiqueta </body>
A continuación, pulsa "Guardar Plantilla"
Recuerda guardar los cambios.
Otra opción menos rigurosa:
Ve a tu blog, a la pantalla de "Diseño".
Pulsa la opción "Añadir un Gadget".
Busca el que pone "HTML JavaScript".
Pega el código de seguimiento.
Pincha Diseño > Añadir un Gadget En el siguiente cuadro pega tu código de seguimiento.
Por último, confirma que el código insertado corresponde con tu ID:
Ve a tu blog "Configuración" > "Otros" y en el cuadro donde pone Google Analytics
ID de propiedad web de Google Analytics pega tu ID.
Pega tu ID de Analytics y tendrás tu Blogger configurado
Comprobación
Ahora ve a tu cuenta de Analytics, a la pestaña Administrador, selecciona la Propiedad que has creado y pincha en Información de Seguimiento y a continuación, pincha en Código de seguimiento.
Ahí podrás ver el estado de tu ID: "Estado: recibiendo datos" o "Estado: seguimiento no instalado".
Atención, ya sé que además de curiosos somos impacientes, pero, me temo que el código de seguimiento tarda unas horas (hasta 48 horas) en empezar a funcionar. Hasta entonces verás "Estado: seguimiento no instalado" y no se tratará de un error.
Paciencia, si en 24-48 horas, la cosa sigue sin rular y continúa el famoso mensaje "Estado: seguimiento no instalado", deberás intentar solucionar el error. Más abajo explico cómo hacerlo con una extensión de Google Chrome.
Comprobar que todo está correcto con Chrome
Si navegas en Chrome, puedes descargar la Extensión "Tag Assistant". Una vez instalada, reinicia el navegador y mira el icono que aparece.
Si la etiqueta está de otro color que no sea verde (rojo, azul...), es que ha habido algún problema. Error, código analytics mal implementado.
En cambio, si el dibujo sale en verde, estás de enhorabuena, todo funciona correctamente.
Una lista de errores típicos sería:
✔ No tienes el código de Google Analytics en tu Web. ✔ El código de Analytics está duplicado ✔ El código de Analytics está fuera de la etiqueta () ✔ Tienes 2 versiones de Google Analytics instaladas
Otra información sobre Analytics
Si quieres añadir más blogs a tu cuenta de Analytics deberás entender un poco del funcionamiento o JERARQUÍA:
Cuenta: Es el nivel más alto de la organización. Ejemplo: puedes tener varias cuentas; una de uso personal y otra cuenta para uso profesional. Propiedad: Puede ser un sitio web, un blog o una aplicación móvil. Puedes tener varias propiedades (blogs) dentro de un mismo nivel de cuenta (Máximo de 100 webs). Vista: Es el punto de acceso a los informes. Es muy recomendable dejar la vista creada por defecto a modo de copia de seguridad y crear otra como "Vista de trabajo" para comenzar a trabajar.
¿No recuerdas dónde se encuentra tu código de seguimiento de Analytics?
Entra en Google Analytics y pulsa sobre "Administrador" ve a "PROPIEDAD". Haz click sobre "INFORMACIÓN DE SEGUIMIENTO" y después sobre "CÓDIGO DE SEGUIMIENTO".
Todo lo que está dentro de las etiquetas es el código de seguimiento de Google Analytics.
¡Eso es todo!
Por último, si tu blog es nuevo, no te recomiendo que mires con frecuencia las estadísticas o te deprimirás mogollón. De primeras, confórmate con saber que están ahí y concéntrate en escribir y dar a conocer tu blog.
¡Suerte!
