How to Use AMP with WordPress/WordPress

AMP is a joint effort that promises a better page load performance for websites in mobile environments. But, as you can find from our previous guide, you’ll have to sacrifice the fancy stuff from your site and stick to the rules, stick to the guidelines, and endorse the sites. . Sounds like a lot of work, doesn’t it?

Luckily, if you’ve built your website with WordPress, you can apply AMP to your site in a snap using a plugin called AMP-WP. It is shipped with more features than what satisfies the eye. So let’s see how it works.

Activated

To get started, log in to your website, go to Plugins > Add New screen. Search for “AMP; install and activate the one from Automattic.

Once activated, you can view AMP converted posts by adding / amp / traces at the end of the post URL (eg. http://wp.com/post/amp/), or with ?amp = 1 (For example. http://wp.com/post/?amp=1) if you are not using the Pretty Permalinks feature on your site.

And as you can see above, the post has been given basic styles, which you can further customize.

Noteworthy

There are a few things you should know about the state of the plugin at this point:

• Storage – Category, Labels and Custom taxonomy – currently not supported. They will not be converted to an AMP-compliant format. However, Custom Post Types can be initiated into AMP through Filters.
• It doesn’t add to the new settings screen in Control Panel. Customization is done at the code level with actions, filters, layers.
• The plugin does not currently include any AMP custom components such as phân tích amp and quảng cáo outside the box. If you need these elements, you’ll have to include it by hooking into your plugin’s Actions or Filters.

Customization

The plugin offers a variety of Actions and Filters that provide flexibility in customizing the styles, page content, and even the HTML markup of the AMP page in general.

Designs

I am sure this is one thing that you want to change immediately after activating the plugin, such as changing the background color of the title, font family and font size to better match the brand and personality your website.

To do so, we can use amp_post_template_css Action in Hàm.php file of our theme.

chức năng theme_amp_custom_styles () ?> nav.amp-wp-title-bar nền-màu: cam;  
Nếu chúng tôi xem qua DevTools của Chrome, các kiểu này sẽ được thêm vào trong  phần tử và ghi đè các quy tắc kiểu trước đó. Do đó, màu nền màu cam hiện được áp dụng cho tiêu đề.
 
Bạn có thể tiến hành viết các quy tắc phong cách như bạn thường làm. Nhưng, hãy lưu ý một vài hạn chế và giữ kích thước kiểu bên dưới 50Kb. Nếu có nghi ngờ, vui lòng tham khảo bài viết trước của chúng tôi về cách xác thực các trang AMP của bạn.
 
Tạo khuôn
 
Nếu bạn dường như phải thay đổi nhiều thứ ngoài việc tạo kiểu, bạn sẽ nhí nhố để xem xét tùy chỉnh toàn bộ Mẫu. Plugin, amp-wp, cung cấp một số tích hợp mẫu, cụ thể là:
 

• tiêu đề-bar.php
• meta-tác giả.php
• siêu phân loại.php
• meta-time.php
• đơn.php
• style.php

These templates are very similar to the regular WordPress template hierarchy.

Each of these templates can be taken over by providing a file of the same name under / amp / folder in theme. Once these files are in place, the plugin will pick them up instead of the default ones and allow us to completely change the output of these templates.

 hai mươi mười hai 404── 404.php ── amp │ ─── meta-tác giả.php ─ ├── meta-taxonomy.php │ ├── single.php │ └── style.php 

You can rewrite the whole style through style.php file, or modify the entire AMP page structure to your needs with đơn.php. However, you will have to keep the change to comply with AMP regulations.

List of hooks and filters

As mentioned earlier, this plugin is provided with several Actions and Filters. It’s impossible to cover every single thing in this article. But we can go with a cape, summary, as well as the paragraphs you need:

Act

The amp_init; action is useful for plugins that rely on AMP for their plugin to work; it runs when the plugin has been started.

chức năng amp_customizer_support_init () allow_once dirname (__FILE__). '/amp-customizer- class.php';  add_action ('amp_init', 'amp_customizer_support_init');

Similar to wp_head action, we can use amp_post_template_head to include additional elements in cái đầu tags in AMP pages like meta, Phong cáchor kịch bản.

 chức năng theme_amp_google_fonts () ?> 
amp_post_template_footer Hành động này tương tự như wp_footer.
 
chức năng theme_amp_end_credit () ?> 
Bộ lọc
 
amp_content_max_creen được sử dụng để đặt chiều rộng tối đa của trang AMP. Chiều rộng cũng sẽ được sử dụng để đặt độ rộng của các thành phần được nhúng như video Youtube.
 
hàm theme_amp_content_creen () return 700;  add_filter ('amp_content_max_ thong', 'theme_amp_content_ thong');
amp_site_icon_url  used to set icon - favicon icon and Apple icon - URL.  The default falls on images uploaded via the Site Icons interface, introduced in version 4.3.
 hàm theme_amp_site_icon_url () return get_template_directory_uri (). '/images/site-icon.png';  add_filter ('amp_site_icon_url', 'theme_amp_site_icon_url');
amp_post_template_meta_parts  is when you need to customize post meta data output such as author name, category and timestamp.  Through this filter you can shuffle the default order or remove one of the metas from the AMP page.
function theme_amp_meta ($ meta) foreach (mảng_keys ($ meta, 'meta-time', true) là $ key) unset ($ meta [$ key]);  trả lại $ meta; ; add_filter ('amp_post_template_meta_parts', 'theme_amp_meta'); 
amp_post_template_metadata  is to customize the Schema.org data structure in AMP pages.  The following example shows how we provide a website logo that will be displayed in the AMP carousel in Google search results and remove the modified timestamp of the page.
hàm amp_schema_json ($ siêu dữ liệu) unset ($ siêu dữ liệu ['dateModified']); $ siêu dữ liệu 'chiều rộng' => 325,); trả về siêu dữ liệu $;  add_filter ('amp_post_template_metadata', 'amp_schema_json', 30, 2);
amp_post_template_file  here is another way to overwrite template files.  It is useful if you want to store your custom AMP template files in a folder other than / amp /.
function theme_custom_template ($ file, $ type, $ post) if ('meta-tác giả' === $ type) $ file = get_template_directory_uri (). '/partial/amp-meta- Author.php';  trả lại tập tin $;  add_filter ('amp_post_template_file', 'theme_custom_template', 10, 3);
amp_query_var  used to change the endpoint of an AMP page when URL Permalink is enabled.  By default, it is set to / amp /.  Given the following, the AMP page is now accessible by adding / m / on the URL (e.g. . www.example.com/post-slug/m/).
chức năng custom_amp_endpoint ($ amp) return 'm';  add_filter ('amp_query_var', 'custom_amp_endpoint');