Σας έχει συμβεί ποτέ αυτό; Εγκαθιστάς ένα πρόσθετο, έχει την ακριβή λειτουργικότητα που ψάχνεις, αλλά… δεν λειτουργεί σωστά. Ακόμη και μετά την αλλαγή όλων των ρυθμίσεων, η τελευταία δεν προσαρμόζεται πάντα στις δικές σας WordPress θέμα. Έτσι, λόγω αυτού του μικρού ελαττώματος, πιθανότατα σκέφτεστε να επιλέξετε άλλη λύση.

Πώς να προσθέσετε κώδικα css wordpress 1

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

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

Αλλά πριν, αν δεν έχετε ποτέ εγκαταστήσει το WordPress ανακαλύψετε Πώς να εγκαταστήσετε ένα blog του WordPress σε βήματα 7 et Πώς να αναζητήσετε, να εγκαταστήσετε και να ενεργοποιήσετε ένα θέμα WordPress στο ιστολόγιό σας.

Στη συνέχεια, πίσω στο γιατί είμαστε εδώ.

Προσαρμοσμένα στυλ CSS = Περισσότερος έλεγχος στην εμφάνιση

Τα προσαρμοσμένα στυλ CSS σάς επιτρέπουν να χειρίζεστε την εμφάνιση διαφόρων στοιχείων πέρα ​​από αυτό που προοριζόταν από τον προγραμματιστή. Πολλά premium πρόσθετα σήμερα περιλαμβάνουν προσαρμοσμένες επιλογές στυλ, αλλά τα δωρεάν πρόσθετα δεν είναι πάντα αρκετά σχολαστικά από αυτή την άποψη.

Πάρτε ένα από τα πιο δημοφιλή πρόσθετα: Φόρμα Επικοινωνίας 7. Προσφέρει πολύ μικρή ικανότητα ελιγμών από πλευράς css. Ωστόσο, με το προσαρμοσμένο CSS, μπορείτε να αλλάξετε εντελώς κάθε πτυχή των φορμών σας.

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

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

Γιατί πρέπει να προσθέσετε σωστά τον κώδικα CSS;

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

Πώς να προσθέσετε κώδικα css wordpress 2

Ανακαλύψτε μας 4 plug-ins WordPress για να προσαρμόσετε το CSS στο ιστολόγιό σας

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

Δείτε επίσης Πώς να προσαρμόσετε το CSS της ιστοσελίδας σας WordPress

Αντίθετα, προσθέτοντάς τα με λάθος τρόπο, ο κώδικας CSS σας θα είναι πολύ πιο εκτεθειμένος και μπορεί να μην είναι αποτελεσματικός. Μερικοί από εσάς χρησιμοποιείτε το WordPress θέμα Divi. Θα σας δείξω λοιπόν πώς να προσθέσετε κώδικα CSS σε αυτό το θέμα του WordPress.

Πού να προσθέσετε στυλ CSS στο Divi

Για να προσθέσετε με ασφάλεια κώδικα CSS στο Divi, θα χρειαστεί να αποκτήσετε πρόσβαση στο " Επιλογές Θέμα » στο μενού Divi σας:

Στη συνέχεια, στην καρτέλα "Γενικά" (που θα είναι η καρτέλα που έχει φορτωθεί από προεπιλογή), θα χρειαστεί να κάνετε κύλιση προς τα κάτω στη σελίδα. Εκεί θα βρείτε μια ενότητα που ονομάζεται " Προσαρμοσμένο CSS »

Τεχνικά, το μόνο που χρειάζεται να κάνετε είναι να εισαγάγετε τον προσαρμοσμένο σας κωδικό CSS εδώ και να κάνετε κλικ στο " Αποθήκευση αλλαγών ". Όμως, επειδή θέλουμε να είναι πολύ εύκολο να μετακινηθεί ή να αντιγραφεί, θα το πάμε ένα βήμα παραπέρα. Ανακαλύψτε άλλα μαθήματα για το Divi συμβουλευόμενοι τους καλύτερους πόρους μας στο Divi

Επειδή μπορεί να έχετε ήδη προσθέσει ορισμένους προσαρμοσμένους κωδικούς στο Divi, θα σας βοηθήσει να οργανώσετε το προσαρμοσμένο CSS σε αυτήν την ενότητα. Για να το κάνετε αυτό, πρέπει να προσθέσετε ένα σχόλιο λέγοντας κάτι σαν " Η προσθήκη CSS Styles ξεκινά εδώ ". Στη συνέχεια, μπορείτε να προσθέσετε τον προσαρμοσμένο κώδικα CSS σε αυτήν την ενότητα.

Για να προσθέσετε ένα σχόλιο, το μόνο που χρειάζεται να κάνετε είναι να αντιγράψετε και να επικολλήσετε αυτόν τον κώδικα:

