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

Thay logo cho theme WordPress Accelerated Mobile Pages AMP HTML

1 Tháng Ba, 201670 Lượt xem
Xem với phiên bản Google AMP, Vinhomes Thăng Long, Mua bán Piano

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

About Vũ Thành Lâm

Thay logo cho theme WordPress Accelerated Mobile Pages AMP HTML 6c99874f75cccd390c6e4303a3653bda?s=100&r=gLamvt - 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

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

Tin được quan tâm

Bài viết cùng chủ đề

Lên #TOP0 (Tốp KHÔNG) trên Google Search 90% Chiên Dza SEO không dạy bạn
Trong trang kết quả tìm kiếm của Google, việc kết quả tìm kiếm được xếp hạng trên vị trí cao được các SEOer và các Webmaster cố gắng thực hiện như một cuộc đua. Tuy nhiên trên bảng xếp hạng...
Cảnh báo Không an toàn trong trình duyệt: Dấu hiệu an toàn trong SEO 2017
Như đã thông báo trong bài viết trước về dấu hiệu không an toàn trong các trình duyệt sẽ có những ảnh hưởng không tốt tới người dùng và làm ảnh hưởng tới SEO. Người dùng sẽ dần lo ngại...
Bảo mật với HTTPs: An toàn thông tin trong SEO 2017
An toàn thông tin đang là mối lo ngại của toàn thế giới, đối với Google đặc biệt trên Google Chrome để giúp người dùng duyệt web một cách an toàn hơn, Chrome sẽ có một biểu tưởng bảo mật...
10 Điều cần làm để bảo vệ WordPress khỏi bị Hack không đáng có
WordPress ngày càng được dùng phổ biến cho cá website hiện nay ở Việt Nam và thế giới. Sự chiếm lĩnh thị phần của CMS mã nguồn quản trị nội dung mở này khiến cho chính nó là mảnh đất...
Hơn cả Triệu Website WordPress bị hack 2017 bạn có biết
Vào cuối tháng 2 năm 2017 WordPress đã được phát hành 4.7.2 và chính Lâm vờ tờ cũng đã đưa ra thông báo trên Facebook của mình https://www.facebook.com/lamvt19792003 nhằm cảnh báo tới các khách hàng và bạn bè của Lâm...