Plugins y algunos trucos para WP

Eliminar título de «descripción» en ficha de producto en Woocommerce

Nos encontramos hoy con un problema habitual para muchas tiendas hechas en Woocommerce, todo es muy fácil y bonito, pero cuando estamos escribiendo nuestra descripción larga del producto, al verla publicada nos muestra por un lado la pestaña de Descripción, pero justo abajo un Título 2 con el mismo nombre Descripción, una duplicidad difícil de entender a primera vista. En concreto muesta algo como esto:

Eliminar título de "descripción" en ficha de producto en Woocommerce

Como se ve, queda la palabra «descripción» duplicada.

¿Cómo solucionarlo? bien fácil por suerte, aplicando un sencillo CSS:

 

#tab-description h2:first-child {
	display: none;
}

Como se muestra, sólo nos interesa eliminar el primer elemento H2, ya que es posible que en la descripción hayan más etiquetas H2 que nos interese mantener.

Veamos el resultado:

Eliminando el título de "descripción" en ficha de producto en Woocommerce

Como se puede ver, añadiendo ese código CSS solo nos queda el título de la pestaña.

 


Divi: Mostrar iconos de redes sociales en Movil-Responsive

Como ya sabreís en DIVI nos permite habilitar un header secundario donde mostrar el teléfono y el mail, además de los iconos de las redes sociales. A la derecha también se mostraría nuestro menú secundario. Es muy útil cuando nuestra web tiene muchos apartados y nos ayuda a mostrar toda la información.

¿Pero qué ocurre en responsive? cuando lo vemos en nuestro terminal móvil, sólo vemos el teléfono y el mai, pero desaparecen los iconos de las redes sociales.

¿Cómo mostrar los iconos de redes sociales en DIVI en versión móvil? Como casi siempre recurriremos al CSS:

 

@media only screen and (max-width: 767px) {
    div#et-secondary-menu { 
		display: block !important; 
		margin-top: 0px !important;
		padding-top: .75em;
	} 
	#et-secondary-menu>div.et_duplicate_social_icons>ul>li a {
		display: block;
		padding-bottom: .75em;
	}
}

@media only screen and (min-width: 768px) and (max-width: 980px) {
	div#et-secondary-menu { 
		display: block !important; 
		padding-top: .75em; 
    } 
}

Con esas lineas tendremos justo debajo ese menú que ha desaparecido, además si es tienda online aparecerá el carrito de woocomerce.

Un ejemplo del resultado:

 

Extraido de https://divibooster.com/show-divi-header-social-icons-on-mobiles-divi-2-4/

 

—————–ACTUALIZACIÓN—————

Trasteando un poco, he visto que es mucho más fácil hacer esto otro:

@media only screen and (max-width: 767px) {
   #et-info .et-social-icons {
    display: initial;
}
  }

Sobre todo si por ejemplo no tenéis puesto el teléfono, ya que queda más integrado en solo una linea. El ejemplo de arriba es para repartir más la información, creando dos filas. Todo depende de la cantidad de información que queráis mostrar.

 


Error al entrar en admin de WordPress theme-builder.php on line 38

Como cada més hago mis mantenimientos en las webs de WordPress que gestiono. Pero esta vez hay una que me ha dado un buen susto. Al entrar al administrador, me ha dado este error tan «contundente»:

ET_THEME_BUILDER_HEADER_LAYOUT_POST_TYPE – assumed ‘ET_THEME_BUILDER_HEADER_LAYOUT_POST_TYPE … wp-content/plugins/sitepress-multilingual-cms/compatibility/divi/theme-builder.php on line 38

Más que un error, es una advertencia, pero suficiente para que no me deje acceder a mi panel de WordPress de administración para hacer ninguna acción. La página funcionaba pero la parte de administración totalmente inoperativa.

Por suerte este error es muy descriptivo y como se desprende de su lectura, se trata de una incompatibilidad entre nuestro plugin de traducción WPML y nuestra plantilla DIVI.

Así que nos ponemos a darle una solución que ha sido más rápida de lo esperado:

1-Entramos por FTP a nuestra web y buscamos la carpeta de plugins, renombramos las carpeta principal del pluguin de WPML. (De esta manera buscamos deshabilitar este plugin)

