Revertir orden de artículos por orden cronológicos solo en la pagina de inicio

WordPress por defecto muestra los posts (entradas) empezando por la ultima (por la fecha) y terminando por el mas antiguo.

Para revertir el orden solo en la pagina de inicio (ASC) parte blog, conservando el orden por defecto (DESC) para los demás listados como categorías, tags, search etc.:

function posts_reverse_order_home ( $query ) {
    if ( ( $query->is_main_query() && !is_admin()) && ( is_home() || is_front_page() )) {
        $query->set( 'order', 'ASC' );
        return $query;
    }
    else {
        return $query;
    }
}
add_action( 'pre_get_posts', 'posts_reverse_order_home' );

Woocommerce: No reducir stocks en pedidos con pago Transferencia bancaria

Muchos pedidos con forma de pago “transferencia bancaria” nunca se recibe la transferencia.

Las funciones siguientes hacen que el stocks no se reduzca automáticamente en los pedidos con el método de pago “transferencia bancaria”, en cambio si se actualiza el stock cuando el pedido cambia de estatus de “en espera” a “en proceso” o “completado”.

// NO ACTUALIZAR STOCKS EN PEDIDOS POR TRANSFERENCIA BANCARIA 
function wcs_do_not_reduce_onhold_stock( $reduce_stock, $order ) {
    if ( $order->has_status( 'on-hold' ) && $order->get_payment_method() == 'bacs' ) {
        $reduce_stock = false;
    }
    return $reduce_stock;
}
add_filter( 'woocommerce_can_reduce_order_stock', 'wcs_do_not_reduce_onhold_stock', 10, 2 );


// ACTUALIZAR STOCKS EN PEDIDOS POR TRANSFERENCIA BANCARIA CUANDO ESTADO PASA A COMPLETADO
function order_stock_reduction_based_on_status( $order_id, $old_status, $new_status, $order ){
    // Only for 'processing' and 'completed' order statuses change
    if ( $new_status == 'processing' || $new_status == 'completed' ) {
    $stock_reduced = get_post_meta( $order_id, '_order_stock_reduced', true );
        if( empty($stock_reduced) && $order->get_payment_method() == 'bacs' ){
            wc_reduce_stock_levels($order_id);
        }
    }
}
add_action( 'woocommerce_order_status_changed', 'order_stock_reduction_based_on_status', 20, 4 );

Número de etiquetas a mostrar en widget Tag Cloud

Configurar el número de etiquetas a mostrar en el widget Nube de etiquetas (Tag Cloud):

function set_widget_tag_cloud_args($args) {
    $args['number'] = 80;   // Mostrar 80 etiquetas
    $args['smallest'] = 8;
    return $args;
}
add_filter('widget_tag_cloud_args','set_widget_tag_cloud_args');

 

Mas parámetros: https://codex.wordpress.org/Function_Reference/wp_tag_cloud

EasyEngine WordPress PHP 7, Let’s Encrypt y Nginx cache

Instalar WordPress Multisitios con PHP 7, Let’s Encrypt y Nginx cache con EasyEngine:

https://ebustos.com/linux/easyengine-wordpress-multisitios-con-php-7-lets-encrypt-y-nginx-cache/

https://ebustos.com/linux/instalacion-global-de-composer-dependency-manager-para-php/

 

Velocidad web: https://tools.pingdom.com/#!/JkNJM/https://ebustos.com

Números aleatorios con Javascript en servidor Nginx Fastcgi Cache

Nginx Fastcgi Cache no genera números aleatorios en PHP debido al cache del código HTML generado.

Ejemplo para mostrar imágenes aleatorias en un slider diferentes en cada reload de la pagina: https://pachamama.pe/

<php 
    $img_width = get_custom_header()->width;
    $img_height = get_custom_header()->height;
?>


<script>
// if only one argument is passed, it will assume that is the high
// limit and the low limit will be set to zero
// so you can use either r = new randomeGenerator(9);
// or r = new randomGenerator(0, 9);
function randomGenerator(low, high) {
    if (arguments.length < 2) {
        high = low;
        low = 0;
    }
    this.low = low;
    this.high = high;
    this.reset();
}

randomGenerator.prototype = {
    reset: function() {
        this.remaining = [];
        for (var i = this.low; i <= this.high; i++) {
            this.remaining.push(i);
        }
    },
    get: function() {
        if (!this.remaining.length) {
            this.reset();
        }
        var index = Math.floor(Math.random() * this.remaining.length);
        var val = this.remaining[index];
        this.remaining.splice(index, 1);
        return val;        
    }
}


jQuery( document ).ready(function() {
    var r = new randomGenerator(1, 50);

    var img_url1 = "/wp-content/img/slide/" + r.get().toString() + "-sl.jpg";
    var img_url2 = "/wp-content/img/slide/" + r.get().toString() + "-sl.jpg";
    var img_url3 = "/wp-content/img/slide/" + r.get().toString() + "-sl.jpg";

    var img_width = "<?php echo $img_width; ?>";
    var img_height = "<?php echo $img_height; ?>";

    jQuery('#img_slide1').attr( { src: img_url1, title: 'MADRE TIERRA', alt: '', width: img_width, height: img_height} );
    jQuery('#img_slide2').attr( { src: img_url2, title: 'MADRE TIERRA', alt: '', width: img_width, height: img_height} );
    jQuery('#img_slide3').attr( { src: img_url3, title: 'MADRE TIERRA', alt: '', width: img_width, height: img_height} );

    jQuery("#wowslider-container").wowSlider({effect:"rotate",prev:"",next:"",duration:20*100,delay:20*100,width:img_width,height:img_height,autoPlay:true,stopOnHover:false,loop:false,bullets:true,caption:true,captionEffect:"slide",controls:true,logo:"",images:0});
});
</script>

Mostrar tooltip del texto si no cabe en una linea

Cortar los textos que sobre pasan una linea pero mostrar el texto completo en tooltip.

Ejemplo para sidebar widget Recent Posts

En style.css:

#recent-posts-2 > ul > li a {
    display:inline-block;
    width:300px;
    white-space: nowrap;
    overflow:hidden !important;
    text-overflow: ellipsis;
    overflow-wrap: break-word;
}


[role="tooltip"]{
    visibility: hidden;
}

 

En plugin o functions.php:

Incluir las dependencias kendoTooltip.

function add_custom_scripts () {
    wp_enqueue_style( 'kendo.common', plugins_url() . 'https://ebustos.com/wp-content/plugins/eb/customsplugins/kendo/kendo.common.min.css' );
    //wp_enqueue_style( 'kendo.mobile.all', plugins_url() . 'https://ebustos.com/wp-content/plugins/eb/customsplugins/kendo/kendo.mobile.all.min.css' );
    wp_enqueue_style( 'kendo.rtl', plugins_url() . 'https://ebustos.com/wp-content/plugins/eb/customsplugins/kendo/kendo.rtl.min.css' );
    wp_enqueue_style( 'kendo.silver', plugins_url() . 'https://ebustos.com/wp-content/plugins/eb/customsplugins/kendo/kendo.silver.min.css' );
    wp_enqueue_script( 'kendo', plugins_url() . 'https://ebustos.com/wp-content/plugins/eb/customsplugins/kendo/kendo.all.min.js', array ( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'add_custom_scripts' );

 

function kendoTooltip ( $contenair=".widget_recent_entries", $elem = "li a") {
    $js = "
        <script>
              jQuery('$contenair').kendoTooltip({
                filter: '$elem',
                show: function(e){
                  if(this.content.text() !=''){
                    jQuery('[role=\"tooltip\"]').css('visibility', 'visible');
                  }
                },
                hide: function(){
                  jQuery('[role=\"tooltip\"]').css('visibility', 'hidden');
                },
                content: function(e){
                  var element = e.target[0];
                  if(element.offsetWidth < element.scrollWidth){
                    return e.target.text();
                  }else{
                    return '';
                  }
                }
              })
        </script>
        ";
    return $js;
}

 

En footer.php:

<?php echo kendoTooltip(); ?>

Añadir Tamaño de las imágenes personalizado

Añadir a la biblioteca de medias de WP tamaño de imagen personalizado:

function eb_after_setup_theme () {
    add_image_size( 'content-slide', 847, 350, true );
}
add_action( 'after_setup_theme', 'eb_after_setup_theme' );

function eb_image_size_names_choose( $sizes ) {
    $custom_sizes = array(
        'content-slide' => 'Content Slide'
    );
    return array_merge( $sizes, $custom_sizes );
}
add_filter( 'image_size_names_choose', 'eb_image_size_names_choose' );

Consultar:

https://developer.wordpress.org/reference/functions/add_image_size/

Añadir hojas de estilo y javascript

Hook WP para añadir hojas de estilo CSS y scripts Javascript/jQuery a colocar en plugin o functions.php del tema:

function add_custom_scripts_eb () {
    // Estilos CSS
    wp_enqueue_style( 'micss', plugins_url() . '/eb/plugins/dir/css/estilos.css' );

    // jQuery script
    wp_enqueue_script( 'mijs', plugins_url() . '/eb/plugins/dir/js/script.js', array ( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'add_custom_scripts_eb' );