0909.106.508

Trang chủ / Trang Chủ / Cách cài đặt Plugin AMP cho Website WordPress

Cách cài đặt Plugin AMP cho Website WordPress

Hôm nay mình sẽ hướng dẫn cho các bạn cách cài AMP trên theme Newspaper, theme này hiện tại trên themeforest.net là 59$: >> Xem Demo theme tại đây

tuy nhiên các bạn có thể mua theme này tại chotheme.com với giá chỉ 5,9$ >> Link mua tại đây

“WP AMP – Trang trên thiết bị di động được tăng tốc cho WordPress và WooCommerce”

 

A) Cài đặt

Từ Bảng điều khiển WordPress của bạn

  1. Truy cập ‘Plugins> Add New’.
  2. Nhấp vào ‘Tải lên Plugin’.
  3. Chọn zip-archive với plugin và bấm vào ‘Install Now’.
  4. Kích hoạt WP AMP từ trang plugin của bạn.

Thông qua tải lên tệp

  1. Giải nén lưu trữ zip bằng plugin.
  2. Tải thư mục wp-amp lên thư mục ‘/ wp-content / plugins /’ của bạn, sử dụng phương thức yêu thích của bạn (ftp, sftp, v.v …)
  3. Kích hoạt WP AMP từ trang plugin của bạn.

Khi được kích hoạt

  1. Xóa tất cả bộ đệm (bộ nhớ cache của trang web, bộ nhớ cache của trình duyệt, v.v.).
  2. Lưu lại cài đặt liên kết cố định.
  3. Kiểm tra cài đặt plugin và truy cập phiên bản AMP của trang web của bạn.

cài đặt AMP

Plugin đã được định cấu hình sẵn. Vì vậy, bạn có thể theo liên kết “Truy cập trang web AMP” và tận hưởng việc sử dụng plugin.


B) Giao diện quản trị

Cài đặt plugin có sẵn từ trang ‘Cài đặt> WP AMP’.

Cài đặt chung:

cài đặt AMP

Tại đây, bạn có thể định cấu hình các tùy chọn plugin cơ bản như chiều rộng tối đa của nội dung, cho phép loại bài đăng và trang lưu trữ, RTL, v.v.

Cài đặt hiển thị:

cài đặt hiển thị

Tại đây, bạn có thể điều chỉnh các cài đặt như màu sắc, phông chữ, phần tử đầu trang và chân trang, sau đó đăng khối dữ liệu meta. Ngoài ra, bạn có thể định cấu hình nút chia sẻ xã hội tại đây.

Cài đặt mẫu

cài đặt mẫu

Tại đây, bạn có thể tùy chỉnh các khối mẫu AMP. Ví dụ: bạn có thể bật hoặc tắt một số khối hoặc thay đổi thứ tự hiển thị của các khối bằng cách kéo và thả.

Cài đặt WooCommerce

Cài đặt WooCommerce

Tại đây, bạn có thể tùy chỉnh các khối nội dung AMP của các trang WooCommerce. Giống như Cài đặt mẫu có khả năng thay đổi hiển thị và thứ tự hiển thị của các khối nội dung như tiêu đề, hình ảnh, SKU, v.v. Bạn có thể tùy chỉnh các trang Sản phẩm, Cửa hàng và Lưu trữ sản phẩm.

Cài đặt quảng cáo:

cài đặt quảng cáo

Tại đây, bạn có thể thiết lập các khối quảng cáo AdSense, DoubleClick hoặc tùy chỉnh.

Để bật các khối này trên AMP, bạn nên bật chúng trong Cài đặt mẫu.

Xin lưu ý rằng khi bạn thêm một khối quảng cáo lần đầu tiên, nó cần một thời gian để xuất hiện.


C) Mã ngắn

Plugin cung cấp một số mã ngắn hữu ích để nhúng vào nội dung AMP.

Bài viết liên quan

