Skip to content

Instantly share code, notes, and snippets.

@khoipro
Last active June 11, 2024 11:48
Show Gist options
  • Save khoipro/34ab5aef3309f3d21a8a7c39e2ed65e5 to your computer and use it in GitHub Desktop.
Save khoipro/34ab5aef3309f3d21a8a7c39e2ed65e5 to your computer and use it in GitHub Desktop.
Hướng dẫn cài đặt và sử dụng plugin Simple Store Maps

Giới thiệu

  • Plugin được phát hành dành cho thành viên của nhóm Tối ưu web ✪.
  • Đây là plugin thử nghiệm nên nếu có lỗi phát sinh, bạn hãy comment trong group nhé.

Demo

Xem demo

Bản quyền

Author: khoi@codetot.com
Web: https://codetot.vn
Support: Zalo (0982904343)

Các phiên bản (bấm để tải về máy)

v0.0.1

Hướng dẫn cài đặt và sử dụng

  1. Tải plugin và cài đặt lên web.
  2. Thêm vào trong trang đoạn code HTML hoặc sử dụng plugin WPCode Lite để nhúng mã chứa danh sách địa điểm.
<script id="simple-store-maps-data">
[
    {
        "title": "CODE TOT JSC - Tối ưu tăng tốc web",
        "address": "78 Duy Tan, Cau Giay, Hanoi",
        "google_map_url": "https://maps.app.goo.gl/7PHq1XheDna4sXAW6",
        "google_maps_embed": "https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14896.131715188469!2d105.7831221!3d21.0313684!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3135abfff97547f5%3A0x99766c8bc5fb1fe6!2zQ8OUTkcgVFkgQ-G7lCBQSOG6pk4gQ09ERSBU4buQVA!5e0!3m2!1svi!2s!4v1717382386642!5m2!1svi!2s",
        "phone": "0982904343",
        "email": "khoi@codetot.com"
    },
    {
        "title": "CODE TOT JSC - Tối ưu tăng tốc web",
        "address": "78 Duy Tan, Cau Giay, Hanoi",
        "google_map_url": "https://maps.app.goo.gl/7PHq1XheDna4sXAW6",
        "google_maps_embed": "https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14896.131715188469!2d105.7831221!3d21.0313684!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3135abfff97547f5%3A0x99766c8bc5fb1fe6!2zQ8OUTkcgVFkgQ-G7lCBQSOG6pk4gQ09ERSBU4buQVA!5e0!3m2!1svi!2s!4v1717382386642!5m2!1svi!2s",
        "phone": "0982904343",
        "email": "khoi@codetot.com"
    },
    {
        "title": "CODE TOT JSC - Tối ưu tăng tốc web",
        "address": "78 Duy Tan, Cau Giay, Hanoi",
        "google_map_url": "https://maps.app.goo.gl/7PHq1XheDna4sXAW6",
        "google_maps_embed": "https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14896.131715188469!2d105.7831221!3d21.0313684!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3135abfff97547f5%3A0x99766c8bc5fb1fe6!2zQ8OUTkcgVFkgQ-G7lCBQSOG6pk4gQ09ERSBU4buQVA!5e0!3m2!1svi!2s!4v1717382386642!5m2!1svi!2s",
        "phone": "0982904343",
        "email": "khoi@codetot.com"
    },
    {
        "title": "CODE TOT JSC - Tối ưu tăng tốc web",
        "address": "78 Duy Tan, Cau Giay, Hanoi",
        "google_map_url": "https://maps.app.goo.gl/7PHq1XheDna4sXAW6",
        "google_maps_embed": "https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14896.131715188469!2d105.7831221!3d21.0313684!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3135abfff97547f5%3A0x99766c8bc5fb1fe6!2zQ8OUTkcgVFkgQ-G7lCBQSOG6pk4gQ09ERSBU4buQVA!5e0!3m2!1svi!2s!4v1717382386642!5m2!1svi!2s",
        "phone": "0982904343",
        "email": "khoi@codetot.com"
    }
]
</script>
  1. Vẫn trong trang đấy, thêm tiếp shortcode:
[simple_store_maps]

Câu hỏi thường gặp

Cách lấy mã 'google_maps_embed'

Bạn vào map chọn địa điểm, tìm mục Chia sẻ, chuyển sang tab "Nhúng bản đồ", sau đó lấy đoạn URL nằm trong "src=".

Ví dụ:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3724.034911041004!2d105.78059607613783!3d21.0312890806187!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3135ab92b21e3beb%3A0x4c9549d1df6c5d0b!2zNzggUC4gRHV5IFTDom4sIEThu4tjaCBW4buNbmcgSOG6rXUsIEPhuqd1IEdp4bqleSwgSMOgIE7hu5lpLCBWaeG7h3QgTmFt!5e0!3m2!1svi!2s!4v1717379699626!5m2!1svi!2s" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

Thì đoạn sẽ nhập là:

"google_maps_embed": "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3724.034911041004!2d105.78059607613783!3d21.0312890806187!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3135ab92b21e3beb%3A0x4c9549d1df6c5d0b!2zNzggUC4gRHV5IFTDom4sIEThu4tjaCBW4buNbmcgSOG6rXUsIEPhuqd1IEdp4bqleSwgSMOgIE7hu5lpLCBWaeG7h3QgTmFt!5e0!3m2!1svi!2s!4v1717379699626!5m2!1svi!2s"

Tôi đang dùng Block Editor hay page builder như Elementor, Flatsome, nhập như thế nào?

Nếu bạn đang dùng Block Editors hay thậm chí các page builder khác, bạn sẽ thêm 1 block 'Shortcode' và 1 block 'HTML' là đủ, và nhớ thêm cùng trong nội dung một trang.

  • Block HTML: chứa đoạn script <script id="simple-store-maps-data"></script>
  • Block Shortcode: nhập [simple_store_maps]

Đã test với Elementor, tạo cái hiển thị ra bình thường.

Development Hooks

  1. Muốn load CSS + JS chỉ ở trang nào đó giúp tối ưu CSS/JS.
add_filter('ssm_is_visible', function() {
  return is_page();
});
  1. Muốn thay đổi màu và kích thước chiều cao, bạn có thể sử dụng các thuộc tính ghi đè như sau.
<style>
:root {
    --ssm-light-color: #efefef;
    --ssm-primary-color: #ff0000;
    --ssm-border-color: rgba(0, 0, 0, 0.15);
    --ssm-mobile-height: 300px;
    --ssm-tablet-height: 500px;
    --ssm-pc-height: 600px;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment