Tag Archive for: tips

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"]')); ?>

Prestashop: Variables globales para plantillas

Categories: Prestashop - Tags: ,

A la hora de desarrollar una plantilla para Prestashop o cualquier otro CMS, tienda virtual, blog, es necesario siempre considerar las variables globales del sitio, como son las rutas de la plantilla, la ruta del sitio, etc por si en algún momento movemos el sitio a otro dominio o si se va a rehusar la plantilla estemos seguros que seguirá funcionando.

Aqui una lista de las variables que pueden ser usadas en cualquier parte de una plantilla para Prestashop:

  • $base_dir { Directorio raíz de la tienda }
  • $base_dir_ssl { Directorio raiz utilizando el protocolo SSL }
  • $content_dir { La carpeta de los contenidos }
  • $img_ps_dir { La carpeta donde van las imagenes usualmente “/img/” }
  • $img_dir { Carpeta de imágenes pero a diferencia del anterior se refiere a la carpeta en la plantilla }
  • $css_dir { Carpeta de la plantilla donde van los archivos CSS }
  • $js_dir { Carpeta de la plantilla donde va el javascript }
  • $tpl_dir { La carpeta donde esta nuestra plantilla }
  • $modules_dir { La carpeta donde van los módulos }
  • $mail_dir { La carpeta donde están las plantillas de los correos  }
  • $lang_iso { Código ISO del idioma }
  • $come_from { ruta absoluta previa [absolute] }
  • $shop_name { Nombre de la tienda }
  • $cart_qties { Número total de productos }
  • $cart { Contenidos del carrito }
  • $currencies { Monedas disponibles }
  • $id_currency_cookie { Id de la moneda activa }
  • $currency { moneda activa }
  • $cookie { cookie activa }
  • $languages { muestra los lenguajes disponibles }
  • $logged { Reviza si el usuario esta logeado }
  • $page_name { Titulo de la página actual }
  • $customerName { Nombre del cliente [depende de la sesión] }
  • $priceDisplay { Configuración para mostrar el precio  [depende la moneda] }

PHP: variables de nombre variable

Categories: PHP - Tags: ,

Las variables de nombre variable o variables variables, valga la redundancia son muy útiles a la hora de ahorrar programación ya que permite generar nombres de variables dinamicamente sobre todo en bucles y funciones.

La forma normal de crear una variables es $x=1

Pero que ocurre si tenemos que crear un bucle donde debemos asignar valores a $x1, $x2, $x3…. no sería buena idea asignar una por una, si estamos dentro de un bucle sería algo como:

1
2
3
foreach ($arr as &$value) {
   ${'x'.$i} = "valor de variable";
}

Lo mismo sirve también para usar los valores almacenados en una variable.

¿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

Criterios Básicos para maquetar una página web

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

La idea de este post es dar algunas directivas que debemos seguir para maquetar y luego este código sea entendido por la persona que luego tenga que editarlo o incluso por nosotros mismos que luego de unos años vemos el código y no le encontramos ni pies ni cabeza. No olvidemos que si trabajamos como freelancers es importantísimo que nuestro cliente pueda comprender el código para eso hay que cumplir algunos estándares básicos.

Utiliza nombres estandard

Si eres freelancer es posible que trabajes para empresas de otros países e incluso de algunos de habla inglesa por lo que se requiere que todos puedan saber de que sección estás hablando, aunque no existen nombres únicos standard si hay unos muy comunes

  • Wrapper: Es el contenedor principal de la página que define el ancho y centra la página
  • Header: El encabezado donde suele ir el logo y el menu superior
  • Menu: Aunque algunos suelen usar para este el ID navbar
  • Main: El div que contiene el cuerpo de la página y que se suele dividir en 2 o 3 columnas
  • Sidebar: La columna del costado, en WordPress la que sueele contener los widgets
  • ColumnLeft, ColumnRight, ColumnCenter: dependiendo de cuantas columnas tengas puedes suar esos nombres o column1, column2…
  • Footer: El pie de página donde suele ir el copyright y la información de contacto

Dividir la hoja de estilos

No es buena idea tener una sola hoja de estilos con 4000 lineas de código, es mejor separarla de acuerdo a las dimensiones del proyecto. Lo más básico sería contar con 2 hojas de estilo:

  • reset.css  con las opciones de reseteo muy utiles para compatibilidad con múltiples buscadores, pueden bajar la más popular AQUI
  • style.css con las propiedades de todo el sitio

Para un proyecto más grande sin embargo sería bueno contar con otra hojas de estilo como:

  • forms.css con las propiedades del formulario
  • fonts.css con las definciones de las fuentes
  • colorbox.css, sexybox.css, etc hojas de estilo de cada javascript

Organizar la hoja de estilos

Es importante separar las secciones y comentarlas, lo usual es empezar con las etiquetas generales html, body, luego los titulos h1, h2, h3, las clases de los colores .rojo, .azul, etc y luego cada sección del sitio header, menu, sidebar, footer, etc. Quedando algo así nuestro código CSS

1
2
3
4
5
6
7
8
9
10
11
/* Default fonts and colors
========================================== */

body {
color: #375362;
font-family: "Verdana", "Lucida Fax", "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
color: #666;
font-family: "Century Schoolbook", "Century", Georgia, "Times New Roman", serif;
font-weight: normal;
}

Maqueta y ordena los elementos por su ubicación

Esto es más fácil explicar con un ejemplo supongamos que estamos maquetando una lista de productos, tendriamos un div contenedor con un ID y varios divs internos identificados por una clase, quedando algo así:

1
2
3
4
5
6
7
8
<div id="productos">
   <div class="item">
      <div class="pic">
      </div>
      <h3 class="prodTitle"></h3>
      <div class="description"></div>
   </div>
</div>

Dentro de la hoja de estilos también se debe organizar así quedando algo como:

1
2
3
4
5
#productos {}
  #productos .item {}
  #productos .pic {}
  #productos h3.prodTitle {}
  #productos .description {}

Indica que div estás cerrando

Esto es importantísimo cuando se trabaja con web modulares donde al estar separadas por partes es un poco complicado saber donde acaba cada DIV, por lo que es mejor indicar donde se cierran los principales DIV

1
2
3
4
5
6
7
8
9
<div id="header">
     <div id="menu">
         <ul>
               <li>Opcion 1</li>
               <li>Opcion 2</li>
               <li>Opcion 3</li>
         </ul>
    </div><!--#menu-->
</div><!--#header-->