Plugins y algunos trucos para WP

Añadir icono de Instagram a plantilla DIVI

¿Qué bonita es nuestra plantilla DIVI verdad? Aunque siempre tiene cosas que mejorar. ¿Cómo añadir arriba en el header y el footer el icono de Instagram? Lo haremos muy fácil, como no usaremos el de Google +, haremos un cambiazo 🙂

(más…)


Cómo ocultar o mostrar una opción del menú en función de la resolución de pantalla

Problema: Ciente quere mostrar una opción de menu, pero en función de si se ve desde un móvil o desde un PC el enlace ha de ser diferente.

Vayamos por partes, ¿le podemos dar una Clase CSS a un elemento de menú? Sí! pues ya lo tenemos, una vez tengamos esa clase, por CSS y los media query haremos que en función de la resulución se vean o no, ¿Fácil verdad?

Vamos allá, primero, ¿Cómo dar una Clase CSS a un elemento del menú? En el apartado MENÚS, en la parte superior, OPCIONES DE PANTALLA, activaremos la opción de añadir clase:

Una vez hecho esto, veremos que en todos los elementos del menú aparece esto:

Ahora viene la clave, crearemos dos elementos de menú, a uno de pondremos la clase “opiniones” y al otro “opiniones2”.

Guardamos el menú, y en PERSONALIZAR plantilla añadiremos el siguiente CSS:

@media only screen and (min-width: 800px) {
.opiniones {
display: none !important;
}
.opiniones2 {
display: block !important;
}
}

@media only screen and (max-width: 800px) {
.opiniones {
display: block !important;
}
.opiniones2 {
display: none !important;
}
}

Como se puede ver hemos hecho que el “colapso” entre ambos elementos sean 800 pixels, es decir, hasta 800 pixels se mostrará el menú con la clase oponiones2 y partir de 800 pixels se mostrará el elemento de menú con la clase opiniones.


Subir archivos SVG a WordPress

¿Cómo subir archivos con extensiones raras como por ejemplo los famosos SVG?

Nuestro WordPress va siempre con pies de plomo y por protección no deja subir así como así archivos que consedera raros, o no tan usuales.

Lo que pasa que es últimamente están muy de moda por ejemplo los archivos SVG, y por ahora WordPress los considera no habituales. ¿Cómo lo hacemos? Pues rescatando un artículo de 2014 he dado con la solución:

Subir archivos no permitidos en WordPress

 

Con ese código podremos adaptarlo de esta manera:

 

