Como continuación de nuestro anterior artículo: Integración WordPress Prestashop, un blog para tu tienda online. Parte 1, en esta segunda parte entramos a fondo en las tripas de WordPress y PrestaShop para modificar la plantilla por defecto e incluir las cabecera y pie de nuestra tienda PrestaShop.
¡Comenzamos con la integración WordPress Prestashop!
Antes de empezar con la integración es importante recalcar que es necesario tener unos conocimientos mínimos de PHP, HTML y CSS. No hay que ser un experto, ya que lo que vamos a hacer es incluir y retocar código, pero viene bien saber que se hace ya que es muy probable que dependiendo de las plantillas de PrestaShop y WordPress de las que partamos, los pasos a seguir y/o el código a introducir, fuesen un pelín diferentes.
Como indiqué en el anterior post, la versión de WordPress instalada que utilizamos en este artículo es la 3.5.1, con el tema por defecto (twentytwelve) activado y la versión de Prestashop, la v. 1.5.3.
También es imprescindible tener acceso a los archivos que vamos a modificar. Lo ideal es tener un acceso FTP a nuestro sitio, desde el cual nos bajamos los archivos de la tienda y el blog, y aprovechamos para hacer una copia de los mismos (importantísimo).
Por último es necesario usar un editor de código, como por ejemplo Notepad ++, que es más que suficiente (y gratuito).
Editando sin miedo
Básicamente la integración consiste en incluir la cabecera y el pie de PrestaShop en la cabecera y pie de WordPress. A pesar de que WordPress permite la edicción directa de los archivos desde la zona de gestión, creo que es mejor y más claro editar los archivos directamente en nuestro ordenador y subirlos vía FTP.
El archivo de cabecera de nuestro blog a editar se encuentra en «wp-contentthemestwentytwelveheader.php«. Recordad que estamos usando el tema por defecto «twentytwelve«.
En dicho archivo header.php, borramos todo el contenido y lo sustituimos por el siguiente código:
<?php require_once(dirname(__FILE__).'/../../../../config/config.inc.php'); require_once(dirname(__FILE__).'/../../../../header.php'); ?>
Este código hace una inclusión del fichero de configuración principal de PrestaShop «config.inc.php» y de la cabecera de la tienda. Es importante remarcar que las rutas que figuran tienen en cuenta que el blog de WordPress se encuentra instalado en una carpeta «blog», como vimos en la anterior parte del tutorial. Si tu blog se encuentra en otra ruta, deberías hacer los cambios pertinentes en estos paths.
Seguidamente procedemos a hacer lo mismo con el archivo footer.php remplazando su contenido por el siguiente código:
<?php require_once(dirname(__FILE__).'/../../../../config/config.inc.php'); require_once(dirname(__FILE__).'/../../../../footer.php'); ?>
Una vez cambiados los archivos, y subidos vía FTP, nuestro blog tomaría el siguiente aspecto:
A continuación procedemos a aplicar el estilo de nuestro blog a la página. Para ello vamos a modificar el archivo header.tpl de nuestra tienda PrestaShop alojado en /themes/default/header.tpl (estamos usando la plantilla por defecto de PrestaShop).
Hacia la mitad del PHP veremos las líneas:
{$HOOK_HEADER}
</head>
Añadimos la llamada al css de nuestro blog de esta manera:
{if (is_callable('bloginfo'))}
<link href="../../../blog/wp-content/themes/twentytwelve/style.css" rel="stylesheet" type="text/css" media="all" />
{/if}
{$HOOK_HEADER}
</head>
Seguidamente modificamos la línea «larga» que hay a continuación con la etiqueta «<body {if isset($page_name)} …… >» por:
{$dir=$smarty.server.PHP_SELF}
{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}
Con este último paso, evitamos que el ID de la etiqueta body del blog aparezca como «pagenotfound«.
Por último, sólo quedaría centrarse en la modificacón del archivo style.css de la plantilla de WordPress, que se encuentra en «wp-contentthemestwentytwelve«, para darle el estilo apropiado al blog y ajustar los conflictos con estilos de la tienda y del blog que puedan aparecer.
Para empezar es recomendable añadir estas líneas al final del style.css:
#pagenotfound #left_column,
#pagenotfound #right_column,
#pagenotfound #footer {display:block !important;}
A continuación nos centramos en las definiciones del body que aparecen en dicho fichero, como por ej. en la línea 1588
body {
background-color: #e6e6e6;
}
Aquí entra en juego los conocimientos de CSS de cada uno, para dejar el blog lo más integrado posible. Mi recomendación es instalarse el complemento Firebug para Mozilla Firefox, e ir jugando con él para saber que líneas tocar:
Conclusión
Si habéis llegado hasta aquí, veréis que la integración WordPress PrestaShop como tal no es muy complicada para aquellos que tengan conocimientos básicos de programación. Se puede ahondar más en la integración y hacer por ejemplo que no aparezcan los bloques laterales de la tienda o eliminar los widgets laterales del blog, entre otras ideas.
Agradecimientos
Quisiera mencionar y expresar mi agradecimiento a los foreros de todoprestashop.com y prestashop.com que de manera altruista han ido posteando información sobre esta materia, sin la cual hubiese sido muy complicado la realización del presente tutorial. En dichos posts podéis encontrar mucha más información al respecto.
Os deseo mucha suerte con vuestra integración. Espero vuestros comentarios 🙂
Información Relacionada:
