Instalación de Tema / Plantilla Profesional

Los temas profesionales para Wordpress son una gigantesca industria que monetiza cientos de miles de millones de dólares, aproximadamente el 25% de los sitios web del mundo están basados en Wordpress.

WordPress ofrece temas o plantillas gratuitas pero no siempre son de calidad o tienen las prestaciones requeridas por sus propietarios para lograr los objetivos en el sitio. Una plantilla gratuita descargada desde wodpresss está realmente limitada en la estética y en las funciones.

De ese modo una parte de los usuarios de wordpress buscan en el mercado de desarrollo de plantillas profesionales una opción que satisfaga sus necesidades . En este sentido tenemos una red de sitios que sirven de tiendas de temas y proveen diversidad en soluciones dependiendo del sector o área de negocios, entre sitios recomendados están templatemonster.com y Themeforest.net.

El portal themeforest.net es mi preferido y una de estos sitios especializado de mayor trayectoria en venta de temas y demás artículos vinculados al desarrollo de software y aplicaciones para wordpress tales como plug in, códigos PHP, contenidos multimedia (proyecto de Afters Effects, sonidos, proyectos PSD, templates power point, archivos Adobe Ilustrator y otros).

En themeforest su menú es extenso así como la oferta de temas, si el comprador busca un portal de noticias themeforest ofrece una alta y variada oferta de plantillas, de igual modo ocurre si el propósito es un sitio de negocios, bufete de abogado, clínica, agencia de modelaje o fotografía, tienda, en fin themeforest aborda cualquiera de estas secciones de interés y mucho más.

Comprueba tu tema

Antes de comprar un tema es recomendable probar su estado de optimización, hay que aclarar que los temas en versión DEMO no estan debidamente parametrizado y la data que arroje o el resultado de nuestra investigación sólo es una primera impresión con la idea de ofrecer un estado del producto para tomar decisiones acerca de la conveniencia de comprar determinado tema. Sabemos que desde la fabrica con el link de la demo es posible medir parte del performance, la herramienta ideal para esta primera observación y medición es page speed de google.

PageSpeed Insights es una herramienta de Google para analizar y evaluar la velocidad de carga de una páginas web y, lo más importante, además proporcionar una serie de utilísimas sugerencias y herramientas asociadas para mejorar esta velocidad de carga, por lo que un análisis de nuestro prototipo de sitio puede ser muy útil a la hora de escoger entre opciones.

En relación a la métrica se puede esperar de entrada un demo de un tema o plantilla con números razonables entre 50 y 70 dependiendo del dispositivo, para los efectos de la herramienta, ésta ofrece la medición en móviles y en escritorio ambas por separado.

Tambien resulta conveniente validar la calidad del responsive o de la adaptabilidad a móvil del tema en  la prueba de optimización para móviles de Google

Previo a cualquier conjetura, en el caso de Page Speed de Google hay que tomar en cuenta que un tema de fábrica viene sin configuración y es muy probable que la demo también este sin configurar por lo que sus resultados de medición serán pobres, sin embargo un resultado por debajo de 30 nos indica que el tema tiene demasiados problemas que resolver por lo que es aconsejable medir otras opciones, incluso bajo el supuesto que sea un tema de nuestro agrado, para los efectos de la internet el tráfico de la visita no va a esperar un tiempo de descarga superior a los 10 segundos, incluso la meta ideal es de 3 segundos, por lo que hay que considerar este aspecto, vital en el proceso de Conversión en el Embudo del Marketing.

Los resultados de Pagespeed de Google son acompañados por resumen de sugerencias por lo que si es un desarrollador o conocedor de lenguajes de programación podrá estar informado de las debilidades del tema en nativo.

