Διατριβή Theme - πολυεπίπεδη, ένθετα, SEO friendly μενού - Tutorial

Διατριβή Θέμα Εκμάθηση - προσθήκη πολυεπίπεδη, ένθετα, SEO φιλικό μενού πλοήγησης σε Wordpress

από gesman στις 8 Ιουλίου του 2009

Η αναζήτηση για το ιδανικό μενού ...

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

Αποφάσισα να πάρει Thesis θέμα, επειδή ένας από τους πελάτες μου με ενημέρωσαν σχετικά με θέματα συμβατότητας μεταξύ των διατριβών και wordpress δικτυακός τόπος MemberWing μου plugin. Το έφτιαξα και στη συνέχεια αποφάσισε να λάβει μια πιο προσεκτική ματιά στο διατριβών και πράγματι τον κόπο να παρακολουθήσετε βίντεο στην πρώτη σελίδα του κύριου τόπου Διατριβή - Diythemes.com.
Αυτό που με εντυπωσίασε περισσότερο είναι η προσοχή στη λεπτομέρεια, φιλικότητα προς τον χρήστη και πάνω από όλα - χαρακτηριστικά SEO που θεωρούνται τόσο καλά του.
MemberWing plugin μέλους σχεδιάστηκε από το έδαφος για την ένταξη περιοχών που θα πρέπει να καταβάλουν όσο χυμό SEO το δυνατόν περισσότερο. Γι 'αυτό και κατέβαλε πολλές προσοχή στο πλήθος των αξεσουάρ SEO και χάρες σε MemberWing. Πολλοί από τη δική τους πελάτες μου ζητούν διάφορα θέματα σχετικά με τη χρήση και αφού το θέμα ήταν τόσο καλά SEO αισιόδοξος από βαθιά μέσα θα αποτελέσουν μια εξαιρετική κατάλληλα για ένταξη στην πύλη επιχειρηματίες.

Συνδυάζοντας τις εξουσίες του SEO MemberWing με εξουσίες του SEO θα δώσει την καλύτερη ιεράρχηση των ευκαιριών για τους πελάτες μου. Έτσι πήρα Διατριβή και έπαιξε μαζί της για μια ημέρα.

