Escael Marrero

Blog \\ Wordpress

Versión móvil en thema de WordPress

Acabo de comenzar un nuevo proyecto que tiene todas las pintas de ser muy interesante. Se trata de la creación de una versión móvil de este sitio: www.isliada.org, el cual es un proyecto personal junto con unos amigos editores. El thema de ese sitio fue realizado completamente desde cero, en aquellos momentos no utilizaba ni SASS ni LESS y menos Compass, así que lo maquete con CSS3 directamente.

Resulta que ahora he querido realizar una versión móvil del mismo y para ello me he auxiliado en un plugin muy interesante: el Any Mobile Theme Switcher que fundamentalmente lo que hace es identificar el User Agent y cargar un thema según se haya escogido previamente:

Any Mobile Theme Switcher

Me parece muy interesante y sobre todo sencillo de usar. Probé varios pero algunos traían demasiadas opciones (themas por defecto unos y demasiadas opciones de configuración y otros themas dentro del mismo plugin cosa que no me gustaba mucho. Prefiero tener los elementos agrupados por su funcionalidad, no regados por ahí).

Una vez escogido el plugin, instalado y hechas las primeras pruebas he configurado el thema móvil para su puesta en marcha. Primero cree el proyecto con Compass utilizando Susy:

 compass create --using susy islidaMobil

Esto crea todos los ficheros necesarios para comenzar a trabajar.

Segundo he decidido usar Bundle como explique en el anterior post. El mismo consta de la siguiente configuración:

gem 'sass', "3.3.7"
gem 'compass', "1.0.0.alpha.19"
gem 'susy', '2.1.2'

No es necesario cargar Compass para utilizar esta versión de Susy pero es posible que lo utilice, ya veré más adelante.

Otro aspecto que quiero destacar es una pequeña modificación en el fichero de configuración de Compass, el config.rb. Este fichero como su nombre lo indica es el encargado de compilar los ficheros SASS en CSS. Pues bien, la estructura de directorios que crea Compass es algo así:

directory isliadaMobile/sass/ 
directory isliadaMobile/stylesheets/ 
   create isliadaMobile/config.rb 
   create isliadaMobile/sass/_grids.scss 
   create isliadaMobile/sass/style.scss 
   create isliadaMobile/stylesheets/style.css 

Lo que en principio esta muy bien pero sucede que WordPress necesita un fichero style.css en la raíz del directorio del thema para funcionar correctamente. Por lo tanto necesitaba que el fichero CSS que se compilaba en el directorio stylesheets se copiara en la raíz, para ello es necesario agregar este pequeño código al config.rb:

require 'fileutils'
on_stylesheet_saved do |file|
  if File.exists?(file) && File.basename(file) == "style.css"
    puts "Moving: #{file}"
    FileUtils.mv(file, File.dirname(file) + "/../" + File.basename(file))
  end
end

que hace exactamente eso.

Y bueno ya tengo listo todo para comenzar a programar tanto con PHP como con SASS. Estoy emocionado por probar la nueva versión de Susy, promete mucho. Todo lo que vaya aprendiendo lo iré posteando para todos aquellos que os interese.

Wordpress \\ , , , , \\ No hay comentarios

Comentarios cerrados.