Programación Blog de Viajes y Tienda online Ibiltarinekya

Páginas web, apps, blogs, tiendas online, plataformas de enseñanza...

Programación Blog de Viajes y Tienda online Ibiltarinekya

Última modificación: 7 febrero 2018

1.- Descripción del Proyecto

Diseño y programación blog de viajes y tienda online realizada con wordpress y woocommerce.

2.- Características del Proyecto

Funcionalidades Imprescindibles del Blog

1.- Tienda online: el blog tiene que estar preparado para la venta de  productos físicos y  archivos de descarga, libros y artículos en formato .pdf y ebook.

2.- Entradas y proyectos: custom post types o entradas personalizadas tipo post y tipo project con distintos atributos para las secciones vivero, actividad…

3.- Mailchimp: integración en la página de la cuenta mailchimp para campañas de marketing online (Newsletter y Rss).

4.- Mapa interactivo: mapa mundial con localizaciones y acceso a entradas del blog según localización seleccionada.

Otras características del blog

Enlaces a las redes sociales del autor del blog y a la plataforma de enseñanza moodle donde se imparten cursos, actividades, conferencias… del autor del blog.

3.- Desarrollo del Proyecto

Programación Blog de viajes y tienda online

Divi Theme Premium WordPress

El blog se programa en wordpress con un tema premium que incorpora woocommerce, el tema seleccionado para el desarrollo del proyecto es Divi the Elegant Themes. Este tema ofrece a los clientes que te contraten para que diseñes y programes su web una interfaz de administración con muchos diseños de páginas y módulos ya definidos y que se pueden ampliar, tu cliente disfrutará de su impactante diseño y funcionalidad. Es un tema muy respaldado y muy bien documentado, pero ojo no es apto para todos los tipos de proyectos web.

Si estás interesado en el Theme Divi desarrollado por Elegant Themes puedes acceder aquí: encontrarás una demo en vivo del tema, tutoriales, foros, plugins desarrollados para integrar al tema…

Divi WordPress Theme

Tienda online woocommerce

Divi lleva incorporado ya el plugin woocommerce y un par de páginas y módulos para gestionar la tienda definidos en la librería, por supuesto, puedes modificar y crear tantas páginas como quieras para tu tienda y puedes añadir funcionalidades programando unas pocas líneas de código, en mi caso modifiqué el cuestionario de Mi cuenta y el Carrito para facilitar a los clientes los pasos necesarios para la compra, también modifiqué algunas de texto en el archivo de traducciones porque no sonaban del todo bien en español.

Plugins Divi y otros

1.- Plugins Divi: cuando compras el tema Divi tienes acceso a diferentes plugins que puedes descargar para ampliar la funcionalidad de tu tema. Impresionante y necesario el plugin DIVI BUILDER, un editor de páginas y entradas con módulos ya definidos para crear rápidamente tablas de precios, testimonios de clientes, slider…

2.- Plugin Portfolio Posts Pro: Divi tiene definidos dos tipos de entradas post y project. Es probable que necesites trabajar en algún proyecto con entradas personalizadas o custom post types, esta maravilla de plugin añade al editor de Divi: Divi Builder tres nuevos módulos tipo blog y portafolio para utilizarlos tanto en post como en custom post types su precio es 7$ pero lo ahorras en horas de trabajo. Si necesitas más información, aquí te dejo el enlace.

3.- Widget: en Divi es muy fácil crear todos los widget que necesites sin escribir una sóla línea de código y luego llamarlos desde la página. Lo que sí tendrás que hacer si quieres añadir código php a los widget es un snippet en el archivo functions.php, ya que por seguridad, en la mayoría de temas wordpress esto no está permitido.

4.- Theme Child: se añaden funciones y se modifican otras del tema. Para gestionar estas modificaciones se crea un tema hijo, de esta forma no se pierden los cambios cada vez que actualizamos el tema principal Divi. En este artículo te explico como puedes hacer esto programando o si prefieres en esta otra entrada del blog te explico un plugin sencillo de configurar que crea en pocos pasos un tema hijo para tu wordpress.

Custom Post Types

Ya he comentado que el tema Divi, por defecto integra dos tipos de entradas definidas en el panel de administración de wordpress. Si necesitas añadir entradas personalizadas al backoffice de tu wordpress te vas a encontrar con un pequeño problema con una solución muy sencilla. En la programación de la web Ibiltarinekya eran necesarios distintos tipos de proyectos y entradas diferenciadas, aunque en general las características de los mismos eran bastante similares compartían nombre de categorías, esto crea un problema al administrador de la página que se ve perdido al asignar categorías. Por otro lado asignar un número tan elevado de categorías a las entradas tipo post y project no es muy recomendable, se opta por crear un nuevo custom post types para entradas y proyectos.

