{"id":3444,"date":"2018-02-19T14:49:15","date_gmt":"2018-02-19T13:49:15","guid":{"rendered":"https:\/\/lsbeta.szmigiel.design\/?p=3444"},"modified":"2018-11-21T12:48:15","modified_gmt":"2018-11-21T11:48:15","slug":"advanced-amp-personalization-in-wordpress","status":"publish","type":"post","link":"https:\/\/retro.szmigiel.design\/en\/blog\/advanced-amp-personalization-in-wordpress\/","title":{"rendered":"Advanced AMP personalization in WordPress"},"content":{"rendered":"<div class=\"alert alert_error\"><div class=\"alert_icon\"><svg viewBox=\"0 0 28 28\"><defs><style>.path{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:1.5px;}<\/style><\/defs><g><circle cx=\"14\" cy=\"20\" r=\"0.33\" class=\"path\"\/><line x1=\"14\" y1=\"8.72\" x2=\"14\" y2=\"16.72\" class=\"path\"\/><path d=\"M12.6,3.42,1.54,22.58A1.61,1.61,0,0,0,2.93,25H25.07a1.61,1.61,0,0,0,1.39-2.42L15.4,3.42A1.61,1.61,0,0,0,12.6,3.42Z\" class=\"path\"\/><\/g><\/svg><\/div><div class=\"alert_wrapper\"> <strong>NOTE:<\/strong> The plugin has been removed from the WordPress repository 23.10.2018 <a href=\"https:\/\/www.wordfence.com\/blog\/2018\/11\/xss-injection-campaign-exploits-wordpress-amp-plugin\/\" class=\"external\" rel=\"nofollow\" target=\"_blank\">for security reasons<\/a>. <\/div><a href=\"#\" class=\"close mfn-close-icon\"><span class=\"icon\">\u2715<\/span><\/a><\/div>\n\n<div class=\"easy-reading\">\n<h2>Accelerated Mobile Pages<\/h2>\n<p>AMP is an open source technology designed to deliver content quickly to mobile devices. From a technical point of view, AMP is a simplified HTML, several JS scripts and an automated and distributed cache that speeds up the loading of pages from anywhere on the earth (AMP CDN).<\/p>\n<p>Implementing AMP for an existing website in practice means generating pages with the same content as the original but meeting the requirements of the AMP standard and connecting them using <em>amphtml<\/em> links for the basic pages and respectively <em>canonical<\/em> links for the AMP pages.<\/p>\n<p>A properly generated AMP page with a copy on AMP CDN servers on mobile devices loads almost instantly, even over slower network connections. In addition, a page with its AMP equivalent will be marked with an AMP technology icon (lightning in a circle) in Google search results. In practice, the use of AMP allows original websites to be displayed on desktop devices with high-speed Internet access and simplified versions in AMP format on smartphones.<\/p>\n<p>If you have interrupted loading the page on your phone at least once after a few seconds of waiting, the benefits of using AMP after reading the above paragraphs should be clear to you.<\/p>\n<\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3119\" src=\"https:\/\/retro.szmigiel.design\/wp-content\/uploads\/2018\/02\/blog-amp-medium-01.png\" alt=\"Zaawansowana personalizacja AMP dla WordPress | szmigieldesign blog\" width=\"1080\" height=\"340\" srcset=\"https:\/\/retro.szmigiel.design\/wp-content\/uploads\/2018\/02\/blog-amp-medium-01.png 1080w, https:\/\/retro.szmigiel.design\/wp-content\/uploads\/2018\/02\/blog-amp-medium-01-512x161.png 512w, https:\/\/retro.szmigiel.design\/wp-content\/uploads\/2018\/02\/blog-amp-medium-01-260x82.png 260w, https:\/\/retro.szmigiel.design\/wp-content\/uploads\/2018\/02\/blog-amp-medium-01-50x16.png 50w, https:\/\/retro.szmigiel.design\/wp-content\/uploads\/2018\/02\/blog-amp-medium-01-150x47.png 150w\" sizes=\"auto, (max-width:767px) 700px, (max-width:1080px) 100vw, 1080px\" \/><\/p>\n<div class=\"easy-reading\">\n<h2>How do I run AMP in WordPress?<\/h2>\n<p>In the case of WordPress CMS, the AMP page can be generated automatically by installing the official plugin <em>AMP for WordPress<\/em>. Unfortunately, this extension only allows you to create simple AMP pages for your entries, giving you virtually no control over the process of converting your content and its appearance. The text of the entry will be placed in the default template with one set of fonts and a fixed configuration. Of course we can write our own AMP template or code the individual solution (i.e. we can write our own plugin), but in my opinion in many cases it will be an unnecessary labour.<\/p>\n<p>Fortunately, thanks to the huge popularity of WordPress CMS, we have access to a variety of plug-ins that allow us to generate AMP standard pages &#8211; both for free and premium. Among the free solutions with the possibility to buy optional functionalities (e.g. integration with the popular Contact Form 7 or AMP for WooCommerce) the extension <em>AMP for WP<\/em> (note, the official plugin of WordPress authors is <em>AMP for WordPress<\/em>) by Ahmed Kaludi and Mohammed Kaludi is very attractive.\n<\/div>\n<div class=\"alert alert_error\"><div class=\"alert_icon\"><svg viewBox=\"0 0 28 28\"><defs><style>.path{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:1.5px;}<\/style><\/defs><g><circle cx=\"14\" cy=\"20\" r=\"0.33\" class=\"path\"\/><line x1=\"14\" y1=\"8.72\" x2=\"14\" y2=\"16.72\" class=\"path\"\/><path d=\"M12.6,3.42,1.54,22.58A1.61,1.61,0,0,0,2.93,25H25.07a1.61,1.61,0,0,0,1.39-2.42L15.4,3.42A1.61,1.61,0,0,0,12.6,3.42Z\" class=\"path\"\/><\/g><\/svg><\/div><div class=\"alert_wrapper\"> <strong>NOTE:<\/strong> The plugin has been removed from the WordPress repository 23.10.2018 <a href=\"https:\/\/www.wordfence.com\/blog\/2018\/11\/xss-injection-campaign-exploits-wordpress-amp-plugin\/\" class=\"external\" rel=\"nofollow\" target=\"_blank\">for security reasons<\/a>. <\/div><a href=\"#\" class=\"close mfn-close-icon\"><span class=\"icon\">\u2715<\/span><\/a><\/div>\n\n<div class=\"easy-reading\">\n<a class=\"button  button_left button_size_1 external\" href=\"https:\/\/wordpress.org\/plugins\/accelerated-mobile-pages\/\"     style=\"background-color:#271933!important;color:#FFFFFF;\" target=\"_blank\" rel=\"nofollow\"   title=\"\"><span class=\"button_icon\"><i class=\"icon-export\"  style=\"color:#FFFFFF!important;\" aria-hidden=\"true\"><\/i><\/span><span class=\"button_label\">Download AMP for WP<\/span><\/a>\n<\/p>\n<p>The extension allows for advanced personalization of both the final appearance of AMP pages and the components. Interestingly, the plugin can generate AMP not only for entries, but also for pages and other types of content (added by template code or other plug-ins, although it is a premium feature).<\/p>\n<p>The features of the free version are impressive. Since version 0.9.80 we can personalize the appearance of AMP pages almost in any way, controlling their color, typography, menu, related content, advertising, analytics and many others.<\/p>\n<\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3117\" src=\"https:\/\/retro.szmigiel.design\/wp-content\/uploads\/2018\/02\/blog-amp-medium-02.png\" alt=\"Zaawansowana personalizacja AMP dla WordPress | szmigieldesign blog\" width=\"1080\" height=\"340\" srcset=\"https:\/\/retro.szmigiel.design\/wp-content\/uploads\/2018\/02\/blog-amp-medium-02.png 1080w, https:\/\/retro.szmigiel.design\/wp-content\/uploads\/2018\/02\/blog-amp-medium-02-512x161.png 512w, https:\/\/retro.szmigiel.design\/wp-content\/uploads\/2018\/02\/blog-amp-medium-02-260x82.png 260w, https:\/\/retro.szmigiel.design\/wp-content\/uploads\/2018\/02\/blog-amp-medium-02-50x16.png 50w, https:\/\/retro.szmigiel.design\/wp-content\/uploads\/2018\/02\/blog-amp-medium-02-150x47.png 150w\" sizes=\"auto, (max-width:767px) 700px, (max-width:1080px) 100vw, 1080px\" \/><\/p>\n<div class=\"easy-reading\">Among the most important features of the plug, it is worth mentioning:<\/p>\n<ul>\n<li>Four unique templates to choose from (version 0.9.80) &#8211; each with personalization capability<\/li>\n<li>Support for entries, pages and your own content types (premium)<\/li>\n<li><strong>Advanced support for WooCommerce<\/strong> including product and basket (premium)<\/li>\n<li>Support for contact forms (pre\u00admium)<\/li>\n<li>Possibility of inserting AdSense advertisements in the content<\/li>\n<li><strong>Integration with Yoast SEO<\/strong><\/li>\n<li><strong>Integration with analytical tools (Google Analytics, Facebook Pixel, Piwik, Yandex, Alexa and many others)<\/strong><\/li>\n<li><strong>Generating schema.org metadata<\/strong><\/li>\n<li>Viewing and handling WordPress comments<\/li>\n<li>Generating RSS feeds for Facebook Instant Articles<\/li>\n<li>Possibility of creating automatic redirections for mobile devices<\/li>\n<li>Inserting your own code in the header and footer<\/li>\n<li>CSS editor<\/li>\n<li>Translation editor<\/li>\n<li><strong>Change of colour, typeface (Google Fonts), appearance and parameters of header and footer<\/strong><\/li>\n<li>Possibility of placing a unique menu for AMP in a header or footer<\/li>\n<li>Support for widgets in the footer<\/li>\n<li>Social media sharing buttons<\/li>\n<li><strong>Visual editor for posts and pages<\/strong><\/li>\n<li>Support for plugins (Gra\u00advity Forms, Con\u00adtact Form 7, Advan\u00adced Custom Fields Pro, Call to Action, etc.)<\/li>\n<li>Settings import \/ export<\/li>\n<\/ul>\n<p>If the possibilities of personalization are not sufficient, we can also prepare our own template based on a special application skeleton prepared by the authors of the plugin. Authors provide detailed documentation, encouraging to create their own, unique templates.<\/p>\n<h2>Summary<\/h2>\n<p>The main inconvenience of the AMP format is the need to invest a lot of work in making the image of the base pages and their equivalents more coherent in a simplified version of the AMP. Tools such as <em>AMP for WP<\/em> make this process a lot easier, making the implementation of accelerated mobile pages much easier.<\/p>\n<p>Do you use AMP format on your blog? Share your experience with the use of this standard <a class=\"scroll\" href=\"#comments\"> in comments<\/a> below.<\/p>\n<p><div class=\"idea_box\" style=\"\"><div class=\"icon\"><i class=\"icon-lamp\" aria-hidden=\"true\"><\/i><\/div><div class=\"desc\">This entry has been automagically translated with <a href=\"https:\/\/www.deepl.com\/translator\" class=\"external\" rel=\"nofollow\" target=\"_blank\">DeepL translation services<\/a>. I&#8217;d like to apologize for any spelling, grammar or logical errors in the content. Please let me know in the comments below if you find any mistakes worth correcting.<\/div><\/div>\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Are you not satisfied with the functionality and design of AMP pages generated by the official plugin available in WordPress repository? Try AMP for WP and adapt your Accelerated Mobile Pages to your needs.<\/p>\n","protected":false},"author":3,"featured_media":3116,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"categories":[138],"tags":[140,168],"class_list":["post-3444","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-websites","tag-accelerated-mobile-pages","tag-plugin"],"_links":{"self":[{"href":"https:\/\/retro.szmigiel.design\/en\/wp-json\/wp\/v2\/posts\/3444","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/retro.szmigiel.design\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/retro.szmigiel.design\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/retro.szmigiel.design\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/retro.szmigiel.design\/en\/wp-json\/wp\/v2\/comments?post=3444"}],"version-history":[{"count":0,"href":"https:\/\/retro.szmigiel.design\/en\/wp-json\/wp\/v2\/posts\/3444\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/retro.szmigiel.design\/en\/wp-json\/wp\/v2\/media\/3116"}],"wp:attachment":[{"href":"https:\/\/retro.szmigiel.design\/en\/wp-json\/wp\/v2\/media?parent=3444"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/retro.szmigiel.design\/en\/wp-json\/wp\/v2\/categories?post=3444"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/retro.szmigiel.design\/en\/wp-json\/wp\/v2\/tags?post=3444"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}