Είναι ένα εξαιρετικό θέμα σε όλους τους τρόπους. Το τμήμα της πλοήγησης είναι αν και λίγο περιορισμένο σε λειτουργία. Ξεκινώντας από Διατριβή 1,5 + είναι ένα μενού μόνο επίπεδο. Συνήθης επιθυμία μου είναι να είναι σε θέση να προσαρμόσετε πλοήγησης όσο χρειάζεται. Μερικές περιοχές έχουν μόνο λίγες σελίδες, και πολλοί άλλοι έχουν τόνους στατικές σελίδες + zillions από άρθρα / θέσεις + πολλές κατηγορίες.
Έτσι, σε ιδανικό κόσμο έχουν την ευκαιρία να δημιουργήσουμε nice looking οργανωμένες ιεραρχικά εύχρηστο μενού πλοήγησης αποτελεί μονόδρομο. Thesis δεξιά από το ρόπαλο έχει εμφανίσιμη πλοήγηση αλλά είδα ότι όλα Thesis βάση ιστοσελίδες που να μοιάζουν με δίδυμα. Προσαρμογή μενού πλοήγησης Διατριβής δεν είναι πραγματικά εύκολο έτσι οι περισσότεροι άνθρωποι την αφήσετε ως έχει. Δεν υπάρχει τρόπος να αλλάξει σειρά των κατηγοριών στα μενού ή στη θέση τους μεταξύ των σελίδων. Και πάλι, η δυνατότητα να δημιουργηθούν δομές ένθετα μενού λείπει. Έτσι αποφάσισα να δω τι θα μπορούσε να γίνει γι 'αυτό.
Μετά από περίπου οι μισοί προσπαθεί μενού δωδεκάδα / πλοήγησης που σχετίζονται plugins ορίσω επιλογή μου για Wordpress Plugin Λίστα Πλοήγηση NAVT.
NAVT plugin είναι ουσιαστικά unordered γεννήτρια λίστα με σούπερ φαντασία και λίγο δύσκολο να ποσοστό untraditional διεπαφή admin. Τι παραπλανητικές για αυτό είναι ότι δεν δημιουργεί πραγματικά φανταχτερό μενού αναζητούν από μόνη της. Κάνει το πιο δύσκολο μέρος της δουλειάς αν και - σας δίνει την δυνατότητα να ενώσουν τις προσπάθειές τους οπτικά, και δημιουργούν unordered κατάλογος - σκελετός του μενού σας-να-να. Και μπορείτε να δημιουργήσετε πολλά μενού πολύ. Μπορείτε να τραβάτε κάθε είδους πράγματα Wordpress στο μενού πλοήγησης: σελίδες, δημοσιεύσεις, άρθρα, τις κατηγορίες, οι χρήστες, block του κώδικα, οι εξωτερικές σχέσεις, διαχωριστικά, διαχωριστικά και αναμειγνύεται και ταιριάζουν και τις φωλιές και να οργανώσει και να προσαρμόσετε τους σε κάθε δέντρο που μοιάζει με τη δομή που θέλω.
NAVT δημιουργεί για εσάς αποτέλεσμα HTML unordered λίστα. Δεύτερη ομορφιά του NAVT είναι ότι σας βοηθά να εισαγάγετε νέο μενού σας στο θέμα σας μέσω διάσημη JQuery με βάση τη λογική, αλλά δεν χρειάζεται να αλλάξετε κάθε κωδικό! NAVT σας επιτρέπει να καθορίσετε: "# αντικαταστήσει αυτό το στοιχείο με το νέο μενού NAVT μου". # στοιχείο που θα μπορούσε να είναι η ταυτότητα ή κατηγορία της διαδρομής των υφιστάμενων μενού div ετικέτα ή στοιχείο που είναι να δημιουργείται από τις τρέχουσες θέμα σας. Έτσι NAVT κάνει αυτό για αντικατάσταση δεν σας αναγκάζει να πας σε κώδικα θέμα και να καταστήσει πιο βρώμικο από ό, τι είναι ήδη. Αν αυτό ακούγεται σαν όλες τις ασυναρτησίες - μην ανησυχείτε - Θα σας καθοδηγήσει βήμα με βήμα σύντομα. Το δύσκολο μέρος της NAVT για όλους είναι ότι θα πρέπει να καταλήξει σε πραγματικές εικόνες CSS + + javascript κώδικα για το μενού σας μόνοι σας. Και είναι στο χέρι σας να καταλάβω πού και πώς να ενσωματωθούν αυτά τα αρχεία και να κάνουν αυτά τα πράγματα σωστά να συνδεθούν μαζί.
Ειλικρινά μην γνωρίζοντας JQuery + κάποια PHP + CSS + έχοντας αξιοπρεπή εμπειρία με Wordpress - αυτό το πράγμα είναι δύσκολο να τραβήξει.
Ευχαρίστως ξέρω αυτά τα πράγματα κάπως έτσι αποφάσισα να επιμείνει στις προσπάθειές της και την ανθρωπότητα οδηγός για την ελευθερία στη δημιουργία των καλύτερων από τις καλύτερες μενού πλοήγησης για Wordpress. Απλώς χρειάζεται να ανακαλύψει τις πηγές για μερικά ωραία οριζόντια αναζητούν μενού CSS. Πήρα δυναμική ιστοσελίδα οδήγησης για καλύτερες επιλογές, demos τους και τις πηγές.

I αφιερώνει μια ημέρα για να μελετήσει Διατριβή και παίζουν με plugin NAVT. Στο τέλος θα δημιουργηθεί περήφανα έθιμο, ευέλικτο, SEO αισιόδοξος, πολυεπίπεδη, ένθετα δομή nagivation για Wordpress μου + βασίζονται Thesis site.