2-Con este paso ya podremos entrar a nuestro panel de control de Wordpres, eso si, veremos que el plugin de idiomas está desactivado. Actualizamos todos los pluguins pero sobre todo el TEMA DIVI a la última versión.

3-Volvemos a renombrar la carpeta del servidor, y activamos en nuestro panel el plugin.

¡SOLUCIONADO! ¿Te ha pasado esto mismo a ti? déjame un comentario….:)

 


Cómo forzar a DIVI a mantener 2 columnas en modo responsive

Ya estamos aquí de nuevo para solucionar una limitación de DIVI, que como ya sabemos todos, es una gran plantilla para wordpres, pero que tiene sus pequeños inconvenientes.

Cuando por ejemplo, tenemos una sección con 4 columnas, en versión responsive, una vez llegado a la resolución más pequeña, la de móvil, todo se transforma en una columna. Pero esto a veces no es práctico, por ejemplo cuando tenemos una sección con 4 columnas que son iconos. En móvil es muy incómodo tener los 4 iconos uno debajo de otros. ¿Cómo lo solucionamos? pues como casi siempre, con CSS.

Paso 1. Generamos el siguiente CSS en nuestra plantilla general:

@media only screen and (max-width: 479px) {
.dos-columnas .et_pb_column { width: 50%!important; }
}

Y luego aplicamos esta Clase CSS en nuestra FILA de esta manera:.


Como veis en este caso, las columnas quedan ajustadas de dos en dos, que es lo que queremos en este caso.

 

 


Conversor de archivos SVG a PNG

Como ya sabemos todos, lor archivos SVG nos permiten crear fantásticos elementos gráficos con una gran calidad y tamaño muy pequeño de espacio de archivo. Pero pueden tener algunas incompatibilidades en según que plataformas o plantillas de wordpress.

Así que una manera fácil de transformar nuestros SVG en PNG es con la siguiente herramienta online:

 

https://svgtopng.com/es/

 

Te permite convertir hasta 20 archivos SVG a PNG, luego las descargas comprimidas y ya las tienes diponibles.

 


Añadir un botón de volver atrás – WordPress

¿Cómo añadir un botón o enlace de volver atrás en nuestra web? No hará falta ningún plugin para eso, ya que es mucho más sencillo de hacer.

En este caso no importa si es un WordPress o Joomla, o simplemente un HTML.

Usaremos una función de Javascript llamada javascript:history.back() con lo que haremos un enlace que nos vuelva a la página anterior que estábamos navegando.

Código para poner como enlace:

<a href="javascript:history.back()"> Volver Atrás</a>

Código para generar un botón por defecto:

<input type="button" onclick="history.back()" name="Texto volver atrás" value="Texto volver atrás">

El resultado sería algo como esto:

 
Como se ve, al ser HTML se puede poner donde queramos, aumentando la navegabilidad de nuestra web.


Transformar Contact Form 7 al estilo DIVI

Contact Form 7 es un plugin fantástico para gestionar todo tipo de formularios de contacto, pero francamente, es muy feo estéticamente hablando. Hay multitud de plugins que retocan los css necesarios para darle un estilo más bonito pero en nuestro caso buscamos algo más concreto.

Estamos usando el tema DIVI para maquetar, y queremos hacer que el formulario de contacto generado con el plugin Contact Form 7 tenga un aspecto lo más similar posible a los formularios generados por el tema DIVI.

Simplemente añadiremos este código CSS:

.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar {
    background-color: #eee!important;
    border: none!important;
    width: 100%!important;
    -moz-border-radius: 0!important;
    -webkit-border-radius: 0!important;
    border-radius: 0!important;
    font-size: 14px;
    color: #999!important;
    padding: 16px!important;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.wpcf7-submit {
    color: #2d81eb!important;
    margin: 8px auto 0;
    cursor: pointer;
    font-size: 20px;
    font-weight: 500;
    border-radius: 3px;
    padding: 6px 20px;
    line-height: 1.7em;
    background: transparent;
    border: 2px solid;
    -webkit-font-smoothing: antialiased;
    transition: all 0.2s;
}
.wpcf7-submit {
    float: right;
}
span.wpcf7-list-item {
    line-height: 20px;
  	font-size: 13px;
}

Este código lo podemos poner en las propiedades de la propia página donde esté puesto el formulario de contacto, o bien en el CSS general de la web.

El resultado es sin duda espectacular 🙂


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.»


« Entradas previas

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