programación

Renombrar menus en woocomerce

Si estás personalizando una tienda online para un cliente o para ti mismo, puede ser más que interesante, a veces necesario, que cambies los nombres de algunos menús que, por defecto, pueden no ser todo lo intuitivos que debieran.

En el siguiente ejemplo encontrarás el modo de cambiar el menú de administración principal de WooCommerce, donde están todos los ajustes, y el de Productos. Simplemente personaliza el código según tus necesidades y lo añades a tu plugin de utilidades o al archivo functions.php del tema activo en la tienda online:

//Cambio de menús admin de WooCommerce
add_action( 'admin_menu', 'ayudawp_renombra_menu_woo', 999 );
function ayudawp_renombra_menu_woo() 
{
    global $menu;
    $woo = the_array_search( 'WooCommerce', $menu );
    $products = the_array_search( 'Productos', $menu );
    if( !$woo )
        return;
    $menu[$woo][0] = 'Configuración de la tienda'; //Sustitución para Woocommerce
    $menu[$products][0] = 'Artículos'; //Sustitución para Productos
}
 
function the_array_search( $find, $items ) 
{
    foreach( $items as $key => $value ) 
    {
        $current_key = $key;
        if( 
            $find === $value 
            OR ( 
                is_array( $value )
                && the_array_search( $find, $value ) !== false 
            )
        ) 
        {
            return $current_key;
        }
    }
    return false;
}

wordpress – Que es un shortcode y como crearlo

Qué es un shortcode de WordPress

Un shortcode es una herramienta que nos permite añadir funcionalidad al editor de publicación WYSIWYG (What you see is what you get) de WordPress.

Digamos que es un alias o un atajo de texto que permite lanzar cierta funcionalidad cuando sea ejecutado por WordPress, y generalmente se representa con el nombre del shortcode entre corchetes. Por ejemplo así: [nombre_shortcode].

Así, cuando nosotros escribimos en el editor de texto un shortcode, se ejecutará lo que hayamos definido para ese elemento.

Usos de un shortcode

El principal uso de un shortcode es el de agilizar la tarea de creación de contenidos muy repetitivos en un sitio. Por ejemplo, imagina que tienes un blog y todas las entradas las acabas con el mismo párrafo de despedida. En ese caso quizá una buena idea crear un shortcode. Pero no solo por no tener que escribir siempre el mismo párrafo: sobretodo por si algún día lo quieres modificar. Si has creado un shortcode, ese texto se actualizará automáticamente en todos los posts donde haya sido representado.

¿Empiezas a ver ya el poder de todo esto? Pues venga, vamos a crear un shortcode para WordPress:

Cómo crear un shortcode

Vamos a crear un shortcode de ejemplo donde agradecemos a nuestro usuario que haya leído nuestro artículo y le informamos que puede escuchar nuestro podcast, por ejemplo:

function shortcode_despedida() {
return '<p>Gracias por haber leído la píldora de hoy, y recuerda que puedes escucharme en el podcast de <strong>Product Designer</strong>, donde hablamos de diseño, desarrollo y marketing.</p>';
}
add_shortcode('despedida', 'shortcode_despedida');

Esta función que acabamos de crear puedes añadirla en el archivo functions.php de tu tema, o mejor aún, en un plugin externo donde desarrollar toda la funcionalidad de tu sitio.

Para aplicar el shortcode, tan solo tenemos que escribir el nombre del mismo entre corchetes en el editor de textos de WordPress, ya sea para un post, o en una página. En nuestro ejemplo escribiremos [despedida] en el editor. Y aparecerá esto en todos los sitios donde hayamos escrito ese shortcode:

Problemas de los shortcode

Cuando utilizamos un shortcode, estamos añadiendo contenido en nuestro sitio que será interpretado y ejecutado si la función para ese shortcode existe. Pero si nuestro usuario o nosotros mismo cambiamos de theme, y el shortcode está definido en el propio theme tendremos un problema en el contenido del sitio. Ya que todos esos shortcodes que hacían cosas chulas y útiles, de repente se transforman en un texto del tipo: [boton_principal] así, tal cual, arruinando el aspecto y el contenido del sitio web.

Por eso te recomiendo que si usas temas comprados en sitios como Themeforest y compañía: no uses sus shortcodes, ya que cuando cambies de tema, tendrás un problema.

Usar el Thickbox nativo de WordPress

WordPress incluye en sus librerías el sistema de ventana modal Thickbox, el cual podemos aprovechar usando el siguiente código en el archivo functions.php de nuestro tema:

function add_themescript(){
 if(!is_admin()){
 wp_enqueue_script('jquery');
 wp_enqueue_script('thickbox',null,array('jquery'));
 wp_enqueue_style('thickbox.css', '/'.WPINC.'/js/thickbox/thickbox.css', null, '1.0');
 }
}
add_action('init','add_themescript');

Adicionalmente, para llamar las imágenes de precarga y cierre de la ventana modal debemos incluir en nuestro footer.php, antes de la etiqueta wp_footer() lo siguiente:

<script type="text/javascript">
if ( typeof tb_pathToImage != 'string' )
{
    var tb_pathToImage = "<?php echo get_bloginfo('url').'/wp-includes/js/thickbox'; ?>/loadingAnimation.gif";
}
if ( typeof tb_closeImage != 'string' )
{
    var tb_closeImage = "<?php echo get_bloginfo('url').'/wp-includes/js/thickbox'; ?>/tb-close.png";
}
</script>

Para usar el thickbox en un enlace, ya sea imagen o contenido web la estructura de la etiqueta de vínculo debe ser algo como:

<a href="http://mipagina.com/seccion?height=450&width=600&TB_iframe=true" class="thickbox">Haz clic aquí</a>

 Uso condicional del script

Como nos sugiere Yoast, podemos condicionar el uso del script para páginas específicas así:

function yst_conditional_thickbox() {
  global $post;
  if (is_singular() &&
    strpos($post->post_content,'class="thickbox"') !== false) {
      wp_enqueue_script('thickbox');
      wp_enqueue_style('thickbox');
  }
}
add_action('wp_print_styles','yst_conditional_thickbox');
Scroll al inicio