Αναπτυσσόμενα mega μενού- ένα υπέροχο εύρημα σχεδιασμού. Πλοήγηση στον ιστότοποΤο να περιέχει μεγάλο αριθμό σελίδων ήταν πάντα πρόβλημα. Τα κλασικά στατικά μενού a la sitemap αυξάνονται γρήγορα καθώς ο αριθμός των σελίδων αυξάνεται και καταλαμβάνουν πολύ χώρο. Τα δυναμικά αναπτυσσόμενα μενού μπορούν να εξοικονομήσουν σημαντικά χώρο στη σελίδα, αλλά η χρηστικότητα θυσιάζεται - η πλοήγηση απαιτεί ενεργή και αρκετά ακριβή εργασία με το ποντίκι. Ελαφρώς χαμένο και αποκαλύπτεται το λάθος μενού.

Η ώθηση για την ανάπτυξη της έννοιας του mega-menu ήταν πιθανώς η διεπαφή κορδέλας το γραφείο της Microsoft 2007. Αυτή η έννοια βρίσκεται ακριβώς στη μέση μεταξύ ενός απλού στατικού μενού και ενός δυναμικού αναπτυσσόμενου μενού. Αφενός, ένα τέτοιο μενού είναι αρκετά κατατοπιστικό και διαισθητικό, αφετέρου, μειώνει σημαντικά τους απαραίτητους χειρισμούς του ποντικιού. Επεκτείνοντας, μπορεί να χρησιμοποιήσει όλο τον διαθέσιμο χώρο οθόνης, ο οποίος επιτρέπει στον χρήστη να λάβει όλα τα στοιχεία που προσφέρονται σε αυτό το πλαίσιο και, εάν είναι απαραίτητο, να αποκρύψει.

Όπως και να έχει, το mega-menu είναι πλέον, όπως λένε, στην τάση και αν δεν το έχετε χρησιμοποιήσει ακόμα, τότε θα πρέπει να το δείτε πιο προσεκτικά.

UberMenu: Προσθήκη Mega Menu WordPress

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

Επιπλέον, το μενού έχει επίσης μια σειρά από άλλες εξαιρετικές δυνατότητες, όπως:

  • Ενσωματωμένο πλέγμα με απόκριση
  • Ατομική προσαρμογή του πλάτους κάθε στήλης καθώς και ρύθμιση του προεπιλεγμένου πλάτους
  • Συνδυασμός στοιχείων μενού σε ομάδες
  • Κεντράρισμα στοιχείων μενού σε οριζόντιες σειρές
  • Προσαρμοσμένες εικόνες φόντου
  • Υπομενού με δυνατότητα κύλισης που περιέχουν μεγάλο αριθμό στοιχείων.
Συνολικά, ένα πολύ ισχυρό πρόσθετο που προτείνω ανεπιφύλακτα.

Κόστος: $19

Μέγα Κύριο Μενού

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

Κόστος: $15

Liquida Mega Menu

Liquida Mega Menu- ένα μοντέρνο και πολυλειτουργικό πρόσθετο που θα ταιριάζει και στα δύο απλούς χρήστες, και προγραμματιστές - μπορεί εύκολα να ενσωματωθεί στο δικό σας θέμα που έχετε αναπτύξει.

Το πρόσθετο προσφέρει ένα ευρύ φάσμα επιλογών για δημιουργία μενούμε μοντέρνο και κομψό σχεδιασμό: κάθετη ή οριζόντιος προσανατολισμός, δυνατότητα συμπερίληψης στοιχείων στο μενού συνδέσμους, εικόνες και ακόμη και κάρτες προϊόντων WooCommerceή Easy Digital Downloads, που μπορεί να σας φανούν χρήσιμα κατά την ανάπτυξη ηλεκτρονικών καταστημάτων.

Κόστος: $19

Sky Mega Menu

Τρεις επιλογές σχεδίασης για κινητές συσκευές, 9 συνδυασμοί χρωμάτων, προσαρμοσμένο πλέγμα, σχήματα και 360 διανυσματικά εικονίδια. Αυτό το σετ επιτρέπει στο Sky Mega Menu να πάρει τη θέση που του αξίζει ανάμεσα στο δικό του είδος.

Κόστος: $6

WP Mega Menu

