Σε αυτό το άρθρο, θα σας δείξω πώς να προσθέσετε έναν αποκριτικό χάρτη των Χαρτών Google σε μια ιστοσελίδα του WordPress (δηλαδή για μια σελίδα επαφής) χωρίς να χρησιμοποιήσετε πρόσθετο. Θα χρησιμοποιήσω το WordPress 6.0 για αυτό το σεμινάριο, καθώς και το θέμα Twenty Twenty Two, το οποίο είναι το προεπιλεγμένο θέμα για αυτήν την έκδοση του WordPress.

 Η λειτουργία των Χαρτών Google σάς επιτρέπει να εμφανίζετε την τοποθεσία της επιχείρησής σας σε έναν διαδραστικό χάρτη, επιτρέποντας στους επισκέπτες του ιστότοπου να βλέπουν εύκολα πού βρίσκεστε και να αλληλεπιδρούν με τον χάρτη για να δουν τι άλλο υπάρχει γύρω σας, να λάβουν οδηγίες κ.λπ. Δείχνει στους επισκέπτες του ιστότοπου ότι είστε τοπική επιχείρηση και έχετε μια πραγματική, φυσική τοποθεσία. Είναι πολύ συνηθισμένο για τις επιχειρήσεις να έχουν έναν χάρτη στη σελίδα επικοινωνίας τους.

Υπάρχουν τόνοι προσθηκών των Χαρτών Google εκεί έξω, αλλά πολλές από αυτές είναι αδέξιες και απαιτούν είτε πληρωμή για τις πλήρεις λειτουργίες της προσθήκης είτε έναν λογαριασμό προγραμματιστή Google με περίπλοκα βήματα που παράγουν ένα λιγότερο από επιθυμητό αποτέλεσμα.

Με όλα αυτά, υπάρχει ένας πολύ απλός τρόπος για να προσθέσετε τους Χάρτες Google στις σελίδες σας στο WordPress 6.0 χωρίς πρόσθετα και χωρίς πολλά περίπλοκα βήματα. Ας βουτήξουμε σε αυτό.

Πίνακας περιεχομένων

Βήμα 1: Δημιουργήστε ένα μπλοκ HTML

Για αρχή, συνδεθείτε στην περιοχή διαχειριστή του ιστότοπού σας WordPress και μεταβείτε στην ενότητα "Σελίδες" (κόκκινο βέλος στην παραπάνω εικόνα).

Κάντε κλικ στη σελίδα στην οποία θέλετε να προσθέσετε τη λειτουργία των Χαρτών Google (μπορείτε να κάνετε κλικ στο όνομα της σελίδας, στην περίπτωσή μου «Επικοινωνία» – μπλε βέλος στην παραπάνω εικόνα – ή απλώς να κάνετε κλικ στο «Επεξεργασία» κάτω από το όνομα της σελίδας).

Εάν χρησιμοποιείτε ένα θέμα μπλοκ όπως το Twenty Twenty Two, θα βρίσκεστε τώρα στο Block Editor για τη σελίδα σας. Κάντε κύλιση προς τα κάτω στην τοποθεσία όπου θέλετε να εισαγάγετε τον χάρτη σας.

Στη συνέχεια, κάντε κλικ στο εικονίδιο "+" (το "Block Inserter" - κόκκινο βέλος στην παραπάνω εικόνα) για να εισαγάγετε ένα μπλοκ.

Αναζητήστε την «Ομάδα» στο πεδίο αναζήτησης (με πράσινο περίγραμμα στη φωτογραφία) και κάντε κλικ για να προσθέσετε το μπλοκ ομάδας (κόκκινο βέλος). Αυτό θα σας επιτρέψει να προσθέσετε ορισμένες προσαρμοσμένες ρυθμίσεις στο στοιχείο μπλοκ.

Για παράδειγμα, κάντε κλικ στην επιλογή «Αλλαγή στοίχισης» (κόκκινο βέλος) και επιλέξτε «Πλήρες πλάτος» (πράσινο βέλος). Αυτό θα κάνει το πλάτος του μπλοκ που θα περιέχει τον διαδραστικό μας χάρτη των Χαρτών Google σε πλήρες πλάτος.

Στη συνέχεια, κάντε κλικ στο μεγάλο κουμπί «+» μέσα στην ομάδα (κόκκινο βέλος στην παραπάνω φωτογραφία). Αναζητήστε "HTML" στη γραμμή αναζήτησης (που περιγράφεται με πράσινο χρώμα) και κάντε κλικ στο μπλοκ "Προσαρμοσμένο HTML" (μπλε βέλος).

Θα δείτε τώρα να λέει "Γράψτε html..." (κόκκινο βέλος). Εδώ θα προσθέσουμε τον χάρτη μας.

WordPress Simplified: How to Build Powerful Websites Course by Davies Media Design

Βήμα 2: Δημιουργία ενσωμάτωσης HTML Χαρτών Google

