|

Trucos para la creación de un theme para WordPress

ByLuis

Buen artículo en la que se nos cuenta una serie de trucos que usa el autor para realizar sus themes de WordPress. Mi opinión personal es que el código para hacer themes para WordPress no es demasiado bueno, pero claro, seguro que hay alguien que opina todo lo contrario, pero para los que opinen como yo seguro que estos consejos le vienen genial.
Empieza explicando diferentes usos de las etiquetas condicionales, las cuales nos indican si estamos en el home, visualizando una entrada… Con estas condiciones podemos resaltar dinámicamente los menús según en la opción que estemos, cambiar el título de la página según en la que nos encontremos, añadir contenido y muchas opciones más.
También nos explica cómo crear plantillas para categorías específicas, para lo cual solo deberemos añadir -n a category.php, pudiendo personalizar nuestro diseño dependiendo de la categoría a la que accedamos.
Otro ejemplo que nos cuenta es el modo de añadir la publicidad después del primer post, que quien dice después del primer post dice cada cierto número de posts, si se sigue el mismo método.
Una parte importante del post trata sobre las query posts, las cuales nos permiten controlar los posts que aparecen. Pudiendo así mostrar los últimos posts, posts específicos o excluir algunos.
Para finalizar también destacar los consejos sobre wp_list_pages, la plantilla Page o los consejos de configuración de WP.
WordPress Theme Hacks

Similar Posts

|

Post2PDF: plugin de WordPress para exportar a PDF

ByLuis

Post2PDF

Os presentamos el primer plugin para WordPress realizado por Sentido Web.

Qué es

Post2PDF es un plugin desarrollado por Sentido Web para WordPress el cual permite exportar una entrada (post) a formato PDF de Adobe. Post2PDF está basado en la librería de PHP TCPDF que permite crear documentos PDF, exportando contenido HTML.

Características

Su principal característica es exportar los post de WordPress (HTML) a formato PDF, pero además incluye las siguientes opciones:

  • Cofiguración de cabecera: imagen y dos líneas para la cabecera
  • Configuración del pie de página: pudiendo indicar el número de página actual sobre el total de páginas.
  • Respeta el formato HTML en gran medida: cabeceras, enlaces, imágenes, …
  • Tipos de letra y colores para la cabecera, para el cuerpo del documento y para el pie de página.
  • Posibildiad de exportar fuentes de letra gracias a la aplicación TTF2UFM.

Post2PDF solo exportará imágenes contenidas en el mismo servidor, no podrá exportar imágenes enlazadas a otros servidores.

Instalación

Se instala como cualquier otro plugin de WordPress, descomprime el archivo zip dentro del directorio /wordpress/wp-content/plugins, después entra en la administración de WordPress y en el apartado Plugins en Plugins Management tendremos que activar el plugin pulsando en Activate.

Una vez activado el plugin, veremos que dentro de las opciones de Plugins (Plugins, Plugins Editor, …) aparecerá una nueva opción llamada Post2PDF, la cual nos permitirá modificar las opciones de nuestro plugin.

Configuración

Dentro de la opción Plugins de la administración de WordPress, podemos acceder a la configuración de Post2PDF pinchando sobre el submenú con el mismo nombre.

Las opciones se dividen en 4 partes: cabecera, cuerpo, pie de página y opciones varias.

PDF Header