Πρόσθετο από την κατηγορία must have. Πολλές ρυθμίσεις και επιλογές, εργασία με κατηγορίες, υποκατηγορίες και μηνύματα, Βελτιστοποίηση SEOκαι δύο προκαθορισμένους συνδυασμούς χρωμάτων (σκούρο και ανοιχτό), τα οποία, ωστόσο, μπορούν εύκολα να αλλάξουν σύμφωνα με τις προτιμήσεις σας.

Κόστος: $29

Μενού NOO

Για να κατανοήσετε τον πίνακα ρυθμίσεων Μενού NOOδεν χρειάζεται καν να διαβάσετε την τεκμηρίωση - όλα είναι τόσο διαισθητικά. Έχοντας στο χέρι προεπισκόπησησε πραγματικό χρόνο, μπορείτε απλά να αλλάξετε τις τιμές και να μετακινήσετε τα ρυθμιστικά ενώ παρακολουθείτε το εφέ. Ο συνδυασμός χρωμάτων μπορεί να αλλάξει εντελώς αυθαίρετα και κάθε επιλογή μπορεί να αποθηκευτεί με το δικό της όνομα και ο αριθμός αυτών των επιλογών είναι απεριόριστος.

Τα περιεχόμενα των στοιχείων μενού μπορεί να είναι κείμενο, συνδέσμους, εικόνες, βίντεο, φόρμες και διάφορα widget. Χρησιμοποιεί το δικό του πλέγμα 12 στηλών για να τα χωρέσει όλα.

Κόστος: $15

Hero Menu – Responsive WordPress Mega Menu Plugin

Το μενού Hero σάς επιτρέπει να συνδέετε συνδέσμους σε αναρτήσεις, κατηγορίες, εξωτερικές διευθύνσεις URL σε στοιχεία μενού και επίσης να εμφανίζετε αναρτήσεις ιστολογίου σε αυτά μαζί με μια επιλεγμένη εικόνα. Η τελευταία έκδοση ανακοίνωσε την πλήρη υποστήριξη της πλατφόρμας WooCommerce. Για βολική λειτουργίαέχει ενσωματωμένο πρόγραμμα επεξεργασίας μεταφοράς και απόθεσης.

Ο σχεδιασμός είναι μοντέρνος και κομψός και φυσικά απόλυτα .

Κόστος: $19

Superfly - Responsive WordPress Menu Plugin

Το λεγομενο μενού πτήσης- η τελευταία τάση στον κόσμο του web design. Ένα τέτοιο μενού "κοιμάται" ήσυχα στη γωνία της σελίδας με τη μορφή ενός εικονιδίου, δεν καταλαμβάνει σχεδόν καθόλου χώρο και όταν τοποθετείτε το δείκτη του ποντικιού πάνω του, ανοίγει, μετατοπίζοντας τα στοιχεία της σελίδας και δεν τα επικαλύπτει.

Ένας από τους εκπροσώπους αυτού του τύπου mega-menu είναι το Superfly - Responsive WordPress Menu Plugin. Ένα εντυπωσιακό όργανο τόσο από άποψη σχεδίασης όσο και από πλευράς χαρακτηριστικών.

Κόστος: $22

Εναλλαγή μενού

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

Το μενού εναλλαγής είναι πολύ απλό, μινιμαλιστικό μενού, το οποίο, ωστόσο, ανταπεξέρχεται τέλεια στην κύρια λειτουργία του.

Κόστος: $5

WP Floating Menu Pro

WP Floating Menu Proείναι ένα πρόσθετο 2 σε 1. Μενού-πλοηγός για έναν ιστότοπο μιας σελίδαςκαι αυτοκόλλητα μενού. Επιπλέον, με αυτό το πρόσθετο μπορείτε, τουλάχιστον οπτικά, να μετατρέψετε τον παραδοσιακό σας ιστότοπο σε έναν σύγχρονο ιστότοπο μιας σελίδας. Το WP Floating Menu Pro θα παρέχει ομαλή κύλισηαπό το ένα μέρος της σελίδας στο άλλο.

Στη διάθεση του προγραμματιστή, το WP Floating Menu Pro προσφέρει 13 και 7 διαφορετικές επιλογές για την τοποθεσία στη σελίδα, επιλογές προσαρμογής, χρώματα, περιεχόμενο και αριθμό αντικειμένων.
Για οθόνες μικρότερες από 480 px, είναι δυνατό αυτόματη απενεργοποίησημενού.

Κόστος: $17

Προσθήκη WordPress Menu Flexi

