Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Theme Development

Introducción a Genesis Framework

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Existen muchos frameworks para WordPress por ahí. La mayoría de ellos son de pago y algunos sorprendentemente son gratuitos, como Hybrid or Thematic. La mayoría de los usuarios de WordPress que usan frameworks, o bien usan Thesis o Genesis. "¿Por qué usar un framework?", se preguntará alguno. Es debido a su simplicidad y claridad. Aunque es difícil cambiar de un framework a otro, y aprenderlo inicialmente puede ser farragoso, definitivamente merece la pena a largo plazo.

Pueden existir muchas razones para optar por el uso de un framework en lugar de emplear un tema estándar de WordPress. Algunas de ellas podrían ser:

  • Código limpio y semántico
  • Mayor control sobre la apariencia y estilo de tu sitio web
  • Mejores opciones para el SEO
  • Multitud de temas entre los que elegir
  • Opción de crear tus propio temas hijo o "child themes", (¡Más sobre temas hijo en un minuto!)
  • Widgets diseño de página personalizados
  • Y sí, el rápido servicio al cliente 

He debido olvidarme de algunas cosas, pero más o menos estos son los aspectos más relevantes.


¿Qué Son Los Child Themes? 

En pocas palabras, el framework Genesis como el marco de una imagen colgada en la pared. Este marco está vacío y tu necesitarás una imagen que puedan ver los espectadores. Esta imagen es el child theme, y los espectadores son tus visitas diarias a la web. Existen muchas organizaciones que te proporcionan child themes ya diseñados.  Los child themes tienen sus propias hojas de estilos en cascada, que puedes editar fácilmente si te apetece. El child theme tiene además una archivo functions.php, en el cual puedes añadir tu propio código personalizado y hacerlo así funcionar a tu gusto. El child theme realmente contiene tres archivos y el resto reside en el Tema Padre.


¿Por Qué Usar un Framework?

La respuesta es sencilla, una vez empieces a trabajar con un framework te acostumbraras a trabajar con él enseguida. Podrás hacer tus propios cambios en el tema pre-existente que venía acompañándolo, o puedes crear el tema de tus sueños por ti mismo.


Cuál: ¿Thesis o Genesis?

Genesis está construido para Diseñadores y Thesis está creado para programadores

Elegir entre estos dos excelentes frameworks WordPress es bastante difícil. Cuando elijas entre ellos, deberás considerar bien tus opciones. Y esto puede variar de persona a persona. Hay quien prefiere un diseño muy simple y minimalista y mientras otros prefieren justamente lo contrario. Cuando elijas entre alguno de estos dos frameworks, el diseño puede ser un factor importante.  Genesis proporciona más opciones de diseño comparado con Thesis, pero Genesis tiene menos cantidad de Child themes en comparación con Thesis. Existen numerosos child themes para Thesis en internet, tanto de pago como gratuitos. Así que para sacar partido a todas las capacidades de diseño del framework Genesis, uno tiene que estar dispuestos a ensuciarse las manos con los hooks y fragmentos de código. Hay quien opina también opinan que Genesis está creado pensando en los Diseñadores y Thesis en los Programadores.


Opciones de Diseño 

El diseño juega una papel vital en tu vida. Es un elemento intrínsecamente importante, si observas entorno a ti en tu habitación, comprobarás que en cierta medida refleja quien eres. Si te fijas en el diseño del conjunto de la red de Envato, te harás una idea. Integrar el diseño en los sitios web se está convirtiendo el algo cada vez más importante. Los usuarios tienden a permanecer cada vez más tiempo en sitios web que tiene un diseño innovador. Cuando se trata del diseño de tus sitios web, Genesis ofrece a los usuarios muchísimas opciones. Existen child themes ya creados que después puedes modificar tú mismo. Además incluyen muchas opciones para el diseño de maquetación de las páginas. También puedes cambiar la tipografía añadiendo las Fuentes de Google y mucho más.


Hooks de Genesis

Cada framework viene con su propio grupo de hooks, los cuales te permiten tomar el control del conjunto de la apariencia del diseño. Estos hooks ponen al usuario al mando de incluso los detalles menores . Además puedes cambiarlo cuando quieras y además, con facilidad. Así que aunque pagas por él al principio, a largo plazo te ahorra tiempo y trabajo.

