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

Thay logo cho theme WordPress Accelerated Mobile Pages AMP HTML

1 Tháng Ba, 2016317 Lượt xem
Xem với phiên bản Google AMP, Vinhomes Thăng Long, Mua bán Piano, cửa nhôm xingfa
Thay logo cho theme WordPress Accelerated Mobile Pages AMP HTML
Đánh giá bài viết

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ủ đề

Ibmeduca.org: Viện Kinh Thánh truyền giáo
Ibmeduca.org là website của Viện Kinh Thánh truyền giáo  Trang web được thiết kế trên nền tảng mã nguồn SEO tốt nhất đó là hệ quản trị nội dung sử dụng Responsive Bootstrap version mới nhất, tăng tốc độ load một...
3 Cách tăng lượng truy cập Website giúp SEO lên Top Google
Bất cứ ai làm kinh doanh trên cũng muốn website của mình có được lưu lượng truy cập cao giúp tăng doanh thu đồng thời cũng giúp cho việc SEO lên Top Google. Điều đó có nghĩa là bạn muốn mỗi...
36 cách tối ưu hóa chiến dịch Google AdWords
Để trang web của bạn có được vị trí tốt trên bảng xếp hạng, bạn nên tối ưu hoá các chiến dịch Google AdWords vì vậy ở bài viết này tôi sẽ đưa ra danh sách các tối ưu hóa...
Kiếm 1.4 triệu USD Với Google AdSense và Facebook một cách đơn giản
Google AdSense và quảng cáo Facebook có giúp bạn kiếm ra tiền, tăng thu nhập cho một doanh nghiệp? Điều đó hoàn toàn có thể xảy ra nhé. Tôi sẽ chỉ cho bạn cách tôi đã kiếm được hơn $ 1.4...
Bootstrap Pagination Phân trang trong bootstrap
Trong bài trước, chúng ta đã tìm hiểu về bootstrap tabs và pills, giúp thu gọn một lượng lớn nội dung mà vẫn giữ được bố cục trang. Xem thêm: Bootstrap Tabs và Pills Trong bài này, chúng ta cùng tìm...