Το Flexi Menu είναι 5 διαφορετικοί, πλήρως προσαρμόσιμοι τύποι μενού: μενού πτήσης, ευρεία (πλάτος σελίδας), ευρεία+περιγραφές, ευρεία+εικόνες και κάθετη.

Κόστος: $14

Max Mega Menu (Δωρεάν)

Πολύ καλά πρόσθετο με πρόγραμμα επεξεργασίας μενού μεταφοράς και απόθεσηςκαι τη δυνατότητα ενσωμάτωσης σχεδόν οποιουδήποτε γραφικού στοιχείου σε στοιχεία μενού - από φόρμες επικοινωνίας έως χάρτες Google.

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

Πιο πρόσφατα, ένα χαρακτηριστικό όπως το Mega Menu ήταν μόνο τα πολλά premium plugins και θέματα. Σήμερα, όμως, θα σας παρουσιάσω, αγαπητοί αναγνώστες, δύο εντελώς δωρεάν προσθήκες που θα σας επιτρέψουν να δημιουργήσετε γρήγορα, εύκολα και, φυσικά, εντελώς δωρεάν, ένα ισχυρό μενού πλοήγησης στον ιστότοπό σας που δεν είναι τόσο κατώτερο από τα αντίστοιχα επί πληρωμή .

Τι είναι άλλωστε το Mega Menu; Ναι, το ίδιο πράγμα, το συνηθισμένο μενού πλοήγησης με το οποίο πιθανότατα έχετε συναντήσει και ρυθμίσει περισσότερες από μία φορές. Ακριβώς σε αντίθεση με την τυπική λειτουργικότητα, υπάρχουν επίσης Επιπρόσθετα χαρακτηριστικάγια προσαρμογή και εμφάνιση μεμονωμένων στοιχείων. Για παράδειγμα, προσθέτοντας όχι μόνο ένα κατακόρυφο, αλλά και ένα οριζόντιο υπομενού, προσθέτοντας εικονίδια και μεμονωμένες εικόνες στο μενού, λεπτομερής ρύθμισηεμφάνιση για όλα τα στοιχεία μενού και πολλά άλλα. Όλα αυτά βρίσκονται στις προσθήκες που εξετάζουμε σήμερα.

Μια άλλη εξαιρετική ευκαιρία για να προσθέσετε ένα εκπληκτικό μενού πλοήγησης στον ιστότοπό σας με μια προσθήκη είναι το Mega Menu από το WooRockets.com. Η εγκατάσταση και η ενεργοποίηση της προσθήκης είναι τυπική.

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

Μεταβείτε στην ενότητα Μέγα μενού WRστον πίνακα διαχείρισης και κάντε κλικ στο Προσθεσε νεο. Πέφτουμε πάνω ΝΕΑ ΣΕΛΙΔΑγια να δημιουργήσετε ένα νέο μενού. Όσοι έχουν ήδη ασχοληθεί με drag & drop συνθέτες θα νιώσουν αμέσως σαν στο σπίτι τους. Η διαδικασία δημιουργίας ενός μενού δεν διαφέρει πολύ από τη δημιουργία μιας σελίδας.

Στην αρχή, βεβαιωθείτε ότι στο επάνω μέρος του μενού − τοποθεσίαΤο μενού είναι ακριβώς αυτό που χρειάζεστε. Ή κάντε κλικ στο Τοποθεσία διαχείρισηςγια να επιλέξετε ένα μενού.

Κάντε κλικ - Προσθήκη στοιχείουκαι επιλέξτε στο αναδυόμενο παράθυρο τον τύπο περιεχομένου που θέλετε να προσθέσετε στο μενού. Επάνω αριστερά, μπορείτε να επιλέξετε μία από τις τυπικές επιλογές ή να προσθέσετε γραφικά στοιχεία WordPress.

Εάν είναι απαραίτητο, προσθέστε σειρές με διαίρεση στον απαιτούμενο αριθμό στηλών. Στα αριστερά υπάρχουν καρτέλες για τη μεταφορά στοιχείων μενού πάνω ή κάτω και στα δεξιά υπάρχουν καρτέλες όπου μπορείτε να ενεργοποιήσετε την επεξεργασία ή τη διαγραφή. Μην ξεχάσετε να πατήσετε το συνηθισμένο κουμπί στα δεξιά - Δημοσιεύωή - Φρεσκάρωγια να διατηρήσουν τα αποτελέσματα των κόπων τους.