function allow_svgimg_types($mimes) {
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter('upload_mimes', 'allow_svgimg_types');

De esta manera ya no nos saldrá ese mensaje tan molesto que nos dice ” Perdona, por razones de seguridad, este tipo de archivos no está permitido.”


Cómo traducir el texto “To view this protected post, enter the password below”

Esta vez me he encontrado en que no sabía cómo traducir el téxto que aparece en las páginas protegidas con contraseña, la frase que sale arriba es:

“To view this protected post, enter the password below”

Si el wordpress está en castellano sale la frase en castallano, pero en mi caso al estar en catalán, seguía saliendo en inglés.

¿Cómo cambio la frase “To view this protected post, enter the password below” ya sea para traducirla o para poner otro texto?

Gracias al foto de Elegant Themes, sólo he tenido que añadir el siguiente código en el header de mi web. (Como uso la plantilla DIVI he accedido desde el panel de control a Divi > Theme Options > Integration > “<head>”

<script type="text/javascript">
(function($) {
	$(document).ready(function() {
		$('.post-password-required .et_password_protected_form > p:first-of-type').html('Introdueix la contrasenya');
		$('.post-password-required .et_password_protected_form form .et_submit_button').html('Envia');
	});
})(jQuery);
</script>

El resultado es instáneo! funcionando de maravilla!


Cuándo mostrar menú responsive en Plantilla DIVI

La plantilla DIVI tiene muchas opciones para poder montar la web a nuestro gusto, pero a veces las cosas más sencillas son las más complejas.

Hace muy poco me pasó con un cliente que tenía el logo muy grande (muy alargado horizontalmente) y el menú era también bastante largo, con lo que habia un momento que según la resolución, el menú se doblaba en dos lineas, haciendo que quedase muy feo:

(más…)


Eliminar color de fondo cantidad articulos en categorias woocomerce

¿Cómo eliminar ese color amarillo que trae por defecto la mayoria de plantillas que usan Woocommerce?

Cuando estamos en nuestra web de woocomerce viendo la sección de TIENDA, normalmente nos aparecen las categorias con sus imágenes destacadas, acompañadas del nombre de la categoría así como el número de artículos existentes de cada una de ellas. El número tiene por defecto un espantoso color amarillo que daña a la vista así a primeras.

¿Cómo hacer que desaparezca? como casi siempre un poco de css y veremos un cambio como el siguiente:

Ahí va ese código CSS que como siempre pondremos en APARIENCIA-CUSTOM CSS:

.product-category mark {background-color: white;}

¿y si queremos que directament  no apareza la cantidad?

.product-category mark { display:none; }

Por otro lado, si lo que queremos es sólo quitar los paréntesis, hace ya mucho publique esto:

 

Cómo quitar los paréntisis en la cantidad de artículos de las categorías

Fue allá por 2014, espero que aún funcione..:)

 

 


Solución al error “W3 total cache error: some files appear to be missing or out of place”

Desinstalando el plugin W3 Total Cache me ha dado un error bien raro, entre las lineas de error aparecia “W3 total cache error: some files appear to be missing or out of place”

He intentado volver a instalar el plugin para ver si me dejaba desinstalarlo pero no ha habiado manera. Al parecer este plugin a veces puede dar problemas.

En la mayoría de servidores “normales” ya no hacen falta este tipo de plugins de cache ya que el propio servidor ya hace muchas de esas funciones, y no compensa tener por el uso de memoria, lentitud etc..

En mi caso, que uso DINAHOSTING, me informaron que tras alguna actualización de servidores, ya incorporaban muchas de esas funciones de cacheo y que podía prescindir de esos plugins.

Por suerte, googleando un poco he encontrado una fácil solución:

 

  • Acceder al FTP a la carpeta wp-content  de WordPress y borrar los siguientes archivos:
    • advanced-cache.php
    • db.php
    • object-cache.php
    • w3-total-cache-config.php
  • Borrar la carpeta del plugin W3 Total Cache que encontrarás en la carpeta wp-content/plugins/
  • Volver a generar el archivo .htaccess (borrarlo desde el FTP previa copia de seguidad y vuelve a generarlo desde Ajustes/Enlaces Permanentes)

A mí con todo esto me ha funcionado perfectamente!

 

 


Activar certificado SSL en WordPress

¿Cómo activar certificado SSL en WordPress? Más fácil de lo que crees, o no.

En primer lugar dejar bien claro que instalar un certificado SSL en nuestra web hecha en WordPress es muy importante.

Activar certificado SSL en WordPress, por los siguientes motivos:

-Google ya hace meses que ha comenzado a PENALIZAR a todas las webs que no tienen este certificado de seguridad, por lo que nos tenemos que poner al día en este aspecto.

-Los navegadores ya nos muestran avisos muy desagradables recordándonos que no tenemos instalados estos certificados de seguridad SSL.

-Aumenta la seguridad de la web ya que es mucho más difícil que sufra ataques ya que la comunicación entre el servidor y el cliente está encriptada.

¿Cómo se consigue un certificado SSL para una web?

(más…)


Logo flotante en plantilla DIVI de WordPress

¿Cómo hacer para que el logo de nuestra plantilla DIVI sea flotante?

con este simple truco haremos que nuestro logo se comporte de una manera increible, flotando en la parte superior de nuestra web, sin tener que estar pendientes de que se ajuste a alto del header.

 

Ejemplo de Logo flotante en plantilla Divi de WordPress

Ejemplo de Logo flotante en plantilla Divi de WordPress

Sólo tenemos que ir a personalizar nuestro CSS con la siguientes lineas:
@media only screen and (max-width: 980px) {
#logo {
min-height: 100px;
}
}
@media only screen and (min-width: 981px) {
#logo {
min-height: 120px;
}
}

////Los 100px y 120px los podeís modificar en función del tipo de logo que tengáis y el fondo de la web.

Truco extraido de :

How to Create a Divi Overlapping Logo


¿Cómo eliminar una categoría del Widget en Woocommerce?

Por defecto en nuestros widgets de woocommerce, tenemos una visualización de las categorías de los productos de nuestra tienda online. ¿Pero qué pasa si queremos eliminar una o varias de las categorías de ese widget de woocommerce?

Rebuscando un poco he encontrado un código que al ponerlo en nuestro functions.php nos elimina de ese widget la categoría o categorías seleccionadas.

Este código elimina las categorías específicas del widget “WooCommerce Product Categories”: (más…)


« Entradas previas

Powered by WordPress | Designed by Elegant ThemesPolítica de privacidad