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.

miércoles, 15 de agosto de 2012

Añadir información (campos) Formulario Contacto Joomla 1.5!

Añadir información específica que queremos que nos envíen en el formulario de contacto que viene por defecto en Joomla 1.5! es bastante sencillo cuando vas directo a dónde hay que tocar en 3 pasos.
  1. components\com_contact\controller.php
    • Sobre la línea 130 (aprox.), al principio de function submit() añadimos una linea de código parecida a esta: $telefono   = JRequest::getVar( 'telefono',        '',         'post' );
    • Lo que voy a añadir yo en el ejemplo es un campo para enviar también el tlfono.
    • Ahora, para 'verlo', tendremos que modificar también la siguiente línea: $mail->setBody( $body ); por algo parecido a esto (según queramos personalizar): $mail->setBody( 'Teléfono: '.$telefono.'. '.$body );
  2.  components\com_contact\views\contact\tmpl\default_form.php
    • Añadir (por ejemplo) entre el tema del mensaje y el cuerpo el siguiente código.
    • <label for="telefono">
                      Teléfono:
                  </label><input name="telefono" size="30" class="input_style" value="" />
                  <br />
  3. Y ya, si en \language\es-ES\es-ES.com_contact.ini añadimos la siguiente línea: TELEFONO=Teléfono , pues mejor. Ahora en el código anterior podemos cambiar "Teléfono:" por el siguiente código: &nbsp;<?php echo JText::_( 'Enter your message' );?>: y dejarlo visto para el resto de idiomas que queramos en nuestra página.
Pues ya sólo queda comprobar en el panel de administrador el mail puesto del contacto, al que nos va a llegar y comprobar que llega correctamente y con los cambios.