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

Bản quyền

Author: [email protected]
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

Tải plugin và cài đặt lên web.
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": "[email protected]"
    },
    {
        "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": "[email protected]"
    },
    {
        "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": "[email protected]"
    },
    {
        "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": "[email protected]"
    }
]
</script>

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

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();
});

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>

khoipro/README.md