Κατάλογος των χαρακτηριστικών της πολυεπίπεδης, ένθετες μενού πλοήγησης Wordpress για
(πήρατε να αγαπώ αυτήν την ουσία):

  • Professional, καθαρή εικόνα και αίσθηση.
  • Υποστήριξη για όλα τα σύγχρονα προγράμματα περιήγησης, συμπεριλαμβανομένων MSIE 6,7, Opera, Safari, Firefox 3.x, το Google Chrome τόσο javascript και μη javascript τρόπους.
  • Χαριτωμένα downgradable για μη-javascript browsers. Μπορείτε μενού μπορούν να χρησιμοποιηθούν, όμοια από οπτικής απόψεως και να εργάζονται ακόμη και για άτομα με ειδικές ανάγκες javascript browsers (αν και μόνο επάνω πλοήγηση επίπεδο θα είναι ορατές και δεν flyouts θα συμβεί φυσικά, όπως γίνονται από javascript).
  • SEO friendly χαρακτηριστικά - unordered κωδικός μενού κατάλογος παράγεται εντός HTML. Google και άλλες μηχανές αναζήτησης θα είναι σε θέση να δείκτης δομή πλοήγησης σας και να βρείτε συνδέσεις με εσωτερικές σελίδες.
  • Υποστήριξη για απεριόριστο επιπέδων ενσωμάτωσης και sublevels.
  • Υποστήριξη για κάθε παραγγελία ή σελίδες, θέσεις (μέσω χρήστης ορίζεται URIs), τις κατηγορίες, οι χρήστες, μπλοκ προσαρμοσμένο κώδικα και τις εξωτερικές σχέσεις μέσα από το μενού.
  • Στήριξη του κειμένου-, καθώς και εικόνα με βάση τα στοιχεία μενού. (Έχω ακόμη να δοκιμάσετε αυτά όμως).
  • Μενού δομή και το περιεχόμενο είναι οπτικά ρυθμιζόμενο μέσω περιοχή admin NAVT.
  • Compact: JQuery βασίζεται flyouts για ένθετα επίπεδα.
  • Fast: JQuery για το μενού έχει φορτωθεί από το Google διακομιστές (Θα αγαπούσα Διατριβή ίδιο να πράξει το ίδιο, αντί του τραβώντας το τοπικό επίπεδο). Αυτό θα επιταχύνει τα πράγματα λίγο.
  • Scalability - Αυτός ο τύπος μενού είναι επεξεργάσιμη και προσαρμόσιμες σε οποιαδήποτε στιγμή μέσω NAVT ρυθμίσεις plugin δεν υπάρχει ανάγκη κωδικοποίησης του πουθενά.

Χρησιμοποίησα αυτό το εξαιρετικό μενού από τη δυναμική πύλη δίσκο ως βάση. Έπρεπε να προσαρμόσετε κώδικα javascript λίγο ενώ θα περιλαμβάνει και μεγάλο κομμάτι της PHP σε custom_functions.php μπορεί να λειτουργήσει με Διατριβή. Επίσης, ο αριθμός των προ-υπάρχουσες σελίδες, κατηγορίες και θέσεις από την ιστοσελίδα μου χρησιμοποιήθηκαν για να συγκεντρώσει δομή μενού. Ιδιαιτερότητες ιστοσελίδα σας θα είναι διαφορετικό - αλλά έννοιες θα είναι το ίδιο.
Οπότε ας προχωρήσουμε, πρέπει να έχουμε;

