Πρόσφατα, ένας από τους αναγνώστες μας ρώτησε πώς θα μπορούσε να αντικαταστήσει το μενού πλοήγησης του ιστότοπού του με μια συρόμενη γραμμή μενού jQuery. Ένα τέτοιο πάνελ μπορεί να βελτιώσει σημαντικά τη χρηστικότητα εκδόσεις για κινητάτοποθεσίες. Σε αυτό το άρθρο, θα σας δείξουμε πώς να προσθέσετε μια συρόμενη γραμμή μενού στα θέματα του WordPress.
Σημείωση: Αυτό το άρθρο προϋποθέτει ενδιάμεση γνώση HTML και CSS.
Αντικατάσταση του προεπιλεγμένου μενού με μια συρόμενη γραμμή στο WordPress
Ο στόχος εδώ είναι να εμφανιστεί η συρόμενη γραμμή μενού σε χρήστες με ανάλυση μικρής οθόνης, διατηρώντας παράλληλα το τυπικό μενού του θέματός μας, ώστε οι χρήστες υπολογιστών να μπορούν να βλέπουν πλήρη έκδοσημενού. Πριν ξεκινήσουμε, είναι σημαντικό να καταλάβουμε ότι υπάρχουν πολλά διαφορετικά θέματα WordPress και, επομένως, θα χρειαστεί να τροποποιήσετε στυλ cssανάλογα με το σχέδιό σας.
Πρώτα απ 'όλα, πρέπει να ανοίξουμε επεξεργαστής κειμένουπληκτρολογήστε σημειωματάριο και δημιουργήστε νέο αρχείο. Αντιγράψτε και επικολλήστε τον ακόλουθο κώδικα σε αυτό:
(function($) ( $("#toggle").toggle(function() ( $("#popout").animate(( αριστερά: 0 ), "slow", function() ( $("#toggle" ).html(" 
"); )); ), function() ( $("#popout").animate(( αριστερά: -250 ), "slow", function() ($("#toggle").html(" "); )); )); )) (jQuery);
Αντικαθιστώ example.comστο δικό σου Ονομα τομέατοποθεσία και αλλαγή το θέμα σαςστον πραγματικό φάκελο του τρέχοντος θέματός σας. Αποθηκεύστε το αρχείο με όνομα slidepanel.jsστον υπολογιστή. Αυτός ο κώδικας χρησιμοποιεί jQuery για εναλλαγή της συρόμενης γραμμής μενού. Επίσης ενεργοποιεί το εφέ μεταγωγής.
Ανοίξτε το πρόγραμμα-πελάτη FTP (Filezilla ή Συνολικός Διοικητής) και συνδεθείτε στον ιστότοπό σας. Στη συνέχεια, μεταβείτε στον κατάλογο του θέματός σας και εάν υπάρχει ήδη ένας φάκελος σε αυτόν jsμετά ανοίξτε το. Εάν το θέμα σας δεν έχει τέτοιο κατάλογο, τότε δημιουργήστε τον και ανεβάστε το αρχείο slidepanel.js μέσα.
Το επόμενο βήμα είναι να σχεδιάσετε ή να βρείτε ένα εικονίδιο για το μενού. Το πιο χρησιμοποιημένο εικονίδιο για αυτό είναι αυτό με τρεις ρίγες. Μπορεί να δημιουργηθεί σε οποιαδήποτε επεξεργαστής γραφικών(για παράδειγμα, στο Photoshop) ή βρείτε ένα από τα πολλά που υπάρχουν στο Google. Σε αυτό το παράδειγμα, θα χρησιμοποιήσουμε 27x23px για το εικονίδιο. Αφού το δημιουργήσετε, μετονομάστε το σε menu.png και μεταφορτώστε το στο φάκελο εικόνων στον κατάλογο θεμάτων σας.
Το επόμενο βήμα είναι για τη συρόμενη γραμμή μενού. Απλά πρέπει να αντιγράψετε και να επικολλήσετε τον παρακάτω κώδικα στο αρχείο λειτουργίες.phpΘέματα:
wp_enqueue_script("wpb_slidepanel", get_template_directory_uri() . "/js/slidepanel.js", array("jquery"), "20131010", true);
Τώρα που έχουν ολοκληρωθεί όλες οι προπαρασκευαστικές εργασίες, είναι απαραίτητο να τροποποιήσετε το προεπιλεγμένο μενού του θέματος. Συνήθως, τα περισσότερα θέματα εμφανίζουν ένα μενού πλοήγησης σε ένα αρχείο. header.phpΘέματα. Είμαστε ανοιχτά header.phpκαι βρείτε μια γραμμή παρόμοια με αυτήν:
"primary", "menu_class" => "nav-menu")); ?>
Η πρόκληση είναι να τυλίξετε το μενού του θέματος σε HTML για να εμφανίσετε τη συρόμενη γραμμή μενού σε μικρές οθόνες. Θα το τυλίξουμε
Αντικαταστήστε το example.com με το όνομα τομέα σας και το θέμα σας με το φάκελο θέματός σας. Αποθηκεύστε τις αλλαγές σας.
Τελευταίο βήμα: Χρήση CSSγια να αποκρύψετε το εικονίδιο μενού για χρήστες μεγάλης οθόνης και να το εμφανίσετε σε όσους έχουν χαμηλή ανάλυση. Πρέπει επίσης να προσαρμόσουμε τη θέση του εικονιδίου του μενού και την εμφάνιση του slideout. Αντιγράψτε και επικολλήστε αυτόν τον κώδικα CSS στο φύλλο στυλ του θέματός σας.
οθόνη @media και (ελάχ. πλάτος: 769 px) ( #toggle ( display:none; ) ) @media screen and (max-width: 768px) ( #popout ( θέση: σταθερό, ύψος: 100%, πλάτος: 250 px, φόντο : rgb(25, 25, 25); φόντο: rgba(25, 25, 25, .9); χρώμα: λευκό; επάνω: 0 px; αριστερά: -250 px; υπερχείλιση: auto; ) #toggle ( float: δεξιά; θέση : σταθερό; επάνω: 60 εικονοστοιχεία; δεξιά: 45 εικονοστοιχεία; πλάτος: 28 εικονοστοιχεία; ύψος: 24 εικονοστοιχεία; ) .nav-menu li ( border-bottom: 1px solid #eee; padding:20px; πλάτος:100%; ) .nav-menu li :hover ( φόντο:#CCC; ) .nav-menu li a ( χρώμα:#FFF; κείμενο-διακόσμηση:κανένα; πλάτος:100%; ) )
Λάβετε υπόψη ότι τα μενού του θέματός σας ενδέχεται να χρησιμοποιούν διαφορετικές κλάσεις CSS και ενδέχεται να έρχονται σε διένεξη με τις παραπάνω. Μπορείτε να λύσετε αυτό το πρόβλημα χρησιμοποιώντας το Inspector στο Chrome ή τον Firefox για να μάθετε ποιες κλάσεις έρχονται σε διένεξη με τις δικές σας. Επίσης, μην ξεχνάτε ότι είστε ελεύθεροι να προσαρμόσετε την εμφάνιση του πίνακα ώστε να ταιριάζει με το σχεδιασμό του ιστότοπου.
Ίσως έχετε παρατηρήσει ότι οι περισσότεροι προγραμματιστές έχουν αρχίσει να προσθέτουν ειδικούς πίνακες εξόδου που βασίζονται σε Javascript στους ιστότοπούς τους, οι οποίοι τοποθετούνται είτε στην κορυφή του ιστότοπου είτε στο υποσέλιδο. Αυτά τα πάνελ χρησιμοποιούνται για να τραβήξουν την προσοχή του χρήστη σε διάφορες προωθητικές ενέργειες, ενδιαφέρουσες αναρτήσεις ιστολογίου κ.λπ. Ο κύριος λόγος για τον οποίο αυτά τα πάνελ έχουν γίνει τόσο διαδεδομένα είναι, φυσικά, η εστίαση στα αποτελέσματα. Μπορεί να λατρεύετε ή να μισείτε αυτά τα πάνελ, αλλά σίγουρα θα συμφωνήσετε ότι είναι στο ύψος των εργασιών. Υπάρχουν πολλές δωρεάν και εμπορικές προσθήκες για την προσθήκη συρόμενων πλαισίων στο ιστολόγιό σας. Θα τα καλύψω αργότερα σε αυτό το άρθρο.
Δωρεάν πρόσθετα
γεια μπαρ
Ένα απλό και μέτριο πρόσθετο που έχει όλα απαραίτητα εργαλείαγια να δημιουργήσετε ένα πάνελ στην κορυφή του ιστότοπου. Ένα τέτοιο πάνελ είναι βέβαιο ότι θα προσελκύσει την προσοχή των χρηστών.
Προσοχή Μπάρα
Εάν πρέπει να επιστήσετε την προσοχή των χρηστών σε κάποιο σημαντικό μήνυμα, μπορείτε να δημιουργήσετε ένα πλαίσιο ειδοποίησης που είναι ένα κανονικό div με κάποιο επιπλέον στυλ. Ωστόσο, αξίζει να θυμάστε ότι ένα τέτοιο πάνελ είναι πολύ ενοχλητικό και είναι απίθανο να αρέσει στους χρήστες του ιστότοπού σας. Με τη βοήθεια της προσθήκης γραμμής προσοχής, μπορείτε να εμφανίσετε μια ωραία γραμμή στο επάνω μέρος της σελίδας που δεν θα σας αποσπάσει την προσοχή από την περιήγηση στον ιστότοπο. Οι εμπλουτισμένες ρυθμίσεις θα βοηθήσουν τον προγραμματιστή να ελέγξει τη διάταξη του πίνακα.
Easy Heads Up Bar
Η προσθήκη προσθέτει μια εύχρηστη γραμμή ειδοποιήσεων στην κορυφή του ιστότοπού σας. Στις ειδοποιήσεις, μπορείτε να αφήσετε συνδέσμους για να ενισχύσετε την παρότρυνση για δράση.
Γραμμή εργαλείων ειδοποιήσεων
Ένα πλαίσιο που τοποθετείται στο υποσέλιδο του ιστολογίου σας. Σας επιτρέπει να εμφανίζετε προσαρμοσμένες ειδοποιήσεις. Το πρόσθετο βασίζεται στη Στατική γραμμή εργαλείων.
Γρήγορη γραμμή ειδοποιήσεων
Το πρόσθετο σάς επιτρέπει να δημιουργήσετε μια επισημασμένη ειδοποίηση στην κεφαλίδα του ιστότοπου. Μια τέτοια ειδοποίηση είναι βέβαιο ότι θα τραβήξει την προσοχή των χρηστών, ώστε να μπορείτε να τοποθετήσετε οτιδήποτε σε αυτήν, από απλές προειδοποιήσεις έως ειδικές προσφορές.
Viper Bar
Το πρόσθετο σάς επιτρέπει να προσθέσετε ένα πλαίσιο στην περιοχή κεφαλίδας του ιστότοπου, το οποίο μπορεί να χρησιμοποιηθεί για να αυξήσετε τον αριθμό των συνδρομητών. Η προσθήκη περιλαμβάνει ενσωματωμένα στυλ, ενσωμάτωση με το Aweber και το Feedburner, παρακολούθηση μετατροπών, δοκιμή διαχωρισμού και πολλά άλλα.
Εμπορικά πρόσθετα
Μια προσθήκη WordPress που σας επιτρέπει να προσθέσετε προσαρμοσμένα πάνελ στην κορυφή του ιστολογίου ή του ιστότοπού σας. Μπορείτε να εμφανίσετε διαφορετικές ειδοποιήσεις για διαφορετικές σελίδες, ορίστε έναν τυπικό πίνακα που θα εμφανίζεται σε όλες τις σελίδες κ.λπ.
Προσοχή Αρπαγή
Μια προσθήκη που σας επιτρέπει να προσθέσετε έναν πίνακα ειδοποιήσεων στον ιστότοπό σας. Με αυτό το πρόσθετο, μπορείτε εύκολα να εμφανίσετε προσαρμοσμένο κείμενο, αναρτήσεις Twitter ή ροές RSS. Επιπλέον, υπάρχει μια τεράστια λίστα λειτουργιών που σας επιτρέπουν να προσαρμόσετε την εμφάνιση της ειδοποίησης.
http://wplift.com/wordpress-notification-bar-plugins/
Γεια σας, αγαπητοί αναγνώστες του ιστότοπου του ιστολογίου. Σήμερα θέλω να μιλήσω για ένα αρκετά λειτουργικό και βολικό πρόσθετο upPrev, το οποίο μπορεί να εφαρμόσει πολλούς τύπους συνδέσεων σελίδων ταυτόχρονα. Μπορείτε να παρατηρήσετε τη δουλειά του (τουλάχιστον τη στιγμή της σύνταξης αυτού του άρθρου) στο κάτω μέρος κάθε σελίδας με ένα άρθρο - ένα αναδυόμενο πλαίσιο εμφανίζεται στα δεξιά με μια λίστα παρόμοιων υλικών.
Το πρόσθετο μπορεί να εμφανίζει όχι μόνο παρόμοιο υλικό, αλλά και προηγούμενα άρθρα από την ίδια κατηγορία ή αρχείο ετικετών (αυτό είναι αυτό για το οποίο μιλήσαμε λεπτομερώς στο παραπάνω άρθρο και την πρακτική εφαρμογή του οποίου περιέγραψα), προηγούμενα υλικά στο μορφή ολόκληρου του ιστολογίου, καθώς και δημοσιεύσεις που λαμβάνονται τυχαία. Επιπλέον, το όλο θέμα μπορεί να αρωματιστεί με μικρογραφίες, αν τις δημιουργήσετε όταν γράφετε αναρτήσεις.
Τι ρόλο παίζει τώρα η σύνδεση στην προώθηση της ιστοσελίδας;
Γενικά, η βελτιστοποίηση ιστότοπου, για την περαιτέρω επιτυχημένη προώθησή του, είναι η εργασία νούμερο ένα (η νούμερο δύο παίρνει backlinks). Οι εσωτερικοί παράγοντες μπορούν να μπλοκάρουν και να μειώσουν την επιρροή όλων των άλλων. Από την άλλη, είναι αδύνατο (ειδικά με λέξεις-κλειδιάστο περιεχόμενο και τις αγκυρώσεις των εσωτερικών συνδέσμων).
Τώρα οδηγεί μια ολοκληρωμένη προσέγγιση για την προώθηση και η σύνδεση κατέχει μια αρκετά σημαντική θέση σε αυτήν. Πρόσφατα, έχει γίνει της μόδας η χρήση γραφημάτων για να απεικονίσει οτιδήποτε. Στο θέμα του Seo, μπορείτε να βρείτε πολλά παρόμοια διαγράμματα ροής, για παράδειγμα, το Seoprofi έχει ένα άρθρο σχετικά με τον τρόπο προώθησης ενός ιστότοπου. Δυστυχώς, δεν είμαι ακόμη έτοιμος να δημιουργήσω τέτοια αριστουργήματα, αλλά η αναφορά σε αυτά θα μου επιτρέψει να μην ρίξω πολύ νερό.
Ποιο σχήμα σύνδεσης να επιλέξετε? Μια μάλλον δύσκολη ερώτηση, επειδή πολλά από τα προηγουμένως καλά λειτουργικά προγράμματα (όλα επίσης το περιβόητο "δαχτυλίδι", σύνδεσμοι με τις μεθόδους υλοποίησης των οποίων έδωσα λίγο παραπάνω) δεν δίνουν πλέον εκείνα τα εκπληκτικά αποτελέσματα που παρατηρήθηκαν ακόμη πριν από μια ντουζίνα χρόνια . Οι μηχανές αναζήτησης μαθαίνουν επίσης και προσπαθούν να μην λαμβάνουν υπόψη αυτό που, από την άποψή τους, είναι μια προφανής εξαπάτηση.
Η σύνδεση με τη μορφή μιας σειράς δακτυλίων, σύμφωνα με τη θεωρία του Peydrank, θα πρέπει να αυξήσει σοβαρά το στατικό βάρος των σελίδων του ιστότοπου () που εμπλέκονται σε αυτό το δαχτυλίδι.
Ωστόσο, αυτό δεν λειτουργεί πάντα στην πράξη. Είναι πιθανό ότι όταν μεμονωμένες σελίδες πέφτουν εκτός ευρετηρίου, ο δακτύλιος σπάει ή είναι πιθανό, προκειμένου να μειωθούν οι σημάνσεις, η αναζήτηση έχει εισαγάγει έναν σοβαρό παράγοντα μείωσης στον κλασικό τύπο για τον υπολογισμό του στάτου βάρους.
Η σύνδεση σελίδων ιστότοπου έχει μια άλλη αποστολή, η οποία δεν αποσκοπεί πλέον στην ευχαρίστηση του Yandex ή της Google, αλλά παρακαλώ τον επισκέπτη. Ένα άρθρο για να δοκιμάσει το blog σας προφανώς δεν θα είναι αρκετό - πρέπει οπωσδήποτε να τον προσκαλέσετε να πάει κάπου αλλού για να τον ενδιαφέρετε, να καθυστερήσετε και, ενδεχομένως, να τον κάνετε συνδρομητή σας.
Έτσι, η σύνδεση επηρεάζει επίσης παράγοντες συμπεριφοράς , που λαμβάνει υπόψη και η αναζήτηση και κάθε χρόνο σε όλο και μεγαλύτερο βαθμό. Σχεδόν όλοι οι webmasters το καταλαβαίνουν αυτό και προσθέτουν μπλοκ στον ιστότοπο με παρόμοιο υλικό, με τις πιο διαβασμένες δημοσιεύσεις ή με άρθρα από την ίδια κατηγορία. Υπάρχουν πιθανώς και άλλες παραλλαγές στο θέμα.
Φυσικά, οι επιλογές υλοποίησης εσωτερική σύνδεσηυπάρχει και μάζα. Μπορείτε ακόμη και χωρίς πρόσθετα (ένα παράδειγμα μπορείτε να βρείτε στο άρθρο), αλλά πολλά από αυτά έχουν γραφτεί για σύνδεση. Το πιο δύσκολο πράγμα είναι να επιλέξετε μια επιλογή που λειτουργεί τέλεια στο blog σας.
Ο ίδιος έχω δοκιμάσει πολλά από αυτά και έγραψα ακόμη και κριτικές για μερικά από αυτά (). Στην πραγματικότητα, το αναφερόμενο πρόσθετο είναι ένα από τα καλύτερα για τον υπολογισμό σχετικών αναρτήσεων και την καταχώρισή τους σε σελίδες ιστολογίου.
Αλλά τα δεδομένα του μπορούν επίσης να χρησιμοποιήσουν άλλες επεκτάσεις WordPress, καθιστώντας τις πιο πολύχρωμες ή προσποιητικές. Στο ίδιο άρθρο σχετικά με το YARP, έδωσα απλώς ένα παράδειγμα χρήσης των δεδομένων του από το πρόσθετο Related Posts Slider, το οποίο επέτρεψε την εμφάνιση παρόμοιων αναρτήσεων με τη μορφή αυτής της φόρμας:
Λοιπόν, ή κάπως έτσι:
Σήμερα κάλεσε ο ήρωάς μας επάνωΠροηγξέρει επίσης πώς να λαμβάνει πληροφορίες από τη βάση δεδομένων πρόσθετων σχετικών αναρτήσεων και το κάνει σωστά, επειδή δεν χρειάζεται να εφευρίσκετε ξανά τον τροχό κάθε φορά. Ας προχωρήσουμε, στην πραγματικότητα, στην περιγραφή των δυνατοτήτων αυτού του θαύματος της μηχανικής.
Επιλογές σύνδεσης με την προσθήκη upPrev
Δεν άγγιξα αυτά τα στυλ, γιατί πήγα στον άλλο δρόμο (όχι τον πιο άμεσο), που θα περιγράψω παρακάτω στο κείμενο. Για sim, μεταβείτε στη δεύτερη καρτέλα:
Επιλέξτε τον αριθμό των αναρτήσεων προς τις οποίες αυτό το πρόσθετο θα δημιουργήσει συνδέσμους. Αλλά λίγο πιο κάτω, εμείς απλά επιλέξτε τον τύπο σύνδεσης για τον ιστότοπό μας. Έχω επιλέξει την επιλογή σχετικών αναρτήσεων χρησιμοποιώντας τη βάση της προσθήκης Yet Another Related Posts (πρέπει να είναι προεγκατεστημένη), αλλά μπορείτε να ρυθμίσετε έναν σύνδεσμο κλήσης επιλέγοντας τη δεύτερη ή την τρίτη επιλογή, καθώς και έναν σύνδεσμο μεγάλου κουδουνίσματος επιλέγοντας το πρώτος .
Σκόπευα να οργανώσω αυτήν την επιχείρηση μόνο για αναρτήσεις, κάτι που υποδεικνύεται με ένα τικ στο αντίστοιχο πεδίο. Εκτός από τον τίτλο της ανάρτησης, αυτό το πλαίσιο μπορεί επίσης να εμφανίσει πολλές λέξεις (ο αριθμός τους ορίζεται στο κάτω μέρος) από την αρχή της ανάρτησης ή την περιοχή προσφοράς, εάν τη συμπληρώσετε. Μου φάνηκε περιττό.
Η τρίτη καρτέλα χρησιμοποιείται για τη ρύθμιση της παρακολούθησης του αριθμού των κλικ σε συνδέσμους σε αυτόν τον πίνακα, τον οποίο δεν χρησιμοποίησα. Ωστόσο, στην τέταρτη καρτέλα, εξακολουθώ να ενεργοποιώ την προσωρινή μνήμη. Στην πέμπτη καρτέλα, εμπόδισα την εμφάνιση του πίνακα σε κινητά τηλέφωνα, αλλά δεν είχα αντίρρηση για την αποχώρησή του σε tablet:
Λοιπόν, αυτό είναι όλο, οι ρυθμίσεις upPrev έχουν τελειώσει, αλλά έχω ήδη αλλάξει την εμφάνιση του πίνακα στις ρυθμίσεις της προσθήκης Yet Another Related Posts.
Προσαρμογή της εμφάνισης των περιεχομένων του slideout
Εκεί επέλεξα ένα αρχείο προτύπου που θα είναι υπεύθυνο για την εμφάνιση παρόμοιων αναρτήσεων (δείτε τον παραπάνω σύνδεσμο για την ουσία και τις ιδιαιτερότητες της εργασίας με αυτήν την επέκταση):
Οτι. τώρα η εμφάνιση της λίστας παρόμοιων αναρτήσεων που εμφανίζεται από το πρόσθετο upPrev (στον συρόμενο πίνακα) ελέγχεται από τον κώδικα που είναι καταχωρημένος στο αρχείο μου yarpp-template-list.php από το φάκελο θέματός μου (). Εάν το ιστολόγιό σας δημιουργεί μικρογραφίες για αναρτήσεις, τότε είναι λογικό να επιλέξετε ένα πρότυπο από το οπλοστάσιο της Προσθήκης Yet Another Related Posts με την υποστήριξή τους.
Ο κώδικας για αυτό το αρχείο είναι:
-
have_posts()): $postsArray = array(); ενώ ($related_query->have_posts()) : $related_query->the_post(); $postsArray = "
- ".get_the_title()." "; endwhile; echo implode(" "."\n",$postsArray); // εκτυπώστε μια λίστα με τα σχετικά στοιχεία, διαχωρισμένα με κόμμα else:?>
Δεν υπάρχουν σχετικές δημοσιεύσεις.
Όπως μπορείτε να δείτε, εδώ βρίσκεται η κεφαλίδα του εξερχόμενου πίνακα, επομένως θα χρειαστεί να μετατρέψετε (αν είναι απαραίτητο) αυτό το αρχείο σε κωδικοποίηση UTF-8 χωρίς BOM για να αποφύγετε σφάλματα (). Δεν ξέρω για εσάς, αλλά ζω ως κύριος εδώ και πολύ καιρό Επεξεργαστής σημειωματάριων++ () και σε αυτό αυτός ο μετασχηματισμός γίνεται ως εξής:
Είναι σαφές ότι αυτός ο κώδικας αποτελεί απλώς ένα κοινότυπο λίστα html(), και οι ιδιότητες CSS που καθορίζονται στο αρχείο στυλ για τις κλάσεις στον κώδικα είναι υπεύθυνες για την εμφάνιση. Στην περίπτωσή μου, αυτά τα στυλ μοιάζουν με αυτό:
A.oy (χρώμα: #333; γραμματοσειρά:700 1.2em/1 "PT Sans Narrow", Arial, sans-serif;line-height:18px;) li.eto (text-align:center;padding:12px 5px 17px 5px;περιθώριο: 5px 0;περιθώριο: διακεκομμένο 2px #cccc;) li.eto:hover (text-decoration:underline;) div.oyy (περιθώριο:0 0 0 0;padding:5px 0;font:normal 17px "Trebuchet MS", Verdana, Arial;χρώμα:#666;)
Η κλάση lampochka προσθέτει πράσινα σημάδια επιλογής κώδικας cssέχουν οριστεί για μένα χρησιμοποιώντας τον κωδικό base64 (αντίγραψα αυτόν τον κωδικό κάπου). Αν ενδιαφέρεστε, ρίξτε μια ματιά στο my style.css. Εντάξει όλα τελείωσαν τώρα. Αν ξέχασες κάτι, ρώτα. Είναι αλήθεια ότι δημιούργησα αυτήν την επιλογή σύνδεσης πριν από ένα μήνα και κάτι έχει ήδη εξαφανιστεί από το μυαλό μου αυτό το διάστημα.
Καλή σου τύχη! Τα λέμε σύντομα στον ιστότοπο των σελίδων του ιστολογίου
Μπορεί να σας ενδιαφέρει
Πώς να αφαιρέσετε το διαφανές εικονοστοιχείο http://yarpp.org/pixels στην προσθήκη Yet Another Related Posts και να αλλάξετε την επιγραφή 
Δημιουργία λίστας σχετικών αναρτήσεων στο WordPress (με μικρογραφίες) Χρήση της προσθήκης σχετικών αναρτήσεων για εσωτερική σύνδεση 
Πώς να βελτιώσετε τα στατιστικά της συμπεριφοράς ιστότοπου με άλλες σχετικές δημοσιεύσεις και πρόσθετα ρυθμιστικών σχετικών αναρτήσεων για WordPress 
Απλοί μετρητές και εικονίδια κατηγορίας και σελίδας - όμορφοι μετρητές RSS και Twitter, καθώς και εικονίδια για κατηγορίες και σελίδες στο WordPress 
Προσθήκες WordPress στο ιστολόγιό μου (ιστοσελίδα) Ρυθμιστικά και προβολές διαφανειών για τον ιστότοπό σας - ποιες επιλογές υπάρχουν και πώς να χρησιμοποιήσετε τα σενάρια jQuery Slider 
Breadcrumbs στο WordPress χρησιμοποιώντας την προσθήκη Breadcrumb NavXT (ενίσχυση της σύνδεσης) 
Μείωση της κατανάλωσης μνήμης στο WordPress κατά τη δημιουργία σελίδων - Πρόσθετο WPLANG Lite για αντικατάσταση του αρχείου τοπικής προσαρμογής 
WP-PageNavi - Πλοήγηση στη σελίδα για ένα ιστολόγιο WordPress - Εγκατάσταση, διαμόρφωση και τροποποίηση εμφάνισησελιδοποίηση 
Ημερολογίστε το! - Ημερολόγιο εκδηλώσεων για WordPress 
Δεν στέλνει αλληλογραφία από το WordPress και δεν λειτουργεί οπτικός επεξεργαστής- λύση με πρόσθετα Configure SMTP και Post Editor Buttons
Πως μενού πλοήγησηςανά τοποθεσία, μενού προφίλ χρήστηκ.λπ. μπορείτε να κρύψετε και θα εμφανιστούν όταν κάνετε κλικ και τοποθετείτε το δείκτη του ποντικιού. Κάποιοι μπορεί να πουν ότι η χρηστικότητα της σελίδας πάσχει από αυτό. Δεν νομίζω, καθώς η σελίδα γίνεται πιο καθαρή, πράγμα που σημαίνει ότι είναι πιο εύκολη η πλοήγηση. Ένα άτομο δεν μπερδεύεται στο βουνό των συνδέσμων.
Σήμερα έφτιαξα μια συλλογή πάνελ ολίσθησης, τα οποία είναι κρυμμένα στη σελίδα από προεπιλογή. Για να καλέσετε μενού, πρέπει να κάνετε κλικ ή να τοποθετήσετε το δείκτη του ποντικιού πάνω από το αντίστοιχο εικονίδιο. Αυτή η τεχνική ήρθε στο σχεδιασμό ιστοσελίδων από εφαρμογές για κινητά, όπου δεν μπορείτε να επισημάνετε πολλά στοιχεία σε μία οθόνη. Με την πάροδο του χρόνου, τέτοια πλαίσια μετεγκαταστάθηκαν σε ιστότοπους. Αυτή η συλλογή θα είναι χρήσιμη, πρώτα απ 'όλα, για προγραμματιστές κινητών, . Με ανάλυση μικρής οθόνης, αυτό θα εμφανιστεί εξερχόμενη πλοήγηση, και σε κανονικές, μεγάλες οθόνες, μπορείτε να δημιουργήσετε ένα κανονικό μενού που έχουν συνηθίσει όλοι. Έτσι, ένα άτομο με φορητή συσκευή δεν θα μπερδευτεί στον ιστότοπό σας, όπως έχει συνηθίσει εδώ και καιρό να χρησιμοποιεί πάνελ ολίσθησης, γιατί όλες οι εφαρμογές στο smartphone του λειτουργούν με την ίδια αρχή.
Θέλω να σημειώσω ότι αυτή η συλλογή περιλαμβάνει πρόσθετα, τα οποία ακονίζονται μόνο από κάτω ιστότοποι για κινητές συσκευέςκαι σε ευρείες οθόνες η χρήση τους θα είναι ακατάλληλη. Αν και υπάρχουν καθολικά πάνελ που είναι κατάλληλα για κάθε ιστότοπο. Δείτε το demo και επιλέξτε αυτό που ταιριάζει στις ανάγκες σας.
Τα αναπτυσσόμενα πάνελ λειτουργούν σε . Η εφαρμογή ενός τέτοιου μενού στον ιστότοπό σας δεν θα είναι δύσκολη και οι ιστότοποι των προγραμματιστών το έχουν αναλυτικές οδηγίεςσχετικά με τη χρήση του προϊόντος τους.
Σύντομα σχεδιάζουμε να επανασχεδιάσουμε τον ιστότοπο Postovoy και θα χρησιμοποιήσουμε ένα από τα πρόσθετα jqueryπου παρουσιάζονται παρακάτω.
Ετσι. Εδώ είναι μια συλλογή από 20 προσθήκες αναπτυσσόμενης γραμμής slidebar jqueryγια τον ιστότοπό σας. Μην ξεχάσετε να αφήσετε σχόλια.
Πλαϊνό μενού με δυνατότητα ολίσθησης
Ένα ωραίο συρόμενο μενού πλοήγησης στο jquery. Ιδανικό τόσο για κινητά όσο και για κανονικούς ιστότοπους.
Μεταβάσεις για πλοηγήσεις εκτός καμβά
Ένα εξαιρετικά ισχυρό πρόσθετο που σας επιτρέπει να οργανώσετε ένα πάνελ διαφανειών που θα εμφανίζεται με διάφορα εφέ κίνησης, συμπεριλαμβανομένου του 3D. Το πρόσθετο περιλαμβάνει 14 εφέ κινούμενων σχεδίων.
jPanelMenu
Η γραμμή πλοήγησης είναι κατασκευασμένη με στυλ Εφαρμογές iOS. Ένα ελαφρύ και γρήγορο μενού που θα διευκολύνει την ανάπτυξη ενός ιστότοπου για κινητά.
Αναδημιουργώ Google NexusΜενού
Το συρόμενο πάνελ κατασκευάζεται κατ' αναλογία με το μενού Google Nexus.
bigSlide - Γραμμή πλοήγησης διαφανειών Jquery
Ο πίνακας διαφανειών είναι κατάλληλος τόσο για ιστότοπο για κινητά όσο και για κανονικό. Για να το καλέσετε, πρέπει να κάνετε κλικ στο εικονίδιο που απεικονίζει τρεις λωρίδες.
Μενού Push πολλαπλών επιπέδων
Το πρόσθετο Jqutry λειτουργεί παρόμοια με το bigSlide. Ο πίνακας καλείται όταν κάνετε κλικ στο εικονίδιο. Το πλεονέκτημα αυτού του μενού είναι ότι υποστηρίζει μια δομή πολλαπλών επιπέδων.
Μενού καπακιού κουτιού
Πολύ όμορφη γραμμή πλοήγησης διαφανειών με εφέ 3D.
Κινούμενα μενού περιγράμματος
Κάνοντας κλικ στο σύμβολο συν στη γωνία της οθόνης, ένα μικρό πλαϊνό πάνελμε εικονίδια. Για να το αποκρύψετε, πρέπει να κάνετε κλικ στο εικονίδιο με το σύμβολο "-".
Snap.js
Ο πίνακας διαφανειών έχει σχεδιαστεί για φορητές συσκευές. Το μενού καλείται σύροντας την οθόνη με τον κέρσορα του ποντικιού ή, εάν είναι ενεργοποιημένο κινητή συσκευή, δάχτυλο.
Μενού Slide and Push
|
Meny
Το πρόσθετο Jquery σάς επιτρέπει να εφαρμόσετε μια δροσερή γραμμή πλοήγησης διαφανειών με τρισδιάστατο εφέ στον ιστότοπό σας.
mb.jquery
Σε αντίθεση με άλλα πάνελ, εμφανίζεται στο πάνω μέρος της οθόνης αντί να τη μετακινεί. Στο μπλοκ, μπορείτε να βάλετε οποιοδήποτε html, κείμενο και γενικά οτιδήποτε θέλετε.
Android Dock
Ο πίνακας είναι ακονισμένος για ιστότοπους για κινητές συσκευές και βρίσκεται στο κάτω μέρος της οθόνης. Όταν πατηθεί, εμφανίζονται εικονίδια στα οποία μπορείτε να τοποθετήσετε οποιουσδήποτε συνδέσμους.
Γραμμή διαφανειών περιεχομένου
Το Cool slide panel είναι κατασκευασμένο με τη μορφή δύο επιπέδων. Το πρώτο είναι το μενού. Το δεύτερο είναι το περιεχόμενο. Τώρα αυτό το εφέ είναι πολύ δημοφιλές μεταξύ σχεδιαστών και προγραμματιστών ιστού. Μπορείτε να βρείτε πολλές εφαρμογές. Το mailer της Microsoft λειτουργεί με παρόμοια αρχή.Σίγουρα συναντούσατε συχνά στις σελίδες των τοποθεσιών, αναδιπλούμενα πάνελ διαφορετικό είδοςκαι ρυθμίσεις που λένε πάνω, κάτω, δεξιά ή αριστερά σε πλήρη αυτόματη λειτουργία, με καθορισμένο χρονικό διάστημα ή ενεργοποιούνται με κλικ. Κατά κανόνα, σε τέτοια πάνελ, για την ώρα, κρυμμένα από τα μάτια του χρήστη, μερικά Επιπλέον πληροφορίεςσημαντικό και όχι τόσο σημαντικό. Για παράδειγμα, φόρμες συνδρομής, γραφικά στοιχεία μέσων κοινωνικής δικτύωσης, σύνδεσμοι, ετικέτες, στοιχεία επικοινωνίας κ.λπ., εν ολίγοις, οτιδήποτε.
Υπάρχει μεγάλο ποσόέτοιμες λύσεις για την υλοποίηση συρόμενων πάνελ σε javascript, modules και plugins για διάφορα CMS, ξεχωριστά Πρόσθετα jQuery, αλλά αρκετά, τράβηξε το μάτι μου, δουλεύω πλήρως καθαρό CSS.
Εδώ και καιρό ήθελα να ανακατέψω κάτι τέτοιο, ο μηχανισμός χρήσης κρυφών πλαισίων ελέγχου είναι γνωστός και κατανοητός, αλλά κατά κάποιο τρόπο τα χέρια μου δεν τον έφτασαν ποτέ. Και έτσι, αφού έπεσα πάνω σε ένα στις σκονισμένες αποθήκες του CodePen, αποφάσισα να πειραματιστώ και να το δώσω στο βουνό, αρκετά λειτουργικό, ελαφρώς τροποποιημένο και προσαρμοσμένο για τον αδελφό μας, την εκδοχή μου για το ανασυρόμενο πάνω πάνελσε καθαρό CSS, αποδείχθηκε τι συνέβη)).
Εξετάσαμε το παράδειγμα, το συγκρίναμε με το πρωτότυπο και τώρα, ποιος το χρειάζεται, ας ρίξουμε μια ματιά στο πώς λειτουργεί το όλο θέμα μαζί. Για άλλη μια φορά, κανένα js, απλώς το παρθένο html και το "μαγικό" css θα κάνουν τη δουλειά.
Διάταξη html
Αποτελείται από τρία κύρια στοιχεία: ένα κοντέινερ βάσης, ένα μπλοκ περιεχομένου και ένα κουμπί ανοίγματος/κλεισίματος πίνακα.
Όπως μπορείτε να δείτε, η σημαία type=" " υπάρχει στη σχεδίαση του πίνακα, η οποία είναι κρυφή και ανενεργή από προεπιλογή. Με ετικέτα