Γενικά, όλα τα κείμενα, οι εικόνες και, αν θέλετε, οποιαδήποτε γραφικά στοιχεία μπορούν εύκολα να τοποθετηθούν στο νέο σας μενού. Η εμφάνιση του μενού μπορεί να αλλάξει κάνοντας κλικ στο κουμπί. Stylingή δίπλα για να εισαγάγετε τους πίνακες σας κάνοντας κλικ στο κουμπί Προσαρμοσμένο CSS.

Πολύ λειτουργικό πράγμα, εν ολίγοις. Δεν είναι καθόλου τυχαίο που οι συγγραφείς, εκτός από αυτό το πρόσθετο, έχουν επίσης: μια φόρμα επικοινωνίας και, φυσικά, έναν συνθέτη, ο οποίος προφανώς χρησίμευσε ως βάση για το πρόσθετο mega μενού. Μπορείτε να δείτε ένα λειτουργικό demo σε όλο του το μεγαλείο εδώ.

Πανέμορφα και ισχυρά πρόσθετα με τα οποία μπορείτε πρακτικά να δημιουργήσετε το μενού των ονείρων σας. Το μόνο που μπορεί να επισκιάσει ελαφρώς τη χαρά των χρηστών είναι το θέμα της συμβατότητας με διαφορετικά θέματα. Δυστυχώς, από όσο θυμάμαι, τα premium plugins είχαν μερικές φορές αυτό το πρόβλημα. Δοκίμασα και τα δύο πρόσθετα στο προεπιλεγμένο θέμα και δεν παρατήρησα προβλήματα ή σφάλματα. Τι θέλετε φίλοι μου!

Γειά σου! Στη ζωή μου, όπως πάντα, υπάρχουν πολλές εκδηλώσεις, οπότε είναι πολύ δύσκολο να βρω χρόνο για ένα blog. Χθες αγοράσαμε εισιτήρια για Σρι Λάνκα και θα πετάξουμε για 4 μήνες σύντομα, ελάτε να μας επισκεφτείτε! Και τώρα ψάχνω το πιο όμορφο νυφικό :))
Σήμερα θα μιλήσουμε για το πώς να δημιουργήσετε ένα μενού στο WordPress, καθώς και να προσθέσετε αυτά τα μπλοκ σε αυθαίρετες περιοχές του προτύπου.
Θα μάθουμε πώς να προσαρμόζουμε το μενού και να το επεξεργαζόμαστε όπως νομίζουμε.

Επεξεργασία και προσαρμογή μενού στο WordPress

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

Αφού δημιουργήσουμε ένα θυγατρικό θέμα που μπορεί να τροποποιηθεί χωρίς να επηρεαστεί το κύριο θέμα, ας προσθέσουμε την παρακάτω συνάρτηση στο αρχείο του function.php.

1 2 3 register_nav_menus( array ( "πρόσθετο μενού" => __( "Πρόσθετο μενού" , "Το όνομα του θέματός σας" ) ) ) ;

register_nav_menus(array("additionalmenu" => __("Additional Menu", "Your Theme Name")));

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

Αυτή η δυνατότητα θα μας επιτρέψει να προσθέσουμε ένα επιπλέον μενού WordPress στο πρότυπό μας και να δημιουργήσουμε μια άλλη περιοχή για αυτό.

Μετά την προσθήκη, μεταβείτε στον πίνακα διαχείρισης στο "Διαχείριση περιοχών":

Θα πρέπει να εμφανιστεί μια επιπλέον θεματική περιοχή με τον τίτλο που δώσαμε στη συνάρτηση.

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

Στην περίπτωσή μας, δημιουργούμε ένα νέο μενού που ονομάζεται Πρόσθετο:

Επιλέξτε την περιοχή θεμάτων "Πρόσθετο μενού" για αυτό.

Αλλά τώρα πρέπει να συνδέσουμε αυτήν την περιοχή με μπλοκ προτύπων. Για παράδειγμα, πρέπει να δημιουργήσουμε ένα πρόσθετο μενού κάτω από την κεφαλίδα ενός ιστότοπου WordPress. Μεταβείτε στο αρχείο header.php ή αντιγράψτε το στο θυγατρικό θέμα. Προσθέστε τα ακόλουθα μετά την ετικέτα σώματος:

1 2 3 <div id = "πρόσθετο μενού" > ( array( "theme_location" =>"πρόσθετο μενού")); ?></div>

"πρόσθετο μενού")); ?>

Ας δούμε το αποτέλεσμα:

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

Κάνουμε τις ακόλουθες αλλαγές στο αρχείο style.css:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 #additionalmenu navigation (πλάτος : 940 px ; /* πλάτος δοχείου */περιθώριο : 0 auto ; ) #additionalmenu li ( οθόνη : inline ; padding : 10px ; /* padding */ margin : 20px 0 ; ) #additionalmenu (πλάτος : 100% ; top : 420px ; /* Εσοχή από την επάνω άκρη */φόντο-χρώμα : #000 ; /* χρώμα φόντου */ θέση : σχετική ; )

#additionalmenu navigation ( πλάτος: 940px; /*πλάτος κοντέινερ */ margin: 0 auto; ) #additionalmenu li ( οθόνη: inline; padding: 10px; /* padding */ margin: 20px 0; ) #additionalmenu (πλάτος: 100% ; επάνω: 420 εικονοστοιχεία; /* επάνω περιθώριο */ χρώμα φόντου: #000; /* χρώμα φόντου */ θέση: σχετική; )

Ας δούμε τι έγινε:

Η εμφάνιση του μενού που δημιουργήσαμε απέχει πολύ από την ιδανική, αλλά με τη δέουσα προσοχή, μπορείτε να το φέρετε στην κατάλληλη εμφάνιση για το ιστολόγιό σας.

Γραφικά στοιχεία και πρόσθετα για την προσθήκη μενού στο WordPress

Προτείνω να παρακολουθήσετε ένα βίντεο σχετικά με τη δημιουργία ενός μενού στο WordPress:

Στο άρθρο σχετικά με το widget αναφέρθηκε το "Προσαρμοσμένο μενού". Ας το αναλύσουμε πιο αναλυτικά.

Μεταβείτε στο "Εμφάνιση" - "Γραφικά στοιχεία", βρείτε το γραφικό στοιχείο "Προσαρμοσμένο μενού" και σύρετέ το στην περιοχή που είναι διαθέσιμη για το θέμα σας και κατάλληλη για το ιστολόγιο:

Στην περίπτωσή μας, το μπλοκ μενού προστίθεται στην πλαϊνή γραμμή. Για αυτό, έχουμε επιλέξει ενότητες του πρόσθετου μπλοκ που δημιουργήσαμε.

Αντίστοιχα, το ακόλουθο μπλοκ θα εμφανιστεί στην πλαϊνή γραμμή στα δεξιά:

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

Για παράδειγμα, εδώ είναι μια προσθήκη για τη δημιουργία ενός κατακόρυφου πολυεπίπεδου μενού στο WordPress: Navgoco Vertical Multilevel Slide Menu.

Ή το πιο προσαρμόσιμο γραφικό στοιχείο του αναπτυσσόμενου μενού.

Γραφικά στοιχεία με εφέ JQwery για μενού είναι επίσης δημοφιλή, για παράδειγμα: Γραφικό στοιχείο μενού JQuery Slick.

Ας πάρουμε ένα παράδειγμα για το πώς λειτουργεί.

Αφού εγκαταστήσετε το γραφικό στοιχείο μενού jQuery Slick, μεταβείτε στο "Εμφάνιση" - "Γραφικά στοιχεία".

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

Ας ανοίξουμε τις ρυθμίσεις του:

Επιλέγουμε το όνομα του μενού (ενότητες που δημιουργήσαμε), Κείμενο καρτέλας - το όνομα του μπλοκ που θα εμφανίζεται στον ιστότοπο, τη θέση (θα επιλέξουμε Αριστερά - στα αριστερά), Μετατόπιση - την εσοχή από την κορυφή άκρη σε εικονοστοιχεία, Ταχύτητα κινούμενης εικόνας - ταχύτητα κινούμενης εικόνας (Γρήγορη). Μπορείτε να επιλέξετε Αυτόματο Κλείσιμο Μενού για να εξαφανιστεί αυτόματα το μπλοκ. Και επιλέξτε το χρώμα του μπλοκ. Κάντε κλικ στην αποθήκευση και δείτε το αποτέλεσμα:

Ένα αναδυόμενο μενού εμφανίστηκε στην αριστερή πλευρά της κεφαλίδας. Όταν κάνετε κλικ στη γλώσσα, εμφανίζονται οι ενότητες:

Όταν κάνετε ξανά κλικ, το μπλοκ θα εξαφανιστεί ξανά.

Αυτός είναι μόνο ένας από τους τρόπους εγκατάστασης, επεξεργασίας και εμφάνισης μενού στο WordPress.

Επιλέξτε τον πιο κατάλληλο και βολικό τρόπο για να δημιουργήσετε ένα μενού για το ιστολόγιό σας στο WordPress. Καλή τύχη!

    Αυτό μπορεί να γίνει με στυλ.
    Αλλά πρέπει να καταλάβετε ότι έχετε ένα Μενού και στη συνέχεια θα πρέπει να το μετακινήσετε από την κορυφή στο Sidebar, το οποίο δεν έχετε ακόμη.
    Λοιπόν, δηλαδή, αν αυτό το Θέμα το επιτρέπει, συνδέστε το Sidebar στη δεξιά πλευρά και μεταφέρετε το Μενού σε αυτό.
    Και για να γίνει κατακόρυφο, απλώς προσθέστε/αλλάξτε το CSS

    Main-navigation ul li, .secondary-navigation ul li ( οθόνη: block !important; )

    Λοιπόν, μετά από αυτό, πρέπει να αλλάξετε λίγο τις εσοχές και τις άλλες ιδιότητες.

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

    Ίσως και εγώ σε παρεξήγησα.
    Μιλούσα για το μενού που έχετε στην οθόνη στο οριζόντιο επάνω μπλοκ ανοιχτού πράσινου χρώματος "Tea Coffee Sweets ..."
    Αλλά αφού ξαναδιάβασα την απάντησή σου, καταλαβαίνω ότι μιλάμε για διαφορετικά μενού.
    Στην οθόνη που βλέπετε στην αριστερή πλευρά, αυτό είναι το μέγα μενού Max, αλλά δεν το βλέπω στον ιστότοπο στον σύνδεσμό σας.
    Και επειδή Ούτε χθες τον είδα, οπότε δεν κοίταξα την οθόνη.
    Τώρα ούτε εγώ παρακολουθώ.

    Προσπαθώ να κάνω κάτι συνέχεια, βάζω και αφαιρώ διάφορα πράγματα, μέχρι να καταλάβω πώς να κάνω αυτό το μενού κάθετο, ψάχνω άλλο κατάλληλο. Για αυτό το μενού, μπορεί να εφαρμοστεί η ίδια λύση css όπως έγραψες; Θα μπορούσατε να μου πείτε σε ποιο μέρος του κώδικα να εισάγω αυτές τις γραμμές, στον κώδικα του ίδιου του plugin; Έχει σημασία η τοποθεσία;
    Πήγα το μέγα μενού Προσθηκών-επεξεργασία-επιλεγμένο Μέγιστο και, στη συνέχεια, υπάρχουν οι ακόλουθες ενότητες:
    css
    megamenu.scss
    επαναφορά.scss
    toggle-blocks.scss
    διαχειριστής
    mixin.scss
    Δεν βρήκα παρόμοιες γραμμές σε κανένα από αυτά να διορθώσω

    Είμαι απλά ένας εντελώς noob και δεν κατάλαβα γιατί χρειάζεσαι να εμφανίζεται για μένα, προφανώς για να κοιτάξω τον κωδικό και να τον προτείνω. Βρήκα την απάντηση του διαχειριστή στο φόρουμ υποστήριξης του Max Mega Menu ότι η κάθετη είναι διαθέσιμη μόνο στην έκδοση Pro (με πληρωμή), οπότε προς το παρόν θα πρέπει να εγκαταλειφθεί. Θα μπορούσατε να συμβουλεύσετε οποιοδήποτε παρόμοιο πρόσθετο, τα κριτήρια είναι τα εξής:
    - δυνατότητα εγκατάστασης στην πλαϊνή μπάρα
    - το μενού πρέπει να είναι αναπτυσσόμενο
    - κατά τη μετάβαση σε οποιαδήποτε από τις κατηγορίες, έτσι ώστε να παραμένει ανοιχτή σε αυτό το στάδιο και να μην κλείνει εντελώς με ανανέωση σελίδας

    Ακριβώς.
    Χωρίς να δείτε αυτό ακριβώς το μενού, είναι αδύνατο να δώσετε συμβουλές και συστάσεις. Είναι πιθανό να αρκούν μερικές γραμμές στο CSS. Όχι όμως γεγονός.

    Αν και, αν πραγματικά σκοπεύετε να χρησιμοποιήσετε αυτό το Max Mega Menu αποκαλύπτοντας όλα τα χαρακτηριστικά του, τότε τα 23 $ για ένα τέτοιο προϊόν δεν είναι καθόλου πολλά. Αξίζει τον κόπο.

