miércoles, 11 de diciembre de 2013

WordPress Plugin - Qtranslate, la clave multidioma

Lo primero es descargarse el plugin, he instalarlo (yo siempre lo suelo hacer mediante el cliente FTP)
Enlace de descarga en repositorio oficial de wordpress

El siguiente paso es poner activo y como predefinido el Español.
Lo siguiente confirmar que las URL's estan con el formato deseado

Es muy posible que la última versión no funcione en tu instalación de WordPress, aquí va un enlace a la última versión en desarrollo, y a la tabla de equivalencias entre versiones de wordpress y versiones de qtranslate:
Tabla de versiones

Para la cuestión de añadir idiomas que no estan por defecto, enlace a la tabla de códigos para poner en el formulario de creación
Códigos de idiomas

Ya está listo para empezar a  poner nuestra web primero:
  • Contenido: es bastante sencillo, hay que rellenar en cada campo (título y contenido) en su respectivo idioma, viene bien, porque esto será lo que tendrán que ir traduciendo cada administrador del contenido futuro en la web, que se pretende que no sea el mismo que su creador, ahí la gracia de usar wordpress.
  • Widgets, menus, título/descripción de la web y demás datos puestos desde la administración, habrá que separar las traducciones mediante el uso de [:ID], para muestra un botón: [:es]Esto es Esparta[:ca]Això es Esparta[:en]This is Esparta
  • Contenido de la plantilla: Es la parte más usado para los desarrolladores, un poco más larga, pero que sólo habrá que usar en el momento del desarrollo de la web,y  más tarde en la creación de algún widget o plugin necesario, aquí va otro "botón": <code><?php echo "<!--:es-->Esto es Esparta<--:--><!--:en-->This is Esparta<--:--><!--:ca-->Això es Esparta<--:-->" ;?></code>
Selector idioma en la web hay 2 maneras:
  1. Usar el widget por defecto, con opciones básicas de mostrar nombre, bandera o ambas
  2. Crearlo por código, con un poco de html y css, es simplemente poner enlaces según la opcion que elijamos en  "Configuraciones Avanzadas --> Modo de modificación de URL" y ya darle la funcionalidad/apariencia que queramos.
Con esto en principio ya tenemos todo listo para que nuestra web se visualize en los idiomas que queramos.

Un punto que he visto en un post de Creativasfera (por cierto, blog muy recomendado de seguir), lo añado aquí, sería para elegir que código ejecutar según el idioma en el que estés, usa el ejemplo del logo
<code>
 <?php 
  if(qtrans_getLanguage() == "es") {
echo    "<img src=\"" .  get_bloginfo('stylesheet_directory') . "/images/nombre_imagen_es.jpg" />"   ;
}
?>
 <?php 
  if(qtrans_getLanguage() == "en") {
echo    "<img src=\"" .  get_bloginfo('stylesheet_directory') . "/images/nombre_imagen_en.jpg" />"     ;
}
?>
</code>

