Listado de Codigos para tu Pagina Code Snipets WordPress

Muchas veces me pasa que las funcionalidades que tiene un tema, un plugin o constructor no permiten realizar la función que se necesita y por ello se requiere de algún código especial, JavaScript o similar. Code Snippets WordPress.

Quieres limpiar tu base de datos?

Quieres revisar y limpiar tu base de datos, existen varias formas. Yo normalmente lo hago con WP Rocket, que te permite hacer una limpieza completa; otra opción sería con plugins. La que os traigo hoy es la solución directa de WordPress, sin plugins ni nada, que funciona perfectamente para una limpieza básica de la web.

Modifica el archivo accediendo a la siguiente URL:

https://www.tudominio.com/wp-admin/maint/repair.php

Para permitir usar esta página para reparar automáticamente problemas en la base de datos, añade la siguiente línea al archivo wp-config.php. Una vez añadida, vuelve a cargar esta página:

define('WP_ALLOW_REPAIR', true);

Y pulsa en «reparar y optimizar».

Acordeones de Elementor Pro cerrados

Si usas el elemento acordeón dentro de Elementor, te darás cuenta de que por defecto lo pone abierto, algo que a veces no es necesario. Queremos que por defecto el acordeón aparezca cerrado y que al pulsar el usuario en el texto se abra.

Primero debemos añadir, encima del bloque «leer más», el siguiente script (es un jQuery que no me gusta nada, pero es lo que hay):

<script>
jQuery(document).ready(function($) {
  var delay = 100;
  setTimeout(function() {
    $('.elementor-tab-title').removeClass('elementor-active');
    $('.elementor-tab-content').css('display', 'none');
  }, delay);
});
</script>

Ojo: mete el código tal cual, en línea, que se vea que coge el formato, si no te va a dar problemas.

Añade un widget HTML, mete el código, y un acordeón debajo con el texto que necesites.

Actualizar la versión de PHP en un hosting con varias páginas web

Normalmente los hostings «buenos» permiten actualizar la versión de PHP en cada uno de los dominios/subdirectorios; o sea, yo tengo 4 webs dentro de mi hosting pero quiero tener una con la versión 8 de PHP y el resto con la 7.4.

Para ello debemos añadir en el fichero .htaccess la siguiente línea (cambiando 74 por la versión que se necesite):

AddHandler application/x-httpd-alt-php74___lsphp .php

Ten en cuenta que puedes modificar el «74» por la versión de PHP que desees configurar para esa web.

Cómo comprobar que se ha realizado correctamente: revisa tu hosting, muchas veces tienen ese apartado en el cPanel o Plesk. Si no, crea un archivo tipo info.php en tu directorio FTP con esta línea de código:

<?php phpinfo(); ?>

Luego llama a ese archivo desde el navegador, por ejemplo: tupaginaweb.com/info.php

Añadir icono de casa en el menú superior

Esto se puede hacer con plugins o sin ellos; en este caso te comento cómo sin plugin:

1. Añade el icono a tu página. Por ejemplo, si usas Elementor, Divi o algún constructor, ya tiene iconos por defecto. Al analizar el código con el inspector de tu navegador, te muestra su class.
2. <i class="fas fa-home"></i>
3. Ese es el código que tienes que añadir en el menú de inicio (etiqueta de navegación).

Otras opciones

• Si tu constructor no tiene iconos (algo raro), hay que añadir el script de alguna fuente de iconos y hacer básicamente el mismo procedimiento. Por ejemplo, buscas en Font Awesome un icono, te muestra la etiqueta que tienes que añadir igual que en el caso anterior: añades el script de Font Awesome, metes el código que te dan y listo.
• Si prefieres un plugin, usa este: Wp Menu Icons de Quadlayers.

Redirigir de HTTP a HTTPS en el .htaccess

