Chào mừng bạn đến với Lamvt Group

Thay logo cho theme WordPress Accelerated Mobile Pages AMP HTML

Thay logo cho theme WordPress Accelerated Mobile Pages AMP HTML
5 (100%) 1 vote

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

Thay logo cho theme WordPress Accelerated Mobile Pages AMP HTML 2016-03-01_102229Nế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ụ http://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

Hot Trend: Cửa chống cháy, bảng chữ cái tiếng Việt, bảng chữ cái tiếng Nhật, font chữ đẹp, font vni

Bài Viết Liên Quan

sponsored links - Liên kết được tài trợ

Vũ Thành Lâm

Lamvt – Tên thật là Vũ Thành Lâm năm sinh 197x tại xã Đại Đồng – huyện Thạch Thất – Hà Tây quê lụa
Yêu Joomla, thích WordPress và đam mê SEO
Từng là GMOD của cộng đồng Joomla Việt, Admin của Thế giới SEO, thành viên tích cực trong Group WordPress Hà Nội
Liên hệ ĐT: 0169981 Năm Hai Ba Hai

liên hệ

Phone

0169 981 5232

Address

Số 25, Phú Thứ - Tây Mỗ, Nam Từ Liêm, Hà Nội

Email

Lamvt19792003@gmail.com

Copyright © 2017 by Lamvt Group. All right reserved.