Tag Archive for: Wordpress

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 ]

Proyectos: Y Tech Solutions

Categories: Proyectos - Tags:

Este es un proyecto que he desarrollado usando WordPress, el diseño original era usando el azul del logotipo y amarillo lo que le daba bastante vida al diseño pero el cliente decidió cambiar ese amarillo por gris por lo que ahora luce bastante apagado y frío. El diseño luce limpio aunque hubiera preferido que el cliente no altere los colores.

Lo novedoso de esta plantilla es que el cliente requería postear oportunidades de empleo que debían mostrarse dentro de una pagina con link a la descripción, en un principio pensé utilizar campos personalizados propios del WordPress pero el cliente quería algo aún más simple por lo que al final opté por utilizar Magic Fields, con este plugin es posible crear posts especiales con campos personalizados. Quedando la administración como en el screenshot:
ytech backend

El siguiente paso fue crear la página que mostraría el listado de empleos con los links a sus respectivos posts, quedando así:
ytech layout

Para la barra del costado usé Addthis con los íconos sociales, hice un pequeño widget que me muestre las noticias últimas y finalmente un formulario unido a un template que envía correos.

WordPress: como saber el tema actual

Categories: Otros, Wordpress - Tags: ,

Este es un pequeño tip para averiguar el nombre del tema o plantilla de WordPress que están usando en un sitio
Simplemente debes buscar el archivo style.css que corresponde a la hoja de estilos de la plantilla

Paso 1

Desde Firebug click derecho a cualquier elemento del blog y eliges “Inspeccionar elemento” al lado izquierdo te mostrará el HTML pero al lado derecho la hoja de estilos que seguramente es un archivo llamado style.css.

Paso 2

Le damos click derecho al nombre de la hoja de estilos y elegimos la opción “Copy Location”
tema-wordpress

Paso 3

Finalmente copiamos esa ruta a una nueva pestaña del navegador y al abrirla nos mostrará algo como esto:

1
2
3
4
5
6
7
Theme Name: aNieto2k08
Theme URI: http://www.anieto2k.com
Description: Theme realizado por Daniel Mota aka <a href="http://icebeat.bitacoras.com/">IceBeat</a>.
Version: 1.9
Author: Daniel Mota
Author URI: http://icebeat.bitacoras.com/
Tags: blue, custom header, fixed width, two columns

Eso además de darnos el nombre de la plantilla nos dará algunos datos adicionales e incluso detalles de donde descargarla y de su autor