Esto se podría incluso a cargar distintas cabeceras
<code>
 <?php 
  if(qtrans_getLanguage() == "es") { get_header();
}
?>
 <?php 
  if(qtrans_getLanguage() == "en") { get_header("ingles"}
?>
</code>Y a partir de ahí, pues distintas zonas de widgets, etc, hasta lo que se te ocurra.
Enjoy it!

jueves, 4 de abril de 2013

Manual ShortCodes en WordPress (completísimo) III

Última parte del manual completo del manejo de los shortcodes (atajos) en wordpress, en esta parte vamos a introducir un uso amigable y sencillo de estos desde el editor de contenido tinymce.
Al fin y al cabo, lo que se pretende es que el autor de las entradas necesite saber lo mínimo posible sobre código, y si lo necesario es nada, mejor para todos.
Habrá que hacer los siguiente:
  • Crear un archivo JavaScript para la creación del botón.
  • Registrar el archivo y el botón.
 El archivo JS se usa para registrar el plugin con la API TinyMCE.
Creamos un archivo nuevo llamado my-short-code.js en el directorio /js/ de nuestra plantilla (si no existe, crearlo) y ponemos lo siguiente:

(function() {
   tinymce.create('tinymce.plugins.recentposts', {
      init : function(ed, url) {
         ed.addButton('recentposts', {
            title : 'Recent posts',
            image : url+'/recentpostsbutton.png',
            onclick : function() {
               var posts = prompt("Number of posts", "1");
               var text = prompt("List Heading", "This is the heading text");

               if (text != null && text != ''){
                  if (posts != null && posts != '')
                     ed.execCommand('mceInsertContent', false, '[recent-posts posts="'+posts+'"]'+text+'[/recent-posts]');
                  else
                     ed.execCommand('mceInsertContent', false, '[recent-posts]'+text+'[/recent-posts]');
               }
               else{
                  if (posts != null && posts != '')
                     ed.execCommand('mceInsertContent', false, '[recent-posts posts="'+posts+'"]');
                  else
                     ed.execCommand('mceInsertContent', false, '[recent-posts]');
               }
            }
         });
      },
      createControl : function(n, cm) {
         return null;
      },
      getInfo : function() {
         return {
            longname : "Últimos post",
            author : 'Antonio García',
            authorurl : 'http://mipasapersonal.blogspot.es',
            infourl : 'http://www.coodex.es',
            version : "1.0"
         };
      }
   });
   tinymce.PluginManager.add('recentposts', tinymce.plugins.recentposts);
})();



En el código básicamente lo que se hace es crear un nuevo plugin, se piden los dos parámetros, y según lo que introduzcamos se inserta un código en el editor, se crea un botón con una imagen y al final se añade nuestro plugin al gestor de plugins del TinyMCE.


Ya solo queda registrar el botón (lo añadimos a la lista de botones del editor):
function register_button( $buttons ) {
   array_push( $buttons, "|", "recentposts" );
   return $buttons;
}

y enlazar nuestro JS creado al ppio:
function add_plugin( $plugin_array ) {
   $plugin_array['recentposts'] = get_template_directory_uri() . '/js/mi-short-code.js';
   return $plugin_array;
}



Y aquí el enlace "fuente" de este manual (en inglés), obviamente, todo esto no me lo he inventado ni a salido de la nada :D
http://wp.smashingmagazine.com/2012/05/01/wordpress-shortcodes-complete-guide/
Al final de éste, hay unos cuantos ejemplos más de shortcodes, como para añadir un googlemaps, por ejemplo, y también unos plugins que van bien para crear shortcodes sin tener que tocar tanto código como ahora.

lunes, 1 de abril de 2013

Empezando a trastear con windows 8

Bueno, lo primero que he conseguido a sido que de repente, la app maravillosa de IE 10 de "Mi Metro" haya "desaparecido", así que, fácilmente, 1º infiernas al nuevo SO, luego dudas de tu nueva máquina, luego razonas que no es culpa de ellos, que lo habrás desinstalado mientras estabas poseído y no lo recuerdas, y ya al final piensas que "tal vez" haber instalado Chrome (me imagino que con otros navegadores pasará igual) haya tenido algo que ver.
Pues si, aunque te lo bajes, lo instales, lo ancles, etc... no volverá a salir igual que al principio, se te abrirá con el estilo ventana antigua, dentro del escritorio, no con ese estilo tan "indomable" desde un sobremesa.
La solución, una vez conocida, es bastante fácil, rápida y sencilla (para cuando vuelvas a instalar otro navegador, y te vuelva a pasar.)
Vas a tu ventana anticuada de IE, le das a al icono de la tuerca --> Opciones de internet --> Programas --> Establecer asociaciones --> Seleccionar todos y Clic en guardar.
Voilà, solucionada 1ª liadita con "Mi Metro" que se ha ganado una publicación, voy a seguir trasteando a ver cuantas liaditas por día consigo.
Nota: también he leido que la resolución mínima para ver la versión indomable de IE 10 es 1024x768, revísalo, por si nunca has llegado a verlo así.


domingo, 17 de febrero de 2013

Manual ShortCodes en WordPress (completísimo) II

En esta entrada vamos a ver el potencial de los shortcodes (atajos) mediante su flexibilidad para poder ser parametrizados, siguiendo con el ejemplo sencillo, ahora vamos a ver como sería para poder elegir cuantos post mostrar de lo últimos publicados.
Obtenemos los parámetros ('1' por defecto), hacemos la consulta y mostramos la lista, es lo que hace el siguiente código:
function recent_posts_function($atts){
   extract(shortcode_atts(array(
      'posts' => 1,
   ), $atts));
   $return_string = '<ul>';
   query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => $posts));
   if (have_posts()) :
      while (have_posts()) : the_post();
         $return_string .= '<li><a href="'.get_permalink().'">'.get_the_title().'</a></li>';
      endwhile;
   endif;
   $return_string .= '</ul>';
   wp_reset_query();
   return $return_string;
}

Podemos meter tantos parámetros como querámos, pero bueno, ahora vemos el ejemplo funcionar, en nuestra entrada de prueba podemos llamar a nuestro atajo así desde el contenido directamente:
[recent-posts posts="5"]
Actualizamos la página, y veremos lo que nos muestra :D

Ahora vamos a ir un paso más allá, y es pasarle también el contenido entre etiquetas como parámetro y mostrarlo como título de nuestro 'atajo'.
Esto en nuestro archivo shortcodes.php:
function recent_posts_function($atts, $content = null) {
   extract(shortcode_atts(array(
      'posts' => 1,
   ), $atts));

   $return_string = '<h3>'.$content.'</h3>';
   $return_string .= '<ul>';
   query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => $posts));
   if (have_posts()) :
      while (have_posts()) : the_post();
         $return_string .= '<li><a href="'.get_permalink().'">'.get_the_title().'</a></li>';
      endwhile;
   endif;
   $return_string .= '</ul>';

   wp_reset_query();
   return $return_string;
}

Y esto en nuestra entrada/página:
[recent-posts posts="5"]Cabecera atajo[/recent-posts]

