Integrar blog WordPress en tienda Prestashop 1.6

¿Cómo integrar nuestro blog WordPress en una tienda Prestashop?.

Esta pregunta nos la hemos formulado muchos alguna que otra ocasión. ¿Integrar un blog de WordPress en una tienda Prestashop? La respuesta es SÍ. Y vamos a destripar todos los pasos necesarios para poder acoplar sin problema alguno, nuestro blog en la tienda.

Versiones de WordPress y Prestashop.

Hemos realizado las pruebas con la versión de WordPress 4.8 y 1.6.x de Prestashop, respectivamente. Necesitaremos además, un gestor de ficheros como Filezilla y un editor de texto como Brackets.

También se puede realizar la integración en local. Si elegís esta opción, puede surgir algún que otro error. No dudes en dejárnoslo plasmado en los comentarios. Estaremos encantados de ayudarte.

Primeros pasos y puesta a punto.

Entramos ya en materia. Si vamos al directorio de nuestra tienda (estará por defecto en el raíz), deberemos crear un nuevo directorio dentro de nuestra tienda al que llamaremos «blog».  Quedando así:

Es hora de crear nuestro blog en WordPress. Así que , procedemos a descargarlo y subirlo a nuestro gestor de clientes en el directorio que recientemente hemos creado.

Ya lo tenemos todo. ¿Ahora qué?.

Instalación del blog. Configuración.

Una vez que hayamos subido todo el WordPress a nuestro directorio, crearemos una nueva base de datos para el blog. No nos gusta tener la tienda y el blog en la misma base de datos, aunque se podría hacer así también ya que usan prefijos distintos en las tablas.

Creada la base de datos, nos iremos al archivo wp-config-sample. Editaremos el archivo de configuración con nuestros datos:

Recordar también renombrar el archivo y dejarlo como : wp-config.php. 

Ahora en el navegador teclearemos nuestra direccion de la tienda , apuntando al blog y la ruta de instalación de nuestro WordPress.

http://mitienda.com/blog/wp-admin/install.php

¡Es muy importante poner bien la url!.

Nos aparecerá el asistente de instalación de WordPress y al haber configurado anteriormente nuestro wp-config, algunos pasos se omitirán (como por ejemplo, la creación de la bbdd, el nombre, usuario y contraseña).

Una vez hayamos creado nuestro usuario que usaremos para identificarnos en el blog , ¡ya estaremos dentro de nuestro panel de administración de WordPress!.

Integrando WordPress a nuestra tienda.

Llegamos a un punto crítico. Este punto, es posiblemente el más importante y el que mucha gente ha tenido continuos errores. Vamos a ver como realizar la integración con éxito.

Vamos a dejar claro los pasos que seguiremos:

• Modificación del header.php y el footer.php de nuestro tema de WordPress.
• Modificación del header.tpl de nuestro tema en Prestashop.
• Cargar archivos Javascript de Prestashop en nuestro WordPress y añadir los estilos de nuestro blog (style.css) al archivo global.css de nuestro tema en Prestashop.

Modificando el header y footer de WordPress.

header.php

require_once(dirname(__FILE__).'/../../../../config.inc.php');
require_once(dirname(__FILE__).'/../../../../header.php');

//Quitamos todas las etiquetas y comentarios hasta llegar al div principal. 
//El resto del código del header, lo dejamos como está.

 
footer.php 

require_once(dirname(__FILE__).'/../../../../config.inc.php'); 
require_once(dirname(__FILE__).'/../../../../footer.php'); 
//Añadimos la funcion wp_footer().
wp_footer();

Con estas líneas, estamos cargando los archivos de configuración de nuestro prestashop y la cabecera/pie de página respectivamente de éste también.

Así deberían quedar nuestros 2 archivos de nuestro blog en WordPress.

Importante: Nuestro blog se encuentra dentro del directorio raiz de nuestra tienda: www.mitienda.com/blog. Si varia la ubicación
, habrá que modificar las rutas del directorio.

Modificando el header de Prestashop.

Este archivo va a tener algo de dificultad añadida. Pero lo explicaremos de forma sencilla para que no haya errores.

El primer error que nos podamos encontrar a primera vista es un error 404 en el título y en las meta description y meta keywords. Esto es debido a que no se puede cargar el contenido de forma correcta.

Ante este imprevisto, iremos a nuestro panel de administración de WordPress e instalaremos el plugin  SEO Ultimate. Donde, entre otras cosas podremos configurar nuestros títulos y metas y así corregir el famoso 404.

Y en el mismo header.tpl , justo debajo de la etiqueta <title>, crearemos una variable y le asignaremos la URL actual, de esta manera:

{$curr_dir=$smarty.server.PHP_SELF} 

Con esta variable , usaremos la funcion nativa de PHP , strpos con los siguientes parámetros:

{if strpos($dir, "/blog/") === FALSE}
{if isset($meta_description) AND $meta_description}
{/if}
{if isset($meta_keywords) AND $meta_keywords}
{/if}
{/if} //If principal

Es decir que si nuestra variable con la url actual que en este caso es: http://mitienda.com/blog/, es idéntica a nuestra expresión, no entrará en los condicionales de los meta. Pero si estamos en nuestra tienda, si cargará los meta description y title.

Por eso, hacemos uso del pluging SEO ULTIMATE para poder corregir los metas en nuestro blog.

Con esto tendríamos casi el 100% de integración, pero aún faltan algunos ajustes más que hay que hacer.

Cargar Javascript y CSS

Alguien se podrá preguntar: ¿Y qué hacemos con los archivos javascript que carga Prestashop y los estilos CSS?.

Para los archivos javascript, iremos al backend de nuestro prestashpo a Parámetros avanzados -> Rendimiento. Tendremos una opción que diga : Mover Javascript al final. Activaremos la opción y con eso , tendremos nuestros archivos .js de Prestashop funcionando en nuestro blog.

En cuanto a los estilos CSS, por defecto se cargarán todos los que estén en nuestra tienda Prestashop, pero no los de WordPress.

Por eso , nuestro blog veremos perfectamente nuestro header y footer , pero el contenido del blog completamente noventero. Sin ningún tipo de estilo aplicado del tema que estemos usando.

Y como estamos tirando de Prestashop, haremos lo propio con los estilos de WordPress. Los estilos que necesitemos añadir y/o modificar lo haremos a través del archivo global.css , ubicado en el tema que estemos usando en Prestashop , en el directorio CSS.

Importante: Cuando se hacen modificaciones a archivos , es necesario realizar copias de seguridad de esos archivos por si algo fallara.

Recordar que en el BackOffice de Prestashop, deberemos ir a modulos y escoger menu horizontal interior para poder poner nuestro enlace al blog.

Conclusión y aportes.

Para finalizar este artículo , nos gustaría aclarar que integrar WordPress en Prestashop tiene múltiples ventajas. Que nos daría para escribir otro artículo posiblemente. Es importante tenerlo de esta manera por varias razones: el posicionamiento, la flexibilidad y la sencillez que brinda WordPress y un posible aumento de nuestras ventas, que es algo que prima en los negocios online.

¡Si tenéis algún tipo de duda y/o consulta, no dudéis en dejarlo en los comentarios!