Βήμα προς βήμα οδηγίες για NAVT ρύθμιση με βάση το ένθετες, προσαρμόσιμη και πολυεπίπεδη, SEO friendly
και απλά δροσερό αναζητούν μενού πλοήγησης για Wordpress και Thesis Theme

  1. Πηγαίνετε στο πάνελ admin Wordpress. Plugins-> Προσθήκη νέου, αναζήτηση για "navt". Το plugin θα εμφανιστεί. Κάντε κλικ στο [Install], [Εγκατάσταση τώρα], "Ενεργοποίηση Plugin".
  2. Εργαλεία-> NAVT Λίστες, Inside "Ταινία Ομάδα" περιοχή βρει "όνομα της ομάδας" και πληκτρολογήστε: "menu1" στο πεδίο, πατήστε [Δημιουργία] κουμπί. "Menu1" περιοχή ορθογωνίου πήρε δημιουργήθηκε.
    Αυτή η "menu1" περιοχή θα είναι το κύριο παιδική χαρά για την κατασκευή μενού. Θα είναι το σύρσιμο και απόθεση εδώ τα στοιχεία μενού σας.
  3. Στο "ενεργητικό" περιοχή βρει "άλλη" listbox και κάντε κλικ στο "σπίτι" επιλογή. "Home" thingie θα εμφανιστεί στο εσωτερικό της "ανεκχώρητο" περιοχή. Περίεργο, ε; Μην ανησυχείτε, όσο λειτουργεί - και θα είναι για εμάς.
  4. Σύρετε αυτό το "σπίτι" thingie από το "ενεργητικό" στην περιοχή "menu1" περιοχή ορθογώνιο παραλληλόγραμμο. Θα γίνει "σπίτι" στοιχείο στο μενού.
    • Επαναλάβετε τα βήματα 3-4 για μερικές σελίδες από το "Σελίδες" περιοχή, καθώς και για τις κατηγορίες σε "κατηγορίες" περιοχή. Σύρετε οποιαδήποτε άλλα στοιχεία που θέλετε να είναι στο μενού σας μέσα "menu1" ορθογώνιο. Μπορείτε να κάνετε κλικ στις σελίδες, κατηγορίες, οι χρήστες και ορισμένα στοιχεία έθιμο όπως "διαχωριστή λίστα" και "μπλοκ κώδικα". Κωδικός μπλοκ είναι δροσερός τρόπος για να προσθέσετε αποσπάσματα έθιμο μέσα στο μενού.
    • Μπορείτε να σύρετε στοιχεία μενού μέσα "menu1" περιοχή για να αλλάξετε τη σειρά εμφάνισης τους.
    • Μπορείτε να προσαρμόσετε ιεραρχική θέση του κάθε στοιχείου μενού με "<" και ">" βέλη.
    • Κάνοντας κλικ πάνω στο όνομα κείμενο κάθε στοιχείο του μενού - ανοίγει μυαλού επιπλέον διαλόγου προσαρμογής για αυτό το θέμα. Θα χρησιμοποιηθεί κυρίως προεπιλογές αλλά τεχνικά μπορείτε να τρελαίνομαι και να κερδίσετε εικόνας με βάση το μενού επιλογών και να προσθέσετε κομμάτια του κώδικα HTML στο σημείο αυτό. Προχωρήστε με προσοχή όμως.
    • Για linkless unclikable υπομενού που θα χρησιμεύσει ως "γονείς" για άλλα "υπο-παιδιά" χρησιμοποίησα "Κώδικας μπλοκ" τύπου. Για παράδειγμα, όταν προσαρμόζετε ένα τέτοιο είδος μπλοκ κώδικα μπήκα για «Μενού γνωστός και ως σημείο" = "MemberWing" και για "Εισαγωγή μπλοκ κωδικός:" = "<a href='#'> MemberWing </ a>". Έχοντας href = "#" θα κάνει να μην κάνετε κλικ, αλλά ενεργεί ως έγκυρο "μητρικής" επιλογή μενού.
  5. Εδώ είναι πώς NAVT μου "menu1" οικοδομήσουμε δομή έμοιαζε σχεδόν ολοκληρωθεί:
    navt_building_icon
  6. Φινίρισμα αρχικό κτίριο και στη συνέχεια κάντε κλικ στο "εργαλεία" εικονίδιο για να προσαρμόσετε τη δομή μενού σας:
    navt_customize_menu
  7. Θα ανοίξει διάλογο με 4 καρτέλες: Options, Display, CSS, Θέμα.
    1. Πηγαίνετε στο "Επιλογές" καρτέλα και βεβαιωθείτε ότι όλα είναι ανεξέλεγκτη και "το όνομα της ομάδας», λέει: "menu1"
    2. Πηγαίνετε στο "Display" tab και βεβαιωθείτε ότι τα πάντα για την "ομάδα πλοήγηση Δείτε ..." περιοχή ελέγχεται [x]. Αφήστε τα υπόλοιπα σε προεπιλογές.
    3. Πηγαίνετε στο "CSS" καρτέλα και επιλέξτε το κουμπί (x) "Να μην εφαρμόζεται CSS τάξεις».
    4. Πηγαίνετε στο "Θέμα" καρτέλα και συμπληρώστε το όπως ότι:
      navt_configuration_theme_tab_icon
      Εισαγωγή στο "Προσθήκη ετικετών πριν από ..." περιοχή αυτόν τον κώδικα:
      <div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
      Εισαγωγή στο "Προσθήκη ετικετών μετά ..." περιοχή αυτόν τον κώδικα:
      <br style='clear: left' /></div>
    5. Πιέστε [αποθηκεύσετε / κοντά] πλήκτρο
  8. Σε αυτό το κτίριο από το μενού σημείο εντός NAVT επιλογές plugin είναι πλήρης.
    Τώρα ήρθε η ώρα να κάνουμε μια μικρή μελωδία για για να ετοιμαστούμε. Για αυτό πρέπει να προσθέσουμε μερικά αρχεία έθιμο - CSS και javascript που ανήκει στο μενού και να ενημερώσετε custom_functions.php Εργασίες »
  9. Κατεβάστε το πλήρες σύνολο των αρχείων εδώ.
  10. Unzip αρχείο. Εάν έχετε ενημερωθεί custom_functions.php σας με τις προσαρμογές σας - θα πρέπει να ενοποιηθούν με τα δικά μου πράγματα. Θα αφήσουμε μέχρι σας.
    Αν δεν έχετε αγγίξει - μπορείτε να το αντικαταστήσετε με το δικό μου. Παρακαλώ σημειώστε: Η προτιμώμενη θέση μενού κάτω από την ιστοσελίδα της κεφαλίδας (προεπιλογή είναι παραπάνω) - έτσι προσαρμογή μου προτίμηση αυτή περιλαμβάνονται επίσης.
  11. Upload αρχείων, συμπεριλαμβανομένων όλων των υποκαταλόγους και τα αρχεία βάσει του σας «καταλόγου έθιμο», όπως αυτό:
    .../themes/THESIS-DIR/custom/custom_functions.php
    .../themes/THESIS-DIR/custom/jquerycssmenu/...

    Δεν έχω αγγίξει custom.css - Προτιμώ να κρατήσει μενού ειδικά για CSS με το δικό τους θέσεις για να αποφευχθεί η δημιουργία χάος μέσα custom.css
  12. Σε αυτό το σημείο μπορείτε να φορτώσετε εκ νέου τον ιστοχώρο σας και να δείτε νέα όμορφη νέα πολυεπίπεδης, ένθετα, SEO βελτιστοποιημένη μενού.
  13. Μπορείτε πάντα να πάτε πίσω στην NAVT ρυθμίσεις και να προσαρμόσετε το μενού σας με περισσότερες επιλογές ή να επανατοποθετηθεί τίποτα. Θα πρέπει να αντικατοπτρίζεται στις live site αυτόματα.