[wp-amp-related title = "Bài viết liên quan" count = 3] [/ wp-amp-related]

Thông số:

  • title = “…” – tiêu đề của phần Bài viết liên quan (tùy chọn)
  • count = “…” – số phần tử sẽ được hiển thị (tùy chọn)

Bài đăng gần đây

[wp-amp-recent title = "Bài đăng gần đây" count = 3] [/ wp-amp-recent]

Thông số:

  • title = “…” – tiêu đề của phần Bài gần đây (tùy chọn)
  • count = “…” – số phần tử sẽ được hiển thị (tùy chọn)

Nút chia sẻ

[loại wp-amp-share = facebook, twitter, linkedin, chiều rộng email = 60 chiều cao = 44] [/ wp-amp-share]

Thông số:

  • loại = “…” – các loại nút chia sẻ (các loại có sẵn: ‘facebook’, ‘twitter’, ‘pinterest’, ‘linkedin’, ‘gplus’, ’email’)
  • width = “…” – chiều rộng biểu tượng chia sẻ xã hội (giá trị mặc định: 60px)
  • height = “…” – chiều cao biểu tượng chia sẻ xã hội (giá trị mặc định: 44px)

AdSense

[wp-amp-ad type = "adsense" width = "150" height = "50" dữ liệu-ad-client = "ca-pub-8125901705757971" data-ad-slot = "7783467241"] [/ wp-amp- quảng cáo]

Thông số:

  • type = “…” – chỉ có AdSense (bắt buộc)
  • data-ad-client = “…” – tham số data-ad-client adsense (bắt buộc)
  • data-ad-slot = “…” – tham số data-ad-slot (bắt buộc)

Không có AMP

[no-amp] Văn bản này sẽ không hiển thị trong phiên bản AMP [/ no-amp]

Nút công tắc điện

[tiêu đề wp-amp-switcher = 'Chuyển đổi phiên bản mặc định'] [/ wp-amp-switcher]

Thông số:

  • title = “…” – tiêu đề nút

Accordion

Mã ngắn:

  • [wp-amp-accordion] – thẻ accordion
  • [wp-amp-accordion-section] – thẻ phần accordion

D) Bộ lọc và hành động

Móc trong WordPress lõi, bổ sung và chủ đề về cơ bản cho phép bạn thao tác mã mà không cần chỉnh sửa các tập tin lõi. Vì vậy, bạn có thể thay đổi hành vi plugin của bên thứ ba từ chủ đề hoặc plugin của riêng bạn và giữ các bản cập nhật trong tương lai.

Tác vụ plugin

  • amphtml_init – WP AMP plugin khởi tạo, có thể được sử dụng để bao gồm thêm thư viện js / php hoặc mở rộng chức năng chính.
  • amphtml_template_head – móc vào đầu trang AMP, có thể được sử dụng để thêm các thành phần mở rộng.
  • amphtml_template_css – móc vào kiểu trang AMP, có thể được sử dụng để thêm kiểu tùy chỉnh.
  • amphtml_template_content – móc vào nội dung của trang AMP, có thể được sử dụng để thêm nội dung tùy chỉnh.
  • amphtml_footer_bottom – thực hiện ở cuối chân trang của trang AMP.
  • amphtml_after_footer – thực thi sau khi chân trang của trang AMP.

Bộ lọc Plugin

  • amphtml_style – cho phép bạn sửa đổi các kiểu trang AMP.
  • amphtml_single_content – cho phép bạn truy xuất và cập nhật nội dung bài đăng AMP.
  • amphtml_meta – cho phép bạn truy xuất và cập nhật khối meta Trang AMP (tác giả, danh mục, ngày tháng).
  • amphtml_nav_menu – cho phép bạn truy xuất và cập nhật nội dung menu điều hướng của Trang AMP.
  • amphtml_no_amp_menu_link – cho phép bạn truy xuất và cập nhật lớp không có phần tử menu điều hướng AMP.
  • amphtml_the_content – cho phép bạn cập nhật danh sách các bộ lọc the_content mặc định được phép
  • amphtml_logo_link – cho phép bạn cập nhật liên kết logo
  • amphtml_rel_link_url – cho phép bạn cập nhật url của tài liệu amphtml liên quan
  • amphtml_language_attributes – cho phép bạn thay đổi hoặc vô hiệu hóa các thuộc tính ngôn ngữ trong thẻ <html>
  • amphtml_template_footer – cho phép bạn thay đổi nội dung chân trang của Trang AMP.

