Integrar el header y footer de PrestaShop 1.6 con WordPress

En la entrada de hoy te traemos la explicación de como integrar el header y footer de PrestaShop 1.6 con WordPress junto con los motivos de porqué realizarlo.

Seguramente por algún cliente o para alguna web propia te habrás encontrado con la necesidad de implementar un blog con WordPress para tu ecommerce con el objetivo de aportar contenido de calidad, posicionar determinadas keywords… y quizás alguna vez, o tal vez ahora mismo, necesitas que el header y el footer de tu blog sean el mismo que el de tu PrestaShop. Si no sabes como realizarlo o hay algún aspecto con el que estas bloqueado, estas en la entrada adecuada :).

Aunque integrar el header y footer de PrestaShop 1.6 con WordPress parezca una tarea laboriosa, te recomendamos realizarla si estas integrando un blog con tu ecommerce.

En el caso de que no estés seguro de poder realizar esta integración o de querer optar por la vía fácil, nosotros podemos realizarla para ti. Solo tienes que hacer clic en el siguiente botón y rellenar el formulario para contactar con nosotros :).

Quiero que os encarguéis de este desarrollo

0- La importancia de tener un blog

Disponer de un blog en tu tienda es un aspecto casi esencial si quieres mejorar el SEO de tu web. El blog es una herramienta muy importante en un plan de marketing y posicionamiento SEO.

Un blog te permite tener contenido nuevo, dar a conocer las ventajas de tus productos, sus beneficios… y de este modo cuando pasan los robots de Google ven información nueva en tu web. Este aspecto es muy importante ya que uno de las factores que más influyó en los últimos años en el algoritmo de Google fue el refresco de contenido.

1- Las ventajas que WordPress ofrece con el posicionamiento SEO

WordPress es una plataforma que ya lleva muchos años en el mercado, tiene una comunidad muy grande y es uno de los CMS más utilizado por los usuarios. WordPress está muy preparado a nivel de SEO con el objetivo de gustarle a Google y de este modo es fácil y rápido posicionar todos tus contenidos en su buscador.

A nivel de SEO se recomienda que el blog este dentro de nuestra tienda y no al revés por tres motivos destacados:

• WordPress puede adaptarse mejorar a PrestaShop que PrestaShop a WordPress y de este modo te beneficias de las ventajas que ofrece WordPress.
• Si tienes el blog dentro de tu tienda, tienes más contenido de calidad y keywords por posicionar tu web.
• Como los artículos del blog se pueden posicionar con facilidad y rapidez, en poco tiempo Google deducirá que tu sitio merece la pena visitar.

2- Tu objetivo es vender y obtener beneficios

No hace falta que engañes a nadie, no disimules diciendo que le das más importancia a los contenidos de calidad de tu tienda que a vender. El objetivo de cualquier ecommerce es vender. Por lo tanto, es mejor que el entorno principal de tu web sea la tienda, mostrando siempre las categorías y el carrito para que a ningún usuario se le olvide que se encuentra en una tienda.

De este modo los usuarios podrán estar consultando tu blog pero teniendo siempre visible las categorías de tus productos y el carrito para que puedan realizar o finalizar una compra en cualquier momento y desde cualquier página.

3- WordPress ofrece una gran cantidad de plugins y funcionalidades gratuitas

WordPress ofrece una gran cantidad de plugins y funcionalidades tanto gratuitos como de pago que te ayudarán a poder realizar todo lo que necesites en tu blog. De este modo podrás personalizar tu blog a tu gusto y sin tener que acudir si o si a una empresa especializada en programación.

A nivel de SEO también dispondras de plugins muy potentes como el SEO by Yoast el cual te ayudará y te dará muchos consejos para poder optimizar todo lo posible el SEO de tu blog y de tus artículos.

4- La solidez que ofrecen WordPress y PrestaShop

Tanto WordPress como PrestaShop llevan muchos años en el mercado, disponen de una comunidad muy grande y tienen una gran cantidad de plugins y módulos tanto gratuitos como de pago.

Estas dos plataformas están bajo constante mejora por lo que te ayudarán mucho a tener una tienda y un blog de calidad con el que poder obtener buenos resultados, ventas y un buen posicionamiento en Google.

1- Descargar WordPress

Puedes descargarte la última versión de WordPress en su web oficial.

2- Crear el directorio para tu blog y subir WordPress por FTP

Tienes que acceder por FTP a la raíz de tu tienda PrestaShop, crear una nueva carpeta con el nombre «blog» y subir todos los ficheros y carpetas que te acabas de descargar de WordPress en ella.

3- Crear una base de datos e instalar WordPress