Te aporta buena funcionalidad; puedes añadir y eliminar gran cantidad de widgets. Tus widgets personalizados funcionarán en el framework de igual manera que en cualquier otro diseño. Puedes salpimentar el sidebar con botones para compartir en medios sociales, un plugin de Twitter y mucho más.


Optimizado para las Búsquedas

El framework está excelentemente construido teniendo en mente al SEO. Su código es semántico y nunca necesitarás un plugin como Yoast o All-in-One. Según StudioPress, han colaborado con Greg Boser, socio y SVP (Vice-Presidente Senior) del gigante del marketing en buscadores BlueGlass Interactive.

Todas las opciones relacionadas con el SEO están integradas en el framework y no necesitarás en absoluto ningún otro plugin. Las opciones SEO también proporcionan URLs Canónicas Personalizadas para los entradas y las páginas. También existe una opción para Redireccionar a Medida las URLs y puedes usarlo para redirigir tus entradas anteriores a cualquier URL que desees. Una de las cosas que más me gusta sobre las opciones de su SEO fue que sugiere palabras clave para cada artículo que publiques en tu sitio web. Añadir palabras clave a tus artículos se convierte en algo fácil sin la necesidad de ningún plugin adicional. ¡De forma que a los motores de búsqueda les será más sencillo encontrar los artículos basados en las palabras clave!


Qué Hacer Cuando Estás Bloqueado en Algún Punto

Si eres como yo y te zambulles en el código, estoy seguro de que te estancarás en algún punto u otro. No hay necesidad de entrar en pánico ya que existen toneladas de artículos y tutoriales sobre Genesis que te ayudarán a salir del paso. Y si ese problema específico todavía existe siempre puedes acudir al Soporte proporcionado por el Equipo de StudioPress. Ellos eliminarán con toda seguridad cualquier error que hayas cometido cuando trabajaste con tu código.

También existen algunos tutoriales básicos en la web de StudioPress. También tienen estupendos vídeo tutoriales muy fáciles de seguir, que te ayudarán a familiarizarte con el framework después de haberlo adquirido. ¡Además hay multitud de desarrolladores que puedes contratar si tienes algunas monedas extra en el bolsillo!


Configurar Genesis en Tu Instalación WordPress

Es tan simple como puede ser. Extrae la carpeta genesis en tu escritorio; ahora verás que tienes una nueva carpeta genesis

Después, accede a tu cuenta FTP con tu software de FTP, yo he usado Filezilla. Dirígete al directorio wp-content/themes y sube la carpeta genesis que extrajiste con anterioridad. Puedes comprar child themes en la web de StudioPress o hacer uno tú mismo. El Child theme funciona básicamente como un disfraz para tu web. Podemos cambiar la apariencia de nuestra web editándolo.

Básicamente en esto consiste todo el proceso. Acabas de configurar tu primer tema en WordPress usando Genesis Framework.


Aplicar Estilo a Tu Genesis Con un Child Theme Responsive

En lugar de crear tu propio child theme desde cero, podrías descargar un tema hijo de muestra desde la web de StudioPress. Tiene todo el código básico que hace falta para que tenga el aspecto de un sitio web. La mayoría de los cambios que tendrás que efectuar los harás sobre el archivo "styles.css" y "functions.php". Lo mejor del child theme de muestra es que su diseño es responsivo lo cual es todo un detalle considerando su gratuidad.


Diseña Tu Propio Child Theme

El primer paso consiste en diseñar tu propio child theme en Photoshop o Gimp. Yo voy a crear el viejo tema Kubrick de WordPress como ejemplo para este tutorial. El motivo por el cual estoy usando el tema Kubrick es por su simplicidad y porque es muy fácil de seguir. Tu también puedes diseñar tu propia web en Photoshop y convertirla después en un child theme para Genesis. 


Diseñar la Cabecera o Header

Vamos a empezar cambiando primero el color de fondo de la web. En el archivo de la imagen puedes ver que el fondo es una escala grisácea. Asegúrate de estar editando el archivo del child theme de muestra y no el de Genesis Framework. Ahora que hemos añadido el siguiente código en nuestro archivo styles.css, guárdalo.

Recuerda que el child theme ya contiene su propio estilo. Todo lo que necesitas hacer es encontrar los elementos div o las clases apropiadas y añadirles tus estilos.

Aplica de igual forma el estilo a la cabecera de tu web. Yo añadiré el código CSS para modificar mi header y centrar el texto mediante el siguiente código.


Tipografía

Ahora damos un giro y nos centramos en la tipografía general del sitio. Para que el título se muestre en blanco, encontraremos el div "title" y el código hex para cambiarlo a blanco. Igualmente añadiremos el color blanco al div de la descripción.

Me gusta la Tipografía del Child theme de ejemplo, así que la dejaré como está. Lo mejor sobre Genesis es que emplea las Fuentes de Google. Esto te facilita la incorporación de diferentes estilos en tu sitio web, tal y como te parezca. Las Fuentes de Google son gratuitas y puedes usarlas libremente en tu web. Puedes descubrir más sobre las fuentes de Google aquí. 


Navegación y Barra Lateral

Puedes configurar la Navegación que quieras mostrar desde los ajustes del tema Genesis. Deslízate hacia abajo hasta los Ajustes de Navegación y elige el que se adapte a tus necesidades. Antes puedes añadir una barra de navegación, tendrás que hacer un "Nuevo Menú" desde la pestaña "Apariencia".  Añade un nuevo menú y crear nuevos enlaces para tus páginas y categorías en tu recién creado menú. Como no existe ningún menú en este ejemplo seleccionaremos que no se muestre la Navegación Principal.

La aplicación de estilo al sidebar es mucho más fácil y no requiere escribir código o en todo caso muy poco, depende de tus necesidades. Para añadir diferentes elementos a la columna lateral, dirígete al área de Widgets del Escritorio y añade una Caja de Búsqueda. También puedes añadir Entradas Recientes, Categorías y cualquier otro widget que te te apetezca.

Aunque el Child Theme de Muestra tiene mejor estilo que él del diseño original, se trata en todo caso de una opinión personal. Para seguir aplicando estilo, puedes eliminar los filetes inferiores y hacer las fuentes de los widgets más pequeñas de manera que sean más parecidas al diseño original modificando su CSS. 


Toques Finales

Para los toques finales añadiremos algunas modificaciones al tema. Para esto editaremos el header en styles.css. Normalmente se supone que ésta es una de las primeras cosas que haces cuando construyes un tema, pero por algún extraño motivo yo siempre lo dejo para el final. 

Después, cambiaremos el pie o footer, para eliminar el texto "Sample Child Theme" que aún muestra. Para editarlo, abre el archivo functions.php y añade el siguiente código al final.

Cambia mywebsite.com con el nombre que desees para tu web. Pulsa guardar, súbelo al servidor y refresca la página web. Tus ajustes serán efectivos inmediatamente.


Conclusión

Las opciones para el tema de Genesis en este aspecto se son inferiores en comparación con las que ofrece Thesis. Además si existiese un generador de sitemaps integrado en Genesis sería fantástico. No hay necesidad de comprar licencias extra como desarrollador para usar Genesis en más de un sitio web, así que al final ahorrarás dinero. Además de esto, tanto la seguridad y como el soporte son excepcionales.

Para diseñar tu sitio web es una opción que parece fácil y sin complicaciones. Los cambios son muy sencillos de realizar. Obtienes un tema responsivo al cual puedes aplicar los cambios que consideres para adaptarlo a tu gusto.  Te posibilita el uso de las millares de Fuentes de Google en tu web. Puedes aplicar tanto colorido como quieras a tu web. Existen algunos temas muy elaborados para StudioPress con aspectos muy artísticos. Obtienes un buenas y potentes opciones SEO para tu web. En mi opinión es una oferta redonda. En conjunto es un fantástico framework que además puedes aprender a usar en un periodo de tiempo muy breve. ¿Qué te ha parecido a ti Genesis? Cuéntanos tu experiencia en los comentarios.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.