Ξεκινώντας με το WordPress Παιδικά Θέματα

Άρθρο που γράφτηκε από:
  • WordPress
  • Ενημερώθηκε: Ιούλιος 27, 2013

Έτσι, φαντάζεστε ότι ξεκινάτε τα τσίμπημά σας στον κόσμο του WordPress και έχετε βρει πολλά φοβερά θέματα. Βρίσκετε ακόμη και πολλά θέματα υψηλής ποιότητας και τα περισσότερα από αυτά αξίζουν πραγματικά την τιμή (μερικά βιβλία για επαγγελματική εμφάνιση και κώδικα). Και τα περισσότερα από τα θέματα που βρίσκεστε είναι τόσο κοντά, αλλά κανένας δεν είναι ακριβώς αυτό που θέλετε. Θα ήταν καλό να μπορέσετε να μετακινήσετε τη γραμμή μενού λίγο, για να αντικαταστήσετε τη γραμματοσειρά, για να προσθέσετε ένα νέο μπλοκ κειμένου.

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

Επεξεργασία εμφάνισης χωρίς τροποποίηση αρχείων θεμάτων

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

Θα περιέχει τουλάχιστον τα αρχεία 2, το αρχείο style.css και το αρχείο functions.php, όλα τα άλλα αρχεία θα ληφθούν από το γονικό θέμα, οπότε αν δεν δημιουργήσετε ένα νέο αρχείο στον παιδικό σας κατάλογο θεμάτων, θα χρησιμοποιείτε γονικά αρχεία.

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

Ας πάρουμε τα χέρια μας βρώμικα

Έτσι, το πρώτο βήμα είναι η δημιουργία ενός νέου καταλόγου θεμάτων παιδιού στο φάκελο / wp-content / themes /. Ας το ονομάσουμε "Είκοσι Παιδιά" και ας δημιουργήσουμε το βασικό μας αρχείο styles.css:

/ * Θέμα Όνομα: Είκοσι Θέματα Παιδιού URI: http://www.webrevenue.co Περιγραφή: Μάθηση Παιδικά θέματα τώρα Author: Rochester Oliveira Συγγραφέας URI: http://www.webrevenue.co/author/rochester/ Πρότυπο: twentytwelve * / / * Κλήση κύριου θέματος CSS αρχείο * / @import ("../ twentytwelve / style.css"); / * Προσθέστε οτιδήποτε θέλετε παρακάτω * /

Οι παράμετροι είναι (ανάμεσα σε άλλες προαιρετικές παραμέτρους παραλείπονται):

  • Θέμα Όνομα: Το όνομα που θα δείτε στην οθόνη επιλογής θεμάτων
  • Θέμα URI: Ο σύνδεσμος που θα εμφανιστεί εκεί
  • Περιγραφή: Μια σύντομη περιγραφή, ώστε να θυμάστε τι είναι αυτό
  • Συντάκτης: Ποιος έχει δημιουργήσει το θέμα παιδιού
  • URI συγγραφέα: Αν θέλετε να συνδεθείτε με τον ιστότοπο του δημιουργού
  • Πρότυπο: Ο κύριος φάκελος θεμάτων (οπότε εάν θέλετε να χρησιμοποιήσετε ένα διαφορετικό θέμα ως κύριο θέμα, απλά αντικαταστήστε αυτήν την παράμετρο)

Μόλις προσθέσετε αυτόν τον κωδικό, θα δείτε το Θέμα παιδιού κάτω από την ενότητα WP admin> Εμφάνιση> Θέματα. Μπορείτε να το επιλέξετε τώρα και όλες οι αλλαγές που έγιναν θα γίνουν στον ιστότοπό σας.

Παιδικά Θέματα Επεξεργασία 101

Αυτό μπορεί να είναι άχρηστο αν έχετε μηδενικές γνώσεις CSS, σωστά; Λανθασμένος! Το CSS είναι πραγματικά πολύ εύκολο και μπορείτε να βρείτε πολλά αποσπάσματα για να σας βοηθήσουμε εκεί. Ακολουθούν μερικές απλές συμβουλές για να σας βοηθήσουμε στις προσαρμογές σας.

#1 Εγκαταστήστε το Firebug

Πολλοί άνθρωποι αγαπούν το Chrome και το Safari (και εγώ!), Αλλά για μένα το FireFox είναι πολύ καλύτερο για ανάπτυξη. Έτσι, αν θέλετε να το χρησιμοποιήσετε, σας συνιστούμε επίσης να εγκαταστήσετε το firebug, το οποίο είναι ένα φοβερό εργαλείο για να κατανοήσετε όλους τους επιλογείς που είναι ενεργοί στο τρέχον στοιχείο.

