Añadir class a la lista de categorías descriptivo en WordPress

Uno de las cosas que no me gustan de WordPress es la costumbre de añadir las clases a los elementos basados en el ID del mismo y no en su slug. Esto ocurre en todo, pero en este caso es con la lista de categorías generadas por wp_list_categories, devolviendo un HTML parecido a este:

  • Mi categor&iactute;a
  • Si queremos indicar estilos específicos para estas categorías, por ejemplo para añadir un icono a cada categoría, no nos sirve el class basado en ID, porque nos encontramos con que dependiendo de cuando se genere esta categoría, habrá que cambiar el css, siendo más lógico obtener un código como este:

  • Mi categor&iactute;a
  • Para poder conseguir esto, deberíamos añadir en nuestro functions.php lo siguiente.

    
    add_filter('wp_list_categories', 'mete_slug_en_class', 10, 2);
    function mete_slug_en_class($output, $args) {
      return preg_replace_callback('#]+)class="([^"]+)"([^>]*)>]+)>([^<]+)<\/a>#', function($m) {
        return ''.$m[5].'';
      }, $output);
    }
    

    Poner modo mantenimiento automáticamente en WordPress

    Para poner WordPress en modo mantenimiento, cuando actualizamos el theme o plugins y nos va a llevar un tiempo, o en otra ocasión, tan solo tendremos que crear un fichero con nombre .maintenance en el raíz de WordPress.

    Si además queremos mostrar un HTML específico, podemos crear el fichero /wp-content/maintenance.php que se cargará si existe.

    Actualización 12/02/2015

    El fichero .maintenance debe tener definida la variable $upgrading con un timestamp, según dice el código de WordPress, con el valor del momento en el que el fichero fue creado, pero luego viendo el código comprueba que hayan pasado 10 minutos. Yo en mi caso le he asignado el valor de time() y ya borraré yo el fichero cuando haya acabado.

    Añadir contenido a los datepicker de jQuery UI

    En algunas ocasiones es necesario añadir contenido al calendario que te ofrecer el datepicker de jQuery UI, por ejemplo añadir un combo que indice “horario mañanas/tarde”. Para conseguirlo será necesario ‘toquetear’ un poco el objeto jQuery.datepicker.

    Tendremos que hacer dos cosas: primero deberemos evitar que cuando se selecciona un día se cierre automáticamente el popup con el calendario y después tendremos que modificar el HTML que devuelve la clase.

    Para evitar el auto-cierre tenemos que añadir la opción showButtonPanel ya que nos ofrecerá el botón “Close” que nos permitirá cerrar el popup cuando hayamos indicado todos los campos necesarios. También es necesario modificar la función jQuery.datepicker._selectDate tal y como lo indican en StackOverflow:

    // Añadimos datepicker al input que queremos
    jQuery('.fecha')
      .datepicker({
        showButtonPanel: true,
        dateFormat: "DD, d MM, yy" 
      });
    
    // Modificamos la funcion _selectDate
    jQuery.datepicker._selectDateOverload = jQuery.datepicker._selectDate;
    jQuery.datepicker._selectDate = function(id, dateStr) {
        var target = jQuery(id);
        var inst = this._getInst(target[0]);
        inst.inline = true;
        jQuery.datepicker._selectDateOverload(id, dateStr);
        inst.inline = false;
        this._updateDatepicker(inst);
        // Usar el .html() para luego usar el .text() es porque si usas el regional de datepicker, te salen entidades html en vez de letras acentuadas
        // Se le añade el valor del nuevo campo select que hemos incluido
        target.val(jQuery('
    ').html(dateStr).text()+' @ '+jQuery('#horario').val()); }

    Bien, ya tenemos el evento onSelect modificado, ahora nos falta cambiar el HTML que se dibuja, para ello modificaremos la función jQuery.datepicker._generateHTML:

    jQuery.datepicker._generateHTMLExtended = jQuery.datepicker._generateHTML;
    jQuery.datepicker._generateHTML = function(inst) {
      var html = jQuery.datepicker._generateHTMLExtended(inst);
      var div = jQuery('
    ').html(html); div.find('table:first').after('

    Horario:

    '); return div.html(); } // Incluimos tambien un evento para que cuando se seleccione el horario, se modifique el campo input jQuery('#horario').live('change', function() { var $obj = jQuery('.fecha'); $obj.val($obj.val().replace(/@.*/, '@ '+jQuery(this).val())); });

    Listar posts de dos categorías en WordPress

    ¿Qué pasa si queremos mostrar los posts que pertenezcan a dos categorías a la vez? por ejemplo, mostrar los posts que sean de “PHP” y de “Noticias” o “PHP” y “Ejemplos”.

    La forma de hacerlo es fácil, primero debemos crearnos la estructura del permalink y que WordPress lo reconozco, en este caso será /categories/slug-category-A/slug-category-B. Para ello tenemos que dar de alta esta estructura el el $wp_rewrite y añadir la variable cats en los parámetros tratados por WordPress.

    // Crea la estructura para el rewrite
    function categories_rewrite_rules() {
      global $wp_rewrite;
      $rewrite_tag = '%categories%';
      // En la variable cats se almacenará 'slug-category-A/slug-category-B' que luego trataremos
      $wp_rewrite->add_rewrite_tag( $rewrite_tag, 'categories/([^/]+/[^/]+)', 'cats=' );
      $rewrite_keywords_structure = $wp_rewrite->root . "$rewrite_tag/";
      $new_rule = $wp_rewrite->generate_rewrite_rules( $rewrite_keywords_structure );
      $wp_rewrite->rules = $new_rule + $wp_rewrite->rules;
      return $wp_rewrite->rules;
    }
    
    // Permitimos que la variable cats se tenga en cuenta en las queries (URL) de WordPress
    function categories_variables( $public_query_vars ) {
      $public_query_vars[] = 'cats';
      return $public_query_vars;
    }
    
    // Hacemos un flush para que tenga en cuenta la nueva regla en el rewrite
    function me_flush_rewrite_rules() {
      global $wp_rewrite;
      $wp_rewrite->flush_rules();
    }
    
    add_action( 'init', 'me_flush_rewrite_rules' );
    add_action( 'generate_rewrite_rules', 'categories_rewrite_rules' );
    add_filter( 'query_vars', 'categories_variables' );

    Vale, ya tenemos creada la estructura, ahora solo falta modificar la query para que tenga en cuenta la nueva condición: que el post tenga la categoría A y la categoría B, para lo cual modificaremos el join de la query añadiendo un left join para cada categoría

    add_filter( 'posts_join' , 'categories_join' );
    
    function categories_join( $join ) {
      global $wpdb, $wp_query;
      if (get_query_var('cats')) {
        // Recuperamos los slugs de las categorias
        $cats =  explode('/', $wp_query->query_vars['cats']);
        $ids = array();
        // Por cada slug recuperamos la categoría y añadimos left join
        foreach($cats as $i=>$c) {
          $obj = get_category_by_slug($c);
          if ($obj) {
            $ids[] = $obj->term_id;
            $join .= " JOIN {$wpdb->term_relationships} r{$i} on r{$i}.object_id = {$wpdb->posts}.ID and r{$i}.term_taxonomy_id = {$obj->term_id} ";
          }
        }
      }
    
      return $join;
    }

    Y ya está, si accedieramos a nuestro blog http://miblog.com/categories/php/noticias veríamos los posts que están dentro de PHP y Noticias, con su paginación y demás.

    Si por un casual queremos utilizar una template en particular para esto, tan solo deberemos añadir lo siguiente a nuestro functions.php:

    function categories_template() {
        if (get_query_var('cats')) {
            include (TEMPLATEPATH . '/category-videos.php');
            exit;
        }
    }
    add_action('template_redirect', 'categories_template');

    O si queremos obtener el título de las categorías, podremos crearnos una función que nos lo devuelva:

    function get_cats_names() {
    
      if (get_query_var('cats')) {
        $cats =  explode('/', get_query_var('cats'));
        $names = array();
        foreach($cats as $i=>$c) {
          $obj = get_category_by_slug($c);
          if ($obj) {
            $names[] = $obj->name;
          }
        }
        return implode(' | ', $names);
      }
      return '';
    }

    Evitar problemas de sesión con IE y las aplicaciones Facebook en iframe

    Si desarrollais aplicaciones para Facebook y os encontráis con que Internet Explorer pierde la sesión, esto es debido a que Internet Explorer se hace un lío con las cookies y los iframes (que usa Facebook para incluir tu aplicación).

    La solución es muy sencilla: meter un javascript comprobando si usa IE y en ese caso, mostrar un banner diciendo que si no cambias de navegador y usas Firefox o Chrome te enviaremos un par de matones a tu casa que lo harán por ti. Desgraciadamente, el kilo de matón sale muy caro, y hay mucho usuario que ni sabe que es Firefox o Chrome, así que nos tocará añadir esto a nuestro código:

    header('P3P: CP="CAO PSA OUR"');

    Así de simple.

    Odio el Internet Explorer

    Vía / Stack Overflow

    Añadir tus propias opciones en Theme Customizer de WordPress 3.4

    WordPress 3.4 ha añadido la opción de theme customizer, la cual permite modificar las opciones del theme y darle el aspecto que deseas de forma muy visual y sencilla. En estos momentos, por lo que he podido ver, solo permite modificar el background y poco más. Pero viendo y pegándome con el código he podido ver cómo añadir mis propias opciones.

    El ejemplo que voy a poner permite elegir entre tres tipos de fuente de Google Webfonts y modificar las css para usar ese tipo de letra.

    Aviso que el código quizás no sea el mejor, pero realizar ingeniería inversa no siempre es fácil y tampoco he visto otro sitio donde lo hagan.

    Lo primero que se tiene que hacer es crear las opciones en el panel de customizer. Para ello hay que crear una sección (section “Fuente”) y asignarle unas opciones (settings) y añadirle unos controles (control) a las opciones. Existen controles por defecto, el de elegir el color está muy bien, pero en mi caso me he creado uno personalizado que muestra un control radio modificado para que el label del radio muestre la tipo de letra en cuestión.

    add_action('customize_register', 'mi_theme_customizer', 1);
    function mi_theme_customizer() {
      global $customize;
    
      if($customize) {
        // La seccion
        $customize->add_section('mi_font', array(
          'title'=>'Fuente'
        ) );
        // La opcion
        $customize->add_setting( 'mi_font_family', array(
          'control' => 'color', // esto ni idea de para que sirve, realmente no es un control tipo color y funciona
          'type' => 'option'
        ) );
    
        $customize->add_control( 'mi_font_family', array(
          'settings' => 'mi_font_family',
          'section'  => 'mi_font',
          'type'     => 'font_radio',
          'choices'  => array('Trocchi', 'Great Vibes', 'Bad Script') // las fuentes de google
         ) );
            
      }
    }

    Una vez creado los controles, añado el código que dibuja (render) mi control personalizado, primero añado los css para que dibuje las fuentes de Google y luego dibujo el control en sí. He usado Javascript en vez de PHP porque parece ser que el código no está del todo completo, y no hay un filtro para crear tu propio control, por lo que tengo que añadirlo mediante jQuery a un elemento para que el Javascript del customizer tenga en cuenta cuando selecciono una opción y refresque el preview del theme.

    // Añado los css de google webfonts mediante javascript para tener luego el nombre de las fuentes y usarlo para crear los radio buttons
    add_action('customize_controls_print_scripts', 'mi_customize_scripts');
    function mi_customize_scripts() {
      $fonts = array('Trocchi', 'Great Vibes', 'Bad Script');
    ?>
    
    type == 'font_radio') {
        if ( empty( $control->choices ) )
          return;
    
        $name = '_customize-font-radio-' . $control->id;
    
        ?>
        label ); ?>
        

    Y ya por último solo falta usar la opción guardada para mostrarla en el theme

    add_action('wp_head', 'mi_custom_styles');
    function mi_custom_styles() {
      $option = get_option('mi_font_family');
      // El customizer modifica este filtro para refrescar el preview
      $option = apply_filters('option_mi_font_family', $option);
      if ($option) {
        echo "";
        echo '';
      }
    }

    Y esto es todo, no sé si hay una forma mejor de hacerlo, estoy abierto a sugerencias.

    Progreso de subida de ficheros únicamente con HTML5

    Uno de los mayores problemas con los que nos hemos encontrado a la hora de hacer aplicaciones que suben ficheros, es mostrar al usuario cuánto se ha subido y así poder saber cuánto queda. Ahora con HTML5 y XMLHttpRequest Level 2 podemos mostrarlo sin necesidad de parte del servidor.

    El script hace uso de Evento de Progreso de HTML5 para poder mostrar:

    • total: total de bytes
    • loaded: bytes subidos
    • lengthComputable: indica si el tamaño del fichero es conocido
    • transferSpeed: velocidad de transferencia
    • timeRemaining: tiempo que falta (en formato Date)

    Por ahora solo es compatible con Firefox, Chrome y Safari.

    En el post lo explican con gran detalle.

    Html5 File Upload with Progress

    Enlaces de navegación en edición de posts en WordPress

    Algo que me desespera es tener que editar varios posts seguidos en WP (sobre todo antes del lanzamiento) y tener que ir del post actual, a la lista de post y elegir el siguiente post que necesito editar. Por ello he hecho este pequeño script que incluido en el functions.php incluye dos enlaces en la cabecera que apuntan a la edición del post anterior y al siguiente:

    function add_navigation_edit_posts() {
      if(preg_match('#wp-admin/post\.php#', $_SERVER["SCRIPT_NAME"]) && isset($_GET['post']) &&  isset($_GET['action']) && $_GET['action'] == 'edit') {
        global $post;
        if(!empty($post) && $post->post_type == 'post') {
          foreach(array(true, false) as $prev) {
            $p = get_adjacent_post(false, '', $prev);
            if (!empty($p)) {
              echo '';
            }  
          }
        }
      }
    }
    add_action('admin_head', 'add_navigation_edit_posts');

    Actualiza tu theme de WordPress desde SVN

    Si trabajas realizando proyectos en WordPress en el que el código se aloja en un servidor usando SVN, una forma sencilla de actualizar tu theme con los últimos cambios es mediante este sencillo y no-seguro plugin.

    El plugin añade una opción de menú al Settings del Dashboard de WP, el cual te servirá para indicar el servidor SVN, usuario, contraseña y el path que corresponde a la carpeta themes de WP. El plugin se conectará al repositorio SVN y recuperará las carpetas que se encuentran en el path anterior y comprobará si las carpetas corresponden a themes instalados, mostrarás una lista con los themes encontrados junto a un botón que permite actualizar todo el theme.

    Digo que no es seguro porque no controlo los permisos de los usuarios ni otras cuestiones, pero si estás interesado en ello supongo que no te costará mucho meterle mano al código:

    // Adding Admin menu
    if ( is_admin() ){
      add_action('admin_menu', 'svn_update_menu');
      add_action( 'admin_init', 'svn_update_register_settings' );
    
    }
    
    function svn_update_register_settings() {
      register_setting( 'svn_up_option-group', 'svn_username' );
      register_setting( 'svn_up_option-group', 'svn_password' );
      register_setting( 'svn_up_option-group', 'svn_repository' );
      register_setting( 'svn_up_option-group', 'svn_theme_path' );
      if ($_GET['page'] == 'svn-update/svn-update.php') {
        require ('phpsvnclient/phpsvnclient.php');
        $phpsvnclient = new phpsvnclient(get_option('svn_repository'), get_option('svn_username'), get_option('svn_password'));
        $files = $phpsvnclient->getDirectoryFiles('/');
        $svn_themes = array();
    
        $themes = array();
    
        foreach(get_themes() as $k=>$t) $themes[$t['Template']] = array($k, $t["Template Dir"]);
    
        if (is_array($files)) {
          foreach($files as $f) {
            if ($f['type'] == 'directory') {
              if (isset($themes[$f['path']])) $svn_themes[$f['path']] = $themes[$f['path']];
            }
          }
        }
        update_option('svn_themes', $svn_themes);
        if (isset($_GET['svn_update'])) {
          $path = $_GET['svn_update'];
          $theme_path = WP_CONTENT_DIR . '/themes/';
          $files = $phpsvnclient->getDirectoryFiles($path);
          foreach($files as $f) {
            if ($f['type'] == 'file') {
              file_put_contents($theme_path.$f['path'], $phpsvnclient->getFile($f['path']));
            }
          }
          add_action('admin_notices', 'showSVNUpdated');
        }
      }
    }
    
    function showSVNUpdated() {
      echo '

    Theme updated

    '; } function svn_update_menu() { add_options_page('SVN Update Options', 'SVN Update', 8, __FILE__, 'svn_update_options'); } function svn_update_options() { ?>

    SVN Update Options

    Username
    Password
    Repository
    Theme path

    Available Themes

    No themes found in SVN repository instaled in WordPress

    '; } else { echo '
      '; foreach($themes as $k=>$t) { echo '
    • /'.$k.' => '.$t[0].' Update
    • '; } echo '
    '; } ?>

    Este plugin necesita la librería PHP SVN Client para acceder al SVN, tan solo hay que meterlo en el mismo directorio que el plugin. Le faltan muchas cosas al plugin, pero ni tengo ganas ni tengo tiempo.

    JSZip: crear ficheros ZIP mediante Javascript

    Interesante librería que nos permite crear ficheros ZIP desde Javascript, con unas simples líneas de código podemos crear zips con ficheros de texto, imágenes, crear directorios…

    var zip = new JSZip();
    zip.add("Hello.txt", "Hello World\n");
    img = zip.folder("images");
    img.add("smile.gif", imgData, {base64: true});
    content = zip.generate();
    location.href="data:application/zip;base64,"+content;

    El único problema que hay es a la hora de generar el nombre del fichero: Firefox crea un fichero con un nombre extraño y acabado en .part, Safari lo nombra “Unknown” sin extensión, Chrome “download.zip” e IE directamente ni funciona la librería.

    JSZip

    Vía / @devongovett