Ο δρόμος μπροστά ...

Αυτό το σεμινάριο περιλαμβάνεται δημιουργική παράδειγμα ενός τύπου μενού. Έπαιξα με ένα άλλο - απλά για να δούμε πώς σκούρα μενού θα μοιάζουν με:

Thesis theme - multilevel nested CSS menu - dark palette

- πολυεπίπεδη ένθετες μενού CSS - σκούρα παλέτα

Νομίζω ότι είναι πολύ ωραία. Υπάρχουν πολλοί περισσότεροι ναυτικοί διαθέσιμα δείγματα στο Dynamic Drive - όλοι τους είναι δυνατόν να προσαρμόσετε για διατριβών και άλλα θέματα Wordpress με κάποια προσπάθεια:

Dynamic Drive Horizontal Menus

Dynamic Drive Οριζόντια μενού

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

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

20 δολαρίων

Και φυσικά αν είστε μέχρι κτίριο σούπερ SEO αισιόδοξος πριμοδότηση πύλη μέλους wordpress - η καλύτερη λύση για αυτό:
Θέμα Διατριβής + MemberWing plugin ένταξη + αυτο φιλοξενείται Wordpress φυσικά.

Αφήστε ένα σχόλιο

Προηγούμενη θέση:

Επόμενη θέση: