[Resolved] Enable AMP With Generate Press

Home Forums Support Enable AMP With Generate Press

This topic contains 39 replies, has 4 voices, and was last updated by  Tom 4 days, 5 hours ago.

Viewing 15 posts - 16 through 30 (of 40 total)
  • Author
    Posts
  • #954599

    Ryan

    Yes at least on desktop it seems to work with the regular menu just not the mobile menu. If I click on it, it will not open the menu. I actually had the menu hidden on amp pages because it wasn’t working, but if you want to check it out now you can here https://www.ryansmithphotography.com/?amp

    #955111

    Tom Lead Developer

    Your site seems to be missing some of the CSS essential for it to work. AMP will limit the amount of CSS on the page, so maybe you’re hitting your limit before it’s getting to the mobile menu CSS. Does it work if you deactivate your other plugins?

    #955137

    Ryan

    Great thanks, I should have tested before but actually if I disable my child theme then the menu works. So maybe I have too much custom css and it’s over the amp limit. Do you have the necessary css that I could add to the top of my child theme css to make sure it’s not dropped? Thanks!

    #955162

    Ryan

    What I can’t figure out is even if I remove all my custom css from my child theme the menu still won’t work. However if I switch to the default generatepress theme it does. The only other thing I can think is the customizer options are pushing amp over the limit. Is there a way I can reduce the size of the inline css added from the customizer, or maybe you have another solution? Thanks.

    #955532

    Tom Lead Developer

    Interesting – are you using a lot of the Customizer options? What happens if your child theme has no custom CSS?

    It may be easier to start a new topic so you can share your URL (if possible).

    Thanks!

    #955542

    Ryan

    No it’s pretty minimal actually because I like to customize in the css of my child theme. My website is just https://www.ryansmithphotography.com.

    #955551

    Ryan

    Also that is what I was saying I deleted all my child theme css and it still wouldn’t work. If you need to login to check it out let me know.

    #956037

    Tom Lead Developer

    Hmm, there’s not much on the GP side of things that can be disabled any further without losing design. There seems to be a lot of WP Forms CSS happening as well. Does deactivating that plugin temporarily make any difference?

    #956077

    Ryan

    I actually tried that again just to make sure, but I had also disabled all plugins that would affect the front end and it still didn’t help. I actually don’t think it’s the css being too large now, I’ve tried reducing everything I can and it still doesn’t work. I noticed you can actually see the css files being loading in the source of the amp page if you are logged in, I’ll paste this info below. I just can’t figure out anything possible that would be different in my child theme causing the issue.

    The style[amp-custom] element is populated with:
         0 B: style
       565 B (11%): link#dashicons-css[rel=stylesheet][href=https://www.ryansmithphotography.com/wp-includes/css/dashicons.min.css?ver=5.2.2][type=text/css][media=all]
        75 B (24%): link#amp-default-css[rel=stylesheet][href=https://www.ryansmithphotography.com/wp-content/plugins/amp/assets/css/amp-default.css?ver=1.2.0][type=text/css][media=all]
      1261 B (12%): link#wp-block-library-css[rel=stylesheet][href=https://www.ryansmithphotography.com/wp-includes/css/dist/block-library/style.min.css?ver=5.2.2][type=text/css][media=all]
      7269 B (52%): link#wpforms-full-css[rel=stylesheet][href=https://www.ryansmithphotography.com/wp-content/plugins/wpforms-lite/assets/css/wpforms-full.css?ver=1.5.3.1][type=text/css][media=all]
     11388 B (55%): link#generate-style-css[rel=stylesheet][href=https://www.ryansmithphotography.com/wp-content/themes/generatepress/css/all.min.css?ver=2.3.2][type=text/css][media=all]
      5239 B (85%): style#generate-style-inline-css[type=text/css]
     12918 B (70%): link#generate-child-css[rel=stylesheet][href=https://www.ryansmithphotography.com/wp-content/themes/generatepress_child/style.css?ver=1562907725][type=text/css][media=all]
      2183 B (80%): link#yoast-seo-adminbar-css[rel=stylesheet][href=https://www.ryansmithphotography.com/wp-content/plugins/wordpress-seo/css/dist/adminbar-1160.min.css?ver=11.6][type=text/css][media=all]
       402 B (23%): link#generate-blog-css[rel=stylesheet][href=https://www.ryansmithphotography.com/wp-content/plugins/gp-premium/blog/functions/css/style-min.css?ver=1.8.3][type=text/css][media=all]
      1336 B (70%): link#generate-navigation-branding-css[rel=stylesheet][href=https://www.ryansmithphotography.com/wp-content/plugins/gp-premium/menu-plus/functions/css/navigation-branding.min.css?ver=1.8.3][type=text/css][media=all]
      1134 B (88%): style#generate-navigation-branding-inline-css[type=text/css]
       525 B (88%): link#gpamp-css[rel=stylesheet][href=https://www.ryansmithphotography.com/wp-content/plugins/amp-for-generatepress-master/amp.css?ver=0.1][type=text/css][media=all]
        39 B: style[type=text/css][media=print]
       665 B (6%): link#tt-normal-layout-style-css[rel=stylesheet][href=https://www.ryansmithphotography.com/wp-content/plugins/testimonials-showcase/layouts/grid/styles.css?ver=5.2.2][type=text/css][media=all]
       348 B (38%): link#tt-global-styles-css[rel=stylesheet][href=https://www.ryansmithphotography.com/wp-content/plugins/testimonials-showcase/resources/global.css?ver=5.2.2][type=text/css][media=all]
        83 B: amp-img.amp-wp-enforced-sizes amp-wp-6a19fc1[height=1][width=1][src=https://www.facebook.com/tr?id=326917374346566&ev=PageView&noscript=1][layout=intrinsic]
        75 B: img.amp-wp-cb45893[height=1][width=1][src=https://www.facebook.com/tr?id=326917374346566&ev=PageView&noscript=1]
        80 B: h3.has-text-align-center amp-wp-13076d9
        96 B: span.amp-wp-f8850ba
        76 B: span.amp-wp-d5b2775
        79 B: div.amp-wp-9f62b4e
       116 B: div.grid-25 mobile-grid-100 tablet-grid-25 amp-wp-849d5d2
       117 B: div.grid-75 mobile-grid-100 tablet-grid-75 amp-wp-7334c39
        93 B: div.amp-wp-14f4b15
    Total included size: 46,162 bytes (48% of 95,079 total after tree shaking)
    
    The following stylesheets are too large to be included in style[amp-custom]:
     16113 B (94%): link#admin-bar-css[rel=stylesheet][href=https://www.ryansmithphotography.com/wp-content/plugins/amp/assets/css/admin-bar.css?ver=1.2.0][type=text/css][media=all]
       210 B: style#admin-bar-inline-css[type=text/css]
    Total excluded size: 16,323 bytes (94% of 17,332 total after tree shaking)
    
    Total combined size: 62,485 bytes (55% of 112,411 total after tree shaking)
    #956318

    Tom Lead Developer

    Aha, does your child theme have a footer.php file? If so, can you make sure this hook exists in it?: https://github.com/tomusborne/generatepress/blob/2.3.2/footer.php#L59

    #956369

    Ryan

    Thanks for the help. I only have a functions.php and style.css in my child theme. I even tried disabling the elements module to make sure it wasn’t anything I added to a hook causing the issue.

    #956396

    Tom Lead Developer

    What version of GP are you using?

    #956461

    Ryan

    It’s the latest 2.3.2

    #956881

    Tom Lead Developer

    From what I can do, this element isn’t being added to the page: https://github.com/tomusborne/amp-for-generatepress/blob/master/amp-for-generatepress.php#L229

    It’s necessary for AMP to pickup the necessary CSS from mobile.min.css.

    Just to confirm, are you using this AMP plugin?: https://wordpress.org/plugins/amp/

    #956959

    Ryan

    Yes the official plugin on the latest version. If you would like to login let me know. Could I try adding that to my functions.php?

Viewing 15 posts - 16 through 30 (of 40 total)

You must be logged in to reply to this topic.