V5 version (for the cool people)
JS code – updated on 24 Jul 2024
shortcode files – updated on 30 Jun 2024
addons/page-forum.php – updated on 30 Jun 2024
Help steps – updated on 06 Jul 2024
NOTE: since plugin version 2.8.7>
WordPress phpBB iframe template integration
To do an awesome Template integration by Shortcode, that’s compatible with any WP theme, it is not required to build the page-forum into the plugin admin page, but just to add the same code, as explained more below on this page, into the overall_header.html and overall_footer.html phpBB template files, recompile the phpBB template, and then read here:
WP_w3all template integration steps
If using page-forum (and the old iframe resizer code)
Build/create the WP forum template page via option
WP_w3all phpBB embedded on WordPress Template
on WP_w3all admin config page, and the blank page on WordPress Admin -> Pages -> Add New, titled the same, so forum or board etc (then you’ll have into your active WordPress template folder a file named page-forum.php or page-board.php etc), then to complete the procedure and get the responsive iframe height for the embedded/iframed phpBB into WordPress template page you need:
overall_footer.html code
Open with a text editor your phpBB template file overall_footer.html
and just before the closing </body> tag, add this code:
<!-- IF not S_IS_BOT -->
<script type="text/javascript">
// START MANDATORY CHANGES
var w3allAllowDomain = 'https://w3host.com'; // MANDATORY! Set/Change this value to fit the absolute domain (DO NOT ADD/INCLUDE final slash here)
var wordpress_url_page_forum = 'https://w3host.com/forum'; // MANDATORY! (DO NOT ADD/INCLUDE final slash here) Url that point to the wordpress forum page
var w3all_custom_wp_w3fancyurl = 'w3'; // MANDATORY! If changed the default w3 to have 'fancy URL' query string into the related WP plugin admin option, then change this value to match the same as it is the fancy URL setting
// END MANDATORY CHANGES
var w3allappend = false;
var w3all_BoardUrl = "{BOARD_URL}";
w3all_BoardUrl = w3all_BoardUrl.slice(-1) != '/' ? w3all_BoardUrl + '/' : w3all_BoardUrl;
function w3allNormalize_phpBBUrl(href){
// try to 'normalize' passed relative links: needed all after last slash /
// exception are kind of passed urls like: /phpbb323/app.php/help/faq
// and if SEO mods that may assign some different kind of links values
// by the way, SEO absolute urls http(s) should be (all?) already considered here ...
var phpbbRUrl = href.split(/^.+?(\w+.+)$/);
if( href.indexOf('app.php') > -1 ){ // since the previous do not 'normalize' this type of passed value (and may miss something else)
phpbburl = href.split(/^.+?(app\.php.+)$/);
w3allappend = phpbburl[1];
} else if ( /^https?/ig.exec(href) !== null ){ // absolute http(s) passed: try to 'normalize' a possible seo mod
phpbburl = href.split(w3all_BoardUrl);
w3allappend = phpbburl[1];
} else if ( phpbbRUrl[1] && phpbbRUrl[1].length > 1 ){ // 'normalize' any other
w3allappend = phpbbRUrl[1];
} else if ( phpbbRUrl[0].length > 1 ){
w3allappend = phpbbRUrl[0];
}
// ... if still not normalized
if(/^\W/ig.exec(w3allappend) !== null){
w3allappend = w3allappend.split(/^.+?(\w+.+)$/);
if(w3allappend[1]){
w3allappend = w3allappend[1];
}
if ( w3allappend[1] && w3allappend[1].charAt(0) == '/' ){
w3allappend = w3allappend[1].substr(1);
}
}
return w3allappend;
}
$(document).on("click", "a", function(e) {
var href = $(this).attr("href");
var w3all_onview_attach = (href.indexOf('file.php') > -1);
if( this.getAttribute('target') !== null ){
e.preventDefault();
window.open(href,'_blank');
return;
}
if ( href.charAt(0) == '#' || href.indexOf('\./download\/file\.php') > -1 ){ return; }
// external link?
if ((this.href.indexOf(w3all_BoardUrl) > -1) != true){
if(/^(f|ht)tps?:\/\//i.test(href))
{
e.preventDefault();
parent.location.replace(href);
return;
}
}
// admin ACP?
if ( /\/adm\//ig.exec(href) !== null )
{
e.preventDefault();
parent.location.replace(href);
return;
}
if ( href.indexOf('view=print') > -1 !== false || /\/adm\//ig.exec(href) !== null )
{
e.preventDefault();
window.open(href,'_blank');
return;
}
if ( href.indexOf('quickmod') > -1 ) {
w3allNOappend = true;
return;
}
if( /posting\.php\?mode=[reply|post|bump]/ig.exec(href) !== null || /mcp\.php\?/ig.exec(href) !== null ){
w3allNOappend = true;
}
if(w3all_onview_attach !== false){
e.preventDefault();
window.open(href,'_blank');
return;
}
w3allappend = w3allNormalize_phpBBUrl(href);
if ('parentIFrame' in window){
if( typeof w3allNOappend == 'undefined' || w3allNOappend == false ){
window.parentIFrame.sendMessage(w3allappend);
}
}
});
// w3all UPDATES for phpBB events
if(window.self !== window.top){
// Lightbox scroll fix, #phpbb_confirm scroll fix, #phpbb_alert scroll fix, #bbcode_wizard + abbc3_button fix
$(".dropdown-contents-cp,.abbc3_button,.postimage,.dropdown-contents li a,#add_files").on("click", function(e) {
var g = $($(this.getBoundingClientRect().top));
var t = parseInt(g[Object.keys(g)[0]]);
$("#bbcode_wizard,#phpbb_alert,#phpbb_confirm").animate({top: t+'px'}, 100);
const w3LBfixImgs = setInterval(exec_w3LBfixImgs, 500); //1000
function exec_w3LBfixImgs() {
var imh = parseInt($('.lb-image').css("height"));
var lbOh = parseInt($('#lightboxOverlay').css("height"));
var totH = imh+t;
if(totH < lbOh){
$("#lightbox").animate({top: t+'px'}, 400);
} else {
t = parseInt((lbOh-imh)-100);
$("#lightbox").animate({top: t+'px'}, 400);
}
clearInterval(w3LBfixImgs);
}
});
var pmn = "{PRIVATE_MESSAGE_COUNT}";
var w3all_phpbb_u_logged = "{S_USER_LOGGED_IN}";
var hash = window.location.hash.substr(1);
if( hash == 'unread' ){
var postN = 1;
$( "h3 > a" ).each(function (e) {
ns = this.href.split('#p');
if( typeof ns != 'undefined' && /viewtopic.php\?p=/ig.exec(this.href) != null ){
if(ns[1] > postN){
w3lh = ns[1];
}
}
})
if( typeof w3lh != 'undefined' ){
hash = "p" + w3lh;
}
}
$( document ).ready(function() {
// fix vertical iframe centered in certain cases
var bd = document.getElementsByTagName("body");
var t = document.getElementById(bd[0].getAttribute("id"));
if( typeof t != 'undefined' || t != false )
{
t.setAttribute("style", "position:fixed;top:0;left:0;width:100%;padding:0");
//t.setAttribute("style", "position:fixed;top:0;left:0;width:100%;");
}
});
if( typeof w3allNOappend == 'undefined' || w3allNOappend == false )
{
$( window ).on( "load", function()
{
location.hash = "#" + hash;
if( ! $(window.location.hash).length || location.hash.length < 2 ){
var w3all_lochash = 0;
} else {
var w3all_lochash = $(window.location.hash).offset().top;
}
var w3appendevents = '#w3all_phpbbpmcount=' + pmn + '#w3all_phpbb_u_logged=' + w3all_phpbb_u_logged + '#w3all_lochash=' + w3all_lochash;
window.parent.postMessage(w3appendevents, w3allAllowDomain);
});
}
} // END if(window.self !== window.top){
</script>
<div data-iframe-size="" style="height:0;max-height:0;border:0;margin:0;padding:0;"><div>
<script type="text/javascript" src="https://forum.w3host.com/iframe-resizer.child.js"></script>
<!-- ENDIF -->after you added this code into the phpBB overall_footer.html
edit following lines:
// START MANDATORY CHANGES
var w3allAllowDomain = 'https://w3host.com'; // MANDATORY! // Set/Change this value with your WordPress URL (example: https://axew3.com)
var wordpress_url_page_forum = 'https://w3host.com/forum'; // MANDATORY! // (DO NOT ADD/INCLUDE final slash here) Url that point to your wordpress forum page
var w3all_custom_wp_w3fancyurl = 'w3'; // MANDATORY! If you changed the default w3 to have 'fancy URL' query string into the related WP plugin admin option, then change this value to match the same as it is the fancy URL setting
// END MANDATORY CHANGESchange the w3allAllowDomain var value to fit your WP URL.
Now check the other line to change:
var wordpress_url_page_forum = 'https://w3host.com/forum'; // MANDATORY! (DO NOT INCLUDE final slash here) Url that point to your wordpress forum page (without final slash)change value on this line that need to point to the URL of the WordPress created/named forum page (do not add final slash and change http or https as needed)
MANDATORY!
If needed, change the w3 value of the line
var w3all_custom_wp_w3fancyurl = 'w3';
to fit the value that you may changed (default is w3) into the plugin admin, where there is the option: Fancy URL query string for the WordPress page forum that embed phpBB
Finally, check this line
<script type="text/javascript" src="https://forum.w3host.com/iframe-resizer.child.js"></script>in the code you added (penultimate line): it should point to the iframe-resizer.child.js file that you’ll go to add into the phpBB root folder or somewhere else: the file can be found into the folder /wp-content/plugins/wp-w3all-phpbb-integration/addons/iframeresizer
Use the absolute URL (http or https, and adjust the url to fit your needs). It’s mandatory or the resizer won’t work
src="https://www.yoursite.com/your-phpbb-folder/iframe-resizer.child.js"
AFTER EDITED, save and load the modified overall_footer.html into your phpBB style folder, overwriting the default one, and so
load into the phpBB root folder (or where you choose), the file iframe-resizer.child.js.
After this, phpBB require to recompile the template files, or the applied modifications will not be updated. Open phpBB ACP, and so under:
Server Configuration -> Load settings -> Recompile stale style components set to YES and save. Load one time the frontend to see the result and leave as is at moment, especially if you follow adding the code on the overall_header.html so to redirect any phpBB URL request to the iframed phpBB into the WordPress page: after tested that all work fine, you’ll return to ACP, resetting to NO and save. This step is needed to load/rebuild template modifications in phpBB if there are, but this option should be ever set to NO into an online/production site so to let the cache system to do his work. It should be set to yes only while on testing/devel time so to apply modifications on phpBB templates files (or your phpBB will result to be slower because in this state it is not using the cache for the template parsing/rendering).
overall_header.html code
If you want to redirect any phpBB URL request to your WordPress forum page follow this step:
Open with a text editor your phpBB template file overall_header.html and may immediately after the closing </title> tag add the following code:
<!-- IF not S_IS_BOT --><script>
// START MANDATORY CHANGES
var wordpress_url_page_f = 'https://subdomain.w3host.com/wordpress/forum'; // MANDATORY! // (DO NOT ADD/INCLUDE final slash here) Url that point to your iframed wordpress forum page
var w3all_custom_wp_w3fancyurl = 'w3' // MANDATORY! If you changed w3 to have 'fancy URL' query string for the WP page forum, then change this value to match what your fancy URL setting is after you changed it on plugin admin page
// END MANDATORY CHANGES
function w3all0Normalize_phpBBUrl(u){
var bu = "{BOARD_URL}";
w3allappend = "{BOARD_URL}";
if ( /^https?/ig.exec(u) !== null ){
phpbburl = u.split(bu);
w3allappend = phpbburl[1];
}
if(/^\W/ig.exec(w3allappend) !== null){
w3allappend = w3allappend.split(/^.+?(\w+.+)$/);
if(w3allappend[1]){
w3allappend = w3allappend[1];
}
if ( w3allappend[1] && w3allappend[1].charAt(0) == '/' ){
w3allappend = w3allappend[1].substr(1);
}
}
return w3allappend;
}
if ((window.self !== window.top) != true) {
if(/adm\//ig.exec(window.location.href) === null){ // avoid x ACP
var w3all_r = window.location.href.replace(/sid=.+/gi, '');
w3all_r = w3all0Normalize_phpBBUrl(w3all_r);
if(/adm\/index\.php/ig.exec(w3all_r) == null){
hrefEnc = window.btoa(unescape(encodeURIComponent(w3all_r)));
href0 = wordpress_url_page_f + '/?'+ w3all_custom_wp_w3fancyurl + '=' + hrefEnc;
document.location.replace(href0);
}
}}
// END force w3all redirect
</script>
<!-- ENDIF -->On the added code change the URL value, that should point to your WP forum page:
var wordpress_url_page_f = 'https://subdomain.w3host.com/wordpress/forum';
it need to point to the WordPress iframed forum page: DO NOT ADD final slash and setup as http or https as needed.
Change the default w3 value of the line:
var w3all_custom_wp_w3fancyurl = 'w3'
to fit the value that (if) you may changed into the plugin admin, where there is the option: Fancy URL query string for the WordPress page forum that embed phpBB.
Reset to No the Recompile phpBB template option after some test. So before to follow READ THE NEXT IMPORTANT NOTE
NOTE: if you need to disable/remove the overall_header.html javascript code, that do not will allow (until javascript is enabled on browser) to open the phpBB at the real URL, because there is a forced redirect to the WP forum page, you can disable the javascript on your browser, if you do not want to remove/disable the added js snippet into the phpBB overall_header.html file. It is also !important to remember this if in trouble with login, and recompile Stale Template option in phpBB is set to Off at this time.
if the iframe do not display and you get mixed insecure content on console, you have to fix it doing this: open your WP header.php template file, and may just before others header meta tags add the follow:
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
For testing purpose or for any other reason, into the overall_header added code can be commented the line:
document.location.replace(href0);changing it into this:
//document.location.replace(href0);so the requests to phpBB will not be forced/redirected to the WP page. But you can open the WP page-forum to see the phpBB iframed result. Remember that to apply template modifications, phpBB require to recompile templates files.
Enjoy your awesome WordPress phpBB template integration!
Appreciations: https://www.paypal.com/paypalme/alessionanni/
© 2024 axew3.com
Iframe resize library by: https://github.com/davidjbradshaw/iframe-resizer
Comments
One response to “phpBB WordPress template integration (iframe v5)”