Menu και πλοήγηση

Ενότητα 4: Δημιουργία περιεχομένου · Χρόνος ανάγνωσης: 7 λεπτά

Μαθησιακός στόχος: Μετά από αυτό το μάθημα θα μπορείτε να δημιουργήσετε ένα σαφές menu, τόσο σε θέμα εμφάνισης με μπλοκ όσο και σε κλασικό θέμα εμφάνισης, και θα ξέρετε τι κάνει ένα menu καλό.

Βασικές έννοιες: μπλοκ πλοήγησης, Επεξεργαστής ιστότοπου, Εμφάνιση > Menu's, θέση menu, υπομενού, προσαρμοσμένος σύνδεσμος, menu κινητού, menu υποσέλιδου, κείμενο συνδέσμου, προσβασιμότητα

Δύο τρόποι, ανάλογα με το θέμα εμφάνισής σας

Το πού δημιουργείτε το menu εξαρτάται από το θέμα εμφάνισής σας (μάθημα 5.1):

• Θέμα εμφάνισης με μπλοκ: το menu είναι ένα μπλοκ πλοήγησης στην κεφαλίδα του ιστότοπου. Το επεξεργάζεστε στον Επεξεργαστή ιστότοπου (Εμφάνιση > Διορθωτής > Πλοήγηση, ή στο τμήμα προτύπου Επικεφαλίδα).
• Κλασικό θέμα εμφάνισης: δημιουργείτε το menu στο Εμφάνιση > Menu's και επιλέγετε εκεί μια θέση menu που προσφέρει το θέμα εμφάνισης, όπως «Κύριο μενού» ή «Υποσέλιδο».

Δεν βλέπετε στο Εμφάνιση την επιλογή Menu's, μόνο Διορθωτής; Τότε χρησιμοποιείτε θέμα εμφάνισης με μπλοκ. Αυτή είναι μια συνηθισμένη σύγχυση μετά την αλλαγή θέματος εμφάνισης: «το menu μου εξαφανίστηκε». Το παλιό menu εξακολουθεί να υπάρχει (βρίσκεται στη βάση δεδομένων ως λίστα στοιχείων menu), αλλά το νέο θέμα εμφάνισης κοιτάζει αλλού. Στον Επεξεργαστή ιστότοπου μπορείτε, στο μπλοκ πλοήγησης, να εισαγάγετε ένα υπάρχον κλασικό menu.

Τι μπορεί να περιέχει

Ένα στοιχείο menu μπορεί να είναι:

