See NEW v3 phpBB WordPress template integration code
v2 version (OBSOLETE)
See NEW v3 phpBB WordPress template integration code
PAGE HELP and JS code – UPDATED on 21 Dec 2018
(related views/page-forum.php – updated on 26 Sep 2018)
you need to use this version of page-forum.php for this javascript code:
/tags/1.9.3/addons/page-forum.php
wp_w3all responsive iframe procedure
After you’ve built/created the WP forum template page via
WP_w3all phpBB embedded on WordPress Template
option on WP_w3all admin config page, and the blank page on WordPress Admin -> Pages -> Add New, titled the same of created wp_w3all template page, 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), to complete the procedure and get the responsive iframe height for the embedded/iframed phpBB into WordPress template page you need:
Open with a text editor your phpBB template file overall_footer.html
and just before the closing </body> tag, add this code (do not select lines numbers column on copied code):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 |
<script type="text/javascript"> document.domain = 'axew3.com'; // THIS IS MANDATORY! Set/Change this value to your domain (example: axew3.com (or leave localhost if on localhost)) var wordpress_url_page_forum = 'https://www.axew3.com/w3/forum'; // MANDATORY! (DO NOT INCLUDE final slash here) Url that point to your wordpress forum page (without final slash) var w3all_doc_domain = document.domain; // Lightbox correct scroll fix: // https://www.axew3.com/w3/forums/viewtopic.php?f=13&t=885 // remove /* and */ to activate // also more below ... /* $(".postimage").on("click", function(event) { var pos = event.pageY - 100; $(parent.window).scrollTop( 200 ); var el = document.getElementById("lightbox"); $("#lightboxOverlay").on("click", function() { $(parent.window).scrollTop( pos ); }); $(".lb-close").on("click", function() { $(parent.window).scrollTop( pos ); }); $(".lightbox").on("click", function() { $(parent.window).scrollTop( pos ); }); }); */ $(document).on("click", "a", function(e) { var href = $(this).attr("href"); $(this).attr("href", href.replace('iframe=true&', '')); // remove! or get loop in htaccess if var appended before ... var w3allappend = href; var w3all_parent_element_id = $(this).parent().get( 0 ).id; // detect click x ... (ex: return ID smiley-box, onclick post smiles) ... // detect and avoid/allow certain behaviors var w3all_onclick_smile = (w3all_parent_element_id.indexOf('smiley-box') > -1); var w3all_onview_topic = (href.indexOf('viewtopic.php') > -1); var w3all_onview_attach = (href.indexOf('file.php') > -1); var w3all_onreview_post = /#[review]+/ig.exec(href); var w3all_onview_post = /#p[0-9]+/ig.exec(href); var w3all_ck_quickmod = (href.indexOf('quickmod') > -1); var w3all_onreply_topic = (href.indexOf('mode=reply') > -1); var w3all_ck_onindex = (href.indexOf('index.php') > -1); var w3all_onsubmit_post = /^post?/ig.exec(href); var shortfaq = /^#[a-z][a-z0-9]+$/ig.exec(href); var shortinp = /^#[a-z][0-9]+$/ig.exec(href); var app = ''; // complete Lightbox correct attachment display or common default display // activate removing /* and */ /* if(w3all_onview_attach !== false){ e.preventDefault(); window.open(href,'_blank'); return; } */ if ( w3all_onclick_smile == false && w3all_onview_attach == false && w3all_onreview_post == null && shortfaq == null && shortinp == null ) { if ('parentIFrame' in window) window.parentIFrame.scrollTo(0,50); // change 50 to another value may 0 or 100 or 500. Top distance gap in px when page scroll top if ( w3allappend.charAt(0) != '.' && w3allappend.charAt(1) != '/' ){ app = href.split('app.php'); w3allappend = './app.php' + app[1]; } var newPath = /^.+(\.\/.+)/ig.exec(w3allappend); // need to be ./ if(newPath != null){ w3allappend = newPath[1]; } // check if link point to external resource if (/^(f|ht)tps?:\/\//i.test(href)){ e.preventDefault(); parent.location.replace(href); return; } else { w3allappend = window.btoa(unescape(encodeURIComponent(w3allappend))); } if ('parentIFrame' in window) window.parentIFrame.sendMessage(w3allappend); } }); /////////////////////////////////////////////////////////////////////////// // w3all Ajax UPDATES for phpBB events if (window.frameElement) { // if in iframe window.onload = function() { var pmn = "{PRIVATE_MESSAGE_COUNT}"; var w3all_phpbb_u_logged = "{S_USER_LOGGED_IN}"; // to send to wp at once here, like this: #w3all_phpbbpmcount=val#w3all_phpbbnotifycount=val#etc etc etc var w3appendevents = '#w3all_phpbbpmcount=' + pmn + '#w3all_phpbb_u_logged=' + w3all_phpbb_u_logged; parent.w3all_ajaxup_from_phpbb(w3appendevents); } // fix vertical iframe centered on viewtopic.php, preview or where # anchor etc // skip iOS var w3iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform); if(w3iOS == false){ $(window).load(function() { var bd = document.getElementsByTagName("body"); for (var i = 0; i < bd.length; i++) { var bdID = bd[i].getAttribute("id"); } var elt = document.getElementById(bdID); elt.setAttribute("style", "position:fixed;top:0%;left:0%;width:100%;margin:0px;"); }); } $( "a" ).contextmenu(function() { var href = $(this).attr("href"); var ohref = href; var applink = /app\.php[\w\/]+/ig.exec(href); var ckext = /^(f|ht)tps?:\/\//i.test(href); // external resource url? var ffile = ''; var shortinp = /^#[a-z][0-9]+$/ig.exec(href); var shortfaq = /^#[a-z][a-z0-9]+$/ig.exec(href); var hrefu = document.location.href; if ( href.charAt(0) == '.' && href.charAt(1) == '/' ){ ffile = ohref; } else { pu = href.split('app.php'); ffile = './app.php' + pu[1]; } if( shortinp != null ){ ffile = './' + hrefu.split('\\').pop().split('/').pop(); } if( shortfaq != null && href.charAt(1) != 'p'){ pu = hrefu.split('app.php'); ffile = './app.php' + pu[1] + shortfaq; } var d = ffile; if( href.length < 2 ){ // # d = document.location.href; } hrefEnc = window.btoa(unescape(encodeURIComponent(d))); href1 = wordpress_url_page_forum + '/?w3=' + hrefEnc; if( ckext != false ){ // external Url href1 = ohref; } $(this).attr("href", href1); // send out encoded $(this).mouseout(function() { // reset $(this).attr("href", ohref); }); }); } // END if (window.frameElement) { </script> <script type="text/javascript" src="https://www.axew3.com/w3/forums/iframeResizer.contentWindow.min.js" defer></script> |
after you pasted this code into phpBB overall_footer.html
edit following lines:
1 |
document.domain = 'axew3.com'; // THIS IS MANDATORY! Set/Change this value to your domain (example: axew3.com (or set localhost if on localhost)) |
change axew3.com to fit your domain name (example axew3.com)
do NOT add http(s):// OR the point in front nor anything else, just add
yourdomain.com or set it as localhost if on localhost test. If phpBB is at subdomain.domain.com, add domain.com as value
(MANDATORY!) or resizer won’t work
now check the other line to change:
1 |
var wordpress_url_page_forum = 'https://www.axew3.com/w3/forum'; // MANDATORY! (DO NOT INCLUDE final slash here) Url that point to your wordpress forum page (without final slash) |
change value
https://www.axew3.com/w3/forum
on this line, to point to the URL of the WordPress created forum page
(do not add final slash and change http or https as needed)
MANDATORY!
Finally, check this line
1 |
<script type="text/javascript" src="https://www.axew3.com/phpBB/iframeResizer.contentWindow.min.js" defer></script> |
in the code you added (last line): this should correctly point to the iframeResizer.contentWindow.min.js file that you’ll go to add into phpBB root folder. You need to use the absolute URL (use http or https as needed, and adjust the url to fit your needs)
(MANDATORY!) or resizer won’t work
1 |
src="https://www.yoursite.com/your-phpbb-folder/iframeResizer.contentWindow.min.js" |
AFTER EDITED, save and load the modified overall_footer.html into your phpBB style folder, overwriting the default one, and so
load through ftp on the phpBB root folder (or copy/paste), the file
iframeResizer.contentWindow.min.js
that is contained inside folder
wp/wp-content/plugins/wp-w3all-phpbb-integration/addons/resizer
After this, phpBB require to recompile the template, or modifications to template files not affect (to overall_footer.html in this case). Open phpBB ACP, and so under:
Server Configuration -> Load settings -> Recompile stale style components set to YES and save. Load one time a phpBB full forum page. So return to ACP and reset to NO, save. This step is needed one time to load the template modifications on phpBB (and any time you edit a phpBB template file to for modifications take effect), but this option should be ever set to NO into an online/production site to save server resources. It is normally set to yes only for testing/devel purpose or to apply modifications on phpBB templates files.
How to update to latest iframe js code and page-forum.php?
Update the plugin (or download plugin and copy files by /resizer folder)
so files inside folder
/wp-content/plugins/wp-w3all-phpbb-integration/addons/resizer
results updated (or do it manually substituting these files with latest released https://github.com/davidjbradshaw/iframe-resizer)
so substitute/replace the file you added into phpBB root folder with latest iframeResizer.contentWindow.min.js
copy it from
/wp-content/plugins/wp-w3all-phpbb-integration/addons/resizer
folder and replace in phpBB root folder.
Replace the old code added into phpBB overall_footer.html file with the new one above into this page, take care to setup on it needed values as now required.
Remember to rebuild phpBB template after these steps to let changes take effect.
Now rebuild the page forum in WP w3all admin page, or manually copy the new page-forum.php version contained on folder
/wp-content/plugins/wp-w3all-phpbb-integration/addons
and paste it into your WordPress template folder, renaming it as needed, so for example page-board.php if you setted up board for the forum page name on wp_w3all admin page.
Done.
Note: if you want a custom page-forum, just open the page-forum.php (or whatever you named it) and read inline hints inside. It is so easy to create a custom page forum (for example with two columns etc). If any help more. just post on help forums here at axew3.com or at wordpress.org.
If you want phpBB email notification links to point to iframe, follow this step about htaccess:
phpBB htaccess for phpBB notification email to point WP forum page (1.6.9>)
to activate the rewrite right click/copy links on iframe, to point to iframe, activate the related code removing the two lines:
/* remove this line to activate htaccess trick
and
*/ //remove this line to activate htaccess trick
NOTE: to get the iframe to be responsive for ACP phpBB admin panel, read this post.