Integrar un Foro phpBB en WordPress
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.
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.
El código completo queda de la siguiente manera:
<?php
/*
Template Name: Foros
*/
?>
<?php get_header(); ?>
<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>
<?php get_footer(); ?>
NOTA:
En las últimas versiones de los navegadores más modernos el código javascript anterior he dejado de funcionar correctamente. En su lugar se puede usar el siguiente que ha sido comprobado en la mayoría de navegadores:
<script language="javascript" type="text/javascript">
function iFrameAltura()
{
var h = document.getElementById('ventanaforo');
if(h.contentWindow){
document.getElementById('ventanaforo').height =
h.contentWindow.document.body.scrollHeight + 30;
}
}
</script>
Actualizado 12 de abril de 2012
26 marzo 2010
excelente alternativa para los que no queremos una integración completa como la que ofrece wpunited,muchas gracias que me ha servido de mucho D:
14 abril 2010
Excelente explicación! Agradecido 😉
18 abril 2010
Hola!
Muchas gracias por la explicación, es muy útil. Pero tengo un problema: he utilizado la manera que tu has propuesto (he intentado usar el wp-united y es muy complejo) pero el foro se muestra dentro de la columna dónde se escribe, y por lo tanto, el foro queda cortado. Aquí tienes cómo me queda: http://www.antonbenet.com/forum . Cómo puedo hacer que ocupe la página entera?
Gracias
18 abril 2010
Gracias dudete,
Gracias Jose322
Hola Anton:
¿Has eliminado la columna lateral derecha o sidebar?
Si te fijas en el artículo comento que debes quitar el sidebar para ganar espacio y salga el Foro a pantalla completa.
También te recuerdo que debes desinstalar correctamente WP-United si no lo vas a usar. En la documentación te dice los pasos a seguir. Si quedan restos puede funcionar mal el enlace al Foro.
Dame más detalles de lo que has hecho para ver si lo podemos solucionar.
Un saludo
19 abril 2010
Hola!
Gracias por responder tan rapido! Te explico: he intentado usar el WP-United, pero no me funciona. Le doy al Setup Wizard, introduzco todos los datos y me sale Communicating with Server durante mucho rato(http://yfrog.com/j2problemablogj). Después aparece un error diciendo que no pudo conectar. He revisado los datos y son correctos (creo). Qué puedo hacer?
19 abril 2010
Tras varios intentos inútiles de usar WP-United, he optado por usa tu formula. Pero sigue sucediendóme el mismo problema: aunque en ningún momento llamo la función sidebar (y por supuesto la sidebar no aparece) el foro se ve cortado. Me gustaría saber cómo hacer que el foro aparezca a pantalla completa.
I el problema está aquí: http://www.antonbenet.com/forum
Gracias i disculpa las molestias!
19 abril 2010
Anton sobre WP-United no te puedo ayudar mucho. En su momento me costó mucho instalarlo y después otro tanto para desinstalarlo. Para que funcione bien las versiones de WP-United y phpBB3 tienen que ser las que dice en la documentación de WP-United.
El problema que tienes con el código del artículo se debe a tu theme o plantilla. Si te atreves intenta lo siguiente:
En el archivo header.php sustituye la línea que pone:
<div id="main">
por
<?php if ( is_page('foro')) { ?>
<div>
<?php
} else { ?>
<div id="main">
<?php } ?>
Siendo foro el nombre de la página del Foro, sustituyelo por el que le hayas puesto.
20 abril 2010
Hola admin! Tengo que reconocer que me costó Dios y ayuda desinstalar el Wp-United. Pero bueno, a lo que vamos: he sustituido las línias de código que me has dicho, pero el problema aun persiste. He activado el scroll para que por lo menos te puedas desplazar... Alguna otra solución (aparte de cambiar de tema)?
Gracias
20 abril 2010
El código anterior debería funcionar. Lo que hace es comprobar si la página que se carga es la del Foro y en caso correcto quita la limitación de tamaño de div id="main". Al resto de páginas del blog no les afecta. Es posible que el nombre que le has puesto a la página no lo reconozca WordPress. Pon forum como aparece en el menú. Fijate en la URL que aparece en el navegador, muestra forum-4.
El nombre que se muestra es Forum pero la página se llama Forum-4. Espero haberme explicado bien.
21 abril 2010
Hola! Ahora ya funciona! He cambiado el link a forum (en lugar de forum-4) pero seguía sin funcionar. Entonces, en el código que me proporcionaste, cambié [?php if ( is_page(‘foro’)) { ?] por [?php if ( is_page(‘/foro’)) { ?] (introduje la barra antes de foro). Entonces funcionó, pero aparece el siguiente error: Warning: Division by zero in /home/s094511e/public_html/wp-content/themes/springLoaded/header.php on line 41. Todo funciona perfecto, pero aparece esta línia encima de las categorías del blog. Hay algun modo de quitarla?
Muchas Gracias por todo
21 abril 2010
A ver, no te inventes nada. Si tu página se llama Forum debes poner forum en el código. Claro que da error, has puesto una división con la barra. ¿Por qué funciona ahora? Pura casualidad...
Este es tu código:
<?php if ( is_page('forum')) { ?><div>
<?php
} else { ?>
<div id="main">
<?php } ?>
¿Por qué sale la página corum en la página de inicio?
Cuidado con los caracteres extraños en el código. Revisa bien todas estas cosas. La página se puede llamar forum y ponerle el nombre que quieras. Por ejemplo, "Acerca de" en el menú superior de este blog es about y así la identifica WordPress.
Otro detalle MUY IMPORTANTE, las comillas dobles y comillas simples que muestra esta ventana de comentarios no son las que debes poner en el código. Las comillas dobles están en la tecla del número 2, las simples están con la ?. Si te fijas son diferentes. Pon las correctas para que funcione el código. Tengo que cambiar esto en WordPress...
21 abril 2010
Hola,
Creo que ahora ya funciona. He usado tu código, poniendo las comillas correctamente (creo que ese era el problema)y sin barras de dividir (XD). Aun así, cuando no has inciado sesión, aparece el mismo error. En cambio, una vez has inciado sesión, el mensaje de error desaparece como por arte de magia. Te puedo asegurar que no hay ninguna barra de dividir en la línea 41 del código de header.php. Aquí está: http://www.antonbenet.com/forum .
21 abril 2010
Me alegro de que se haya solucionado todo, trabajo costó...
La mayoría de errores en programación se deben a este tipo de fallos en la escritura. Para esto hace falta mucha paciencia y buena vista...
Cuando se hacen estas pruebas hay que refrescar la página en el navegador y borrar la cache del mismo. Así obligamos al navegador a que cargue la última versión de la página.
Un saludo
21 abril 2010
Por fin solucionado!!! No fue fácil pero... Muchísimas gracias por toda la ayuda prestada i perdón por los errores de principiante (soy bastante novato en el mundo de la programación)!! Te lo agradezco mucho, de verdad.
Anton
25 junio 2010
Hola admin, tengo un problema con el código que has planteado. Al insertarlo en mi página web, me manda el siguiente error:
Fatal error: Call to undefined function get_header() in XXX/foro.php in line 2.
¿Cómo hay que llamar a la función entonces? No sé la verdad :S
25 junio 2010
¿Cómo has creado la página Foro? Debes crear una página igual que has creado Acerca de, Contacto, Recetas, etc.
Como dije en el artículo desde el DashBoard de WordPress crea una página y sin escribir nada en ella selecciona desde el desplegable de la ventana Atributos como Plantilla o Template la opción Foros y eso es todo.
Foros es el nombre que le has puesto a la plantilla dentro del archivo foro.php
El archivo foro.php debe estar junto con los demás archivos del theme, index.php, single.php, search.php, etc
Saludos
25 junio 2010
Gracias ya lo he solucionado, no entendía lo de la página!
4 julio 2010
gracias por tu articulo
my foro es MyBB (tambien phbb) y funciona perfectamente.
estoy empezando y me has ayudado mucho.
16 julio 2010
Hola!
Gracias por el truco que no me ocurría hacerlo con iframe.
no sé porque no funciona la altura automática..
alguna sugerencia al respecto?
gracias de antemano.
16 julio 2010
Jethrov comprueba que no haya ningún error en todo el código tanto HTML como javascript, sobre todo las comillas que a veces no son las correctas al copiar directamente del blog.
Comprueba con varios navegadores que el código se está ejecutando no sea que se deba a un problema de uso de javascript en ese navegador.
Ya me dirás
Un saludo
23 julio 2010
Buenas no he conseguido hacerlo, te dejo mi msn para que me ayudes te lo agradeceria mucho
saludos
23 julio 2010
Hola Pikline
Si me das más detalles podré decirte mejor. ¿Exactamente que sale en pantalla? Si es para el theme del link que has dejado y el problema es que sale cortado el Foro prueba poner lo siguiente justo después del código javascript.
<?php if ( is_page('foro')) { ?></div>
<?php } ?>
Siendo foro el nombre de la página que hayas creado. Pon el que corresponda.
Un saludo
23 julio 2010
El problema es que creo una pagina en wordpress llamada foros y Atributos como Plantilla o Template, lo que no entiendo que tenego que poner dentro de la pagina.
El documento .php lo tengo en los archivos de mi theme.
Y lo tengo puesto así
SALUDOS
24 julio 2010
No tienes que escribir nada dentro de la página, sólo ponerle nombre lógicamente. El código va en el archivo PHP que hace de plantilla y que has creado y puesto con los demás archivos del theme.
En Atributos como plantilla dale al desplegable y te saldrá el nombre que le has puesto a la plantilla. Lo seleccionas y guardas los cambios.
He escrito el código completo al final del artículo.
Ya me dirás
Saludos
24 julio 2010
Vamos haber cojo el código completo y cambio la url a http://www.pikline.com/foros y lo guardo con el nombre de foros.php esto lo subo a mi theme es decir arras theme.
Luego voy a crear una pagina con wordpress en el nombre de la pagina le pongo foros. Ahora aqui me pierdo, segun tengo entendido voy a page atributtes y esta superior que me aparece enviar, contacto y acerca de y abajo plantilla que me pone plantilla predeterminada y one column.
Saludos
25 julio 2010
Todo correcto, donde mismo aparece plantilla predeterminada y One Column Page debe aparecer también Foros. Si no está en la lista es que el archivo foros.php no lo has guardado en la carpeta correcta del theme o que has cometido algún error en la cabecera del archivo. Este archivo tiene al principio una estructura típica para que WordPress detecte que es una plantilla.
<?php
/*
Template Name: Foros
*/
?>
Foros es el nombre que aparece en WordPress en la lista de plantillas disponibles. Si quieres que aparezca con otro nombre lo cambias. No tiene porqué llamarse igual que el archivo o la página.
Este archivo debe estar junto con los demás archivos del theme, index.php, home.php, footer.php, etc. Fijate que ahí también está el archivo page-onecolumn.php que es una plantilla que viene con el theme y que aparece en la lista como One Column Page.
Otra cosa, ya tienes una dirección como pikline.com/foros que es dónde está el Foro de Simple Machines. Crea la página en WordPress con otro nombre, Foro o Forum o como prefieras para evitar duplicados.
No estoy diciendo nada nuevo, lean el artículo y los comentarios despacio, verán que no es tan dificil, aunque en algunos themes se complique un poco.
Saludos
25 julio 2010
OOO gracias ya esta es que lo subia al theme equivocado pero de todas formas sale mal lo de abajo
http://www.pikline.com/foro
Saludos y mil gracias
25 julio 2010
He llegado a la conclusión de que no lees.
¿Has puesto este código que te dije?
<?php if ( is_page('foro')) { ?></div>
<?php } ?>
Va después de </script>
Elimina todas esas páginas que has puesto como foro.php, foro.php/foro y foro.php/forum, sobran.
8 diciembre 2010
Hola, perdón por el off-topic pero es que he visto que has cerrado los comentarios en el post que me interesa debido a su antigüedad.
En el que explicabas como hacer un iframe con algo de Javascript para integrar un foro dentro de tu WordPress.
Pues bien, he seguido todos tus pasos, he leído los comentarios, pero el asunto es que no me aparece el foro dentro del blog. O sea que la página que dices que cree con el nombre Foro, al clickear en ella solamente me hace una redirección al propio Foro… sin llegar a integrarse con el tema de mi blog…
Quisiera contactar contigo para ver si me pudieras ayudar… ya que el blog aún no lo tengo completo ya que ahora solo estoy haciendo pruebas con el para en un futuro montar el definitivo.
Saludos y gracias de antemano!!!
9 diciembre 2010
Algunas dudas ya han sido respondidas en los comentarios y no insistiré en ellas. Este código es aplicable a la mayoría de Themes aunque pueden existir algunos donde se requieran realizar pequeñas modificaciones. En ese caso pregunta y veremos si podemos ayudarte.
byhanzo, es posible que ya tuvieras un enlace a Foro por tanto no puedes repetirlos. Fijate en qué carpeta tienes el Foro.
Es decir,
"tu-sitio.com/foro/"
"tu-sitio.com/foro.php"
"tu-sitio.com/wp-content/tu-theme/foro"
son lo mismo, debes cambiar el nombre del enlace de la página en WordPress y probar. Una cosa es el nombre que le has puesto en el menú y otra el enlace propiamente dicho. Es como los artículos, pueden tener un título y el link ser otro. Además el nombre del archivo de plantilla no tiene por qué llamarse foro.php, le puedes poner cualquier nombre y asignarlo después a la página que crees.
Es decir, los nombres de menú, link y plantilla pueden ser diferentes. No sé si he liado más la explicación...
Ya me dirás...
Un saludo
24 diciembre 2010
Les recuerdo también que la altura automática del código javascript no funcionará si los dominios donde están alojados el blog y el foro son diferentes. Deben tenerlo en cuenta a la hora de hacer pruebas. Si es imprescindible hacerlo desde dominios diferentes pongan scrolling a yes y utilicen las barras de desplazamiento aunque quede feo.
11 abril 2012
Hola, me he leido todos los comentarios que hay en este post.
En mi caso me pasa lo siguiente:
1 - No se auto ajusta
Le he puesto incluso el codigo php
en el header reemplazando por el main y nada de nada, se sigue cortando.
2 - La url del navegador no cambia conforme se navega por el foro.
Puedes hecharme un cable?
12 abril 2012
Tienes razón Guille, he corregido el artículo para que funcione con las versiones actuales de la mayoría de navegadores. Gracias por el dato...
EDITO:
La URL puede no mostrarse en la barra de direcciones del navegador porque estás dentro de una ventana o iframe. Normalmente se muestra en la barra de estado.
Un saludo
13 abril 2012
Bueno he cambiado el codigo y si que funciona.
Lastima que no se autorefresque el tamaño al navegar por el foro y no poder obtener la url.
Tengo que ponerme a aprender Javascript, de PHP SQL C y demas se bastante, pero JS siempre lo he dejado de lado, salvo para comprobacion de campos en formularios.
Gracias por tu ayuda 😉
3 mayo 2012
Muchas gracias, es justo lo que buscaba. 😉
Saludos
22 septiembre 2012
Hola, tengo un problema con la integración.
El caso es que creo el archivo y lo subo a la carpeta del tema en mi servidor, pero en el editor de WordPress no aparece la página para ser editada, mientras que las demás sí están. ¿Qué debería hacer?
Gracias de antemano.
22 septiembre 2012
Comprueba por FTP que existe el archivo y que permisos tiene.
Un saludo
23 septiembre 2012
Muchas gracias por tu respuesta, al final he solventado el problema, aunque ahora tengo otro.
El caso es que una vez integrado el foro todo queda muy bien, excepto que la altura del foro y de la web no coinciden y el pie de página de la web corta una parte del foro, aunque según explicas en el tutorial el mismo código ya lo solventa. ¿Alguna idea?
Pd: la dirección del foro es http://www.lettucenoart.co.cc/?page_id=382
23 septiembre 2012
Deja puesto el Foro a ver si averiguamos que ocurre.
Saludos
24 septiembre 2012
Lo siento, ya he vuelto a poner el foro. Es que lo quité harto ya de intentar cosas para arreglar el entuerto...
Un saludo.
24 septiembre 2012
Yo lo que veo es que te falta el onload, es decir, iframe onload="iFrameAltura()" id="ventanaforo"
Saludos