Archive for category: Wordpress

WordPress: Nueva versión 3.4

Categories: Wordpress - Tags:

WordPress es mi CMS favorito y trae nuevas características interesantes

Encabezados Personalizados

Esta opción para un desarrollador no me parece muy util porque la mayoría de plantillas de un desarrollador profesional traen opciones de personalización más avanzadas que un simple encabezado aunque estoy seguro que para usuarios novatos será muy util.

 

Vista Previa

Esta si es una opción interesante ya que no es simplemente la vista previa de la plantilla, la cosa va más allá permitiéndonos incluso previsualizar los menus, configuración de la plantilla entre otras cosas

 

Embeds de Twitter

Ahora es mucho más sencillo hacer un embed basta con la URL respectiva

 

Etiquetas de Imágenes

La verdad esta es una opción muy util que descubrí hace poco para ponerles descripción a las imágens y que ahora la mejoran dándole soporte HTML

 

Optimización

Han reducido la cantidad de llamadas y conesto reducido la cantidad de memoria requerida lo que al final se traduce en un WordPress más rápido. Veo que además han incorporado la librería jQuery UI, aunque hay opciones de configuración que me gustaría ver presentes por defecto en WordPress y no sólo mediante plugins externos como la posibilidad de activar o desactivar el autoformato, activar el uso de custom post type en el listado de categorías y para los desarrolladores un API que facilite el uso de widgets en la creación de plugins y configuración de plantillas entre otras pequeñas ayudas.

WordPress: Usando shortcodes

Categories: Wordpress - Tags: , ,

Los shortcodes son una de las herramientas más potentes que nos brinda WordPress y que nos hace la vida más fácil ya que pueden ser usados dentro de plugins, como funciones de nuestra plantilla o para dar formato al texto. Primero voy a explicar que son y luego daré un ejemplo de shortcodes que podemos utilizar.

Supongamos que por ejemplo quisiera insertar unos sliders dentro de un post, pegar código javascript resulta complicado porque el editor tiende a filtrarlo además de lo sucio que quedaría el código y si alguna vez quisiera editar la presentación tendría que hacerlo post por post en resumen toda una pesadilla pero si fuera un shortcode podria ser algo como

1
[migaleria id="33"]

Y wordpress podría reemplazar ese sencillo código por nuestra galería que a suvez podría ser un plugin y por lo tanto una galería editable

 

¿Cómo crear mis propios shortcodes?

Veamos primero la estructura básica para crear un shortcode

1
2
3
4
function mifuncion( $atts ){
return "foo and bar";
}
add_shortcode( 'mishortcode', 'mifuncion' );

Esas líneas de código lo que hacen es crear un shortcode [mishortcode] que al ser colocado en cualquier post lo reemplazaría por el texto “foo and bar”

 

Shortcodes con parámetros

Hasta ahí luce interesante pero sería aún mejor si pudiera enviarle parámetros por ejemplo el tamaño, el id, un código, lo que se nos ocurra, ese caso la función quedaría así:

1
2
3
4
5
6
7
8
9
function mifuncion( $atts ) {
extract( shortcode_atts( array(
'parametro1' => 'something',
'parametro2' => 'something else',
), $atts ) );

return "respueesta = {$parametro1}";
}
add_shortcode( 'mishorttag', 'mifuncion' );

En este segundo ejemplo podría enviar parámetros de la siguiente forma [mishorttag parametro1="xxx" parametro2="yyy"]

Los shorttags se pueden aplicar a cualquier función lo que incluye las funciones de los plugins, si encuentras uno que carezca de short tags podrías agregarle fácilmente uno invocando a la función que imprime

Ejemplo de Shortcode para crear columnas

Supongamos que necesitamos fácilmente dividir el texto en 2 columnas sin recurrir a CSS3, pues necesitariamos un div por cada columna, el tamaño lo asignariamos por css algo tipo width 40% con un margen derecho de 5%

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function doscolumnas($atts, $content){

extract(shortcode_atts(array(
'end' => ''
), $atts));

if ( $end == 'true' ) {
return '
<div class="mitad end">'
.$content.'</div>
'
;
} else {
return '
<div class="mitad">'
.$content.'</div>
'
;
}

}
add_shortcode('columna', 'doscolumnas');

Ese código permite que el texto se divida a 2 columnas, una con margen derecho y la otra sin margen (eso se maneja via CSS), y su uso sería:

1
2
3
[columna]Mi texto de la primera columna[/columna]

[columna end="true"]Mi texto de la segunda columna[/columna]

Y bueno así podemos hacer mil cosas jugando con shortcodes

WordPress: Sitios multilingues con QTranslate

Categories: Wordpress - Tags: , ,

Existen algunos plugins para WordPress que realizan traducciones automáticas usando servicios de Google Translate u otros sin embargo los resultados no son del todo precisos, además no permiten traducir imágenes y muchos de ellos no mantienen la URL por lo que tampoco se indexan todos los idiomas en los buscadores.

Hay una solución a todos esos problemas pero por supuesto es más trabajosa ya que es manual sin embargo es la que reporta los mejores resultados, podemos bajar el plugin gratuito QTranslate desde su sitio http://www.qianqin.de/qtranslate/download/

Configuración Básica

Lo primero que debemos hacer una vez instalado el plugin es definir los idiomas que vamos a utilizar además del idioma por defecto para eso buscamos el menu Ajustes/Idiomas y allí veremos la lista de idiomas, podemos definir nuevos idiomas pero siempre teniendo en cuenta los codigos de idioma por eejemplo en español es_ES en ingles en_EN o en_US esto es util por si subimos los archivos .po y .mo a Worpdress todo funcione de forma coordinada.

¿Cómo Escribir en Múltiples Idiomas?