Configura la cabecera del documento HTML, permite incluir una imagen (localizada en el propio servidor web, tanto en url web como en path absoluto), indicar el formato del texto y el contenido de las dos líneas que forman la cabecera.

  • Title: Es la línea principal que forma la cabecera. Permite el valor __TITLE__ y __BLOGNAME__ para mostrar el título del post y el nombre del blog respectivamente.
  • Subtitle: Es la línea secundaria de la cabecera, admite también los valores __TITLE__ y __BLOGNAME__.
  • Font size: Tamaño de letra del título de la cabecera, la subcabecera tendrá un tamaño de dos terceras partes del tamaño del título.
  • Font: Nos muestra un desplegable con las fuentes disponibles.
  • Font color (R, G, B): Indica el color de la letra, en notación decimal (por ejemplo, 255 – 0 – 0 será rojo.
  • Image: Es la imágen que se mostrará en la cabecera. Solo admite los formatos JPEG y PNG y se recomienda que se encuentre disponible mediante una url en el propio servidor web.
  • Image width: Establece el ancho de la imágen.

PDF Body

Modifica las opciones del cuerpo del documento.

  • Font size: Tamaño de letra del cuerpo del documento.
  • Font: Nos muestra un desplegable con las fuentes disponibles.
  • Font color (R, G, B): Indica el color de la letra, en notación decimal (por ejemplo, 255 – 0 – 0 será rojo.

PDF Footer

Modifica las opciones del pie de página del documento.

  • Footer: Texto que aparece en el pie de página, admite los valores __PAGE_NUMBER__ y el valor __TOTAL_NUMBER_OF_PAGES__ para mostrar la página actual y el número de páginas totales.
  • Font size: Tamaño de letra del cuerpo del documento.
  • Font: Nos muestra un desplegable con las fuentes disponibles.
  • Font color (R, G, B): Indica el color de la letra, en notación decimal (por ejemplo, 255 – 0 – 0 será rojo.

Miscellaneous

Opciones varias que no tienen una categoría específica.

  • Author (PDF file): Corresponde al valor del autor que aparece en el documento PDF.
  • PDF icon: URL a la imagen que se mostrará cuando incluimos en icono de llamada al plugin Post2PDF en la plantilla de WordPress.

Cómo usarlo

Para incluir el icono para exportar la entrada a PDF tan solo hay que incluir el siguiente código en la zona de la plantilla de WordPress que queramos:

if(function_exists(“Post2PDF”)) Post2PDF();

Otras características

  • Debido a la librería TCPDF, Post2PDF tiene dos versiones distintas, una para PHP4 y la otra para PHP5, dependiendo de que versión de PDF tengas instalada en tu servidor, deberás descargarte una u otra versión de Post2PDF.
  • TCPDF incluye la utilidad ttf2ufm, la cual nos permite incluir la fuente TTF que queramos en nuestro PDF, tan solo deberemos seguir las instrucciones contenidas en el archivo README.TXT.

Post2PDF

Ejemplo de documento PDF

Realizado con la versión 2.0.3 de WordPress

|

Añadir clase a la imagen destacada de WordPress según el tamaño

ByLuis

Hace bastante que no escribía, sobre todo por falta de tiempo, pero quería escribir sobre este pequeño truco de WordPress. Cuando añadimos una imagen destacada en un post de WordPress nos podemos encontrar con que la imagen ocupa todo el ancho (lo más normal) o que no ocupa tanto, con lo que nos encontramos que la imagen queda muy sola y el diseño queda feo.

Para solucionar esto, deberemos añadir un filtro, comprobar el tamaño de la imagen y el del ancho del contenido y en el caso de que creamos que es conveniente (por ejemplo la mitad del ancho del contenido) añadir una clase a la imagen:

function mi_post_thumbnail_html($html) {
  // Se suele recomendar definir la variable $content_width para ocasiones como esta
  global $content_width;
  preg_match('#width="([^"]+)"#', $html, $s);
  if (isset($s[1]) && $s[1] < $content_width/2) {
    preg_match('#class="([^"]+)"#', $html, $c);
    if (isset($c[1]) && strpos($c[1], "right") === FALSE) {
      return str_replace('class="'.$c[1].'"', 'class="'.$c[1].' right"', $html);
    }
  }
  return $html;
}
add_filter('post_thumbnail_html', 'mi_post_thumbnail_html');

Listar posts de dos categorías en WordPress

ByLuis

¿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 '';
}

Traducir contenido en Contact Form 7 de WordPress

ByLuis

Si queremos que el contenido de nuestros formularios de contacto generados con el plugin Contact Form 7 sean traducidos, tan sólo deberemos añadir a nuestro functions.php lo siguiente:

function translate_shortcode($tag) {
  if (isset($tag['values']) && count($tag['values']) > 1) return __($tag['values'][1], $tag['values'][0]);
  return "";
}
wpcf7_add_shortcode('translate', 'translate_shortcode', true);

Una vez añadido esto, podremos incluir en nuestro formulario lo siguiente:

[translate null "diccionario" "Texto que quiero traducir"]

El valor null es porque el plugin busca en el primer parámetro el ID del campo, el segundo campo es el nombre de diccionario que hayamos incluido con la función load_theme_textdomain, y por último el texto que vayamos a traducir.

|

CSS: Mnemotecnia y shorthand

ByLuis

Seguimos organizando las hojas de estilo.
La [mnemotecnia][] (o nemotecnia) es un proceso de asociación mental destinado a facilitar el recuerdo de algo. Ese algo puede ser, por ejemplo, el orden de declaración de las reglas de presentación para los enlaces (link no visitado, visitado, etc.). Para recodar el orden nos servirán los términos en inglés (mayúsculas especialmente) LoVe HAte.
### LoVe HAte
Es conveniente recordar que el orden correcto de las declaraciones es este y no otro:
a:link { /* Love hate */
}
a:visited { /* loVe hate */
}
a:hover { /* love Hate */
}
a:active { /* love hAte */
}
### TRouBLe
Algunas propiedades CSS se pueden definir en forma taquigráfica (shorthand).
Por ejemplo, para definir los márgenes de un elemento podemos usar `margin-top: 0; margin-right: 1em; margin-bottom: 1em; margin-left: 1em` o, para ahorrar teclas y bytes, usar la versión corta:
#unSelector {
margin: 0 1em 1em 1em;
}
El orden de los valores es el siguiente: arriba, derecha, abajo, izquierda. Esto es, empezamos a asignar valores en sentido de las agujas del reloj (de las doce de la mañana y acabamos a las nueve de la noche). Mnemotécnicamente sería, TRouBLe (top, right, bottom, left).
Estas versiones abreviadas pueden llevar, atención, uno, dos, tres o cuatro valores, ahí es _ná_. Veamos:
#unSelector {
margin: 0;
/* margen 0 por los cuatro costados */
}
#unSelector {
margin: 0 1em;
/* márgenes superior e inferior a cero,
márgenes izquierdo y derecho de 1em */
}
#unSelector {
margin: 0 1em 2em;
/* huy, este tiene truco: margen superior, cero;
margen derecho, 1em; margen inferior, 2em.
¿Y el izquierdo? en caso de tener
tres valores, se toma el segundo, esto es el
valor es el mismo para los dos laterales */
}
#unSelector {
margin: 0 1em 2em 1em;
/* TRouBLe, como ya hemos comentado */
}
Claro está que lo dicho para los márgenes también es aplicable a `padding`, `border-width`, `border-style`, `border-color` y seguramente a alguna propiedad más que ahora mismo (¡café!) no está en mi cabeza.
Más sobre [Memoria y reglas nemotécnicas][m].
[mnemotecnia]: http://buscon.rae.es/draeI/SrvltGUIBusUsual?LEMA=mnemotecnia&TIPO_HTML=2&FORMATO=ampliado&sourceid=mozilla-search “Definición en el diccionario de la Real Academia Española”
[m]: http://www.weblioteca.com.ar/textos/mente/memoriaynemotecnia.htm

Traducir Contact Form 7 en widgets usando WPML

ByLuis

O bien no me enteré, o bien la solución que plantean desde Contacto Form 7 para traducir formularios no me servía. Ellos proponen crear otro formulario en otro idioma y añadir cada formulario en la página correspondiente a su idioma. ¿Pero qué pasa cuando el formulario no está en una página sino en un widget dentro de un sidebar?, pues que necesitaremos traducir las cadenas de texto mediante WPML.

Para ello nos creamos un filtro que coge los values de la etiqueta, las registra en WPML y las traduce:

add_filter( 'wpcf7_form_tag', 'wpml_cf7_tags');
function wpml_cf7_tags($scanned_tag, $exec ) {
  foreach($scanned_tag['values'] as $i=>$v) {
    icl_register_string('Contact Form 7', $v, $v);
    $scanned_tag['values'][$i] = icl_t('Contact Form 7', $v, $v);
  }
  return $scanned_tag;
}

Ahora solo falta traducir las cadenas desde WPML.