Sin embargo es recomendable comprar un tema con resultados en m{ovil por encima de 50 y en ordenador por encima de 60, ya que es muy probable que mejore con la optimización posterior por la via de los plug in y la configuración.

Otra forma de comprar un tema y de tener la mejor oportunidad de compra es monitorearlo en la herramienta de Hubspot Website Grader.

La medición de un tema con esta herramienta implica considerar 2 aspectos, el desempeño y el móvil y olvidarse del SEO ya que es una configuración propia de su sitio en su servidor, o sea que debe obviar los 30 puntos que otorga la medición SEO a los resultados y solo considerar los 60 puntos que da El Desempeño y El Móvil. La idea es que el Desempeño ofrezca una base de resultado superior a 11 y cuanto más alto mejor y que el Móvil esté en 30, en particular sobre el tema de Móvil, solo compre temas con esta cualidad de Móvil en 30 ya que este medición es sobre 2 aspectos relevantes, el diseño responsivo que impulsa en las clasificaciones de búsqueda en las búsquedas en dispositivos móviles y la ventana que permite controlar el ancho y la escala de tu página en los distintos tipos de dispositivos.

En el supuesto que de entrada el tema ofrezca un razonable desempeño usted puede comprarlo. Abajo tenemos imagen del desempeño del tema demo de Heisenberg, (http://highgradelab.com/heisenberg/corporate/)  , en nuestra opinión son números bastante razonables que de entrada garantizan performance al fututo sitio.

Luego de la compra de este tema y de su instalación se procede a la optimización, el resultado de una buena configuración de las aplicaciones de cache seria una excenete manera de lograr optimización.

En nuestro ejemplo del Webinar hemos usado el tema PERIODIC, en nuestra evaluación previa desde su demo en la dirección de fábrica presento en el Google Pagespeed una velocidad móvil de 69 y en ordenador de 72. El tema corresponde a la categoría Blog/Magazine es un portal de noticias, para los efectos de nuestro ejercicio en el webinar de Optimización de WordPress, el tema instalado se le agrego y configuró el plug in WP Super Cache obteniéndose una sensible mejora en el rendimiento.

Antes

Después de su optimización

Es importante destacar como todo en la internet, la medición desde fábrica no es 100% confiable, puede que en el servidor donde este alojado el tema este presentando problemas por lo que arroja resultados erróneos o que el link de fábrica arroje resultados de otro sitio, el punto es que una medición previa del estado de optimización es útil para la toma de decisiones sobre la compra de una plantilla, que es un hecho uy importante ya que será su plataforma web.

Con relación a la compra de framework, recomendamos Genesis. Diremos que un framework es toda la parte técnica de tu sitio, lo que hará que funcione mejor, que vaya más rápido… en definitiva, el que lo optimizará al máximo para que funcione lo mejor posible. Lo llamaremos “tema padre”.

Ese framework tiene luego la parte estética que será el “tema hijo”. Elegiremos un tema hijo que se adecue con la estética que queramos darle a nuestro sitio web. Los cambios que queramos hacer sobre la plantilla de nuestra web las haremos sobre ese tema hijo, no sobre el framework. De esta forma, evitaremos tocar algo que estropee por completo nuestra web.

Si usted es un diseñador web es muy probable que se sienta tentado a trabajar con un FrameWork como Genesis Sin embargo muchos temas vienen con su Framework altamente desarrollado y varias versiones o temas hijos.

 

Instalación del Tema

Para nuestro ejemplo de instalación de un tema profesional iniciamos el procedimiento con la descarga del tema desde la tienda, en este caso themeforest.net

Una vez descargado el archivo que viene en formato .zip hay que subirlo al servidor, para esos efectos lo recomendable es usar un Cliente ftp, en este caso nuestra opción es FileZilla. Una vez creada la cuenta con los datos de acceso la dirección Ftp, el usuario y la clave se abre las ventanas tanto del servidor como de la carpeta en el escritorio, desde donde debe copiarse el zip del tema  y pegarlo en la carpeta Theme dentro de la carpeta wp-content en la raíz publica de su cuenta de servidor.

Interface de Filezilla

Este ejercicio está claramente observado y ejemplificado en el webinar 2 Instalación de Tema Profesional que acompaña este curso.

Una vez cargado el archivo del tema debe proceder a descomprimirlo desde el Cpanel de su cuenta de administrador en la sección de administración de archivos.

Cpanel – Descompresión de archivo .Zip en el directorio con el botón Extraer en el menú superior

Luego hay que abrir el Administrador del WordPress, ingresar al Dashboard y seleccionar el boton Apariencia y luego Temas. Debemos tener una variedad de temas que incluyen el nuevo tema. Otra forma de cargar el tema es a través del Upload propio dentro de la sección que es un botom colocado arriba al lado de la caja de búsqueda al seleccionarlo se va a una página Añadir Temas, selecciona el boton arriba al lado del título de la página SUBIR TEMA y carga el archivo .zip que es descomprimido e instalado.

En muchas ocasiones esta forma de carga del tema da errores por lo que es conveniente conocer la forma de carga manual por la vía del cliente FTP como lo hacemos en el ejemplo del Webinar.

Es importante revisar el contenido del ZIP ya que en ocasiones los temas vienen comprimidos dentro de un Zip por lo que tendría que hacerse una doble descompresión cuando se cargue en la carpeta del tema en el servidor.

El tema se puede seleccionar una vez sea cargado mediante la activación del tema.

Una vez activado el tema hay que proceder a verificar mediante refresh del sitio, al confrmarse la presencia del nuevo tema se debe seguir con la instalación de los plug in que vienen con el tema, y en el caso de que no traiga plug in hay que continuar verificando en la sección de Opciones del Tema para validar que funcionalidades trae el tema.

Las opciones del tema van a depender de la complejidad del desarrollo del producto, algunos temas tienen un marco de trabajo con muchas funciones que incluyen cambios en la cabecera, logos, diseños de sidebar, opciones de redes sociales, integración con google analitycs, creación, stylos y si es un e-commerce algunas funciones típicas de tienda.

Temas de opción de un tema complejo

Para los efectos de nuestro tema las opciones son pocas y se limitan al front o index del sitio de modo de generar una maquetación de la página de inicio de acuerdo a la presentación del tema.

Opciones de tema del Demo en el ejemplo del Webinar, son opciones limitadas y simples que solo afectan la p{agina de inicio, es un constructor del index y lo que hace es organizar columnas, categorías, galerías de post y menus.

La pagina por defecto del sitio esta configurada como un Blog con un feed de 10 post.

Antes de continuar con la instalación hay que cargar el archivo XML que acompaña al tema el cual trae el Demo del sitio, para ello debemos tener instalado el plug in WordPress Importer, desde el boton herramientas hay que seleccionar importar, una vez en la pagina se debe seleccionar WordPress Ejecutar Importador y cargar el XMl que viene dentro del archivo .Zip del tema comprado.

Una vez cargado el archivo XML see hacer refresh de la página y observaremos nuevas entradas y algunos cambios en la columna de widgets.  Los nuevos archivos incluyendo logos muestran el demo del tema que ha comprado la idea es que usted lo personalize con las opciones del tema. Hay que considerar que la página de inicio es muy probable que este configurada por defecto como blog con un feed de noticias de acuerdo al ajuste de lecturas.

Una de las primeras acciones de configuración es llamar a la página que trae por defecto el tema, en este caso la página Home que ya viene configurada con la plantilla de Home y  para ello deberá dirigirse a la sección de ajueste de lectura y modificar la pagina frontal y seleccionar una página estática que en este caso es Home.

En el supuesto de que genere un sección de Blog en su sitio puede colocar la pagina ed blog en la opción de pagina de entrada.

No siempre la página home del demo viene configurada por completo por lo que deberá organizarala dependiendo de sus gustos, preferencias, categorías, colores y tipos de textos y para ello puede usar las opciones del tema y también la Personalización en el Escritorio el cual le dará un marco de trabajo opcional que puede apoyarle en sus modificaciones.

Finalmente se sugiere acompañar el proceso de instalación del tema profesional con el plug in Contact Form 7 que genera formularios de contactos y Contact Form DB que genera archivos XLS y CSV de los contactos que se registran en los formularios. Eta función es vital en el proceso de Conversión o generación de Leads. La descarga de estos archivos puede ser usados luego en procesos de segmentación o en un CRM.

 

Ver el Webinar Instalación de Tema Profesional