Πρόσφατα ένας από τους αναγνώστες μας ρώτησε πώς να αλλάξουμε την πλευρική γραμμή ενός θέματος WordPress;
Συνήθως λαμβάνουμε αυτήν την ερώτηση από χρήστες που θέλουν να αλλάξουν τη θέση της πλαϊνής γραμμής τους από αριστερά προς τα δεξιά ή δεξιά προς τα αριστερά.
Σε αυτό το σεμινάριο, θα σας δείξουμε πώς να αλλάξετε τη θέση της πλαϊνής γραμμής στο WordPress.
Αλλά πριν, αν δεν έχετε ποτέ εγκαταστήσει το WordPress ανακαλύψετε Πώς να εγκαταστήσετε ένα blog του WordPress σε βήματα 7 et Πώς να αναζητήσετε, να εγκαταστήσετε και να ενεργοποιήσετε ένα θέμα WordPress στο ιστολόγιό σας
Στη συνέχεια, πίσω στο γιατί είμαστε εδώ.
Γιατί να αλλάξετε τη θέση της πλευρικής γραμμής στο WordPress;
Οι ειδικοί ευχρηστίας πιστεύουν ότι οι άνθρωποι σαρώνουν σελίδες από αριστερά προς τα δεξιά. Συνιστούν να τοποθετήσετε σημαντικό περιεχόμενο στα αριστερά, ώστε οι χρήστες να δουν πρώτα αυτό το περιεχόμενο. Ωστόσο, αυτό θα μπορούσε να αντιστραφεί εάν ο ιστότοπός σας είναι σε γλώσσα RTL (δεξιά προς τα αριστερά).
Μάθετε αν αν το blog σας WordPress έχει πλευρικές ράβδους
Πολλοί ιστότοποι WordPress χρησιμοποιούν την τυπική διάταξη ιστολογίου με δύο στήλες. Ένα για το περιεχόμενο και η άλλη στήλη για την πλευρική γραμμή.
Εάν είστε νέοι σε ιστοσελίδες, τότε θα πρέπει να επιλέξετε ένα WordPress θέμα που έχει μια πλαϊνή μπάρα στην προτιμώμενη τοποθεσία σας.
Πολλά WordPress θέματα προσφέρετε επιλογές για να αλλάξετε την πλευρά της πλευρικής γραμμής στις ρυθμίσεις της πλαϊνής γραμμής. Ωστόσο, εάν το θέμα του WordPress δεν έχει αυτήν την επιλογή, θα πρέπει να αλλάξετε χειροκίνητα την πλευρική γραμμή. Προχωρήστε περαιτέρω ανακαλύπτοντας πώς να αφαιρέσετε την πλαϊνή μπάρα στο WordPress
Τούτου λεχθέντος, ας ρίξουμε μια ματιά στη μέθοδο που πρέπει να χρησιμοποιήσετε για να αλλάξετε εύκολα την πλευρά της πλαϊνής γραμμής του WordPress χρησιμοποιώντας το CSS.
Τροποποίηση της πλευρικής γραμμής με CSS
Πριν κάνετε οποιεσδήποτε αλλαγές στο θέμα του WordPress, θα πρέπει πρώτα να εξετάσετε το δημιουργία θεμάτων παιδιών. Χρησιμοποιώντας ένα θέμα παιδιού, θα μπορείτε να ενημερώσετε το γονικό σας θέμα χωρίς να χάσετε τις αλλαγές σας.
Ανακαλύψτε Πώς να εμφανίσετε μια διαφορετική πλαϊνή γραμμή για κάθε άρθρο στο WordPress
Δεύτερον, θα πρέπει πάντα να δημιουργήσετε ένα αντίγραφο ασφαλείας της ιστοσελίδας WordPress όταν κάνετε αλλαγές σε πραγματικό χρόνο στο ενεργό θέμα σας.
Θα χρειαστείτε έναν πελάτη FTP για να επεξεργαστείτε τα αρχεία θεμάτων WordPress. Συμβουλευτείτε το οδηγός για τον τρόπο χρήσης του FTP.
Συνδεθείτε στον ιστότοπό σας στο WordPress χρησιμοποιώντας το πρόγραμμα-πελάτη FTP και μεταβείτε στο φάκελο των θεμάτων. Βρίσκεται γενικά σε:
/ Yoursite / wp-content / themes / σου-θέμα-φάκελο /
Τώρα πρέπει να κατεβάσετε και να ανοίξετε το κύριο αρχείο φύλλου στυλ του θέματος WordPress σε ένα πρόγραμμα επεξεργασίας κειμένου όπως το Σημειωματάριο. Αυτό το αρχείο ονομάζεται style.css, και βρίσκεται στον ριζικό κατάλογο του θέματός σας WordPress.
Ανακαλύψτε πώς να διαχειριστείτε τα αρχεία και τους φακέλους του WordPress
Σε αυτό το αρχείο, βρείτε την κλάση CSS για την πλαϊνή σας μπάρα. Γενικά αυτή η τάξη είναι " sidebar ». Σε αυτό το παράδειγμα, χρησιμοποιούμε το προεπιλεγμένο θέμα WordPress " είκοσι δεκαπέντε Ποιος έχει αυτή την τάξη για την πλαϊνή γραμμή:
.sidebar {float: αριστερά; περιθώριο-δεξιά: -100%; μέγιστο πλάτος: 413px; θέση: σχετική. πλάτος: 29.4118%; }
Όπως βλέπετε, η πλευρική μπάρα επιπλέει προς τα αριστερά με περιθώριο -100%. Θα αλλάξουμε το πλωτήρα προς τα δεξιά:
.sidebar {float: right; περιθώριο-αριστερά: -100%; μέγιστο πλάτος: 413px; θέση: σχετική. πλάτος: 29.4118%; }
Αποθηκεύστε τις αλλαγές σας και ανεβάστε το αρχείο style.css στον ιστότοπό σας χρησιμοποιώντας ένα πρόγραμμα-πελάτη FTP. Τώρα αν επισκεφθείτε τον ιστότοπό σας θα μοιάζει με αυτό:
Πράγματι, μετακινήσαμε την πλευρική γραμμή, αλλά δεν μετακινήσαμε την περιοχή περιεχομένου. " Είκοσι Δεκαπέντε Χρησιμοποιεί αυτό το CSS για να καθορίσει τη θέση της περιοχής περιεχομένου.
.site-content {εμφάνιση: μπλοκ; float: αριστερά. αριστερό περιθώριο: 29.4118%; πλάτος: 70.5882%; }
Θα το αλλάξουμε για να μετακινήσουμε το περιεχόμενο προς τα δεξιά. Ως εξής:
.site-content {εμφάνιση: μπλοκ; float: αριστερά. περιθώριο δεξιά: 29.4118%; πλάτος: 70.5882%; }
Ακολουθεί η εμφάνιση του ιστότοπού σας μετά την εφαρμογή αυτού του κωδικού CSS.
Όπως μπορείτε να δείτε, έχουμε αλλάξει τη θέση της περιοχής περιεχομένου και της πλευρικής γραμμής. Ωστόσο, εξακολουθεί να υπάρχει ένα λευκό μπλοκ στα αριστερά.
Πηγαίνετε περαιτέρω ανακαλύπτοντας πώς να διαχειριστείτε τα αρχεία και τους φακέλους του WordPress
Συχνά θα συναντήσετε αυτά τα σφάλματα κατά την εργασία με το CSS. Θα χρειαστεί κάποια εργασία ντετέκτιβ για να καταλάβω τι προκαλεί αυτό και πώς να το διορθώσετε.
Χρησιμοποιήστε το εργαλείο "Inspector" του προγράμματος περιήγησής σας για να δείτε τον πηγαίο κώδικα. Στρέψτε το ποντίκι σας στην πληγείσα περιοχή του προγράμματος περιήγησης, κάντε δεξί κλικ και επιλέξτε "Inspector" από το μενού του προγράμματος περιήγησης.
Καθώς μετακινείτε το ποντίκι σας γύρω από την προβολή πηγαίου κώδικα, θα παρατηρήσετε τις περιοχές που επηρεάζει επισημαίνονται στη ζωντανή προεπισκόπηση. Στο δεξιό τμήμα του παραθύρου, θα μπορείτε να δείτε το CSS που χρησιμοποιείται για αυτό το επιλεγμένο στοιχείο.
Ανακαλύψτε μας 5 WordPress plugins για την οπτική επεξεργασία του CSS στο blog σας
Επομένως, το CSS που αντιστοιχεί στο επισημασμένο στοιχείο πρέπει να αναπροσαρμοστεί.
@media screen και (min-width: 59.6875em) {body: πριν από το {background-color: #fff; σκιά κουτιού: 0 0 1px rgba (0, 0, 0, 0.15). περιεχόμενο: ""; εμφάνιση: μπλοκ? ύψος: 100%; min-ύψος: 100%; θέση: σταθερή. αρχή: 0; αριστερά: 0; πλάτος: 29.4118%; z-δείκτης: 0; / * Διορθώνει το σφάλμα που αναβοσβήνει με κύλιση στο Safari * /}
Αυτός ο κώδικας CSS προσθέτει ένα κενό τετράγωνο με 29,4118% πλάτος και πλάτος 100% στο επάνω αριστερό μέρος. Δείτε πώς θα το μετακινήσουμε προς τα δεξιά.
@media screen και (min-width: 59.6875em) {body: πριν από το {background-color: #fff; σκιά κουτιού: 0 0 1px rgba (0, 0, 0, 0.15). περιεχόμενο: ""; εμφάνιση: μπλοκ? ύψος: 100%; min-ύψος: 100%; θέση: σταθερή. αρχή: 0; δεξιά: 0; πλάτος: 29.4118%; z-δείκτης: 0; / * Διορθώνει το σφάλμα που αναβοσβήνει με κύλιση στο Safari * /}
Μετά την αποθήκευση και τη μεταφόρτωση του φύλλου στυλ στο διακομιστή, έτσι θα μοιάζει ο ιστότοπός σας.
Η συνεργασία με το CSS μπορεί να προκαλέσει σύγχυση για αρχάριους. Εάν δεν θέλετε να κάνετε όλη τη χειρωνακτική εργασία, τότε μπορείτε να δοκιμάσετε το WordPress CSS Hero plugin. Σας επιτρέπει να επεξεργάζεστε CSS χωρίς να γράφετε κώδικα και λειτουργεί με κάθε θέμα WordPress.
Ανακαλύψτε επίσης μερικά πρόσθετα plugins WordPress
Μπορείτε να χρησιμοποιήσετε άλλα WordPress plugins για να δώσετε μια μοντέρνα εμφάνιση και να βελτιστοποιήσετε τον χειρισμό του blog ή της ιστοσελίδας σας.
Σας προσφέρουμε εδώ μερικά πρόσθετα plug-in WordPress που θα σας βοηθήσουν να το κάνετε αυτό.
1. Zxeion
Το Zxeion είναι ένα ισχυρό WordPress Plugin premium υπεύθυνος για τη βελτίωση της ασφάλειας του ιστότοπού σας. Αυτό το πρόσθετο περιέχει μια συλλογή εργαλείων προστασίας και ασφάλειας που θα προστατεύουν τον ιστότοπό σας από πιθανές επιθέσεις.
Το σύστημα προστασίας σε πραγματικό χρόνο θα σας βοηθήσει να εντοπίσετε και να αποκλείσετε απειλές στον ιστότοπό σας, χωρίς να χρειάζεται να κάνετε τίποτα.
Ανακαλύψτε επίσης μας 7 plugins για να ενισχύσετε τις πλευρικές σας γραμμές στο WordPress
Τα χαρακτηριστικά του είναι: προστασία σε πραγματικό χρόνο, εξαιρετική υποστήριξη πελατών, τακτικές ενημερώσεις, αποκλεισμός διευθύνσεων IP, εξαιρετική τεκμηρίωση, σύγχρονη και επαγγελματική διεπαφή, ειδική υποστήριξη πελατών και άλλα
telecharger | Επίδειξη | Web Hosting
2. Slaido
Ο Σλάιντο είναι α WordPress Plugin premium που σας επιτρέπει να επιλέξετε ανάμεσα σε σχεδόν 320 αποκριτικά πρότυπα ρυθμιστικών και να εισαγάγετε ένα από αυτά στον ιστότοπό σας με λίγα μόνο κλικ. Είναι ένα πλήρες πακέτο προτύπων, ιδανικό για slider Επανάσταση. Επομένως, θα πρέπει πρώτα να το εγκαταστήσετε για να το χρησιμοποιήσετε πλήρως WordPress Plugin
Τα κύρια χαρακτηριστικά του είναι: μια ευέλικτη διάταξη των ρυθμιστικών της, η ευκολία εισαγωγής ή εξαγωγής ρυθμιστικών, τακτικές ενημερώσεις, διαθέσιμη υποστήριξη πελατών 24 ώρες το 7ωρο, ρευστές και πολύ δροσερές κινούμενες εικόνες, η διαθεσιμότητα εκπαιδευτικά βίντεο για γρήγορη εκκίνηση, υποστήριξη για γραμματοσειρές Google και πολλά άλλα.
telecharger | Επίδειξη | Web Hosting
3. Επικοινωνήστε μαζί μας
Η φόρμα επικοινωνίας μαζί μας είναι ένα premium ανταποκρινόμενο WordPress plugin και ένα απλό εργαλείο, αλλά πλούσιο σε επιλογές προσαρμογής που σας επιτρέπουν να εμφανίσετε μια σαφή και ενθαρρυντική φόρμα, στην οποία οι επισκέπτες σας μπορούν να επικοινωνήσουν μαζί σας αφήνοντας το μήνυμά τους.
Θα μπορείτε να ορίσετε τα απαραίτητα πεδία, να επιλέξετε την καλύτερη διάταξη των πεδίων και να τα προσαρμόσετε πλήρως, ώστε να ενθαρρύνετε τους πελάτες ή τους επισκέπτες σας να αφήνουν τις προτάσεις ή τα μηνύματά τους.
Σας προσκαλούμε επίσης να διαβάσετε: 10 WordPress plugins για να δημιουργήσετε και να διαχειριστείτε έναν ιστότοπο εστιατορίου
Απλά ρυθμίστε τη διεύθυνση ηλεκτρονικού ταχυδρομείου όπου θέλετε να λαμβάνετε τα μηνύματα και να τα χρησιμοποιείτε για να αναπτύξετε την επιχείρησή σας με την πιο κερδοφόρα κατεύθυνση.
telecharger | Επίδειξη | Web Hosting
Συνιστώμενοι πόροι
Μάθετε για άλλους συνιστώμενους πόρους για να σας βοηθήσουμε να δημιουργήσετε και να διαχειριστείτε τον ιστότοπό σας
- Πώς να βρείτε τη διεύθυνση URL σύνδεσης του blog σας WordPress
- Πώς να δημιουργήσετε μια ζώνη super hero με κινούμενο κείμενο
- Πώς να προσαρμόσετε το CSS της ιστοσελίδας σας WordPress
- Πώς να προσθέσετε κατηγορίες στο μενού του blog σας WordPress
Συμπέρασμα
Υπάρχουν! Αυτό είναι για αυτό το σεμινάριο. Ελπίζουμε να σας βοηθήσει να αλλάξετε την πλευρική γραμμή του ιστολογίου WordPress. μη διστάσετε μοιραστείτε αυτό το άρθρο με τους φίλους σας στα αγαπημένα σας κοινωνικά δίκτυα.
Ωστόσο, θα μπορείτε επίσης να συμβουλευτείτε το ressources, εάν χρειάζεστε περισσότερα στοιχεία για να εκτελέσετε τα έργα σας για τη δημιουργία ιστοσελίδων στο Διαδίκτυο, συμβουλευτείτε τον οδηγό μας για το Δημιουργία blog του WordPress.
Αν έχετε προτάσεις ή σχόλια, αφήστε τα στο τμήμα μας σχόλια.
...