Archived topic
Removing an Element (header) for AMP
7 replies · Started by Relja on May 29, 2022
Hi,
This is nothing urgent.
I've Googled and searched the support forum - found some answers, but not 100% sure how to implement them.
So, asking here, in case it's not too much of a hassle to provide a (n idiot-friendly :) ) solution.
Setup
I'm using an Element, with a hook "generate_inside_container."
It contains Google AdSense ad code, and a shortcode.
"AMP for GeneratePress" plugin is used to help implement AMP, along with the "AMP" plugin
https://wordpress.org/plugins/amp/
https://github.com/tomusborne/amp-for-generatepress
If the info is of any help, all the AMP pages use a query parameter: ?amp=1
For example:
non-AMP
https://www.example.com/about/
AMP:
https://www.example.com/about/?amp=1
The code in my Element:
<!-- bike-bikegremlin-display-horizontal -->
<ins class="adsbygoogle"
style="display:block; min-height: 250px"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br>
[wp_google_searchbox]Screenshot of my setup (if it helps):
https://i.ibb.co/xGBkf54/header-1.png
Question
I'd like to remove that whole element (or at least the AdSense code) from the AMP page versions only (i.e. keeping it on both desktop and mobile, just removing from AMP).
Happy to go with whatever you suggest as the best long-term solution.
Already using a child theme, and found some answers on this very forum, but not sure how to "target" this particular element (if that's the best way to go).
Thanks in advance for any help.
Hi there,
you can disable the entire Element with the following PHP snippet. But first edit the Element, and check the browser URL field and make a note of the Elements ID ( ID=## ).
add_filter( 'generate_element_display', function( $display, $element_id ) {
// Tell the non-AMP Element not to appear.
if ( function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() && 123 === (int) $element_id ) {
$display = false;
}
return $display;
}, 10, 2 );Where you see 123 change it for your elements ID.
How to Add PHP: https://docs.generatepress.com/article/adding-php/
Hi David,
Thanks for the code and the link.
I'll probably use the child page to add the code - however:
I can't find the "ID=" part.
The only one I could find covers the entire page (id="content"). :(
I tried using the "aswift_1_expand" but that didn't work.
Could you figure it out via the link to a page (any page but the homepage has that same Element used)?
https://bike.bikegremlin.com/14874/how-can-i-add-images-to-a-comment/
The AMP version being:
https://bike.bikegremlin.com/14874/how-can-i-add-images-to-a-comment/?amp=1
The ID should be in the URL similar to any post or page ID:
https://kinsta.com/blog/wordpress-get-post-id/
Thank you Leo,
If I understand correctly - the ID is unique to every post?
But I'd like to disable the Element on every post - in its AMP version (and leave it for the non-amp versions).
Yes, every post has a unique ID.
However, the ID you’ll need to look for is the ID of the Element itself.
Specifically, you should edit your Hook Element and get its ID as such: https://share.getcloudapp.com/jkuXoKmd
Then, replace 123 in David’s code with the ID.
Doing so should disable the Hook Element for AMP pages/posts.
Hope this clarifies!
Works like a charm. :)
Thank you all very much - for both the help and the patience.
Marking this as resolved.
PS.
Is this a proper way to edit if I want the same line to work with two elements (for a multilingual website):
if ( function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() && ( 123 || 456 ) === (int) $element_id )
P.P.S.
This is above and beyond what I would have expected from theme support.
Thank you again very much - highly appreciated.
Glad that worked!
You can try modifying it to something like this:
if ( function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() && in_array( $element_id, ['123', '456' ] ) )
Kindly let us know how it goes. :)
