10 februari 2011 door Marenubium
Hoe integreer je een PHP forum in je eigen opmaak?
Goed.
Ik heb een blog met WordPress aangemaakt.
Ik wil daar een forumfunctie in hebben. Uiteraard heeft WordPress daar zelf hele leuke plugins voor, en hele goede gereedschappen.
Maar na wat testen blijken de diverse fora opties voor WordPress gewoon uitermate LELIJK.
Getest: bbpress, simple:press forum, WP Forum server.
Ik ben verwend door het phpbb forum, dus sjah… daar kan geen ander forum tegen op in mijn opinie!
Wat ik wil:
- Een forum functie binnen de blog, waarbij dezelfde opmaak (=theme) gebruikt wordt (in dit geval het Ahimsa theme)
- Een forum waarbij het uiterlijk aan te passen is aan mijn wensen
- Een forum met goede ondersteuning voor gebruikersbeheer
- Gebruikersregistratie op de blog moet ook een registratie op het forum inhouden.
Phpbb3 voldoet aan alle punten.
Er is echter één maar: een phpbb forum heeft zijn eigen database. WordPress heeft ook zijn eigen database. Dat wordt nog lachen met gebruikerregistraties! Ik erger me namelijk vaak genoeg aan site waar je je eerst moet registreren om een reactie achter te laten, en je later ook nog eens apart te moeten registreren voor het forum…
Maar goed, dat is punt 4.
Ik kreeg het maar niet voor elkaar om een phpbb forum te integreren met mijn blog.
Na veel gestoei met codes en javascripts, belandde ik uiteindelijk op deze link: http://css-tricks.com/video-screencasts/48-skinning-phpbb/
Echt rete stoer! En alle tips opgevolgd!
Ware het niet… dat bij deze optie gebruik gemaakt wordt van standaard thema sjablonen (templates), waar ik uiteraard geen gebruik van maak want ik ben niet standaard. Mijn thema is Ahimsa, en die opbouw komt niet overeen met de standaard opbouw.
Echt geweldig Des Eva’s weer; moeilijk doen als het makkelijk kan! Maar ja, door de moeilijkste weg te kiezen leer je ook veel meer 
Goed. Dat was dus niet de oplossing. Ik kwam erachter dat het forum in een WordPress pagina geladen moest worden. Hulde. Maar daarmee kreeg ik nog niet de opmaak mee… minder hulde. De enige optie was om het forum via een iframe functie te laden, en dat kan alleen via een nieuwe pagina binnen WordPress. Maar dan valt de hele opmaak weg, en iframe gaat niet goed om met automatische hoogte en breedte. Voorbeeld:
Lekker klein forum…dat kan natuurlijk niet! Ook wil ik het veld voor reacties onderaan weghebben, maar die is automatisch gedefinieerd binnen mijn Ahimsa theme.
Dus er moest een nieuw pagina sjabloon aangemaakt worden in WordPress, dus dat werd weer zoeken naar ‘creating page templates’ voor WordPress.
Gevonden:
http://codex.wordpress.org/Pages
Tevens vond ik een goed werkende javascript om het forum in een iframe te laden:
http://sonspring.com/journal/jquery-iframe-sizing
Download het iframe-sizing bestand (hier), pak het uit en plaats de uitgepakte map in /wp-content/themestore/
Nou wordt het makkelijk! Hieronder stapsgewijs de handelingen om een phpbb forum binnen je eigen WordPress theme te laden op basis van javascript:
1. Opbouw sjablonen
Eerst bekijken we de opbouw van het standaard sjabloon page.php binnen Ahimsa, deze wordt aangeroepen als je binnen WordPress een nieuwe pagina aanmaakt:
/wp-content/themes/ahimsa/page.php:
<?php include_once("single.php"); ?>
Hierin wordt het bestand single.php aangeroepen.
Als we vervolgens naar /wp-content/themes/ahimsa/single.php kijken, zie je dat deze op regel 3 de entry.php aanroept:
<?php get_header(); ?>
<div id='single' style='width: 100%;'>
<?php include_once("entry.php"); ?>
</div>
<?php comments_template(); ?>
<?php get_footer(); ?>
<?php if( $options['defhidesbpages'] == 1 ): ?>
<script language='JavaScript'>
slideSideBar('left');
slideSideBar('right');
</script>
<?php endif; ?>
Maar we willen in dit geval geen gebruik maken van de standaard Ahimsa entry.php. We moeten dus ook een nieuwe entry.php aanmaken. Noem deze in dit voorbeeld phpbb3-entry.php en plaats dit bestand in /wp-content/themes/ahimsa.
2. Aangepaste entry.php
In de entry.php wordt de opmaak aangeroepen voor je pagina. We hebben echter niet de hele opmaak nodig van de site, dus moet er wat uitgesloopt worden om de code netjes te houden. Vervolgens moeten we hier in regel 23 onder de div class “entry” ook de iframe functie aanroepen om het forum netjes in de pagina te kunnen laden. In deze iframe plaats je de volledige link naar je forum. Phpbb3-entry.php komt er in mijn geval dan als volgt uit te zien:
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<fieldset>
<legend class='title'>
<a href="<?php the_permalink() ?>" rel="bookmark"
title="<?php printf(__('Permanent Link to %s'), get_the_title()); ?>">
<?php the_title(); ?></a>
</legend>
<?php if( is_single() || $options['showpagemeta'] == 1 ) : ?>
<!-- wrap the date author in a div so that it sits by itself with a bottom margin -->
<?php endif; ?>
<?php if( is_single() || $options['showpageactions'] == 1 ) : ?>
<?php endif; ?>
<div class="entry">
<iframe src="http://blog.kruiderie.nl/blog/phpbb3/" width="100%" scrolling="no" frameborder="0"></iframe>
</div>
<br clear='all'/>
</fieldset>
</div>
<?php endwhile; ?>
<?php else: ?>
<div class="post">
<fieldset>
<br/>
<div class='entry'></div>
</fieldset>
</div>
<?php endif; // have_posts() ?>
3. Aangepaste single.php
Wat we nu nog moeten doen, is een nieuw sjabloon aanmaken op basis van de single.php.
Maak een aparte php bestand aan in je theme, in dit voorbeeld: phpbb3.php
Plaats deze in /wp-content/themes/ahimsa/phpbb3.php
Open het bestand vervolgens (kladblok/dreamweaver/welke editor je het liefst gebruikt) en voer dit in:
<?php /* Template Name: phpbb3 */ ?>
Vervolgens kopieer je de inhoud van single.php onder deze regel, en hernoem je in regel 16 (“entry.php”) naar (“phpbb3-entry.php”). Daarbij roep je in phpbb3.php ook de javascripts aan die je hiervoor gedownload hebt. Gebruik hiervoor het asbolute pad! Dit kun je testen door in een browser het pad naar de scripts in te voeren. Als de inhoud van de scripts in je browser verschijnen, kopieer je het volledige adres en plaats je deze in phpbb3.php (zie http://sonspring.com/journal/jquery-iframe-sizing voor meer uitleg). De inhoud van phpbb3.php komt er in mijn geval dan als volgt uit te zien:
<?php /* Template Name: phpbb3 */ ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>phpbb3</title>
<script type="text/javascript" src="http://blog.kruiderie.nl/wp-content/themestore/iframe_code/js/jquery.js"></script>
<script type="text/javascript" src="http://blog.kruiderie.nl/wp-content/themestore/iframe_code/js/iframe.js"></script>
<?php get_header(); ?>
<div id='single' style='width: 100%;'>
<?php include_once("phpbb3-entry.php"); ?>
</div>
<?php get_footer(); ?>
<?php if( $options['defhidesbpages'] == 1 ): ?>
<script language='JavaScript'>
slideSideBar('left');
slideSideBar('right');
</script>
<?php endif; ?>
</head>
<body>
</body>
</html>
4. Menu’s aanmaken binnen WordPress
Ga naar je WordPress dashboard en creëer een nieuwe pagina op basis van dit sjabloon phpbb3.php. Rechts vind je een dropdown menu, waar dit sjabloon nu zichtbaar moet zijn:
Geef je pagina een titel (bijvoorbeeld ‘Forum’), en sla deze op. Noot: bij mij heet deze tijdelijk ‘Phpbb3′!
Goed, we zijn nu klaar met alle bestanden en templates. Nu willen we alleen nog op de startpagina een menu hebben waarmee we naar het forum kunnen. Wel zo handig.
Ga naar het dashboard van WordPress, naar Weergave/Menu’s (links van het scherm). Klik op het plusje om een nieuw menu aan te maken:
Noem dit nieuwe menu bijvoorbeeld ‘ Forum’.
Rechts staan je aangemaakte pagina’s, waaronder de pagina die je in deze handleiding hebt aangemaakt: Forum (in het voorbeeld heet deze Phpbb3!). Vink de pagina aan en kies voor ‘aan menu toevoegen’.
De pagina verschijnt nu in je nieuwe menu. Sla het menu op.
Ga naar Widgets, en sleep het kopje ‘ Aangepast menu’ in één van je sidebars aan de rechterkant.
Klik het Aangepaste menu open, en selecteer onderin bij ‘Menu’ het zojuist aangemaakte menu ‘Forum’:
Sla het op, en bekijk de resultaten in je browser. Klaar!
Uiteindelijk resultaat (let op: bij mij heet het ‘phpbb3′, bij jou ‘forum’!):
Dat ziet er al heel wat beter uit, toch!
Gerelateerde berichten