Τώρα θα χρειαστεί να δημιουργήσουμε τον χάρτη μας με τους Χάρτες Google. Για να το κάνετε αυτό, ανοίξτε μια νέα καρτέλα προγράμματος περιήγησης και μεταβείτε στο Google.com εάν δεν είναι το προεπιλεγμένο πρόγραμμα περιήγησης αναζήτησης.

Στη συνέχεια, πληκτρολογήστε τη διεύθυνση που θέλετε να εμφανιστεί στον χάρτη σας. Για αυτό το παράδειγμα, θα χρησιμοποιήσω το Empire State Building (κόκκινο βέλος). Μπορείτε να χρησιμοποιήσετε την ακριβή διεύθυνση της επιχείρησής σας για αυτό το τμήμα (π.χ. αριθμός οδού, οδός, πόλη, πολιτεία και ταχυδρομικός κώδικας – ή οτιδήποτε πληκτρολογήσετε για διεθνείς διευθύνσεις, εάν δεν βρίσκεστε στις ΗΠΑ).

Κάντε κλικ στην εικόνα του χάρτη που εμφανίζεται για τη διεύθυνσή σας στη σελίδα αποτελεσμάτων μηχανών αναζήτησης (κόκκινο βέλος στην εικόνα – αυτό θα βρίσκεται είτε στο κέντρο της σελίδας είτε προς τα δεξιά, ανάλογα με το αν πληκτρολογήσατε μια διεύθυνση ή το όνομα του ένα μέρος, όπως έκανα εγώ).

Η διεύθυνσή σας θα εμφανίζεται τώρα ως δείκτης στον χάρτη πλήρους οθόνης (κόκκινο βέλος στην παραπάνω εικόνα). Θα δείτε επίσης πολλά εικονίδια κάτω από τη διεύθυνση ή τον τίτλο του μέρους που αναζητήσατε. Αυτά τα εικονίδια περιλαμβάνουν "Οδηγίες", "Αποθήκευση", "Κοντά", "Αποστολή στο τηλέφωνο" και "Κοινή χρήση". Κάντε κλικ στο εικονίδιο «Κοινή χρήση» (μπλε βέλος).

Στην καρτέλα «Κοινή χρήση» που εμφανίζεται, κάντε κλικ στην καρτέλα «Ενσωμάτωση χάρτη» (μπλε βέλος στην παραπάνω φωτογραφία).  

Σε αυτήν την καρτέλα, θα δείτε μια προεπισκόπηση του ενσωματωμένου γραφικού στοιχείου των Χαρτών Google. Υπάρχει ένα αναπτυσσόμενο μενού μεγέθους στην αριστερή πλευρά του κώδικα (πράσινο βέλος) – μπορείτε να επιλέξετε ένα προκατασκευασμένο μέγεθος ή να επιλέξετε "Προσαρμοσμένο" για να ορίσετε το δικό σας μέγεθος. Θα επιλέξω την επιλογή «Προσαρμοσμένο» (κόκκινο βέλος).

Εδώ, θα δείτε τις διαστάσεις για τον προσαρμοσμένο χάρτη μου. Θα ρυθμίσω το ύψος, ή την πρώτη διάσταση, στο 1200 (κόκκινο βέλος). Θα αφήσω το πλάτος να έχει οριστεί στα 600. Μπορείτε να κάνετε κλικ στο "Προεπισκόπηση πραγματικού μεγέθους" (πράσινο βέλος) για να εμφανίσετε τον χάρτη σε ένα νέο αναδυόμενο παράθυρο σε πλήρες μέγεθος (βεβαιωθείτε ότι έχετε απενεργοποιήσει τυχόν προγράμματα αποκλεισμού αναδυόμενων παραθύρων εάν τα έχετε ενεργοποιημένο για να αποφύγετε το μπλοκάρισμα του παραθύρου). Βγείτε από το παράθυρο προεπισκόπησης μόλις τελειώσετε.

Στη συνέχεια, κάντε κλικ στο σύνδεσμο «Αντιγραφή HTML» (μπλε βέλος). Αυτός είναι ο κώδικας που θα φέρουμε στη σελίδα μας στο WordPress.

Βήμα 3: Επικολλήστε τον κώδικα HTML στη σελίδα WordPress

Πλοηγηθείτε πίσω στην καρτέλα του προγράμματος περιήγησης που περιέχει τον ιστότοπό σας στο WordPress. Κάντε κλικ στο κενό μπλοκ HTML όπου λέει "Γράψτε HTML εδώ..." και επικολλήστε τον κώδικα (κόκκινο βέλος) πατώντας ctrl+v στο πληκτρολόγιό σας (cmd+v σε Mac).

Εάν κάνετε κλικ στην επιλογή «Προεπισκόπηση» στη γραμμή εργαλείων αποκλεισμού (κόκκινο βέλος), θα δείτε τώρα τον χάρτη σας να εμφανίζεται στη σελίδα σας (πράσινο βέλος). Κάντε κλικ ξανά στην επιλογή "HTML" για να επιστρέψετε στον κώδικα HTML (μπλε βέλος).