Una cosa es activar el HTTPS en los ajustes de WordPress, otra es activar por base de datos que todo el contenido de la web esté en HTTPS (reemplazar la URL en base de datos para que todos los activos estén en SSL, si no muestra contenido mixto y candado medio tachado), y otra es redirigir el contenido cuando vaya a la página HTTP y reenviarla a HTTPS. Pasa lo mismo con el www.

<IfModule mod_rewrite.c>

# Redirección de HTTP a HTTPS
RewriteCond %{HTTPS} off
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

# Mantén las reglas existentes
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

</IfModule>

Otra opción, con el www:

# END WordPress
# Redirigimos las webs antiguas a la nueva url
RewriteCond %{HTTP_HOST} ^albertopampin\.es$ [OR]
RewriteCond %{HTTP_HOST} ^www\.albertopampin\.es$
RewriteRule ^index\.html\/?(.*)$ "https\:\/\/www\.albertopampin\.es\/$1" [R=301,L]

Contenido mixto

Normalmente uso plugins para ello (ver post «mejores plugins WordPress»), nunca me ha hecho falta probarlo, pero para la próxima lo pruebo 😉

<IfModule mod_headers.c>
Header always set Content-Security-Policy "upgrade-insecure-requests;"
</IfModule>

Imágenes de fondo en artículos que se repiten en Elementor

Me pasa en todas las webs, no sé por qué; aunque lo cambie en Elementor Pro y lo modifique, no me lo permite. Las imágenes de fondo se repiten en horizontal, creo que es algo del theme (Astra), del tipo de capa de fondo que pongo, o de algunas versiones. Al final tengo que añadir casi siempre este código:

.elementor-background-overlay {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

Modificar el texto del botón «Añadir al carrito»

// Cambia el texto del botón Añadir al carrito en WooCommerce en las categorías de productos
function custom_woocommerce_product_add_to_cart_text() {
  global $product;
  $product_type = $product->product_type;

  switch ( $product_type ) {
    case 'external':
      return __( 'Ir', 'woocommerce' );
      break;
    case 'grouped':
      return __( 'Detalles', 'woocommerce' );
      break;
    case 'simple':
      return __( 'Comprar', 'woocommerce' );
      break;
    case 'variable':
      return __( 'Opciones', 'woocommerce' );
      break;
    default:
      return __( 'Detalles', 'woocommerce' );
  }
}
add_filter( 'woocommerce_product_add_to_cart_text', 'custom_woocommerce_product_add_to_cart_text' );

Cambiar el estado del pedido de forma automática

// Actualiza automáticamente el estado de los pedidos a Completado
add_action( 'woocommerce_order_status_processing', 'actualiza_estado_pedidos_a_completado' );
add_action( 'woocommerce_order_status_on-hold', 'actualiza_estado_pedidos_a_completado' );
function actualiza_estado_pedidos_a_completado( $order_id ) {
  global $woocommerce;

  // IDs de las pasarelas de pago a las que afecta
  $paymentMethods = array( 'paypal', 'ppcp-gateway' );

  if ( !$order_id ) return;
  $order = new WC_Order( $order_id );

  if ( !in_array( $order->payment_method, $paymentMethods ) ) return;
  $order->update_status( 'completed' );
}

Modificar el texto de «Oferta» en WooCommerce

Si necesitas modificar el texto de «Oferta» en WooCommerce, tienes varias opciones. Primero revisa si el tema tiene alguna de esas opciones, o si el plugin de reglas de descuentos las tiene. Si eso no funciona, añade esta función en el functions.php:

add_filter( 'woocommerce_sale_flash', function( $texto ) {
  return str_replace( __( 'Sale!', 'woocommerce' ), 'Descuentos', $texto );
}, 10, 1 );

Campos obligatorios en el checkout de WooCommerce

Tienes una tienda online, el cliente elige el pedido y añade sus datos de facturación. Esos datos son personalizables (puedes quitar y poner los que necesites), el tema es que al cambiarlos puedes necesitar que un campo sea obligatorio o no; por ejemplo, que la ciudad o el código postal no sean obligatorios. ¿Cómo lo hacemos?

Añade el siguiente código en el archivo functions.php:

/** Otros campos de facturación: true = obligatorio - false = opcional */
add_filter( 'woocommerce_default_address_fields', 'personalizar_campos_extra', 1000, 1 );
function personalizar_campos_extra( $address_fields ) {
  $address_fields['company']['required']  = false; // Empresa
  $address_fields['address_1']['required'] = false; // Dirección
  $address_fields['country']['required']  = false; // País
  $address_fields['city']['required']     = true;  // Ciudad
  $address_fields['state']['required']    = false; // Provincia
  $address_fields['postcode']['required'] = false; // Código postal
  return $address_fields;
}

Redirigir a la página de checkout

¿Qué es el checkout? Es la página de finalizar la compra donde se rellenan los datos del usuario.

Si un cliente está comprando en la tienda y pulsa en «añadir al carrito», puede interesarnos alguno de estos comportamientos:

1. Siga comprando y eligiendo lo que quiera (es la opción por defecto en Woo).
2. Redirigir a la página del carrito, donde se muestran todos los productos seleccionados y el usuario elige finalizar la compra o seguir comprando (esta opción está en Ajustes de Woo > General > Redirigir al carrito).
3. Tan pronto se añada un producto al carrito, enviarlo directamente a la página de pago.

Para la opción 3, añade este código en functions.php:

function cod_redirect_checkout_add_cart( $url ) {
  $url = wc_get_page_permalink( 'checkout' );
  return $url;
}
add_filter( 'woocommerce_add_to_cart_redirect', 'cod_redirect_checkout_add_cart' );

Redirigir a una página al usuario cuando se registra

En este caso, cuando un usuario se registra en nuestra página web lo redirigimos a la página de «welcome»:

function redirect_user_after_registration( $registration_redirect ) {
  return home_url( '/welcome/' );
}
add_filter( 'registration_redirect', 'redirect_user_after_registration' );

Redirigir al usuario cuando inicia sesión

En este caso, cuando un usuario inicia sesión en la web es redirigido a la página «tuurl»:

function my_custom_login_redirect(){
  wp_redirect( home_url("/tuurl") );
  exit();
}
add_action( 'wp_login', 'my_custom_login_redirect' );

Personalizar el menú de login

Como siempre, se puede hacer por código o con plugin; estas funciones son snippets, puedes descargarte un plugin para ello y meter este contenido.

Mensaje en el pie de página:

function wprin_custom_text_in_footer_admin() {
  return 'Benvido a WebFerrol';
}
add_action( 'admin_footer_text', 'wprin_custom_text_in_footer_admin' );

// Personalizar el resto con una imagen de fondo, logo y texto
function my_access_styles(){
  // Registro estilo con el nombre "mi-estilo". get_template_directory_uri() devuelve el directorio del tema utilizado actualmente
  wp_register_style( 'logo-css', get_site_url() . '/logo/logo-head.css' );
  // Invoco al estilo para su uso
  wp_enqueue_style( 'logo-css' );
}
function change_wp_login_url() { return 'https://www.albertopampin.es'; }
function change_wp_login_title() { return 'Visita a nuestros expertos en WEB en '; }

// Añadimos en la cabecera el CSS del logo que vamos a utilizar en el acceso
add_action( 'login_head', 'my_access_styles' );
// Personalizar url logo acceso
add_filter( 'login_headerurl', 'change_wp_login_url' );
// Cambiar texto alt del logo de login
add_filter( 'login_headertitle', 'change_wp_login_title' );

No traducir los artículos de las páginas en Polylang

A veces pasa que tienes una web con varios idiomas y quieres traducir todo menos las páginas del blog, el tema es que para mostrarlo te obliga a crearlas una a una y es un lío.

Se podría cambiar la URL del blog en el idioma y listo, pero esta solución me parece más profesional (me refiero a que si tienes dos idiomas, español e inglés, en el menú de inglés creas una URL personalizada que apunte al español), aunque tiene sus desventajas: por ejemplo, si en la principal cargas los últimos artículos, no los mostrará en la versión inglesa. Con este código sí lo hará.

add_filter( 'pll_get_post_types', 'remove_post_translation_from_pll', 10, 2 );
function remove_post_translation_from_pll( $post_types, $is_settings ) {
  unset( $post_types['post'] );
  return $post_types;
}

// Redirigir al checkout sin pasar por el carrito
add_filter( 'add_to_cart_redirect', 'redirect_to_checkout' );
function redirect_to_checkout() {
  global $woocommerce;
  $checkout_url = $woocommerce->cart->get_checkout_url();
  return $checkout_url;
}

// Área de registro sidebar
if ( function_exists( "register_sidebar" ) ) {
  register_sidebar();
}

// Un solo producto en el carrito
add_filter( 'woocommerce_add_cart_item_data', 'mk_only_one_item_in_cart', 10, 1 );
function mk_only_one_item_in_cart( $cartItemData ) {
  wc_empty_cart();
  return $cartItemData;
}

// Evitar el carrito
function wc_empty_cart_redirect_url() {
  return 'https://ifspanish.yourbusinesscard.org/';
}
add_filter( 'woocommerce_return_to_shop_redirect', 'wc_empty_cart_redirect_url' );

// Redirigir siempre al checkout
function woo_redirect_to_checkout() {
  global $woocommerce;
  $checkout_url = $woocommerce->cart->get_checkout_url();
  return $checkout_url;
}
add_filter( 'woocommerce_add_to_cart_redirect', 'woo_redirect_to_checkout' );

Trucos CSS que me gustan

Menú horizontal móvil

Necesito poner en una tienda online un menú que permita hacer scroll horizontal hacia la derecha/izquierda. Los pasos, por encima:

• Crea el menú.
• Añádelo a la cabecera (sin puntos de ruptura, solo horizontal).
• Añade el siguiente código:

selector ul {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow-x: auto;
}
selector ul::-webkit-scrollbar {
  display: none !important;
}
/* selector a { background: #eeeeee; border-radius: 5px; } */

Botón de hacer scroll

Cómo añadir el típico botón animado para indicarle al usuario que haga scroll hacia abajo. La solución más simple es buscar un icono animado que lo haga, pero a mí me gusta hacerlo por CSS, de la siguiente forma:

1. Añade una sección de HTML.
2. Pega el siguiente código:

   <a class="hero-mouse anchor" href="#CHANGEME">
     <div class="mouse-icon"><span></span></div>
   </a>

3. Añade el CSS en la personalización del tema:

   .sliderfuente { font-family: Sans-serif; font-size: 150px; }
   
   .hero-mouse {
     position: absolute;
     bottom: 40px;
     left: 50%;
     margin-left: -15px;
     text-align: center;
     z-index: 100;
     font-size: 12px;
     text-transform: uppercase;
     color: white;
     font-weight: 600;
     letter-spacing: 1px;
   }
   .hero-mouse h3 { margin-left: -14px; padding-top: 15px; }
   
   .mouse-icon {
     width: 25px;
     height: 45px;
     border-radius: 15px;
     position: relative;
     border: 2px solid #000;
     text-align: center;
   }
   .mouse-icon span {
     width: 3px;
     height: 8px;
     margin: 2px auto 0;
     display: block;
     background: #000;
     border-radius: 5px;
     animation: 1.2s ease infinite wheel-up-down;
   }
   
   @keyframes wheel-up-down {
     0%   { margin-top: 2px; opacity: 0; }
     30%  { opacity: 1; }
     100% { margin-top: 20px; opacity: 0; }
   }

Añadir una máscara en la cabecera

Existen varias formas de crear separaciones: con máscaras, bordes, con el divisor de formas de Elementor… pero esta me parece interesante: divides el bloque en dos y le añades una línea con x grados.

transform: skew(29deg, 0deg);