El problema, cuando creas en Divi custom post types, es que el editor Divi Builder no está disponible para estas entradas personalizadas, al menos en la versiones antiguas. La solución: una pequeña función en tu archivo functions.php y problema resuelto. Aquí encontrarás el código para incorporar a tu archivo functions.php.

Mailchimp y Flamingo

Para realizar campañas de marketing online para suscriptores, newsletter y rss, se hace uso de la cuenta que tiene el cliente en mailchimp. Divi lleva integrado mailchimp pero si quieres ampliar las características por defecto de la plantilla, puedes descargar el plugin Bloom para crear distintos formularios de suscriptores que puedes incorporar en páginas, widget…

 Bloom Email Optin Plugin

El blog necesita distintos tipos de formularios de contacto con diferentes campos. Los formularios se implementan en Form7 y se modifica el diseño con .css. Form7 es un plugin gratuito de wordpress con el que puedes crear todos los formularios dinámicos que necesite tu proyecto y si quieres que todos los emails de los usuarios que contacten mediante formularios queden registrados dentro de wordpress te recomiendo otro plugin también free que es Flamingo. Flamingo guarda todos los emails y datos de todos los usuarios que han enviado un email utilizando los formularios de contacto.

Mapa Interactivo

Siendo un blog de viajes es interesante proveer a la web wordpress de un mapa interactivo, para que a simple vista el usuario que ve el blog pueda identificar las distintas localizaciones donde el autor ha viajado y acceder desde el mapa a los artículos del blog.

Glosario de Términos

Al visitar la página observamos que es un blog de viajes con un enfoque muy especial, el autor funde su experiencia viajera con su profesión de médico y psicólogo. Con un bagaje a sus espaldas de artículos, ensayos y libros que el autor ha escrito a lo largo de su vida y que ha incorporado al blog, era necesario incorporar al proyecto un diccionario de términos. Después de descargar y probar varios plugins me decanté por iThoughts Tooltip Glossary, es gratuito, no está traducido al español pero está muy bien documentado en la web del autor y te será fácil traducirlo y programar sobre él para adaptarlo a tus necesidades.

Trabajando con  excel y xml en wordpress: la base de datos externa del diccionario del cliente está realizada en excel. WordPress importa sin problemas archivos xml así que hay que trabajar en una aplicación externa y cambiar el formato de la base de datos. Con phpmyadmin se importa la base de datos y se modifican los campos de la tabla y el tipo de archivo. De esta forma incorporamos todos los términos al plugin de diccionario. Para exportar todas las entradas nuevas que el cliente vaya incorporando al glosario o diccionario de términos se recurre a un plugin que exporta dentro de wordpress todos los tipos de entradas y datos en formato .csv. El plugin es gratis, lo encontrarás en el repositorio de wordpress o desde este enlace.

Páginas php, css, po

Se crear diferentes archivos en el tema hijo para mostrar los distintos tipos de entradas, proyectos, categorías, etc… Se modifica el diseño del tema padre incorporando un nuevo archivo .css en el tema hijo. Se crean nuevos archivos de traducciones para el tema y los plugins.

Se desarrolla un nuevo archivo functions.php para crear custom post types, widget, agregar tamaño de imágenes, modificar nombre project…

Redes Sociales

Enlace desde el menú principal, widgets, post y páginas a las redes sociales del autor.

4.- Tecnologías

  1. WordPress
  2. html5+css3
  3. ajax
  4. Diseño Responsive
  5. Divi the Elegant Themes
  6. Woocommerce

Conocí a Nerea en un viaje de buceo en el que me habló de su trayectoria profesional. La sentí entusiasta de su trabajo, con una escucha muy empática, que captaba muy bien lo que yo quería entender incluso aunque yo no lo supiese explicar adecuadamente y con mucho potencial creativo. Le encargue la construcción de una página web para un grupo profesional al que pertenezco. Sus propuestas mejoraron más allá de lo imaginado las posibilidades de la página. La relación con ella durante el tiempo de construcción fue excelente. El equipo quedó muy satisfecho y ella sigue supervisando y proponiendo cambios que mejoran la página. Ahora mismo está construyendo una página para mi y queda manifiesto que está al día porque incluso problemas que tenían alguna dificultad tecnológica en la página web profesional ahora ya tienen mejor resolución por la evolución de las herramientas que ella conoce muy bien. Una profesional muy recomendable, por su preparación, reciclaje continuo, capacidad de escucha y creatividad.

Mikel García

Licenciado en Medicina y Cirugía (Universidad de Navarra) y Licenciado en Psicología (Universidad San Sebastián), Sidpaj - Ibiltarinekya

¿Te ha ayudado el artículo? Si es así me alegro.

Si necesitas más información puedes dejar un comentario…

Ver otros trabajos Lph