Web

Menu

Listado de Codigos para tu Pagina Code Snipets WordPress

Muchas veces me pasa que las funcionalidades que tiene un tema un pluging o constructor no permite realizar la función que se necesita y por ello se require de algún codigo especial, Javascript o similar. Code Snipets WordPress

Acordeos de Elementor Pro Cerrado

Si usas el elemento de acordeon dentro de elementor te daras cuenta quie por defeto lo pone abierto…  algo que a veces no es necesario.. Queremos que por defecto el acordeon aparezca cerrado y que al pulsar el usario en el texto se abra.

Primero debemos de Añadir encima del bloque leer mas 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 meter el codigo tal cual .. en linea.. que se vea que coja el formato sino te va a dar problemas.

Añadimos un widget (html y metemos el codigo y un acordeon abajo con el texto que necesitemos)

 

Actualizar la version de php en un hosting con varias paginas web

Normalmente los hosting «Buenos» permite actualizar la version de php en cada uno de los donios/Subdirectorios.. osea yo tengo 4 web dentro de mi hosting pero quiero tener una con la version 8 de php uy el resto con la 7.4…

Para ello debemos de añadir en el fichero .htaccess la siguiente linea..  ( cambiando 74 por la version que se necesite.. )

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

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

Como comprobar que se ha realizado correctamente.. Revisa tu hosting muchas veces tienen ese aparatdo en el cpanel o plesk .. sino tendras que hacer los siguiente.. vete a tu directorio ftp crear un archivo tipo info.php y le metes esta linea de codigo

<?php  phpinfo(); ?>

Luego llamas a ese archivo desde el navegador: Ej: tupaginaweb.com/info.php

Añadir icono casa en el menu superior

Esto se puede hacer con plugins o sin el.. en esta caso te comento sin plugin…

  1. Lo que necesitas es añadir el icono a tu pagina.. por ejemplo si usas elementor o divi.. o algun constructor ya tiene iconos por defecto.. en este caso al analizar el codigo con el inspector de elementor de tu navegador … te muestra su class.
  2. <i class=»fas fa-home»></i>
  3. Ese el el codigo que tienes que añadir en el menu inicio ( Etiqueta de navegación)

Otras Opciones

  • Si tu contructor no tiene iconos cosa rara, lo que hay que hacer es añadir el script de alguna fuente y hacer basicamente el mismo procedimiento por ejemplo , buscas en fontawesome un icono y te muestra la etiqueta que tienes que añadir al igual que en el caso anterior.. Osea añadir el script de Fontawesome y  meter el codigo que te dan y listo.
  • Si quieres  con un plugin pues utiliza este: ( Wp Menu Icons de Quadlayers)

 

Contenido mixto

Normalmente uso plugins para ello ( ver post mejores plugins wordpress) . nunca me ha hecho falta probarlo pero para la proxima lo pruebo 😉

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

 

Imagenes de fondo en articulos se repiten Elementor

Me pasa en todas las web, no se porque .. aunque lo cambien en elemntor pro y lo modifique no me lo permite.. las imagenes de fondo se repiten en horizontal, creo que es algo del theme (Astra), el tipo de capa de fondo que pongo… o de algunas versiones.. no se. Al final tengo que añadir casi siempre este codigo.

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

 

Modificar el texto de añadir al carrito

 

// Cambia el texto del botón Añadir al carrito en WooCommerce en la categorías de productos
//Modificar texto del botón Añadir al carrito

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’ );

 

 

Campos Obligatorios Checkout de Woocomerce

Tienes una tienda online el cliente elige el pedido y añade sus datos de facturacion… esos datos de facturacion son personalizable ( puedes quitar y poner )  los que necesites (Ver los mejores plugin de woocomerce en otro articulo), el tema es que al cambiarlos .. o similar puedes necesitar que un campo sea obligatorio o no… por ejemplo ciudad o codigo postal no quiero que sea obligatorio. COmo lo hacemos?

Debemos de añadir el siguiente codigo en el archivo funtion.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 pagina de checkOut

Que es el Check Out? Es la pagina de finalizar la compra donde se rellenan los datos de usuario.