Μόλις το εγκαταστήσετε, μπορείτε να πατήσετε F12 ή να κάνετε δεξί κλικ κάπου στη σελίδα και να επιλέξετε "Inspect Element". Θα δείτε ένα νέο παράθυρο με την τρέχουσα σελίδα HTML και CSS (και πολλές άλλες καρτέλες που είναι χρήσιμες, ίσως μπορούμε να μιλήσουμε γι 'αυτές αργότερα).

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

#2 Σκεφτείτε την ειδικότητα CSS (ή το βάρος του επιλογέα)

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

  • ! σημαντική δήλωση θα αντικαταστήσει οτιδήποτε άλλο
  • Το inline CSS θα αντικαταστήσει οτιδήποτε άλλο! σημαντικούς κανόνες
  • ID (#header, #foter, # container ...) αξίας 100
  • Οι κλάσεις (.main, .nav, .box) αξίζουν τα σημεία 10
  • Ετικέτες (body, div, p, a) αξίας 1
  • Ο γενικός επιλογέας και τα ψευδο-μαθήματα (*,: hover,: after) αξίζουν το 0 αλλά θα ισχύουν αν υπάρχει "tie"

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

.site-header {padding: 1.71429em 0; } άρθρο, κατά μέρος, λεπτομέρειες, figcaption, σχήμα, υποσέλιδο, κεφαλίδα, hgroup, nav, τμήμα {display: block; }}

Ο πρώτος επιλογέας έχει 10 σημεία (δεδομένου ότι είναι μια κλάση), και ο δεύτερος έχει το σημείο 1 έκαστο (αφού τα κόμματα απλά διαχωρίζουν διαφορετικούς επιλογείς) γι 'αυτό εμφανίζεται στην κορυφή. Αν είχατε κάτι σαν #header div, εκείνος ο επιλογέας θα είναι σίγουρα ο πρώτος που θα εμφανιστεί.

Γιατί αυτό είναι τόσο σημαντικό;

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

.site-header {padding: 1.71429em 0; }}

Μπορείτε να προσθέσετε αυτό στο CSS θέμα του παιδιού σας, αλλά δεν πρέπει:

.site-header {padding 15px 0! σπουδαίος; }}

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

σώμα .site-header {padding: 15px 0; }}

Αυτός ο επιλογέας έχει 11 πόντους, ο οποίος είναι μεγαλύτερος από τον αρχικό 10 και έτσι αυτός ο κώδικας θα εφαρμοστεί.

#3 Χρησιμοποιήστε τις λειτουργίες

Το αρχείο child.php είναι το μόνο αρχείο που θα φορτωθεί σε ADDITION στο πρωτότυπο αρχείο. Αυτός είναι ένας έξυπνος τρόπος αντιμετώπισης από την ομάδα WP, ώστε να μπορείτε να διατηρήσετε τις αρχικές λειτουργίες και να προσθέσετε τις δικές σας λειτουργίες. Το catch είναι ότι οι λειτουργίες θεμάτων παιδιού θα φορτωθούν πρώτα και ο προγραμματιστής θέματος ΠΡΕΠΕΙ να κάνει κάτι τέτοιο για να αποφύγει τις συγκρούσεις όταν δηλώνει τις λειτουργίες:

if (! function_exists ('top_menu')) {λειτουργία top_menu () {// cool code εδώ} add_action ('wp_head', 'top_menu'); }}

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

#4 Μάθετε μερικές ιδιότητες του CSS

Ξέρατε ότι μπορείτε να κρύψετε και να προσθέσετε υλικό χρησιμοποιώντας το CSS; Θα χρειαστεί να εγκαταστήσετε το firebug για να βρείτε τον σωστό επιλογέα, αλλά μπορείτε να αποκρύψετε ένα στοιχείο προσθέτοντας αυτόν τον κωδικό:

σώμα α {εμφάνιση: καμία}

Για να προσθέσετε είναι πιο περίπλοκο, αφού μπορείτε να προσθέσετε μόνο μικρά κείμενα, αν θέλετε ένα κείμενο "On Sale!" Μετά από μια τιμή, για παράδειγμα θα μπορούσατε να χρησιμοποιήσετε αυτόν τον κωδικό:

.price del: μετά {χρώμα: κόκκινο; περιεχόμενο: "Σε πώληση!"; }}

Ποια είναι η γνώμη σας;

Τι πιστεύετε για αυτόν τον οδηγό; Θα εξετάσετε τη χρήση παιδικών θεμάτων; Το χρησιμοποιείτε ήδη; Ενημερώστε μας χρησιμοποιώντας την παρακάτω ενότητα σχολίων!

Σχετικά με την Rochester Oliveira

Είμαι σχεδιαστής ιστοσελίδων και επιχειρηματίας από την Itajubá (MG), τη Βραζιλία. Μου αρέσει να γράφω για τα σκοτεινά θέματα και να κάνω μερικά δροσερά πράγματα.

Συνδέω: