Enlaces de redes sociales en nueva pestaña – DIVI
¿Cómo mostrar los enlaces de redes sociales en una nueva pestaña en nuestra cabecera de DIVI?
Hace ya demasiado que dura este pequeño problema, por defecto, los enlaces de las redes sociales en la cabecera y footer por defecto en DIVI, se abren en la misma pestaña. Esto hace que el cliente abandone nuestra web.
¿Cómo solucionarlo? pues añadiendo este código en DIVI – Opciones del tema
«Agregar código al <body> (bueno para los códigos de seguimiento, tales como Google Analytics)»
Aquí os dejo el código:
<script type="text/javascript">
jQuery(document).ready(function($) {
jQuery(".et-social-icon a").attr('target', 'blank');
});
</script>
De esta manera, cuando hagáis clic en alguno de los iconos de redes sociales, éstos se abrirán en una pestaña nueva. Entiendo que en un futuro este código ya no hará falta ya que en futuras revisiones de DIVI ya estará incluido.
¿Alguna previsión de para cuando estará implementado? Yo apostaría que para muy pronto, ¿junio de 2021?
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:
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:
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:
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 🙂
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:
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:
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
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?
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
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 :
¿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…)
¿Cómo mostrar el cupón de descuento en correo de pedido de WooCommerce?
Un cliente me ha pedido que para poder ver los cupones que se van usando, tiene que ir entrando en cada uno de los pedidos desde el panel de control del la web, y allí ir mirando uno por uno y apuntando los pedido que se han hecho con cupones.
¿No sería más fácil que en mail que recibimos cuando se hace un pedida salga en algun sitio si se ha usado un cupón y el nombre del cupón?
Pues lo temos más fácil de lo que parece, añadiendo el siguiente código a nuestro functions.php:
add_action( 'woocommerce_email_after_order_table', 'add_payment_method_to_admin_new_order', 15, 2 );
function add_payment_method_to_admin_new_order( $order, $is_admin_email ) {
if ( $is_admin_email ) {
if( $order->get_used_coupons() ) {
$coupons_count = count( $order->get_used_coupons() );
echo '
<h4>' . __('Cupones utilizados') . ' (' . $coupons_count . ')</h4>
';
echo '
<strong>' . __('Cupones utilizados') . ':</strong> ';
$i = 1;
$coupons_list = '';
foreach( $order->get_used_coupons() as $coupon) {
$coupons_list .= $coupon;
if( $i < $coupons_count )
$coupons_list .= ', ';
$i++;
}
echo '
<strong>Cupones utilizados (' . $coupons_count . ') :</strong> ' . $coupons_list . '
';
}
}
}
add_action( 'woocommerce_admin_order_data_after_billing_address', 'custom_checkout_field_display_admin_order_meta', 10, 1 );
¿Fácil verdad? a mí me ha funcionado con un versión de WordPress 4.7.2 y una versión de Woocommerce 2.6.14
Código extraido de : https://mvkoen.com/mostrar-los-cupones-utilizados-en-el-correo-de-confirmacion-de-pedidos-de-woocommerce-y-en-el-editor-de-pedidos/
Donde tambien nos enseñan a ponerlo en el editor de pedidos.
Cómo saber si las DNS están propagadas
¿Cómo puedo saber si las DNS’s de un dominio están correctamente propagadas?
Dentro del proceso de un cambio de servidor de dominio, está el cambio de las DNS del dominio (no confundir con las ZONAS DNS).
Estás DNS nos indican a dónde apunta el dominio que gestionamos. Es perfectamente factible tener un dominio con un proveedor, pero que apunte mediante las DNS a otro servidor diferente.
Una migración de hosting y dominio debería ser (pasar de Hosting A a hosting B):
- Creación de hosting en B y hacer allí una copia de todo el contenido web (si tiene la opción de portabilidad de cuentas de email genial)
- Cambio de DNS en A
- Traspaso del dominio de A a B
Ahora mismo estoy en proceso de cambio 2, ya que al cambiarlas desde nuestro panel de control del dominio, los cambios tardan entre 24 y 48 horas. En algunos casos, nos gustaría saber exactamente cuando está completa esta propagación.
Pues bien, con esta web, ponemos el dominio y nos indica de una manera muy visual dónde ya se ha propagado y donde no:
Aquí pondremos el dominio que queremos consultar como hacemos a continuacion:
Traduce tu Wordpress y olvídate de complicaciones. Plugin de pago pero para uso ILIMITADO.
