Vũ Thành Lâm

Tự thêm Featured Image cho AMP HTML WordPress theme

Vũ Thành Lâm
5/5 - (1 bình chọn)

Giới thiệu cách tự thêm ảnh tiêu biểu trong bài viết vào theme mặc định của WordPress AMP cho những người không chuyên

Công nghệ mới của Google Accelerated Mobile Pages (AMP) đã làm thay đổi đáng kể trong tốc độ load trang web đối với thiết bị di động và những nơi có đường truyền kém. Google cũng hứa hẹn sẽ có cache riêng cho chế độ này và khi người dùng tìm kiếm bằng thiết bị di động thì họ cũng ưu tiên xếp hạng các trang web có AMP theo cách riêng và thứ hạng cao hơn vì vậy sẽ tốt cho SEO.

Như các bạn đã biết ở các bài trước chúng tôi đã giới thiệu về AMP HTML và AMP cho WordPress:

  1. Hướng dẫn cài đặt Google AMP WordPress plugin
  2. So sánh sự khác biệt giữa AMP HTML và HTML, HTML5
  3. AMP HTML là gì

Nhưng đối với theme mặc định của AMP WordPress thì có nhiều hạn chế kể cả từ việc muốn thay logo, hay sửa tiêu đề, thay máu chữ cũng phải tuân thủ đúng theo các hàm mặc định của nó.

Xem thêm: Thay logo cho theme WordPress Accelerated Mobile Pages AMP HTML

Trong đó một hạn chế mà khiến nhiều người ngạc nhiên đó là theme AMP của WordPress mặc đinh không lấy Featured Image, do đó để có thể làm việc này các bạn cần phải code thêm như sau:

thêm vào file functions.php nhé

add_action( 'pre_amp_render_post', 'xyz_amp_add_custom_actions' );
function xyz_amp_add_custom_actions() {
    add_filter( 'the_content', 'xyz_amp_add_featured_image' );
}

function xyz_amp_add_featured_image( $content ) {
    if ( has_post_thumbnail() ) {
        // Just add the raw <img /> tag; our sanitizer will take care of it later.
        $image = sprintf( '

%s

', get_the_post_thumbnail() );
        $content = $image . $content;
    }
    return $content;
}

Ở đây chúng tôi thêm featured image vào đâu trang

Exit mobile version