| Suscribir mediante RSS

Integrar un Foro phpBB en WordPress

18 enero 2010 Diseño web

A veces tenemos una página web en un dominio diferente al de WordPress y nos gustaría relacionarla de alguna manera para que aparezca dentro como si formase parte del Blog. También ocurre cuando la página web se encuentra en un subdominio o una carpeta del dominio funcionando con alguna plataforma que no es WordPress y queremos integrarla en él, este puede ser el caso de un Foro en phpBB.

Existen plugins como WP-United que permiten integrar phpBB en WordPress y viceversa. Este plugin puede configurarse para compartir los usuarios de ambas plataformas y manejarlos como si fuera una sola. Su instalación no es muy sencilla, requiere conocimientos de HTML y PHP puesto que es necesario modificar algunos archivos importantes de phpBB y las posibilidades de equivocarse aumentan. Teniendo en cuenta que tanto WordPress como phpBB corrigen fallos con frecuencia sacando nuevas actualizaciones, es posible encontrar alguna incompatibilidad entre versiones de ambos CMS. Aún así, cuando se logra instalar WP-United, funciona muy bien. Pero a veces no necesitamos tantas complicaciones.

En HTML podemos usar la etiqueta iframe para insertar un documento HTML dentro de otro documento HTML, eso es lo que pretendemos. No es ninguna novedad Joomla utiliza este método para incrustar páginas web enteras en su entorno pareciendo que forman parte de esa plataforma CMS. De ahí he cogido la idea.

WordPress permite crear páginas cuyo contenido no tiene por qué ser exactamente el mismo que se muestra en la página de inicio del blog o de las páginas que muestran los artículos, las categorías, etc. Estas páginas tienen una estructura típica con la clásica vista de la cabecera (header) en su parte superior, el sidebar lateral y el pie (footer) para cerrar la página.

Si creamos una página que contenga sólo la cabecera y el pie de página de nuestro Theme podemos colocar en el interior una página web con la etiqueta iframe de manera que parecerá formar parte del blog y permitirá navegar exactamente igual que cuando está independiente.

Además el nombre de esta página se mostrará en el menú superior que generan la mayoría de Themes de WordPress permitiendo a los visitantes entrar y salir fácilmente sin abandonar el blog.

Para conseguirlo creamos un archivo con el Bloc de notas que llamaremos foro.php y que contiene lo siguiente:

<?php
/*
Template Name: Foros
*/
?>

<?php get_header(); ?>

<?php get_footer(); ?>

No se ha incluido el sidebar para aprovechar el espacio horizontal al máximo aunque podría ponerse alguna columna si no ocupase mucho.

Ahora este archivo lo subiremos por FTP a la carpeta dónde se encuentren los demás archivos de nuestro Theme. De esta forma podremos utilizar el editor de WordPress para trabajar con el archivo, que aparecerá en la lista junto con los otros del Theme.

Entre <?php get_header(); ?> y <?php get_footer(); ?> escribimos lo siguiente:

<div class="frameforo">
<iframe id="ventanaforo"
     name="iframe"
     src="http://tudominio.com/phpbb3"
     width="100%"
     height="500"
     scrolling="no"
     align="top"
     frameborder="0"
     class="cont_frame">
     Esta opción no trabajará correctamente.
     Desafortunadamente su navegador no soporta
     Inline Frames</iframe>
</div>

En src sustituye por la dirección de la página que quieras insertar, que será dónde se encuentre el Foro phpBB.

Aquí hay un inconveniente. La altura de la ventana de un foro es cambiante dependiendo de los foros existentes, temas abiertos, respuestas, etc. Cuando se vayan agregando más elementos más altura tendrá la ventana del foro y las distintas pantallas en la que se encuentre el visitante también tienen distinta altura. En el atributo height hemos puesto 500 y se refiere a la altura en pixeles que tendrá el iframe con el foro dentro. Esta medida es insuficiente y ocasionará que se vea el foro cortado. Si pones el atributo scrolling=”auto” se mostrará la barra de scroll lateral con lo que puedes desplazar arriba y abajo la ventana pero la altura seguirá siendo de 500 pixeles.

Para solucionarlo necesitamos recurrir a javascript, tampoco es muy complicado. Lo anterior lo sustituimos por:

<script language="javascript" type="text/javascript">
function iFrameAltura() {
  var h = 0;
  if ( !document.all ) {
    h = document.getElementById('ventanaforo').contentDocument.height;
   document.getElementById('ventanaforo').style.height = h + 25 + 'px';
  } else if( document.all ) {
    h = document.frames('ventanaforo').document.body.scrollHeight;
    document.all.ventanaforo.style.height = h + 20 + 'px';
 }
}
</script>

<div class="frameforo">
<iframe onload="iFrameAltura()" id="ventanaforo"
     name="iframe"
     src="http://tudominio.com/phpbb3"
     width="100%"
     height="500"
     scrolling="no"
     align="top"
     frameborder="0"
     class="cont_frame">
     Esta opción no trabajará correctamente.
     Desafortunadamente su navegador no soporta
     Inline Frames</iframe>
</div>

Sin grandes explicaciones lo que hace el código javascript es calcular la altura de la ventana del foro para mostrarla correctamente. Cada vez que el visitante cambie de pantalla y la altura varíe el código actualiza la nueva medida.

Ahora sólo queda crear una página desde el DashBoard de WordPress que se puede llamar Foro. Sin escribir nada seleccionamos desde el desplegable de la ventana Atributos como Plantilla o Template la opción Foros y eso es todo.

Dependiendo de la combinación de colores elegidos en los Themes tanto de WordPress como de phpBB lucirá mejor o peor. En mi caso no queda tan mal.

Foro Enralados

Sólo hay un detalle a tener en cuenta, phpBB permite al visitante aumentar el tamaño del texto esto hace que la altura del Foro aumente y en este caso no actúa el código javascript. Para solucionarlo y dependiendo del Theme podemos aumentar en el código la cifra 25 por 70 por ejemplo. Si se aumentara la letra la altura resultante quedaría dentro de la pantalla. Este es un problema menor puesto que en cuanto el visitante navegue por el Foro la altura se corrige automáticamente respetando el tamaño del texto. El otro valor de 20 pixeles en el código es para compensar un poco los pixeles que ocupa el scroll horizontal, si no usas scroll no te afecta.

La frase “Esta opción no trabajará correctamente. Desafortunadamente su navegador no soporta Inline Frames” se verá en los navegadores que no soporten iframes. Cosa que no debe preocuparnos porque hasta con navegadores tan antiguos como Internet Explorer 6 se ve perfectamente.

Dejar un comentario