Since 2023.7 it is possible to show the content of a WordPress page completely in an iframe. The feature was implemented for https://webinarignition.com/ where every possible “call to action” can now be displayed with this feature. The feature extracts the content excl. the advanced iframe shortcode to a dynamic page and is shown to the user. To activate this simply use src=”page”. Then “Ai content pages” will be shown in the menu where all this dynamic pages are stored.
Simply check the page with the web developer tools. The content here is shown in an iframe.
The following attributes are used for this:
use_shortcode_attributes_only=”true” src=”page” width=”100%” height=”300″ scrolling=”no” id=”unique-1″ onload_resize=”true” iframe_hide_elements=”header,nav,aside,footer,#wpadminbar” iframe_content_css=”html { margin-top:0 !important; } .site-inner { padding: 0;} body {white-space: pre-wrap;}” parent_content_css=”aside { display:none; }”
How to configure the “Ai content pages”
First use the feature on a page. After that go to the “Ai content pages” and click on “View” of one of the pages. Depending on your theme you do not have any additional elements or you have the full page including even header and footer.
To show only the content in the iframe you most likely need to remove or adjust some elements. Advanced iframe has a couple of ways to do this. For this feature I recommend to use only iframe_content_css and iframe_hide_elements since 2023.8!
Since 2023.8 iframe_content_css and iframe_hide_elements are extracted from the shortcode and added directly to the ai content page! Therefore the page can be displayed without any delay.
With iframe_hide_elements you can define the elements you like to hide. Simply define the html elements, ids (starting with a #) or classes (starting with a .) separated with a ,
e.g. iframe_hide_elements=”header,nav,aside,footer,#wpadminbar”
With iframe_content_css you can directly add css to the page! After you have hidden the main elements you maybe have to adjust some margins. For the Omega theme
iframe_content_css=”html { margin-top:0 !important; } .site-inner { padding: 0;} body { white-space: pre-wrap; }”
would be optimal.
In the administration of advanced iframe is the documentation how to find elements in a web page.
Go to “Advanced iframe” -> Help -> How to find elements, ids and classes.