Θέλετε να προσαρμόσετε τα μενού πλοήγησης του WordPress για να αλλάξετε το χρώμα τους ή εμφάνιση? Το θέμα WordPress σας χειρίζεται την εμφάνιση του μενού πλοήγησης στον ιστότοπό σας. Μπορείτε εύκολα να το ρυθμίσετε με χρησιμοποιώντας CSSνα ανταποκρίνεται στις απαιτήσεις σας. Σε αυτό το άρθρο, θα σας δείξουμε πώς να προσαρμόσετε το στυλ του μενού πλοήγησής σας στο WordPress.

Μέθοδος 1: Χρήση μη αυτόματης αλλαγής στυλ του μενού πλοήγησης του WordPress

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

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

Το μενού πλοήγησης στο WordPress εμφανίζεται ως μη ταξινομημένη λίστα (λίστα με κουκκίδες).

Εάν μόλις χρησιμοποιήσατε την παρακάτω ετικέτα, τότε θα εμφανίσει μια λίστα χωρίς κλάσεις CSS που σχετίζονται με αυτήν.

Η μη ταξινομημένη λίστα σας θα έχει ένα όνομα κλάσης "μενού" με κάθε στοιχείο λίστας να έχει τη δική του κλάση .

Αυτό μπορεί να λειτουργήσει εάν έχετε μόνο μία θέση μενού. Ωστόσο, τα περισσότερα θέματα έχουν πολλά σημεία όπου μπορείτε να εμφανίσετε το μενού πλοήγησης.

Η χρήση μόνο των προεπιλεγμένων κλάσεων CSS ενδέχεται να έρχεται σε διένεξη με μενού αλλού.

Γι' αυτό πρέπει να ορίσετε την κλάση CSS και τη θέση του μενού. Οι πιθανότητες είναι ότι το θέμα σας WordPress το κάνει ήδη αυτό προσθέτοντας ένα μενού πλοήγησης με κώδικα όπως αυτός:

"primary", "menu_class" => "primary-menu",)); ?>

Αυτός ο κώδικας λέει στο WordPress ότι αυτό το θέμα εμφανίζει το μενού έναρξης. Θα προσθέσει επίσης την κλάση CSS του πρωτεύοντος μενού στην πλοήγηση μενού.

Τώρα μπορείτε να διαμορφώσετε το μενού πλοήγησής σας με αυτήν τη δομή CSS.

#header .primary-menu() // container class #header .primary-menu ul () // class container first unordered list #header .primary-menu ul ul () //unordered list in a unordered list #header .primary -menu li () // κάθε στοιχείο πλοήγησης #header .primary-menu li a () // κάθε στοιχείο πλοήγησης anchor #header .primary-menu li ul () // μη ταξινομημένη λίστα εάν υπάρχουν αναπτυσσόμενα στοιχεία #header .primary -menu li li () // κάθε αναπτυσσόμενο στοιχείο πλοήγησης #header .primary-menu li li a () // κάθε αναπτυσσόμενο στοιχείο πλοήγησης άγκυρα

Αντικαταστήστε το #header με την κλάση κοντέινερ ή το αναγνωριστικό που χρησιμοποιείται από το θέμα WordPress σας.

Αυτή η δομή θα σας βοηθήσει να αλλάξετε εντελώς την εμφάνιση του μενού πλοήγησης.

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

Current_page_item() // Class for Current Page .current-cat() // Class for Current Category .current-menu-item() // Κατηγορία για οποιοδήποτε άλλο τρέχον στοιχείο μενού .menu-item-type-taxonomy() // Τάξη για μια κατηγορία .menu-item-type-post_type() // Class for Pages .menu-item-type-custom() // Τάξη για οποιοδήποτε προσαρμοσμένο στοιχείο που προσθέσατε .menu-item-home() // Class για το Home Link

Το WordPress σάς επιτρέπει επίσης να προσθέτετε κλάσεις CSS σε μεμονωμένα στοιχεία μενού μέσα από την περιοχή διαχειριστή.

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

