Danh mục: Hướng dẫn học WordPress

Thay logo cho theme WordPress Accelerated Mobile Pages AMP HTML

1 Tháng Ba, 2016
Xem với phiên bản Google AMP

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

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

Bài viết mới nhất

lamvt

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ệ: D4J hoặc ĐT: 0169981 Năm Hai Ba Hai

Post by:admin

Bài viết liên quan

11 Mẹo Tối ưu Google Adsense tăng khả năng nhìn thấy quảng cáo
Tối ưu hóa khả năng được nhìn thấy Một mẫu quảng cáo được xem là có Khả năng nhìn thấy quảng cáo là khi 50% pixel của quảng cáo nằm trong màn hình 1 giây. Khả năng nhìn thấy quảng...
Chính sách của Google Adsence năm 2017
Chào mừng các bạn đến với buổi tọa đàm trực tuyến do Google Adsence tổ chức ngày hôm nay Mình xin tự giới thiệu mình là Vân là chuyên viên về mảng tối ưu hóa doanh thu cho tài khoản...
20 Điều cần biết để có một Bài Viết chất lượng cho SEO
Nói đến báo chí, chúng được phân chia thành nhiều loại hình khác nhau từ tin tức, chính luận, phỏng vấn, phóng sự cho đến các bài báo giới thiệu về tính năng, sản phẩm, hướng dẫn, giảng dạy...Trong khi...
8 Điều khiến bạn Thất Bại khi SEO trang WEB
Có lẽ bạn đã nghe đến sự diệu kỳ của blog kinh doanh và quyết định sử dụng blog để phát triển công việc kinh doanh của mình. Bạn viết nhiều bài và đăng chúng lên blog đã được vài...
Chứng chỉ Google SEO – Đừng đem ra Hù dọa để chăn Gà
Google sẽ không cung cấp chứng chỉ SEO cho các nhà quản trị web (webmasters) hoặc các công ty SEO Dường như Google sẽ không bao giờ có ý định cung cấp chứng chỉ SEO và lý do tại sao...
4 Bước cài đặt Google Webmaster Tools thật đơn giản
Tổng quan về Google Webmaster Tool Nếu bạn đã theo dõi bài viết về Google Analytics của mình cùng với bạn tự tìm hiểu thì bạn hoàn toàn có thể tự tin trong việc đọc các báo cáo phân tích...
Google Analytic là gì? Làm sao để cài Google Analytic cho WordPress
Google Analytics là gì? Hướng dẫn cài đặt Google Analytics? 4 báo cáo Analytics mà bạn không thể bỏ qua Google Analytics – một bộ công cụ miễn phí vô cũng quan trọng, có thể nói là toàn năng mà...
3 Bước cụ thể Cài đặt và sử dụng cơ bản Google Webmaster Tool
Đối với người làm SEO chắc hẳn ai cũng biết đến những công cụ hữu ích trên web như Google Analytics, Google Webmaster Tool được Google cung cấp miễn phí. Giống như Google Analytics, Google Webmaster Tool  cũng là công...
101 Điều thay đổi về Google AMP HTML năm 2016
Google chính thức mở rộng AMP HTML cho toàn thế giới: Columnist Barb Palser tin rằng nội dung AMP trên tìm kiếm di động sẽ mở rộng phần của nội dung AMP mà đã bị ẩn đi, không nhìn thấy...
5 Điều bạn chưa biết về Facebook Instant Articles
Tốc độ load chóng mặt, bạn đã từng click vào link nào được chia sẻ trên Facebook với thiết bị di động và hình ảnh có hình tia sét (tia chớp) Thunder, nhỏ nhỏ ở góc phải phía trên của...