Antes de empezar con la instalación, tendrás que crear una base de datos en la cual WordPress pueda poner todas las tablas que necesita para su correcto funcionamiento.

Deja a mano el servidor, nombre de usuario y contraseña de esta base de datos que acabas de crear porqué la necesitarás durante su instalación.

A continuación, a través de un navegador tienes que acceder al blog para empezar con la instalación (www.nombredetutienda.com/blog).

Sigue todos los pasos del autoinstalable hasta tener tu blog listo.

4- Modificar el header y el footer de WordPress

Una vez tengas el blog instalado y configurado correctamente, toca modificar la cabecera y el footer de WordPress para que cargue las de PrestaShop en vez de las suyas.

Para realizar esto tienes que acceder al directorio:

/blog/wp-content/themes/nombre-de-tu-tema/

A continuación modifica el nombre de los ficheros «header.php» y «footer.php» para tener un backup de ellos y crea unos nuevos. El contenido que tendrás que introducir es el siguiente:

header.php

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

footer.php

<?php
require_once(dirname(__FILE__).'/../../../../config/config.inc.php');
require_once(dirname(__FILE__).'/../../../../footer.php');
?>

Con estos cambios, ya estaremos cargando la configuración, el header y el footer de nuestra tienda en nuestro blog.

Tienes que tener en cuenta que nosotros estamos trabajando con el blog en la raíz de nuestra tienda. Si decides tenerlo en otro directorio será necesario modificar las rutas de los dos anteriores ficheros.

5- Adaptar los estilos

A pesar de que en tu blog ya verás la cabecera y el footer de tu tienda, los estilos no estarán para nada como lo recordabas.

¿Que he echo? ¿La he fastidiado?

No te preocupes, es normal, acabas de sustituir el header de WordPress por el de PrestaShop por lo que ahora no estas cargando ninguno de sus estilos.

Para solucionar esto tienes que realizar dos cosas:

• Indicar que cuando un usuario acceda al blog, la etiqueta «body» tenga como identificador «blog» y en caso contrario tenga todo el contenido de tu tienda PrestaShop.
• Cuando un usuario este accediendo al blog tendrás que cargar las hojas de estilo necesarias.

Para realizar esto tienes que acceder al fichero «header.tpl» de PrestaShop que se encuentra en la carpeta «/themes/nombre-de-tu-tema/» (te recomendamos realizar un backup del fichero antes de tocar nada si es la primera vez que lo realizas).

En primer lugar tienes que localizar el cierre de la etiqueta «head» y antes de esta añadir el siguiente código:

{$dir=$smarty.server.PHP_SELF} 

{if strpos($dir,"/blog/")!==false}
    <link rel='stylesheet' href='/blog/wp-content/themes/twentynineteen/style.css' type='text/css' media='all' />
    <link href="/themes/default/css/global.css" rel="stylesheet" type="text/css" media="all" />
 {/if}

Con este código básicamente lo que haces es indicar que si un usuario está cargando el blog, cargue los estilos de tu tema de WordPress y del tema de tu PrestaShop. En caso de que el usuario este cargando tu tienda, obviarás estas hojas de estilos y harás la carga estándar.

En este ejemplo, hemos cogido la hoja de estilos de WordPress del theme «twentynineteen» y la del theme de PrestaShop «default«. No obstante, en estas dos líneas tendrás que poner el nombre del theme que estés utilizando en cada plataforma.

A continuación, para modificar la etiqueta «body» haremos algo parecido al anterior código. Básicamente tenemos que buscarla, comentarla y poner el siguiente código:

{if strpos($dir,"/blog/")!==false}
    <body id="blog">
{else}
    <body {if isset($page_name)}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} class="{if $hide_left_column}hide-left-column{/if} {if $hide_right_column}hide-right-column{/if} {if $content_only} content_only {/if}">
 {/if}

6- Cargar correctamente los ficheros javascript

En el caso de que tengas problemas con los javascripts de PrestaShop dentro del WordPress, como por ejemplo con el menú o con el carrito, puedes ir al Back Office de tu PrestaShop, ir al apartado «Parámetros avanzados -> Rendimiento«, buscar la opción con nombre «Mover Javascript al final» y activarla.

7- Añadir un enlace de tu blog desde tu tienda

Si has realizado todos estos pasos correctamente, tendrías que tener completamente integrado el header y el footer de tu PrestaShop 1.6 con WordPress. El último paso ya sería introducir un link en el menú de tu tienda que contenga un enlace hacía el blog.

Posibles problemas al integrar el header y footer de PrestaShop 1.6 con WordPress

Problemas con el Javascript de PrestaShop con WordPress

