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.

Tham khảo thêm

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
} );

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.

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à).