Πάμε στη σελίδα Εμφάνιση » Μενούκαι πατήστε το κουμπί.

Αφού ελέγξετε αυτές τις ρυθμίσεις, θα δείτε ότι θα προστεθεί ένα επιπλέον πεδίο όταν επεξεργάζεστε κάθε μεμονωμένο στοιχείο μενού.

Τώρα μπορείτε να χρησιμοποιήσετε αυτήν την κλάση CSS στο φύλλο στυλ σας για να προσθέσετε προσαρμοσμένο CSS. Αυτό θα επηρεάσει μόνο το στοιχείο μενού με την κλάση CSS που προσθέσατε.

Μέθοδος 2: Προσαρμογή στυλ μενού στο WordPress με χρήση προσθηκών

Το θέμα WordPress χρησιμοποιεί στυλ για το μενού πλοήγησης. Πολλοί αρχάριοι δεν αισθάνονται άνετα με την επεξεργασία αρχείων θεμάτων ή τη σύνταξη CSS από μόνοι τους.

Τότε είναι που είναι χρήσιμο WordPress Pluginστυλ μενού. Αυτό σας εξοικονομεί από την επεξεργασία αρχείων θεμάτων ή τη σύνταξη κώδικα.

Πρώτα πρέπει να εγκαταστήσετε και να ενεργοποιήσετε το πρόσθετο CSS Hero. Για περισσότερα λεπτομερείς πληροφορίεςδείτε τον βήμα προς βήμα οδηγό μας για το πώς να.

Το CSS Hero είναι ένα premium plugin WordPress που σας επιτρέπει να σχεδιάσετε το δικό σας Θέμα WordPressχωρίς να γράψετε ούτε μια γραμμή κώδικα (χωρίς HTML ή CSS).

Μετά την ενεργοποίηση, θα ανακατευθυνθείτε για να λάβετε το κλειδί σας CSS Hero. Απλώς ακολουθήστε τις οδηγίες στην οθόνη και θα ανακατευθυνθείτε πίσω στον ιστότοπό σας με μερικά κλικ.

Τώρα πρέπει να κάνετε κλικ στο κουμπί CSS Hero στον πίνακα διαχείρισης του WordPress.

Το CSS Hero προσφέρει έναν επεξεργαστή WYSIWYG (αυτό που βλέπετε είναι αυτό που παίρνετε). Κάνοντας κλικ στο κουμπί θα μεταφερθείτε στον ιστότοπό σας με την αιωρούμενη γραμμή εργαλείων CSS Hero ορατή στην οθόνη.

Πρέπει να κάνετε κλικ στο μπλε εικονίδιο στην κορυφή για να ξεκινήσετε την επεξεργασία.

Τοποθετήστε το ποντίκι στο μενού πλοήγησής σας και το CSS Hero θα το επισημάνει, δείχνοντας τα όρια γύρω του. Όταν κάνετε κλικ στο επισημασμένο μενού πλοήγησης, θα εμφανιστούν τα στοιχεία που μπορείτε να επεξεργαστείτε.

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

Ας υποθέσουμε ότι θέλουμε να αλλάξουμε το χρώμα κειμένου όλων των στοιχείων στο μενού πλοήγησης. Σε αυτήν την περίπτωση, θα επιλέξουμε ένα μενού πλοήγησης που επηρεάζει όλα τα μενού.

Τώρα το CSS Hero θα σας δείξει διάφορες ιδιότητες, το οποίο μπορεί να επεξεργαστεί όπως κείμενο, φόντο, περιγράμματα, περιθώρια, padding κ.λπ.

Μπορείτε να κάνετε κλικ σε οποιαδήποτε ιδιοκτησία θέλετε να αλλάξετε. Το CSS Hero θα σας δείξει μια απλή διεπαφή όπου μπορείτε να κάνετε τις αλλαγές σας.

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

Καθώς γίνονται οι αλλαγές, θα μπορείτε να τις βλέπετε ζωντανά στην προεπισκόπηση του θέματος.

Μόλις είστε ικανοποιημένοι με τις αλλαγές, κάντε κλικ στο κουμπί Αποθήκευση στη γραμμή εργαλείων CSS Hero για να αποθηκεύσετε τις αλλαγές σας.

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

Ελπίζουμε ότι αυτό το άρθρο σας βοήθησε να μάθετε πώς να διαμορφώνετε το στυλ του μενού πλοήγησής σας στο WordPress.