Si los elementos del header o del footer de tu tienda que se accionan por Javascript (como por ejemplo el menú o el carrito desplegable) no funcionan correctamente, revisa a través del código fuente si se están ejecutando las llamadas a los ficheros javascript necesarios y que no estén duplicados.

Error 404 o página no encontrada en las páginas de tu blog

Si al navegar por tu blog las páginas te dan un error 404 en el título, en la meta description y en las meta keywords es porqué el contenido no se está cargando correctamente.

Para solucionar este problema tienes dos opciones:

1- Instalar y activar el plugin «SEO Ultimate» en WordPress. Con este plugin podrás definir el título, meta description y meta keywords de cada página de tu blog y verás como el error 404 va a desaparecer.

A continuación tendrás que cargar unas meta etiquetas u otras en función de la página que el usuario este visualizando. Puedes hacer esta condición si accedes al fichero «header.tpl» de PrestaShop, buscas donde se definen las meta etiquetas y sustituyes el código actual por el siguiente:

{if strpos($dir,"/blog/")===false}
    {if isset($meta_title) AND $meta_title}
        <title>{$meta_title|escape:'html':'UTF-8'}</title>
    {/if}
    {if isset($meta_description) AND $meta_description}
        <meta name="description" content="{$meta_description|escape:'html':'UTF-8'}" />
    {/if}
    {if isset($meta_keywords) AND $meta_keywords}
        <meta name="keywords" content="{$meta_keywords|escape:'html':'UTF-8'}" />
    {/if}
{/if}

2- Esta opción sirve si quieres que la integración de WordPress con PrestaShop funcione correctamente con el plugin «Yoast by SEO«. En el caso de no querer instalar el plugin “SEO Ultimate” porque por el SEO quieres utilizar otros como como el “Yoast by SEO”, la segunda alternativa que tienes es añadir las anteriores líneas de código en el fichero “header.tpl” de PrestaShop y a continuación añadir un módulo para cargar la función “wp_head()” en el caso de estar navegando por el blog. Esta función ya se encarga de imprimir las meta etiquetas de WordPress por lo que tendrás solucionado el problema. Los pasos para tener tu módulo son los siguientes:

• Crear una carpeta con el nombre «modulowp» dentro de la carpeta «modules» de PrestaShop.
• Crear un fichero en su interior con el nombre «modulowp.php» y añadir el siguiente código:

<?php
if (!defined('_PS_VERSION_'))
  exit;
  
class modulowp extends Module
{
    public function __construct()
    {
        $this->name = 'modulowp';
        $this->tab = 'Modulo en la cabecera';
        $this->versión = 1.0;
        $this->author = 'Elina Webs';
        $this->need_instance = 0;

        parent::__construct();
        
        $this->displayName = $this->l('Modulo cabecera WordPress');
        $this->description = $this->l('Modulo cambia la cabecera añadiendo etiquetas de WordPress.');
    }
    public function install()
    {    
        return (parent::install() AND  $this->registerHook('displayMyNewHook'));
    }

    public function hookDisplayMyNewHook($params) 
    { 
        global $smarty;
        $dir= $_SERVER['PHP_SELF'];
        if(strpos($dir,"/blog/")!==false){    
            wp_head();        
        }
    }
}

• Ir a la sección de módulos en el Back Office de tu PrestaShop e instalar el módulo que acabas de crear.
• Ir al fichero «header.tpl» del theme de tu PrestaShop y antes del cierre de la etiqueta «head» llamar al siguiente hook:

{hook h=’displayMyNewHook’}

Si no estas muy seguro al realizar el anterior módulo, solo tienes que contactar con nosotros por mail y te lo enviaremos sin ningún tipo de problema ni de coste :).

Necesito el módulo

Y esto sería la segunda opción para solucionar los errores 404 en las páginas de tu WordPress.

La función «wp_head()» es una función propia de WordPress la cual imprime las meta etiquetas del blog. Con los anteriores pasos básicamente lo que conseguirás es que si un usuario esta cargando el blog, las páginas que consulte cargue las meta etiquetas de WordPress en vez de las de PrestaShop.

Y con todos estos pasos aplicados correctamente ya tienes que haber conseguido el objetivo de esta entrada: integrar el header y footer de PrestaShop 1.6 con WordPress.

Esperamos que te haya servido de ayuda, que te haya sido útil para conseguir la integración y para cualquier duda solo tienes que contactar con nosotros o dejarnos tu comentario. Estaremos encantados de ayudarte :).

En el caso de que prefieras que nosotros hagamos todo este desarrollo por ti y nos encarguemos de los posibles problemas que puedan surgir solo tienes que hacer clic en el siguiente botón y rellenar el formulario para contactar con nosotros.

Quiero que os encarguéis de este desarrollo