Vũ Thành Lâm

Thay logo cho theme WordPress Accelerated Mobile Pages AMP HTML

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

Google AMP HTML Accelerated Mobile Pages sử dụng cho WordPress thật dễ dàng và cung cấp sẵn cho người dùng một theme (giao diện) mặc định. Tuy nhiên, nhiều bạn muốn sửa và tự tạo cho mình một phong cách riêng cho mình bằng cách thêm và sửa HTML CSS với nó quả là một vấn đề khá khó đối với người dùng thông thương không phải coder.
Để làm được việc này trước tiên bạn cần tìm hiểu các vấn đề sau:

  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ì

Tiếp đến bạn nên làm việc với file functions.php trong theme của bạn nằm trong thư mục theme

Làm việc với site Icon theme mặc định của AMP HTML

Mặc định của theme sẽ lấy logo của site bạn, nếu các bạn cần thay thế bằng một Icon cho riêng APM page thì nên làm như sau, AMP script sẽ tự động lấy và thay thế cho logo theme của bạn.

add_filter( 'amp_post_template_data', 'xyz_amp_set_site_icon_url' );

function xyz_amp_set_site_icon_url( $data ) {
    // Ideally a 32x32 image
    $data[ 'site_icon_url' ] = get_stylesheet_directory_uri() . '/images/amp-site-icon.png';
    return $data;
}

Bạn cần tạo một file icon của bạn ở đây ví dụ là amp-site-icon.png và đặt trong thư mục images

Nếu bạn không làm điều này mặc định sẽ lấy logo của WordPress cho site của bạn
Để kiểm tra logo mới của bạn đã hiển thì tốt chưa thì các bạn có thể kiểm tra trên trình duyệt của bạn với AMP page bằng cách thêm /AMPvào đường dẫn của mình ví dụ https://lamvt.vn/cach-them-infinite-scrolling-wordpress-lay-tin-nhu-facebook-feed/amp/

Trong trường hợp các bạn chỉ muốn dùng chỉ logo và không muốn dùng tiêu đề của website thì ta phải làm việc với amp_post_template_css như sau

add_action( 'amp_post_template_css', 'xyz_amp_additional_css_styles' );

function xyz_amp_additional_css_styles( $amp_template ) {
    // only CSS here please...
    ?>
    nav.amp-wp-title-bar {
        padding: 12px 0;
        background: #000;
    }
    nav.amp-wp-title-bar a {
        background-image: url( 'https://example.com/path/to/logo.png' );
        background-repeat: no-repeat;
        background-size: contain;
        display: block;
        height: 28px;
        width: 94px;
        margin: 0 auto;
        text-indent: -9999px;
    }
    <?php
}

text-indent: -9999px; để ẩn giá trị Text đi
Exit mobile version