Thí dụ

1. Hãy thêm hỗ trợ cho SoundCloud:

add_action ('amphtml_template_head', hàm () {
	echo '<script async custom-element = "amp-soundcloud" src = "https://cdn.ampproject.org/v0/amp-soundcloud-0.1.js"> </ script>';
});

2. Hãy xóa điểm cuối AMP (‘/ amp’) khỏi tất cả các liên kết menu điều hướng với lớp ‘no-amp’:

add_filter ('amphtml_no_amp_menu_link', hàm ($ class) {
	$ class = 'no-amp';
	trả về $ class;
});

3. Giả sử bạn muốn áp dụng tùy chỉnh gọi lại the_content tùy chỉnh:

add_filter ('amphtml_the_content', 'add_the_content');
function add_the_content ($ hooks) {
    $ priority = 10;
    $ callback = 'update_content';
	$ hooks [$ priority] [] = $ gọi lại;
	trả về $ hooks;
}

4. Hãy thay đổi liên kết logo:

add_filter ('amphtml_logo_link', 'my_functions_name', 1, 10);
function my_functions_remove ($ link) {
    $ link = 'http://www.example.com';
    return $ link;
}

5. Hãy loại bỏ các thuộc tính ngôn ngữ:

add_filter ('amphtml_language_attributes', '__return_false');

6. Hãy chèn quảng cáo sau đoạn thứ hai:

add_filter ('the_content', 'amphtml_content_ads');

function amphtml_content_ads ($ content) {

	// Mã quảng cáo AMP của bạn
	$ ad_code = '<amp-ad> .... </ amp-ad>';

	if (is_single () &&! is_admin ()) {
		trả về insert_amp_ad_after_paragraph ($ ad_code, 2, $ content);
	}

	trả về $ nội dung;
}

hàm insert_amp_ad_after_paragraph (chèn $, $ paragraph_id, $ content) {
	$ closing_p = '</ p>';
	$ paragraphs = explode ($ closing_p, $ nội dung);
	foreach ($ paragraphs như $ index => $ paragraph) {

		if (trim ($ paragraph)) {
			$ paragraphs [$ index]. = $ closing_p;
		}

		if ($ paragraph_id == $ index + 1) {
			$ paragraphs [$ index]. = $ chèn;
		}
	}

	return implode ('', $ paragraphs);
}

E) Thẻ có điều kiện –

Các thẻ có điều kiện của WP AMP và WordPress có thể được sử dụng trong tệp mẫu của bạn để thay đổi nội dung nào được hiển thị dựa trên những điều kiện mà trang phù hợp.

1. Kiểm tra xem trang AMP đã được mở chưa:

is_wp_amp()

Trả về true nếu trang AMP được yêu cầu.


F) Chức năng trợ giúp

Các chức năng trợ giúp của WP AMP có thể được sử dụng để chuẩn bị nội dung trong các mẫu tùy chỉnh.

1. Thoát nội dung AMPHTML

Sử dụng: <?php esc_amphtml( $content ) ?>

Mô tả: Thoát cho các khối AMPHTML.

Thông số:

  • $ content – Văn bản cần thoát (bắt buộc)

G) URL Params

Danh sách thông số URL:

1.? View-original-redirect = 1

Tham số URL này được sử dụng để truy cập phiên bản thông thường của trang, nếu bật “Chuyển hướng tất cả người dùng thiết bị di động sang phiên bản AMP theo mặc định”.