Una vez instalado el plugin cuando escribamos un post o una página aparecerá una casilla para el título en cada idioma y unos tabs para elegir en que idioma se va a escribir el post o la página, por defecto los posts y páginas previamente creados se duplican a todos los idiomas disponibles.

Cuando vayamos a Post/Categorias también veremos que por cada idioma aparece un nuevo campo para escribir el nuevo nombre

Una vez definidos los idiomas el siguiente paso es colocar el widget de idioma en el menu Apariencia/Widgets y así el vistante pueda elegir el idioma en que desea ver el sitio.

¿Cómo traducir campos personalizados, plugins y codigo PHP?

Hasta el item anterior era lo más básico ahora compliquemos las cosas, por defecto los campos personalizados, codigo PHP y respuestas de otros plugins no son traducidos sin embargo existen unas etiquetas que nos permiten realizar esto de forma sencilla, veamos el ejemplo de estas dos etiquetas para español e inglés

1
[:es]Valor de mi campo personalizado en español[:en]Value of my customized field in english

Lo anterior es equivalente a:

1
<!--:es-->Valor de mi campo personalizado en español<!--:--><!--:en-->Value of my customized field in english<!--:-->

Si añadimos esas etiquetas en nuestro código PHP cuando realizamos un echo obtendremos el texto correspondiente al idioma seleccionado

Para traducir la respuesta de un campo personalizado se soluciona fácilmente añadiendo una función a nuestro código, como en el ejemplo:

1
2
3
4
5
6
<?php
            $mykey_values = get_post_custom_values('subfooter');
            foreach ( $mykey_values as $key => $value ) {
                echo qtrans_useCurrentLanguageIfNotFoundUseDefaultLanguage($value);
            }
            ?>

En el ejemplo recojo el valor del custom field llamado “subfooter” y con la función qtrans_useCurrentLanguageIfNotFoundUseDefaultLanguage hago que discrimine el valor según el idioma elegido.

Cuando se trata de traducir la respuesta proveniente de plugin es posible que tengamos que modificar el código del plugin utilizando esa función sin embargo si el plugin utiliza short tags hay una forma sencilla de traducirlo

Primero veamos la función original usando short code en este caso estoy usando para recoger un formulario del plugin Contact Form 7 [contact-form-7 id="170" title="Form Contacto"]

1
<?php echo do_shortcode('[contact-form-7 id="170" title="Form Contacto"]'); ?>

Al aplicarle el filtro de idioma quedaría:

1
<?php echo qtrans_useCurrentLanguageIfNotFoundUseDefaultLanguage(do_shortcode('[contact-form-7 id="170" title="Form Contacto"]')); ?>

¿Cómo maquetar para WordPress?

Categories: Diseño, Wordpress - Tags: , ,

No es complicado hacer una plantilla para WordPress, es mucho más facil que Joomla y muy pero muy flexible, primero debemos descargar una plantilla sin estilos en blanco y modificar el nombre

¿Dónde consigo una plantilla en blanco?

Hay muchas pero yo les recomiendo ESTA

¿Cómo defino nombre y autor?

Buscamos style.css y al inicio aparecen los detalles del nombre, autor, pagina web, etc

¿Y ahora qué?

Ahora debemos saber para que sirve cada archivo de una plantilla básica:

  • comments.php Aqui va el formulario de comentarios y se muestra la lista de comentarios por cada post
  • footer.php Aqui va el pie de página, la informacion de copyright, etc
  • functions.php Si queremos agregar menus, espacios para widgets, paginadores, etc este es el archivo clave
  • header.php Aqui va todo el encabezado
  • index.php Aqui va la primera página (luego les explico como definir la página de inicio)
  • page.php Aqui definimos como se verán las páginas (OJO podemos crear plantillas de pagina personalizadas por ejemplo una para el home)
  • sidebar.php Aqui se definde el menu de la derecha o izquierda, se define un area para widgets
  • single.php Esta es la estructura de un post

Esas son las más básicas pero suelen haber otras más como:

  • archive.php Se define la lista de posts antiguos
  • archives.php Suele ser un template de pagina para asignarlo a una y usarla como archivo /obviamente va ligado al anterior)

¿Por dónde empezamos a maquetar?

Preocupemonos por maquetar solo 3 cosas el encabezado, el contenedor y el footer (pie de página), no maquetemos aún ningún contenido. Para maquetarlo debemos usar sólo los archivos header.php, footer.php y no nos metemos con single.php, page.php ni ningun otro ya que el inicio y cierre de los div contenedores debe estar en header y footer.

Una vez maquetado veremos que WordPress por defecto nos muestra una lista de post recientes y eso para un sitio web no sirve de mucho debemos crear una plantilla de página que sirva como homepage o página de inicio, para ello duplicamos page.php y le ponemos el nombre de homepage.php (o el nombre que se nos ocurra) y luego al inicio escribimos

1
<!--?php /* Template Name: Homepage */ ?-->

Podemos fijar el nombre de template que se nos ocurra siempre que no este repetido, luego en WordPress buscamos page/new page o editamos una página ya creada y le asignamos la plantilla que hemos creado

Para que sea el homepage vamos a settings/reading y fijamos como primera página la que hemos creado

Luego podemos ir defieniendo los menus pero eso lo dejo para una segunda parte

WordPress: Template Portafolios y Galerias

Categories: Wordpress - Tags: ,

Hay múltiples galerías y portafolios pero si usamos wordpress tenemos la ventaja de obtener un mejor posicionamiento para nuestro sitio, además ahora incluyen algunas interesantes animaciones que le dan vida a nuestro sitio, veamos algunas plantillas para WordPress:

Sabuy

[ Descargar ]

Expose

[ Descargar ]

Love Photo


[ Descargar ]