/* Προσθήκη στυλ CSS Ξεκινήστε εδώ */

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

Πού να προσθέσετε κώδικα CSS σε άλλα θέματα WordPress

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

Υποθέτοντας ότι έχετε ρυθμίσει το θέμα του παιδιού σας, μπορείτε να το επεξεργαστείτε απευθείας στον πίνακα ελέγχου του WordPress μεταβαίνοντας στο " Εμφάνιση> Επεξεργαστής »

Βεβαιωθείτε ότι αλλάζετε στο σωστό θυγατρικό θέμα. Οι αλλαγές σας πρέπει να γίνουν στο αρχείο " styles.css ».

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

Συνοψίζοντας

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

Ανακαλύψτε επίσης μερικά πρόσθετα plugins WordPress  

Μπορείτε να χρησιμοποιήσετε άλλα WordPress plugins για να δώσετε μια μοντέρνα εμφάνιση και να βελτιστοποιήσετε τον χειρισμό του blog ή της ιστοσελίδας σας.

Σας προσφέρουμε εδώ μερικά πρόσθετα plug-in WordPress που θα σας βοηθήσουν να το κάνετε αυτό.

1. Slider Pro

Το Slider Pro είναι ένας από τους τρεις κορυφαίους πωλητές του CodeCanyon. Παρέχει μια καθαρή και διαισθητική διεπαφή χρήστη στην περιοχή διαχείρισης και μια ομαλή εμπειρία περιήγησης για χρήστες και επισκέπτες.

Πρόσθετο slider pro responsive wordpress

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

Ανακαλύψτε επίσης Πώς να δημιουργήσετε μια παρουσίαση διαφανειών με το Slider Revolution στο WordPress

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

Διαβάστε επίσης μας 5 WordPress plugins για να δημιουργήσετε FAQs σε ένα blog

Τα χαρακτηριστικά του είναι τα εξής: cβελτιστοποιημένη φόρτωση εικόνας, σελεύκολη προσαρμογή, αρευστοποιημένες εξελίξεις, σελπολλές διατάξεις eπερισσότερα.

Λήψη | Demo | Web Hosting

2. ARMember

Ο ΑΡΜέλος είναι α WordPress Plugin προστασία περιεχομένου. Είναι μια μοναδική λύση που σας επιτρέπει να πουλάτε συνδρομές σε οποιονδήποτε ιστότοπο. Διαθέτει μια ολόκληρη σειρά εργαλείων που σας επιτρέπουν προστασία εν όλω ή εν μέρει το περιεχόμενό του.

Ένα άλλο χαρακτηριστικό του είναι το γεγονός ότι προσφέρει μια δωρεάν επιλογή η οποία είναι λίγο περιορισμένη ως προς τη λειτουργικότητα. Μιλώντας για χαρακτηριστικά, αυτό το ισχυρό WordPress Plugin προσφέρει μεταξύ άλλων: Η δυνατότητα να να σχεδιάσετε το περιεχόμενό, υποστήριξη για διάφορα σχέδια εγγραφής, εύκολη διαμόρφωση, μετάβαση μεταξύ διαφορετικών προγραμμάτων εγγραφής, Υποστήριξη WooCommerce, διάφορα μοντέλα μορφές, και πολλά άλλα.

Είναι επίσης μια αναφορά σε αυτή τη θέση.

telecharger | Επίδειξη | Web Hosting 

3. Αποστολή με βάση το καλάθι WooCommerce

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

Για παράδειγμα, όσο υψηλότερο είναι το υποσύνολο ή το βάρος του καλαθιού ή όσο περισσότερα είδη αγοράζει ο πελάτης, τόσο υψηλότερη είναι η τιμή αποστολής.

Δείτε επίσης μας 10 πρόσθετα WooCommerce για τη δημιουργία σεναρίων αποστολής

Μπορείτε επίσης να ρυθμίσετε αυτή τη δυνατότητα να είναι διαθέσιμη μόνο σε ορισμένες χώρες.

telecharger | Επίδειξη | Web Hosting

Συνιστώμενοι πόροι

Μάθετε για άλλους συνιστώμενους πόρους για να σας βοηθήσουμε να δημιουργήσετε και να διαχειριστείτε τον ιστότοπό σας

Συμπέρασμα

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

Ωστόσο, θα μπορείτε επίσης να συμβουλευτείτε το ressources, εάν χρειάζεστε περισσότερα στοιχεία για να εκτελέσετε τα έργα σας για τη δημιουργία ιστοσελίδων στο Διαδίκτυο, συμβουλευτείτε τον οδηγό μας για το Δημιουργία blog του WordPress ή το ένα Divi: το καλύτερο θέμα WordPress όλων των εποχών.

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

... 

Pin It στο Pinterest