Bootstrap

Vũ Thành Lâm

Content - Code - SEO - MMO
17/10/1979
Tây Mỗ - Nam Từ Liêm - Hà Nội
thanhlam19792003

Lamvt – Vũ Thành Lâm – bắt đầu Code 2005 Freelancer từ 2006 với hàng ngàn dự án lớn nhỏ cho nước ngoài và hàng trăm dự án web cho Việt Nam.

SEO thành công rất nhiều dự án lớn, độ khó cao.
MOD (Moderator) và Admin (Administraror) của nhiều diễn đàn về SEO và CODE web MMO tại Việt Nam
Dạy Lập trình Thiết kế Web và SEO Miễn phí 15++ Năm (Từ 2006 đến Nay)

Thay logo cho theme WordPress Accelerated Mobile Pages AMP HTML

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

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ụ 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

Tin mới nhất

VR PLUS (https://vrplus.vn/ ) Là một trong những dự án do Lamvt thực hiện trong thời gian gần đây. Như...

Trong một năm qua, chúng tôi đã xuất bản khoảng 79 bài viết SEO trên blog Ahrefs. Các bài viết...

Khám phá kĩ thuật viết nội dung SEO Nếu không có SEO, nội dung của bạn có thể bị chìm...

Các website về lĩnh vực làm đẹp cần phải có một thiết kế (design) hấp dẫn và bắt mắt. Điều...

Core Web Vitals được đo lường như thế nào? Làm thế nào để bạn biết các bản sửa lỗi đã...

Tin được yêu thích

Như đã nói, phần mềm chỉnh sửa video đang ngày càng chứng tỏ được tầm quan trọng của mình, nhất...

Nhiều bạn thắc mắc là sau khi cài đặt Plugin cho Google AMP thì làm thế nào để kiểm tra,...

Các trang web giáo dục và các trang web của chính phủ có một lợi thế hơn trong bảng xếp...

Nội dung là một trong 3 tiêu chí quan trọng để google đánh giá thứ hạng tìm kiếm cho website...

Thẻ <span> </span> Thẻ <span> là thẻ khá đặc biệt trong HTML, theo mặc định thì thẻ <span> được thêm...

Khách đang xem

  1. Câu hỏi Tôi làm development trên một box và có sử dụng cho production. Tôi kết xuất cơ sở dữ...
    18 giây trước
  2. Bạn đã từng xem các bài viết được đề xuất sau khi đăng lên blog, có liên kết đến các...
    27 giây trước
  3. Bạn có biết các yếu tố xếp hạng SEO sẽ tạo sự khác biệt cho doanh nghiệp của bạn trong...
    12 giây trước
  4. Trong bài viết này, bạn sẽ được tìm hiểu về tất cả các bước cần thiết làm nên thành công...
    30 giây trước
  5. Đối với người mới học WordPress trong phần nâng cao cần hiểu biết cách xây dựng code cho mình một...
    12 giây trước
  6. SEO (tối ưu hóa trang web của bạn cho công cụ tìm kiếm) là một việc làm rất thiết thực...
    19 giây trước
  7. Ở bài viết trước chúng ta đã hiểu về SEO , hiểu khái niệm “như thế nào là SEO “...
    12 giây trước
  8. Bạn đang tìm cách giải quyết bài toán: làm thế nào để chuyển website wordpress từ localhost lên host một...
    15 giây trước
  9. 5 chiến lược quảng cáo số mà bất cứ doanh nghiệp nhỏ nào cũng nên quan tâm Một khi nắm...
    3 giây trước
  10. Những người mới học Wordpress thường có câu hỏi: Widget là gì? Cách sử dụng Widget trong Wordpress? Trong bài viết...
    16 giây trước