• μια σελίδα ή άρθρο του ιστότοπού σας·
• μια κατηγορία (τότε συνδέει με το αρχείο αυτής της κατηγορίας)·
• ένας προσαρμοσμένος σύνδεσμος: οποιαδήποτε διεύθυνση, ακόμα και προς άλλο ιστότοπο, ή μια αγκύρωση μέσα σε μια σελίδα (/diensten/#prijzen)·
• σε θέμα εμφάνισης με μπλοκ, επίσης άλλα μπλοκ μέσα στην πλοήγηση, όπως ένα πεδίο αναζήτησης, εικονίδια κοινωνικών μέσων ή ένα κουμπί «Κλείστε ραντεβού».

Τα στοιχεία menu μπορείτε να τα σύρετε το ένα κάτω από το άλλο ως υπομενού: σε κλασικό θέμα εμφάνισης σύροντάς τα λίγο προς τα δεξιά, στο μπλοκ πλοήγησης με «Προσθήκη υπομενού» ή σύροντας ένα στοιχείο πάνω σε άλλο.

Ένα στοιχείο menu συνδέει με μια σελίδα, αλλά έχει τη δική του ετικέτα. Αν αλλάξετε αργότερα τον τίτλο της σελίδας, η ετικέτα στο menu δεν αλλάζει αυτόματα (σε κλασικό menu ποτέ, στο μπλοκ πλοήγησης εξαρτάται από τον τρόπο που προσθέσατε το στοιχείο). Ελέγξτε λοιπόν και το menu μετά από αλλαγή τίτλου.

Ένα καλό menu

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

• Λίγα κύρια στοιχεία: γύρω στα πέντε έως επτά. Περισσότερα έτσι κι αλλιώς δεν χωρούν σε κινητό και οι επισκέπτες δεν τα διαβάζουν.
• Το πολύ ένα επίπεδο υπομενού. Ένα υπομενού μέσα σε υπομενού είναι δύσχρηστο σε κινητό και μπερδεύει τους αναγνώστες οθόνης.
• Μια επικεφαλίδα υπομενού είναι επίσης σύνδεσμος. Σε πολλά θέματα εμφάνισης, κλικ στο «Υπηρεσίες» ανοίγει το υπομενού, αλλά το «Υπηρεσίες» είναι και το ίδιο μια σελίδα. Φροντίστε αυτή η σελίδα να υπάρχει και να δείχνει κάτι λογικό, ή να είναι ξεκάθαρο ότι το στοιχείο είναι απλώς επικεφαλίδα.
• Απλές λέξεις που θα χρησιμοποιούσαν οι επισκέπτες: «Τιμές», όχι «Οι επενδυτικές μας δυνατότητες».
• Επικοινωνία και η σημαντικότερη ενέργεια (κλείσιμο ραντεβού, παραγγελία) πάντα προσβάσιμες, συχνά δεξιά στο menu ή ως κουμπί.
• Νομικοί σύνδεσμοι (πολιτική απορρήτου, γενικοί όροι, ρυθμίσεις cookies) ανήκουν σε menu υποσέλιδου, όχι στο κύριο menu. Πρέπει όμως πάντα να είναι εύκολα εντοπίσιμοι, σε κάθε σελίδα (μάθημα 9.3).

Κινητό και προσβασιμότητα

Σε κινητό το menu συνήθως συμπτύσσεται σε ένα κουμπί με τρεις γραμμές (το «hamburger menu»). Στο μπλοκ πλοήγησης ρυθμίζετε πότε συμβαίνει αυτό (πάντα, ή μόνο σε μικρές οθόνες). Δοκιμάστε το πάντα σε πραγματικό κινητό:

• Μπορείτε να αγγίξετε κάθε στοιχείο με τον αντίχειρά σας, χωρίς να αγγίξετε κατά λάθος το διπλανό στοιχείο;
• Ανοίγουν τα υπομενού με ένα άγγιγμα, και κλείνουν ξανά;
• Κλείνει το menu όταν επιλέγετε ένα στοιχείο;

Για την προσβασιμότητα (επισκέπτες με αναγνώστη οθόνης ή που χρησιμοποιούν μόνο το πληκτρολόγιο) προσέξτε τα εξής:

• Σαφή κείμενα συνδέσμων. Το «Διαβάστε περισσότερα» ή «Κάντε κλικ εδώ» δεν λέει τίποτα όταν ένας αναγνώστης οθόνης διαβάζει όλους τους συνδέσμους στη σειρά. Το «Διαβάστε περισσότερα για τις ώρες λειτουργίας μας» λέει κάτι.
• Χειρισμός με το πληκτρολόγιο: με Tab μέσα στο menu, με Εισαγωγή άνοιγμα ενός στοιχείου. Τα περισσότερα θέματα εμφάνισης και το μπλοκ πλοήγησης το κάνουν σωστά· χειροποίητα menu με scripts συχνά όχι.
• Ένας σύνδεσμος προς άλλον ιστότοπο ανοίγει κατά προτίμηση στο ίδιο παράθυρο. Αν πρέπει να ανοίξει σε νέο παράθυρο, αναφέρετέ το.

Άλλη πλοήγηση

Εκτός από το κύριο menu, τα εξής στοιχεία βοηθούν τους επισκέπτες να βρουν τον δρόμο τους:

• ένα πεδίο αναζήτησης (το μπλοκ αναζήτησης), ιδίως σε ιστότοπο με πολλά άρθρα·
• breadcrumbs («Αρχική > Υπηρεσίες > Σχεδιασμός ιστοσελίδων»), που συχνά παρέχονται από πρόσθετο SEO ή το θέμα εμφάνισης·
• εσωτερικοί σύνδεσμοι μέσα στα κείμενά σας προς άλλες σελίδες (καλό και για την ορατότητα στις μηχανές αναζήτησης, μάθημα 9.2)·
• μια σελίδα 404 που βοηθά: με πεδίο αναζήτησης και συνδέσμους προς τις σημαντικότερες σελίδες αντί απλώς «δεν βρέθηκε». Σε θέμα εμφάνισης με μπλοκ την επεξεργάζεστε ως πρότυπο «404» στον Επεξεργαστή ιστότοπου.

Στην πράξη: έτσι μοιάζει σε έναν πίνακα

Στον Πίνακα Ελέγχου του WordPress:

• Θέμα εμφάνισης με μπλοκ: Εμφάνιση > Διορθωτής > Πλοήγηση. Επιλέξτε το menu, προσθέστε στοιχεία με το συν, σύρτε τα στη σωστή σειρά, και επιλέξτε στις ρυθμίσεις του μπλοκ πλοήγησης πότε εμφανίζεται το menu κινητού.
• Κλασικό θέμα εμφάνισης: Εμφάνιση > Menu's. Δημιουργήστε ένα menu, επιλέξτε αριστερά τις σελίδες και κάντε κλικ στο Προσθήκη στο menu, σύρτε τη σειρά, και επιλέξτε στο κάτω μέρος τη θέση menu. Αποθήκευση.

Σύνοψη

• Σε θέμα εμφάνισης με μπλοκ δημιουργείτε το menu με το μπλοκ πλοήγησης στον Επεξεργαστή ιστότοπου· σε κλασικό θέμα εμφάνισης στο Εμφάνιση > Menu's με μια θέση menu.
• Ένα menu δείχνει τον δρόμο προς λίγα σημαντικά σημεία: λίγα στοιχεία, το πολύ ένα επίπεδο υπομενού.
• Οι νομικοί σύνδεσμοι ανήκουν σε menu υποσέλιδου, πάντα εύκολα εντοπίσιμοι.
• Δοκιμάστε το menu κινητού σε πραγματικό κινητό και χρησιμοποιήστε κείμενα συνδέσμων που λένε κάτι από μόνα τους.
• Ένα πεδίο αναζήτησης, εσωτερικοί σύνδεσμοι και μια χρήσιμη σελίδα 404 συμπληρώνουν το menu.

Κουίζ

Άσκηση

Άσκηση D4.3: Ένα menu που λειτουργεί. Δημιουργήστε (ή βελτιώστε) το κύριο menu του ιστότοπού σας με το πολύ επτά κύρια στοιχεία, ένα υπομενού και έναν προσαρμοσμένο σύνδεσμο, και ένα menu υποσέλιδου με την πολιτική απορρήτου σας. Δοκιμάστε το menu κινητού στο κινητό σας και μόνο με το πληκτρολόγιο (Tab και Εισαγωγή). Σημειώστε τι λειτουργεί και καταγράψτε: τι είδους θέμα εμφάνισης έχετε (με μπλοκ ή κλασικό), πού δημιουργήσατε το menu, και ποιο κείμενο συνδέσμου βελτιώσατε και πώς;

Περαιτέρω ανάγνωση

Για την εργασία μέσα στο ίδιο το WordPress δεν έχουμε ακόμα δικά μας άρθρα· η επίσημη τεκμηρίωση του WordPress είναι εκτενής.

• Μπλοκ πλοήγησης (wordpress.org, Αγγλικά): https://wordpress.org/documentation/article/navigation-block/
• Menu's σε κλασικά θέματα εμφάνισης (wordpress.org, Αγγλικά): https://wordpress.org/documentation/article/appearance-menus-screen/
• Επεξεργαστής ιστότοπου (wordpress.org, Αγγλικά): https://wordpress.org/documentation/article/site-editor/