Si un cliente esta comprando en la tienda y pulsa en añadir al carrito… puede interesarnos los siguientes pasos:

  1. Siga comprando y eligiendo lo que quiera…  ( Es la que viene por defecto en woo)
  2. Redirigir a la pagina del carrito ( Donde muestra todos los productos seleccionados y el usaurio elije si finalizar comprar o comprar ( Esta opcion esta en ajustes de woo > Genereal. Redirigir al carrito
  3. Tan pronto añada al carrito un producto lo enviamos a la pagian a de pagar.

Para añadir la opcion 3. debemos de add este codigo en el function.

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 regiustra en nuestra pagina web lo redirigimos a la pagina 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 se loguea en la web y es redirigido a la pagina de tuurl

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

Personalizar el menu Login

Como siempre pues hacerlos por codigo o con plugin…  estas funciones son snippet puesdes descargarte un plugin para ello y meter este contenido

Mensaje en el pie de pagina

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 actualemente
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 'http://www.albertopampin.es';}
function change_wp_login_title() {return 'Visita a nuestros expertos en WEB en ';} 
//Engadimos na cabecera o css do logo que imos a utilizar no acceso
add_action('login_head', 'my_access_styles');
// personalizar url logo acceso
add_filter('login_headerurl', 'change_wp_login_url');
//Cambiar texto alt do logo de login
add_filter('login_headertitle', 'change_wp_login_title');

 

No traducir los articulos de las paginas en Polylang

A veces pasa que tienes una web con vasrios idiomas y quieres traducir todo menos las paginas del blog, el tema es que para mostrarlo te obliga a crearlos uno a uno y es un lio.

Se podria cambiar la url del blog en el idioma  y listo pero esta solucion me parace mas profecional. ( Me refiero a que si tenes dos idiomas español e ingles.) en el menu de ingles crear una url personalizada que apunte al español y ya estaria), aunque tiene sus desventajas por ejemplo si en la principal cargas los ultimos articulos no los miostrara en la version inglesa), pero con este codigo si lo hara.

En este caso cuando un usuario se regiustra en nuestra pagina web lo redirigimos a la pagina de welcome.

Añadir el siguiente codigo en el funtions.php

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 chekcout 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;
}

 

//Area 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’);

 

TRUCO CSS QUE ME GUSTAN

 

Menu Horizontal Movil:

Necesito poner en una tienda online un menu, que permita hacer scroll horizontal hacia la derecha/izquierda, comento los paso por encima…

  • Creas el menu
  • Lo añades a la cabecera.. ( sin puntos de ruptura.. solo horizontal)
  • Añades el codigo siguiente
    • selector ul { display: flex; flex-wrap: nowrap; white-space: nowrap; overflow-x: auto; }

Acordeos de Elementor Pro Cerrado

Si usas el elemento de acordeon dentro de elementor te daras cuenta quie por defeto lo pone abierto…  algo que a veces no es necesario.. Queremos que por defecto el acordeon aparezca cerrado y que al pulsar el usario en el texto se abra.

Primero debemos de Añadir encima del bloque leer mas 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 meter el codigo tal cual .. en linea.. que se vea que coja el formato sino te va a dar problemas.

Añadimos un widget (html y metemos el codigo y un acordeon abajo con el texto que necesitemos)

 

Actualizar la version de php en un hosting con varias paginas web

Normalmente los hosting «Buenos» permite actualizar la version de php en cada uno de los donios/Subdirectorios.. osea yo tengo 4 web dentro de mi hosting pero quiero tener una con la version 8 de php uy el resto con la 7.4…

Para ello debemos de añadir en el fichero .htaccess la siguiente linea..  ( cambiando 74 por la version que se necesite.. )

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

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

Como comprobar que se ha realizado correctamente.. Revisa tu hosting muchas veces tienen ese aparatdo en el cpanel o plesk .. sino tendras que hacer los siguiente.. vete a tu directorio ftp crear un archivo tipo info.php y le metes esta linea de codigo

<?php  phpinfo(); ?>

Luego llamas a ese archivo desde el navegador: Ej: tupaginaweb.com/info.php

Añadir icono casa en el menu superior

Esto se puede hacer con plugins o sin el.. en esta caso te comento sin plugin…

  1. Lo que necesitas es añadir el icono a tu pagina.. por ejemplo si usas elementor o divi.. o algun constructor ya tiene iconos por defecto.. en este caso al analizar el codigo con el inspector de elementor de tu navegador … te muestra su class.
  2. <i class=»fas fa-home»></i>
  3. Ese el el codigo que tienes que añadir en el menu inicio ( Etiqueta de navegación)

Otras Opciones

  • Si tu contructor no tiene iconos cosa rara, lo que hay que hacer es añadir el script de alguna fuente y hacer basicamente el mismo procedimiento por ejemplo , buscas en fontawesome un icono y te muestra la etiqueta que tienes que añadir al igual que en el caso anterior.. Osea añadir el script de Fontawesome y  meter el codigo que te dan y listo.
  • Si quieres  con un plugin pues utiliza este: ( Wp Menu Icons de Quadlayers)

 

Contenido mixto

Normalmente uso plugins para ello ( ver post mejores plugins wordpress) . nunca me ha hecho falta probarlo pero para la proxima lo pruebo 😉

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

 

Imagenes de fondo en articulos se repiten Elementor

Me pasa en todas las web, no se porque .. aunque lo cambien en elemntor pro y lo modifique no me lo permite.. las imagenes de fondo se repiten en horizontal, creo que es algo del theme (Astra), el tipo de capa de fondo que pongo… o de algunas versiones.. no se. Al final tengo que añadir casi siempre este codigo.

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

 

Modificar el texto de añadir al carrito

 

// Cambia el texto del botón Añadir al carrito en WooCommerce en la categorías de productos
//Modificar texto del botón Añadir al carrito

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’ );

 

 

Campos Obligatorios Checkout de Woocomerce