2.? Add-to-cart = [ID]

Đây là thông số URL WooCommerce mặc định cho phép thêm sản phẩm vào giỏ hàng thông qua truy vấn GET.

3.? Add-to-cart-redirect = 1

Thông số URL này được sử dụng để thêm vào giỏ hàng và truy cập phiên bản thông thường của trang sản phẩm, nếu tùy chọn “Chuyển hướng tất cả người dùng thiết bị di động sang phiên bản AMP theo mặc định” được bật.


H) Câu hỏi thường gặp

WP AMP có hỗ trợ các thành phần mở rộng ra khỏi hộp không?

Dưới đây là danh sách các thành phần mở rộng có sẵn theo mặc định:

  • amp-carousel
  • amp-iframe
  • amp-youtube
  • amp-audio
  • amp-vimeo
  • amp-accordion
  • amp-analytics
  • quảng cáo amp
  • amp-social-share

Plugin hỗ trợ plugin và loại bài đăng nào?

Plugin WP AMP hỗ trợ các loại bài đăng, trang và lưu trữ mặc định – bài đăng, trang, danh mục, thẻ, tìm kiếm, trang blog, v.v.

Plugin có tương thích với Yoast SEO không?

Vâng, plugin này hoạt động tốt với plugin Yoast SEO.

Plugin có tích hợp Google Analytics không?

Có, bạn có thể bật theo dõi Google Analytics bằng cách nhập mã GA của bạn vào trường thích hợp trong trang cài đặt chung của plugin.

Plugin có cung cấp tích hợp với WooCommerce không?

Có, plugin hoạt động tốt với Trang sản phẩm, Lưu trữ sản phẩm, Trang cửa hàng. Nhưng các trang Checkout và Cart bị loại trừ khỏi màn hình vì hỗ trợ AMP của các phần tử biểu mẫu html

Plugin có cung cấp tích hợp với gói Tất cả trong một SEO không?

Vâng, plugin này hoạt động tốt với All in One SEO Pack.

Plugin có cho phép hiển thị quảng cáo (AdSense) không?

Có, plugin này cho phép thiết lập một vài khối AdSense khác nhau.

Có thể viết lại tiêu đề, nội dung, hình ảnh nổi bật cho AMP không?

Có, bạn có thể viết lại tiêu đề, nội dung, hình ảnh nổi bật từ trang chỉnh sửa bài đăng:

Có thể loại trừ một số trang khỏi thế hệ AMP không?

Có, có cài đặt bổ sung tại Trang chỉnh sửa bài đăng / trang:

Tôi có thể thêm hỗ trợ cho thành phần mở rộng bổ sung không?

Có, bạn có thể thêm hỗ trợ cho các thành phần mở rộng bổ sung bằng cách gắn vào hành động ‘amphtml_template_head’.

Làm thế nào tôi có thể ghi đè lên các tệp mẫu mặc định?

Bạn có thể tìm thấy tệp mẫu trong thư mục “wp-content / plugins / wp-amp / templates”.
Bạn có thể chỉnh sửa các tệp này theo cách nâng cấp an toàn bằng ghi đè. Sao chép nó vào một thư mục trong chủ đề của bạn có tên / wp-amp và cảm thấy tự do để chỉnh sửa tập tin này.


I) Nguồn tham khảo

Chúng tôi đã sử dụng các thư viện javascript và PHP sau đây như được liệt kê.

Tham khảo: Hướng dẫn từ file gốc

Cách cài đặt Plugin AMP cho Website WordPress
5 (100%) 3 votes

Thông tin mới

cách lấy baclink từ wordpress.org

Cách lấy baclink cực chất từ wordpress.org

Hôm nay mình sẽ hướng dẫn cách bạn cách lấy baclink từ WordPress.org đây là …

Trả lời

Email của bạn sẽ không được hiển thị công khai.