Y ya por útlimo en esta entrada, ver cómo usar los atajos también en los widgets, ya que de forma predeterminada son ignorados en el sidebar, pero se pueden habilitar añadiendo una solo línea de código: 
add_filter('widget_text', 'do_shortcode');

Para la 3ª y última parte del manual de los shortcodes en wordpress vamos a dejar cómo añadirlos en el editor de entradas y páginas, para un uso más sencillo y amigable por parte del usuario final.

martes, 12 de febrero de 2013

Manual ShortCodes en WordPress (completísimo) I

Los shortcodes se introdujeron a partir de la versión 2.5 de WP. Facilitan la repetición de pequeñas tareas repetitivas en las plantillas (como publicar en Twitter, embeber videos, poner publicidad, un mapa de google, una enmaquetación específica, etc.).
Funciona poniendo un código corto entre corchetes [código-corto] (como próximamente veremos) que luego es sustituido (automáticamente por WO) por esos pequeños fragmentos de código o hooks.
El código siguiente se puede poner en en archivo functions.php pero yo prefiero añadir sólo esta línea a ese archivo:
include(TEMPLATEPATH . '/includes/shortcodes.php');
y poner en shortcodes.php el código, para que de esa manera sea luego un poco más cómodo exportalos a otras plantillas o salvarlos de alguna actualización.
Se crea en pocos y sencillos pasos para un caso 'base',
  • Se crea la función (callback) llamada. En este ejemplo nos devuelve una cadena con el enlace y el nombre del último post introducido.
function recent_posts_function() {
   query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => 1));
   if (have_posts()) :
      while (have_posts()) : the_post();
         $return_string = '<a href="'.get_permalink().'">'.get_the_title().'</a>';
      endwhile;
   endif;
   wp_reset_query();
   return $return_string;
}

  • Se "registra" el atajo o shortcode 
function register_shortcodes(){
   add_shortcode('recent-posts', 'recent_posts_function');

  •  Se añade el gancho 'hook'
add_action( 'init', 'register_shortcodes'); 

Hasta aquí la manera de crear un shortcode sencillo para mostrar el último post de nuestro blog en una entrada.
En el siguiente veremos cómo pasarle parámetros (para mostrar 5 por ejemplo) y ponerle contenido entre las etiquetas [atajo] Lorem ipsum... [/atajo]  

martes, 29 de enero de 2013

Gestión del contenido en WordPress

Pequeña guía rápida para los que se inician como administradores de contenido de un CMS (esa es su finalidad), en este caso en particular en WordPress.
Lo primero de todo, es saber la dirección del panel de administración, normalmente (salvo que quien nos haga la web nos diga lo contrario) el formato es el siguiente:
www.midominio.mi-extension/wp-admin
Ahí tendremos que introducir nuestro usuario y contraseña dados y ya nos encontramos frente a nuestro panel de administración, algunas opciones pueden variar según la plantilla usada y la temática/funcionalidad propia de nuestra web, vamos a ver el caso base de un blog o portal de noticias.
Básicamente, en la columna lateral izquierda tenemos la navegabilidad, y en el centro el contenido de la sección en la que estemos.
Para crear algo (entradas y categorías básicamente) es lo mismo, ir a su sección y darle a Crear, Añadir y/o sinónimos.
Entradas -> Categorias: para crear una nueva categoría, si ésta es subcategoría de alguna, al crearla hay que seleccionarla en el desplegable que pone "Superior" (obviamente, las categoría padre se crean antes que las hijas).
Entradas -> Añadir nueva.
Ahora solo hay que ponerle un título a la entrada, añadir el contenido y en la columna de la derecha tenemos varias opciones:
  • Publicar: para dejarla como borrador, programar su publicación o publicar.
  • Formato: estandar.
  • Categorías: seleccionar las adecuadas (puede ser 1 o más), sino se marca, se pondrá 1 por defecto.
  • Etiquetas: poner varias palabras claves, como el tema general, la categoría y el tema particular.
  • Imagen destacada: esto lo utilizan las plantillas para los "slides", cabeceras y algunas acciones en especial, como secciones destacadas, etc.
En la parte inferior del contenido también se puede seleccionar para cada entrada en particular si queremos permitir comentarios y el autor (tiene que ser una dado de alta con permisos de autor como mínimo en el portal).
Con esto, ya podemos empezar a probar cosas y publicar en nuestra web.

martes, 22 de enero de 2013

Modificar facturas en Prestashop 1.5

Empezamos a jugar con esta nueva versión del framework Prestashop 1.5 para desarrollo de tiendas online.
Una de las primeras cosillas que siempre hay que hacer es adecuar el modelo de factura generada en PDF al modelo español y a las preferencias de nuestro cliente.
Para eso 1º hay que seleccionar la plantilla que queremos usar de factura (por defecto 'invioce.tpl') en (dentro de nuestro panel de administración, claro) Pedidos --> Facturas --> Opciones de Factura --> Modelo de Factura, y seleccionar en el desplegable.
Para modificar el contenido de las plantillas de facturas, habrá que modificar el código de el/los siguientes archivos, en la carpeta raíz, carpeta pdf/invoice.tpl.
Es necesario conocimientos de programación para cambiarlo.