Tienes una tienda online el cliente elige el pedido y añade sus datos de facturacion… esos datos de facturacion son personalizable ( puedes quitar y poner )  los que necesites (Ver los mejores plugin de woocomerce en otro articulo), el tema es que al cambiarlos .. o similar puedes necesitar que un campo sea obligatorio o no… por ejemplo ciudad o codigo postal no quiero que sea obligatorio. COmo lo hacemos?

Debemos de añadir el siguiente codigo en el archivo funtion.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 pagina de checkOut

Que es el Check Out? Es la pagina de finalizar la compra donde se rellenan los datos de usuario.

Si un cliente esta comprando en la tienda y pulsa en añadir al carrito… puede interesarnos los siguientes pasos:

  1. Siga comprando y eligiendo lo que quiera…  ( Es la que viene por defecto en woo)
  2. Redirigir a la pagina del carrito ( Donde muestra todos los productos seleccionados y el usaurio elije si finalizar comprar o comprar ( Esta opcion esta en ajustes de woo > Genereal. Redirigir al carrito
  3. Tan pronto añada al carrito un producto lo enviamos a la pagian a de pagar.

Para añadir la opcion 3. debemos de add este codigo en el function.

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 regiustra en nuestra pagina web lo redirigimos a la pagina 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 se loguea en la web y es redirigido a la pagina de tuurl

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

Personalizar el menu Login

Como siempre pues hacerlos por codigo o con plugin…  estas funciones son snippet puesdes descargarte un plugin para ello y meter este contenido

Mensaje en el pie de pagina

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 actualemente
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 'http://www.albertopampin.es';}
function change_wp_login_title() {return 'Visita a nuestros expertos en WEB en ';} 
//Engadimos na cabecera o css do logo que imos a utilizar no acceso
add_action('login_head', 'my_access_styles');
// personalizar url logo acceso
add_filter('login_headerurl', 'change_wp_login_url');
//Cambiar texto alt do logo de login
add_filter('login_headertitle', 'change_wp_login_title');

 

No traducir los articulos de las paginas en Polylang

A veces pasa que tienes una web con vasrios idiomas y quieres traducir todo menos las paginas del blog, el tema es que para mostrarlo te obliga a crearlos uno a uno y es un lio.

Se podria cambiar la url del blog en el idioma  y listo pero esta solucion me parace mas profecional. ( Me refiero a que si tenes dos idiomas español e ingles.) en el menu de ingles crear una url personalizada que apunte al español y ya estaria), aunque tiene sus desventajas por ejemplo si en la principal cargas los ultimos articulos no los miostrara en la version inglesa), pero con este codigo si lo hara.

En este caso cuando un usuario se regiustra en nuestra pagina web lo redirigimos a la pagina de welcome.

Añadir el siguiente codigo en el funtions.php

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 chekcout 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;
}

 

//Area 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’);

 

TRUCO CSS QUE ME GUSTAN

 

Menu Horizontal Movil:

Necesito poner en una tienda online un menu, que permita hacer scroll horizontal hacia la derecha/izquierda, comento los paso por encima…

      • Creas el menu
      • Lo añades a la cabecera.. ( sin puntos de ruptura.. solo horizontal)
      • Añades el codigo siguiente
        • 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;}*/

Boton de hacer scroll:

Como añadir el tipico boton animado para indicarle al usaurio que haga scroll hacia abajo… la solucion mas simple es buscar un icono animado que lo haga.. pero me gusta hacerlo por css, y seria de la siguiente forma

  1. Añade una seccion de html
  2. pegamos el siguiente codigo <a class=»hero-mouse anchor» href=»#CHANGEME»><div class=»mouse-icon»><span></span></div></a>
  3. Añadimos el codigo en personalizacion 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;-webkit-animation: 1.2s ease infinite wheel-up-down;animation: 1.2s ease infinite wheel-up-down;}

@-webkit-keyframes wheel-up-down {0% {margin-top: 2px;opacity: 0;}30% {opacity: 1;}100% {margin-top: 20px;opacity: 0;}}

@keyframes wheel-up-down {0% {margin-top: 2px;opacity: 0;}30% {opacity: 1;}100% {margin-top: 20px;opacity: 0;}}

Añadir una marcara en la cabecerea

    • Existen varias formas de crear semparaciones, con las mascaras, bordes, con el divisor de formas de elementor, pero etsa me parece interesante, divi el bloque en dos y le añadi una linea con x grados.

       

      transform: skew(29deg, 0deg);

Existen varias formas de crear semparaciones, con las mascaras, bordes, con el divisor de formas de elementor, pero etsa me parece interesante, divi el bloque en dos y le añadi una linea con x grados.

 

transform: skew(29deg, 0deg);

Si te ha servido este articulo, te agradeceriamos un comentario

GRACIAS

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Share on facebook
Facebook
Share on whatsapp
WhatsApp
Share on email
Email
Share on twitter
Twitter
Share on linkedin
LinkedIn

Articulos relacionados

Facebook Instagram Linkedin

SERVICIOS

Formulario