Έχουμε ενσωματωμένο τον χάρτη μας στη σελίδα μας, αλλά δεν ανταποκρίνεται – που σημαίνει ότι αν δούμε τον χάρτη σε μικρότερη οθόνη, όπως tablet ή τηλέφωνο, δεν θα προσαρμόσει το μέγεθός του ώστε να ταιριάζει στην οθόνη. Για να διορθωθεί αυτό, πρέπει να προσθέσουμε κάποιο προσαρμοσμένο στυλ στον κώδικα HTML.

Βήμα 4: Κάντε τους Χάρτες Google Responsive

θα είμαι χρησιμοποιώντας κώδικα που πήρα από αυτόν τον ιστότοπο για να κάνετε την ενσωμάτωση των Χαρτών Google να αποκρίνεται. Κάντε κύλιση προς τα κάτω στην ενότητα με την ένδειξη "Πώς να ενσωματώσετε τους Χάρτες Google με απόκριση" (κόκκινο βέλος). Στη συνέχεια, μετακινηθείτε προς τα κάτω στο δεύτερο σετ κώδικα (μπλε βέλος).

Αντιγράψτε τα πάντα από το " ”  to “” by highlighting the code with your mouse and hitting ctrl+c on your keyboard (cmd+c on a MAC – red arrow in the image above).

Μεταβείτε ξανά στο WordPress. Κάντε κλικ στο ποντίκι σας στο μπροστινό μέρος του κώδικα HTML για να εισαγάγετε αυτόν τον νέο κώδικα στην αρχή (κόκκινο βέλος). Πατήστε ctrl+v για να επικολλήσετε τον κώδικά σας.

Τέλος, κάντε κλικ στο τέλος του κώδικα HTML (κόκκινο βέλος) και πληκτρολογήστε " ” για να κλείσουμε τα πάντα. Βασικά αυτό που μόλις κάνατε είναι να τυλίξετε τον κώδικα HTML σας σε προσαρμοσμένο στυλ. Αυτό το στυλ λέει στο πρόγραμμα περιήγησης του επισκέπτη να αλλάξει το μέγεθος του χάρτη με βάση το μέγεθος του παραθύρου στο οποίο τον προβάλλει.

Βήμα 5: Προσαρμόστε την αναλογία διαστάσεων του διαδραστικού χάρτη

Υπάρχει ένα τελευταίο πράγμα που πρέπει να κάνουμε – κάντε κύλιση προς τα πάνω στην κορυφή του κώδικα μέχρι να δείτε "padding-bottom: 75%;" (κόκκινο βέλος). Αυτό το κομμάτι κώδικα καθορίζει την αναλογία διαστάσεων του χάρτη.

Επειδή άλλαξα το μέγεθος του χάρτη μου σε 1200 x 600, έχει λόγο διαστάσεων 2:1. Για αυτό, πρέπει να αλλάξω το ποσοστό σε "50%" (κόκκινο βέλος).

Εάν δεν είστε σίγουροι ποιο ποσοστό πρέπει να χρησιμοποιήσετε για τον χάρτη σας, απλώς πάρτε την αναλογία διαστάσεων (δηλαδή 16:9) και διαιρέστε τον δεύτερο αριθμό με τον πρώτο για να λάβετε το ποσοστό σας (το 9 διαιρούμενο με το 16 είναι 56.25%).

Κάντε κλικ στο «Ενημέρωση» για να εφαρμόσετε τις αλλαγές σας (μπλε βέλος στην παραπάνω εικόνα), στη συνέχεια κάντε κλικ στο «Προβολή σελίδας» στην κάτω αριστερή γωνία για να δείτε το αποτέλεσμα.

Θα πρέπει τώρα να δείτε το γραφικό στοιχείο των Χαρτών Google να εμφανίζεται (κόκκινο βέλος στην παραπάνω εικόνα).

Μπορείτε να δοκιμάσετε την ανταπόκριση μειώνοντας το μέγεθος του προγράμματος περιήγησής σας και μετά κάνοντας κύλιση πίσω στην περιοχή της ιστοσελίδας που έχει τον χάρτη.

Αυτό είναι για αυτό το σεμινάριο! Αν σας άρεσε και θέλετε να μάθετε πώς να φτιάξετε τη δική σας επαγγελματική ιστοσελίδα WordPress από την αρχή, μπορείτε να εγγραφείτε στο WordPress Simplified: Μάθημα Πώς να δημιουργήσετε ισχυρούς ιστότοπους στο Udemy, ή ελέγξτε το άλλο μου Σεμινάρια WordPress!

Ενημερωτικό δελτίο ηλεκτρονικού ταχυδρομείου Davies Media Design Δωρεάν δημιουργικές εφαρμογές

Εγγραφείτε στο ενημερωτικό δελτίο DMD

Εγγραφείτε για να λαμβάνετε νέα μαθήματα, ενημερώσεις μαθημάτων και τα τελευταία νέα για τις αγαπημένες σας δωρεάν δημιουργικές εφαρμογές!

Έχετε εγγραφεί με επιτυχία!

Pin It στο Pinterest