Cách thêm CSS vào AMP trong WordPress

Trong bài viết trước Lucid Gen đã hướng dẫn cách cài đặt AMP cho WordPress bài bản cho những bạn mới bắt đầu sử dụng AMP. Bài viết này Lucid Gen sẽ bổ sung thêm một thủ thuật, đó là thêm CSS vào AMP trong WordPress. Giúp cho những bạn có kỹ năng CSS có thể tùy biến được nhiều hơn với trang AMP.

Thêm CSS vào AMP trong WordPress

Nếu bạn đang sử dụng plugin AMP của AMP Project Contributors, bạn hãy thêm thêm đoạn code bên dưới vào trong file functions.php của giao diện. Sau đó, bạn hãy thay thế .amp-wp-title{color:#00f} thành CSS của bạn.

//Custom CSS for AMP
add_action( 'amp_post_template_css', function() {
	?>
	.amp-wp-title{color:#00f}
	<?php
} );
Thêm CSS vào AMP trong WordPress
Thêm CSS vào AMP trong WordPress

Nếu có thể, bạn hãy sử dụng Child theme để code thêm CSS vào AMP không bị mất khi cập nhật giao diện gốc.

Thêm CSS vào AMP for WP

Nếu bạn đang sử dụng plugin AMP for WP, bạn có thể thêm CSS vào AMP một cách dễ dàng. Bạn vào AMP > Design > Global và thêm CSS của bạn vào phần Custom CSS.

Thêm CSS vào AMP for WP
Thêm CSS vào AMP for WP

Lưu ý khi thêm CSS vào AMP

  1. Nếu bạn đang sử dụng một plugin tạo cache, hãy kiểm tra và xóa cache để đảm bảo CSS mới thêm vào sẽ hoạt động khi người dùng truy cập và để Google index giao diện AMP mới của bạn.
  2. Hãy tối ưu CSS trước khi thêm vào AMP, dán CSS của bạn vào trang CSSO để nhận được đoạn CSS đã nén nhé.
  3. Hãy truy cập trang AMP của bạn trên điện thoại để xem thực tế CSS của bạn tác động đến giao diện trang AMP như thế nào. Đôi khi xem trên máy tính thấy ổn nhưng lên diện thoại lại thấy chưa ổn đấy.

Lời kết

Bằng cách thêm CSS vào AMP, bạn có thể tùy biến cho trang AMP giống với trang gốc nhất có thể. Hãy dựa vào giao diện website trên diện thoại để thêm CSS cho font chữ, màu sắc, font size, các khoảng cách,… cho trang AMP của bạn. Mình tin rằng khi bạn có một trang AMP gần giống trang gốc thì bạn sẽ càng thích sử dụng AMP hơn đấy (vì có nhiều lợi thế mà).

Bài viết liên quan

Trần Ngọc Minh Hiếu

Trần Ngọc Minh Hiếu

Mình hiện đang làm Data Analyst, trước đó từng làm Digital Marketing. Viết blog là một niềm vui của mình, giúp mình chia sẻ lại những kiến thức và trải nghiệm từ cuộc sống và công việc. Bạn có thể donate cho mình tại đây.

2 bình luận về “Cách thêm CSS vào AMP trong WordPress”

Viết một bình luận

Hãy tự nhiên để lại bình luận của bạn, chúng tôi sẽ duyệt và trả lời sớm nhất có thể. Vui lòng sử dụng email thật để được duyệt và thông báo khi chúng tôi trả lời. Bạn có thể thêm ảnh đại diện cho email của mình.