{"id":3233,"date":"2013-04-05T11:49:48","date_gmt":"2013-04-05T11:49:48","guid":{"rendered":"http:\/\/www.apprentalonline.es\/blog\/?p=3233"},"modified":"2013-04-05T11:49:48","modified_gmt":"2013-04-05T11:49:48","slug":"integracion-wordpress-prestashop-un-blog-para-tu-tienda-online-parte-2","status":"publish","type":"post","link":"https:\/\/www.k3bone.com\/blog\/2013\/04\/integracion-wordpress-prestashop-un-blog-para-tu-tienda-online-parte-2\/","title":{"rendered":"Integraci\u00f3n WordPress Prestashop, un blog para tu tienda online. Parte 2."},"content":{"rendered":"

\"Integraci\u00f3n<\/a><\/p>\n

Como continuaci\u00f3n de nuestro anterior art\u00edculo: Integraci\u00f3n WordPress Prestashop, un blog para tu tienda online. Parte 1<\/a>, en esta segunda parte entramos a fondo<\/em> en las tripas de WordPress<\/strong> y PrestaShop<\/strong> para modificar la plantilla por defecto e incluir las cabecera y pie de nuestra tienda PrestaShop.<\/p>\n

\u00a1Comenzamos con la integraci\u00f3n WordPress Prestashop!<\/h2>\n

Antes de empezar con la integraci\u00f3n\u00a0<\/strong>es importante recalcar que es necesario tener unos conocimientos m\u00ednimos<\/strong> de PHP, HTML y CSS. No hay que ser un experto, ya que lo que vamos a hacer es incluir y retocar c\u00f3digo, pero viene bien saber que se hace <\/em>ya que\u00a0 es muy probable que dependiendo de las plantillas de PrestaShop y WordPress de las que partamos, los pasos a seguir y\/o el c\u00f3digo a introducir, fuesen un pel\u00edn<\/em> diferentes.<\/p>\n

Como indiqu\u00e9 en el anterior post<\/a>, la versi\u00f3n de WordPress<\/strong> instalada que utilizamos en este art\u00edculo es la 3.5.1<\/strong>, con el tema por defecto<\/strong> (twentytwelve) activado y la versi\u00f3n de Prestashop, la v. 1.5.3<\/strong>.<\/p>\n

\"instalacion<\/a><\/p>\n

Tambi\u00e9n es imprescindible tener acceso a los archivos que vamos a modificar. Lo ideal es tener un acceso FTP<\/strong> 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\u00edsimo).<\/p>\n

Por \u00faltimo es necesario usar un editor de c\u00f3digo, como por ejemplo Notepad ++<\/a>,\u00a0 que es m\u00e1s que suficiente (y gratuito).<\/p>\n

Editando sin miedo<\/h2>\n

B\u00e1sicamente la integraci\u00f3n 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\u00f3n directa de los archivos desde la zona de gesti\u00f3n, creo que es mejor y m\u00e1s claro editar los archivos directamente en nuestro ordenador y subirlos v\u00eda FTP.<\/p>\n

El archivo de cabecera de nuestro blog a editar se encuentra en \u00abwp-contentthemestwentytwelveheader.php<\/em>\u00ab. Recordad que estamos usando el tema por defecto \u00abtwentytwelve<\/em>\u00ab.
\nEn dicho archivo header.php<\/em>, borramos todo el contenido y lo sustituimos por el siguiente c\u00f3digo:<\/p>\n

\n<?php\nrequire_once(dirname(__FILE__).'\/..\/..\/..\/..\/config\/config.inc.php');\nrequire_once(dirname(__FILE__).'\/..\/..\/..\/..\/header.php');\n?>\n<\/pre>\n
Este c\u00f3digo hace una inclusi\u00f3n del fichero de configuraci\u00f3n principal de PrestaShop \u00abconfig.inc.php\u00bb 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 \u00abblog\u00bb, como vimos en la anterior parte del tutorial. Si tu blog se encuentra en otra ruta, deber\u00edas hacer los cambios pertinentes en estos paths.<\/p>\n
Seguidamente procedemos a hacer lo mismo con el archivo footer.php<\/em> remplazando su contenido por el siguiente c\u00f3digo:<\/p>\n
\n<?php\nrequire_once(dirname(__FILE__).'\/..\/..\/..\/..\/config\/config.inc.php');\nrequire_once(dirname(__FILE__).'\/..\/..\/..\/..\/footer.php');\n?>\n<\/pre>\n
Una vez cambiados los archivos, y subidos v\u00eda FTP, nuestro blog tomar\u00eda el siguiente aspecto:<\/p>\n
\"prestashop-wordpress\"<\/a><\/p>\n
A continuaci\u00f3n procedemos a aplicar el estilo de nuestro blog a la p\u00e1gina. Para ello vamos a modificar el archivo header.tpl de nuestra tienda PrestaShop alojado en \/themes\/default\/header.tpl<\/em> (estamos usando la plantilla por defecto de PrestaShop).
\nHacia la mitad del PHP veremos las l\u00edneas:<\/p>\n
\n\t\t{$HOOK_HEADER}\n\t<\/head>\n<\/pre>\n
A\u00f1adimos la llamada al css de nuestro blog de esta manera:<\/p>\n
\n{if (is_callable('bloginfo'))}\n   <link href="..\/..\/..\/blog\/wp-content\/themes\/twentytwelve\/style.css" rel="stylesheet" type="text\/css" media="all" \/>\n{\/if}\n\t\t{$HOOK_HEADER}\n\t<\/head>\n<\/pre>\n
Seguidamente modificamos la l\u00ednea \u00ablarga\u00bb que hay a continuaci\u00f3n con la etiqueta\u00a0\u00a0 \u00ab<body {if isset($page_name)} …… >\u00bb<\/em> por:<\/p>\n
\n{$dir=$smarty.server.PHP_SELF}\n{if strpos($dir,"\/blog\/")!==false}\n<body id="blog">\n{else}\n<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}">\n{\/if}\n<\/pre>\n
Con este \u00faltimo paso, evitamos que el ID de la etiqueta body del blog aparezca como \u00abpagenotfound<\/em>\u00ab.<\/p>\n
Por \u00faltimo, s\u00f3lo quedar\u00eda centrarse en la modificac\u00f3n del archivo style.css de la plantilla de WordPress, que se encuentra en \u00abwp-contentthemestwentytwelve<\/em>\u00ab, para darle el estilo apropiado al blog y ajustar los conflictos con estilos de la tienda y del blog que puedan aparecer.<\/p>\n
Para empezar es recomendable a\u00f1adir estas l\u00edneas al final del style.css:<\/p>\n
\n#pagenotfound #left_column,\n#pagenotfound #right_column,\n#pagenotfound #footer {display:block !important;}\n<\/pre>\n
A continuaci\u00f3n nos centramos en las definiciones del body que aparecen en dicho fichero, como por ej. en la l\u00ednea 1588<\/p>\n
\nbody {\nbackground-color: #e6e6e6;\n}\n<\/pre>\n
Aqu\u00ed entra en juego los conocimientos de CSS<\/strong> de cada uno, para dejar el blog lo m\u00e1s integrado posible. Mi recomendaci\u00f3n es instalarse el complemento Firebug<\/a> para Mozilla Firefox, e ir jugando con \u00e9l para saber que l\u00edneas tocar:<\/p>\n
\"wordpress-prestashop-integracion\"<\/a><\/p>\n
Conclusi\u00f3n<\/h2>\n
Si hab\u00e9is llegado hasta aqu\u00ed, ver\u00e9is que la integraci\u00f3n WordPress PrestaShop<\/strong> como tal no es muy complicada para aquellos que tengan conocimientos b\u00e1sicos de programaci\u00f3n. Se puede ahondar m\u00e1s en la integraci\u00f3n y hacer por ejemplo que no aparezcan los bloques laterales de la tienda o eliminar los widgets laterales del blog, entre otras ideas<\/em>.<\/p>\n
Agradecimientos<\/h2>\n
Quisiera mencionar y expresar mi agradecimiento a los foreros de todoprestashop.com<\/a> y prestashop.com<\/a> que de manera altruista han ido posteando informaci\u00f3n sobre esta materia, sin la cual hubiese sido muy complicado la realizaci\u00f3n del presente tutorial. En dichos posts pod\u00e9is encontrar mucha m\u00e1s informaci\u00f3n al respecto.<\/p>\n
Os deseo mucha suerte con vuestra integraci\u00f3n.\u00a0 Espero vuestros comentarios \ud83d\ude42<\/p>\n
Informaci\u00f3n Relacionada: <\/strong><\/p>\n