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:
Cómo bloquear ip por htaccess en WordPress
Cómo bloquear ip por htaccess en WordPress
¿Cómo bloquear ip por htacces en WordPress para proteger de visitas indeseadas de nuestra web?
Un cliente hace poco tenía algunos problemas con su servidor, recibía muchas visitas y la transferencia del servidor era muy elevada. Algo estaba pasando, investigando en Google Analytics y Awstats encontramos que el 95% del tráfico de la web provenían de 2 ip de Moldavia.
¿Cómo solucionarlo? con el archivo .htaccess que tanto nos ayuda en nuestras webs, ya sean WordPress o no.
en nuestro caso pondremos el siguiente código:
<Limit GET POST> order allow,deny deny from 44.44.44.14 deny from 44.44.44.15 allow from all </Limit>
Restringimos el acceso a esas dos IP sospechosas y al resto las dejamos entrar.
Así pues, ya sabemos cómo evitar visitas indeseadas que nos aumenten la transferencia de nuestro servidor o evitar los ataques de SPAM de algunos servidores.
Permisos de archivos y carpetas en WordPress
¿Qué permisos de archivos y carpetas en WordPress debo tener?
Por defecto, para que Worpdress funcione sin problemas para todos los plugins y temas, son usuales los permisos por defecto 777, cancha abierta a todos para poder trastear en nuestras carpetas y archivos. Ya tenemos nuestro WordPress propenso para todo tipo de ataques, nuestra web tiene los días contados.
En muchas ocasiones al actualizar plugins de cualquier tipo nos avisan de que tenemos unos permisos que no son los correctos. A groso modo lo que tenemos que tener en cuenta es lo siguiente: 644 para archivos y 755 para carpetas.
Permisos para archivos en WordPress: Siempre 644
En este caso de arriba vemos como tenemos que cambiar los permisos de grupo para que se nos quede a 644, ya que el actual 664 no sería correcto.
Permisos para carpetas en WordPress: Siempre 755
En este caso de arriba vemos como estaría correcto, permisos de carpeta a 755
¿Cómo cambiar los permisos? Normalmente tenemos 2 maneras, directamente desde nuestro programa de FTP preferido (Filezilla, etc..) o bien desde nuestro panel de hosting de nuestro proveedor de servicios.
En las captura de pantalla superiores vemos un ejemplo de cada. Cuando hemos cambiado los permisos de archivo lo hemos hecho con Filezilla Firefox.
En cambio cuando hemos cambiado los permisos de las carpetas lo hemos hecho accediendo dirctamente a nuestro panel de control de hosting.
IMPORTATE, sólo cambia los permisos de archivos si lo tienes muy claro o algun plugin lo requiere para el buen funcionamiento. Siempre pregunta a alguien que sepa al menos un poco más que tú antes de hacer nada….nunca se sabe.
Eliminar JS y CSS que bloquean visualización en mitad superior de página
Seguro que usando el comprobador de velocidad de carga de Google Pagespeed os ha dado un resultado nada bueno, y entre las mejoras que os propone os dice:
Eliminar JS y CSS que bloquean visualización en mitad superior de página
¿Cómo solucionar este tema si teneis WordPress?
Con este sencillo plugin:
Scripts To Footer (https://wordpress.org/plugins/scripts-to-footerphp/)
Este plugin tiene la opción de decir en que páginas queremos hacer esto, ya que es posible que cree alguna incompatibilidad con otros plugins, mucho cuidado. En cualquier caso, si hay problemas basta con desactivar este plugin.
Antes recomendaba este, pero lleva mucho sin actualizarse:
JavaScript to Footer ( https://wordpress.org/plugins/footer-javascript/)
No puedo editar la plantilla de WordPress
A veces nos puede pasar pasar que al intentar modificar la plantilla no vamos la opción dentro de APARIENCIA – EDITOR, ya que directamente no nos aparece la opción de EDITOR.
En esa sección podremos cambiar los archivos de la plantilla para cambiar por ejemplo el texto del footer de nuestra plantilla.
Debajo de este submenú debería aparecer la opción de EDITAR
Trasteando un poco, he comprobado que el pluguin de seguridad iThemes Security, por defecto en una nueva versión, oculta automáticamente esta opción y tenemos que ir a activarla:
Esta opción esta en la sección WordPress Tweaks y se tiene que deshabilitar para poder activarlo.
(Ojo, en la versión en castellano la opción se llama AJUSTES DE WORDPRESS)
Hay otras maneras de editar estos archivos, como por ejemplo directamente por FTP, pero de esta manera creo que es mucho más limpio y rápido.
Palabras de transición en SEO YOAST para WordPress
Palabras de transición, nueva actualización del motor de búsqueda de Google en donde se tienen que usar este tipo de palabras.
Hasta ahora era muy importante el contenido en cuanto a número de palabras usadas, títulos, fotografías, enlaces etc. Ahora Google da una vuelta más a la hora de valorar el contenido y pretende que escribamos mejor. Usar las palabras de transición es un elemento indispensable, y en plugin de SEO YOAST lo tiene muy en cuenta con esta nueva actualización. Así que ya sabéis, a usar estas palabras que seguramente ya usábamos…. ¿si?
en este ejemplo seria genial, ya que el 35% de las frases ya tendrían palabras de transición. En muchos casos no hará falta hacer nada, pero en muchos otros habrá que redefinir todo el texto para adaptarlo a la nueva exigencia de Google.
Pero a todo esto, ¿cuáles son las palabras de transición?, hay de varios tipos, y algunas son estas (acompañadas de su traducción al inglés): (más…)
Modo de Mantenimiento WP para poner wordpress en construcción
Tras probar varios plugins para poner la web de WordPress en construcción, me quedo con este:
Modo de Mantenimiento WP
https://es.wordpress.org/plugins/wp-maintenance-mode/
Es realmente sencillo y trae algunas opciones interesantes:
- Opción simple para activar / desactivar
- Texto personalizado / título-cuerpo del mensaje
- Color / imagen de fondo
- Mostrar contador / Cuenta atrás
- Formulario de suscripción
- Enlace a redes sociales
- Contacto
Traduce tu Wordpress y olvídate de complicaciones. Plugin de pago pero para uso ILIMITADO.
