Για να δημιουργήσετε τον ιστότοπό σας στο WordPress, θα χρειαστεί οπωσδήποτε να προσθέσετε ένα θέμα. Ονομάζονται επίσης πρότυπα. Αυτή είναι η βάση οποιουδήποτε πόρου Ιστού.

Αυτό το άρθρο θα καλύψει τα βήματα για τη δημιουργία ενός προτύπου και θα περιγράψει τη διάταξη των αρχείων psd.

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

Παρακαλούμε να σημειώσετε ότι αυτό το εγχειρίδιοδεν περιλαμβάνει περιγραφή προσθήκης έτοιμου θέματος - αυτό είναι ένα εγχειρίδιο για τη δημιουργία του δικού σας προτύπου. Εάν έχετε κατεβάσει το θέμα και δεν ξέρετε πώς να το εγκαταστήσετε, μεταβείτε στον πίνακα διαχείρισης του WordPress, στην ενότητα " Εμφάνιση” και προσθέστε ένα από τα διαθέσιμα skin εκεί. Και τώρα θα αναλύσουμε λεπτομερέστερα τι είναι ένα θέμα, γιατί χρειάζεται και πώς να το δημιουργήσετε μόνοι σας.

Ποιος είναι ο σκοπός της μη αυτόματης δημιουργίας ενός θέματος;

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

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

Επιπλέον, αφού δημιουργήσετε ένα πρότυπο, θα νιώσετε σαν «ιατρικός» του WordPress – θα ξέρετε τι έχει μέσα ο ιστότοπος. Κατανοήστε ποια στοιχεία είναι υπεύθυνα για τι. Στη συνέχεια, ο ιστότοπος και θα μιλήσετε για εσάς. Εξοικειωθείτε με τις ετικέτες, τη δομή και τους κύκλους του WordPress. Ή ίσως θέλετε να το κάνετε επαγγελματικά και να αρχίσετε να φτιάχνετε πρότυπα για τα προς το ζην.

Έτσι, εδώ είναι οι κύριοι λόγοι για τους οποίους πρέπει να δημιουργήσετε το δικό σας πρότυπο ιστότοπου:

• μάθετε τα πάντα για την HTML, το CSS και κάτι για την PHP.
• Μπορείτε να δημιουργήσετε, γιατί το web design είναι επίσης τέχνη.
• θα είναι δυνατό να κερδίσετε χρήματα πουλώντας θέματα.
• Ανακαλύψτε μια νέα δεξιότητα.
• δημιουργήστε ένα σχέδιο που θα είναι 100% κατάλληλο για τον μελλοντικό σας ιστότοπο.

Ποια πρότυπα πληροί το θέμα;

Όταν γράφετε ένα πρότυπο, είναι πολύ σημαντικό να ακολουθείτε τους επίσημους κανόνες. Παραβίαση κώδικα, εισαγωγή ετικέτας σε λάθος μέρος και παράλειψη - αυτό μπορεί να βλάψει το σχέδιο και να χαλάσει εντελώς την εμφάνισή του. Θα πρέπει να γνωρίζετε καλά τους κανόνες για τη σύνταξη κώδικα PHP, καθώς και την HTML, εάν δεν είστε ήδη εξοικειωμένοι με αυτές τις γλώσσες. Επιπλέον, θα πρέπει να αντιμετωπίσετε πίνακες με καταρράκτες στυλ css, επομένως θυμηθείτε τα βασικά τους - υπάρχουν πολλές πληροφορίες σχετικά με αυτό στο Διαδίκτυο. Λοιπόν, και η τελευταία λιγότερο σημαντική απαίτηση - δημιουργήστε έναν ιστότοπο σαν σχεδιαστής και όχι σαν μαθητής, έτσι ώστε να έχετε ένα σοβαρό έργο. Διαφορετικά, δεν έχει νόημα να πάρουμε αυτήν την υπόθεση.

Όλα τα θέματα του WordPress φιλοξενούνται στο φάκελο wp-content/themes/. Μέσα σε αυτόν τον φάκελο υπάρχουν άλλοι φάκελοι με ξεχωριστά θέματα, ένα αρχείο με Επιπρόσθετα χαρακτηριστικά(functions.php), αρχεία στυλ και εικόνες. Για να βρείτε δεδομένα για ένα συγκεκριμένο θέμα, πρέπει να μεταβείτε στον κατάλληλο κατάλογο. Αυτό θα τοποθετήσει το θέμα "Western" στο φάκελο wp-content/themes/western/.

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

Θα παρατηρήσετε ότι ένα πρότυπο αποτελείται συνήθως από τρεις μορφές αρχείων:

1. Το Style.css είναι το αρχείο στυλ για το οποίο είναι υπεύθυνο εξωτερικός σχεδιασμόςιστοσελίδα.
2. Functions.php αρχείο λειτουργίαςΈνα που προσθέτει διάφορες δυνατότητες στις σελίδες.
3. Άλλα αρχεία php που είναι υπεύθυνα για τις δυνατότητες της εξόδου προτύπου στον ιστότοπο, ενσωμάτωση θέματος με το WordPress. Αυτά τα αρχεία σας επιτρέπουν να μεταφράσετε τη διάταξη psd σε ένα πλήρες πρότυπο.

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

Κανόνες για τη δημιουργία αρχείου style.css

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

1. Όνομα προτύπου.
2. Το URL που οδηγεί στο θέμα.
3. Περιγραφή που υποδεικνύει τα κύρια χαρακτηριστικά του προτύπου. Εν ολίγοις.
4. Όνομα συγγραφέα. Σε αυτήν την περίπτωση, εισαγάγετε το όνομά σας.
5. Σύνδεσμος με τον συγγραφέα, δηλαδή με εσάς. Μπορείτε να παράσχετε έναν σύνδεσμο προς το προφίλ σας στα μέσα κοινωνικής δικτύωσης.
6. Το όνομα του γονικού θέματος είναι προαιρετικό.
7. Έκδοση θέματος. Εάν δημιουργηθεί μόνο, τότε v. 1.0.
8. Πλήρης περιγραφή του προτύπου. Μπορείτε να γράψετε εκτενώς.

Για να δημιουργήσετε το απλούστερο θέμα WordPress, απλώς προσθέστε μια επεξεργασμένη έκδοση με ένα μόνο αρχείο style.css. Σε αυτό το αρχείο, δίπλα στη γραμμή "πρότυπο", καθορίστε το όνομα του γονικού θέματος. Για παράδειγμα, Κλασικό εάν επεξεργάζεστε ένα τυπικό πρότυπο. Τώρα το θέμα που δημιουργήθηκε θα συμμορφώνεται πλήρως με το Κλασικό πρότυπο. Επομένως, θα χρειαστεί να ανεβάσετε τα αρχεία στον κατάλογο wp-content/themes/classic.

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

Χαρακτηριστικά του αρχείου πρόσθετης λειτουργικότητας functions.php

Τα πρότυπα δεν χρησιμοποιούν πάντα το αρχείο functions.php, αλλά στις περισσότερες περιπτώσεις είναι απαραίτητο. Πρέπει να τοποθετηθεί στον κατάλογο με το κατάλληλο θέμα. Λάβετε υπόψη ότι εάν αυτό το αρχείο υπάρχει στον φάκελο του προτύπου, τότε θα ληφθεί υπόψη κατά την προετοιμασία του θέματος. Λειτουργεί σαν πρόσθετο. Και θα εκτελέσει τέτοιες λειτουργίες όπως του δίνετε.

Ο κύριος σκοπός του αρχείου functions.php είναι να ορίσει τις διαθέσιμες λειτουργίες προσαρμογής στην περιοχή διαχειριστή για ένα δεδομένο θέμα. Δηλαδή, όλες οι λειτουργίες που εισάγετε στο functions.php θα εμφανίζονται στον πίνακα διαχείρισης ή στη σελίδα για τον χρήστη. Συνήθως, αυτό αλλάζει το συνδυασμό χρωμάτων για έναν ιστότοπο WordPress, αλλάζει τη γραμματοσειρά και πολλά άλλα. Υπάρχουν όμως πολλές χρήσεις για αυτό το αρχείο. Ωστόσο, αυτή είναι μια εντελώς διαφορετική ιστορία...

Χαρακτηριστικά των αρχείων προτύπων php

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

Εάν θέλετε να προσθέσετε ένα ελάχιστο θέμα στον ιστότοπο ή να δοκιμάσετε τη δική σας διάταξη psd, τότε χρειάζεστε μόνο δύο αρχεία στον κατάλογο προτύπων:

1. στυλ.css
2. Ευρετήριο.php

Οι έμπειροι webmasters καταφέρνουν να αλλάξουν το αρχείο index.php με τέτοιο τρόπο ώστε μόνο αρκεί να κάνετε ρυθμίσεις για το υποσέλιδο, την πλαϊνή γραμμή, την αναζήτηση, το αρχείο, τις κατηγορίες, τις σελίδες κ.λπ. Αλλά καλύτερα προσπαθήστε να δημιουργήσετε ένα πρότυπο WordPress στο οποίο κάθε αρχείο θα εκτελέσει την αντίστοιχη λειτουργία.

Ακόμα κι αν δεν καθορίσετε κατά λάθος ένα αρχείο προτύπου, το WordPress θα προσθέσει αυτόματα τις δικές του προεπιλεγμένες ρυθμίσεις στον ιστότοπο. Για παράδειγμα, εάν δεν προσθέσετε ένα αρχείο υπεύθυνο για σχόλια, τότε ο κινητήρας θα βρει τις δικές του εκδόσεις αυτής της λειτουργίας στους καταλόγους - για παράδειγμα, wp-comments.php. Στη συνέχεια, τα "ξένα" σχόλια θα καταρρεύσουν στη δομή του ιστότοπού σας, τα οποία δεν θα πληρούν τις απαιτήσεις του προτύπου. Για να μην συμβεί αυτό, πρέπει να προσθέσετε όλα τα κύρια αρχεία για να εμφανίσετε τα διάφορα στοιχεία της σελίδας:

• header.php - υπεύθυνος για την κεφαλίδα του ιστότοπου.
• sidebar.php - sidebars;
• footer.php - υποσέλιδο του πόρου (το κάτω μέρος του).
• Το comments.php και το comments-popup.php είναι σχόλια.

Αφού δημιουργήσετε καθένα από αυτά τα αρχεία, για να ξεκινήσει ο ιστότοπος να τα εμφανίζει, πρέπει να εισαγάγετε δεδομένα για αυτά στο κύριο αρχείο index.php του προτύπου. Για να το κάνετε αυτό, καθορίστε στο index.php τις ετικέτες που οδηγούν στα ονομαζόμενα αρχεία. Για παράδειγμα:

• για να προσθέσετε ένα αρχείο κεφαλίδας ιστότοπου (header.php) γράψτε την ετικέτα

  get_header() ετικέτα προτύπου;

• για το υποσέλιδο είναι παρόμοιο, αλλά αντί για κεφαλίδα, καθορίστε το υποσέλιδο κ.λπ.

Ένα παράδειγμα συμπερίληψης ενός από τα αρχεία προτύπου στο index.php θα μοιάζει με αυτό: . Θα πρέπει να αναζητήσετε κάθε ένα από τα καθορισμένα αρχεία προτύπων κλειδιών για ξεχωριστές πληροφορίες. Βρείτε εγχειρίδια για κάθε ένα από τα αρχεία, καθώς και δείγματα, ώστε να κατανοήσετε όλες τις λειτουργίες που περιγράφονται στα πρότυπα.

Επιλογή λειτουργικότητας προτύπου

Με τον καιρό, θα αντιμετωπίσετε ένα δίλημμα - ποιον τύπο προτύπου να επιλέξετε. Ο κινητήρας παρέχει μια επιλογή. Είτε μπορείτε να επιλέξετε ένα πρότυπο με συνδεδεμένη την Ιεραρχία προτύπων είτε μια διάταξη με ετικέτες υπό όρους.

Η πρώτη επιλογή έχει ήδη εξεταστεί. Ολα τα αρχεία πρότυπο php- αυτή είναι η Ιεραρχία προτύπων. Δηλαδή, ακολουθώντας τους κανόνες αυτής της ιεραρχίας, δημιουργείτε σταδιακά ξεχωριστά αρχεία διάταξης. Έτσι, θα δημιουργήσετε ένα πλήρες πρότυπο από έναν αριθμό λειτουργικών στοιχείων php. Η ιεραρχία σε αυτή την περίπτωση λειτουργεί με βάση την αρχή της φόρτωσης κατά παραγγελία. Για παράδειγμα, εάν έχετε ένα αρχείο κατηγορίας (category.php) και ο χρήστης το έχει ζητήσει, τότε αυτό το συγκεκριμένο στοιχείο ιστότοπου θα φορτωθεί στο πρόγραμμα περιήγησης. Εάν όχι, τότε θα φορτωθεί το αρχείο προτύπου κλειδιού index.php.

Έτσι, μπορείτε να αλλάξετε την εμφάνιση για μεμονωμένα μέρη του ιστότοπου χρησιμοποιώντας την αρχή της Ιεραρχίας προτύπων. Κάθε σελίδα έχει το δικό της συγκεκριμένο αναγνωριστικό. Προσθέστε το αρχείο κατηγορίας-6.php στον κατάλογο θεμάτων και όταν ζητήσετε μια κατηγορία με αναγνωριστικό 6, αυτό το σχέδιο θα ανοίξει. Εάν δεν υπάρχει, τότε οι ρυθμίσεις θα παραμείνουν τυπικές - το index.php θα επεκταθεί.

Μερικές φορές η αρχή της ιεραρχίας προτύπων δεν αρκεί για να παρέχει την πιο άνετη εμφάνιση του προτύπου. Σε αυτή την περίπτωση, οι προγραμματιστές καταφεύγουν στη χρήση της δεύτερης αρχής - εισάγουν Ετικέτες υπό όρους. Αυτές οι ετικέτες ελέγχουν τον ιστότοπο για συμμόρφωση συγκεκριμένες συνθήκες, και αν αυτά δεν τηρούνται, αλλάζουν την εμφάνισή του. Δηλαδή, αυτές οι ετικέτες λειτουργούν με την αρχή του if/else (if/then). Επομένως, δεν χρειάζεται να προσθέσετε μια θάλασσα από αρχεία php με τον αριθμό κάθε κατηγορίας, αλλά μπορείτε να γράψετε τις προϋποθέσεις για κάθε αναγνωριστικό μία φορά.

Πώς είναι η διάταξη της διάταξης psd στο WordPress

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

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

Το PSD είναι ένα αρχείο από την εφαρμογή Photoshop. Είναι σαν γραφική εικόνατο σχέδιό σας. Για να το φτιάξετε, πρέπει επεξεργαστής κειμένουπροσθήκη σήμανσης html. Σταδιακά, θα αλλάξετε κάθε ένα από τα σημεία αυτής της σήμανσης, επιτυγχάνοντας το τελικό αποτέλεσμα, το οποίο φαίνεται στη διάταξη. Υποδείξτε αμέσως το κεντράρισμα του προτύπου σας, καθώς και τις διαστάσεις των διαφορετικών τμημάτων του.

Το επόμενο βήμα είναι η προσθήκη εικόνες φόντου. Μπορείτε επίσης να τα φτιάξετε μόνοι σας χρησιμοποιώντας την ίδια εφαρμογή Photoshop. Η ευκολότερη επιλογή είναι να δημιουργήσετε εικόνες φόντου με διαβάθμιση. Στη συνέχεια, ξεκινήστε τη δημιουργία του λογότυπου. Επιλύστε σταδιακά όλα τα αιτήματα που έχουν προκύψει - προσαρμόστε την κεφαλίδα, το υποσέλιδο, την πλαϊνή γραμμή και όλα τα μέρη του ιστότοπου, σύμφωνα με τη διάταξη που έχει γίνει. Μην ξεχάσετε να προσθέσετε σημαντικά αρχεία προτύπων στον κατάλογό του, ώστε ο ιστότοπος να φορτώνει σύμφωνα με τις απαιτήσεις σας.

Μόνο έτσι μαθαίνοντας σταδιακά τα βασικά διαφορετικές γλώσσεςπρογραμματισμού, μπορείτε να μάθετε πώς να φτιάξετε έναν ιστότοπο μόνοι σας. Κανείς δεν λέει ότι θα τα καταφέρεις σήμερα ή αύριο. Ίσως θα χρειαστείτε μήνες για να κατανοήσετε όλα τα χαρακτηριστικά της διαδικασίας διάταξης. Αλλά μην ανησυχείτε - για κάποιους χρειάζονται χρόνια. Τώρα γνωρίζετε την κατά προσέγγιση διαδικασία για τη δημιουργία ενός προτύπου από την αρχή, καθώς και τη μεταφορά της διάταξης psd σε ένα έτοιμο θέμα για έναν πόρο Διαδικτύου στη μηχανή WordPress.

Θα δούμε πώς δημιουργείται ένα έτοιμο πρότυπο WordPress, έτοιμο για εγκατάσταση στο hosting. Για να γίνει αυτό, δημιουργούνται αρχεία php με βάση το αρχείο index.htm, καθένα από τα οποία είναι υπεύθυνο για το αντίστοιχο τμήμα του προτύπου WordPress. Συγκεκριμένα, πρόκειται για αρχεία που ελέγχουν την κεφαλίδα του ιστότοπου, την εμφάνιση της κύριας σελίδας, την πλαϊνή γραμμή, τα αρχεία, τη σελίδα αναζήτησης, τη μεμονωμένη ανάρτηση, τη μεμονωμένη σελίδα και τα σχόλια. Θέλω να πω αμέσως ότι σε αυτό το στάδιο θα ήταν ωραίο να έχουμε κάποιες βασικές γνώσεις, ιδίως για να κατανοήσουμε τι είναι οι ετικέτες προτύπων.

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

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

Όλα τα αρχεία προτύπων WordPress
Τώρα απομένει να δημιουργήσουμε ένα πρότυπο WordPress με βάση τη διάταξη του ιστότοπου. Η παρακάτω εικόνα δείχνει τυπικό σεταρχεία προτύπων wordpress. Στο προηγούμενο σεμινάριο, δημιουργήσαμε έναν φάκελο εικόνεςκαι αρχείο στυλ.css. Έχουμε και αρχείο ευρετήριο.htm, από το οποίο θα ληφθούν τμήματα κώδικα και θα αντιγραφούν στα κατάλληλα αρχεία php. Και μετά μέσα phpΤα αρχεία εισάγονται με εντολές του WordPress και έτσι σχηματίζονται phpαρχεία προτύπων wordpress.

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

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

) εισάγεται στο αρχείο header.phpκαι μετά ενσωματώνονται στον κώδικα εντολών του WordPress. Σημειώνονται με κόκκινο χρώμα στην εικόνα. Κάντε κλικ στην εικόνα για να την δείτε σε μεγάλο μέγεθος.

Ευρετήριο.php
Αυτό το αρχείο είναι υπεύθυνο για την εμφάνιση αυτού που βλέπει ο χρήστης αρχική σελίδαιστοσελίδα. Το αρχείο δημιουργείται με τον ίδιο τρόπο. index.php. Αντιγραφή κομματιού κώδικα από ευρετήριο.htmκαι γεμάτη με εντολές WordPress. Κάντε κλικ στην εικόνα για να την δείτε σε μεγάλο μέγεθος.

πλαϊνή γραμμή.php
Αυτό το αρχείο είναι υπεύθυνο για την εμφάνιση στοιχείων στην πλαϊνή γραμμή. Κόψαμε επίσης τον κωδικό από ευρετήριο.htm(ολόκληρος div id="side") και επικολλήστε το στο αρχείο πλαϊνή γραμμή.php. Στη συνέχεια, όπως και πριν, εισάγετε τις εντολές του WordPress. Κάντε κλικ στην εικόνα για να την δείτε σε μεγάλο μέγεθος.

Αρχείο.php
Υπεύθυνος για την έκδοση αρχειακών αρχείων του ιστότοπου. Για να δημιουργήσουμε αυτό το αρχείο, αντιγράφουμε πλήρως τα περιεχόμενα του αρχείου index.phpκαι εισάγετε σε archive.phpκαι, στη συνέχεια, εισαγάγετε ένα κομμάτι κώδικα (7 γραμμές) μεταξύ των γραμμών και

Search.php
Αυτό το αρχείο είναι υπεύθυνο για τα αποτελέσματα αναζήτησης. Για να δημιουργήσουμε αυτό το αρχείο, αντιγράφουμε πλήρως τα περιεχόμενα του αρχείου index.phpκαι εισάγετε σε αναζήτηση.phpκαι, στη συνέχεια, εισαγάγετε ένα κομμάτι κώδικα (1 γραμμή) μεταξύ των γραμμών και . Δείτε πώς γίνεται στην παρακάτω εικόνα. Κάντε κλικ στην εικόνα για να την δείτε σε μεγάλο μέγεθος.

Single.php
Αυτό το αρχείο βγάζει μια ανάρτηση. Κάντε κλικ στην εικόνα για να την δείτε σε μεγάλο μέγεθος.

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

Ζωντανό πρότυπο επίδειξης
Εάν κάνετε κλικ στην εικόνα, μπορείτε να δείτε το έτοιμο πρότυπο WordPress στο διαδίκτυο.

ΥΣΤΕΡΟΓΡΑΦΟ. Φρουρά. Και ξέρετε, για να ξεκινήσετε να φτιάχνετε σχέδια, πρέπει να μάθετε τα εργαλεία και τις λειτουργίες του Photoshop. Σε αυτή την περίπτωση θα σας βοηθήσουν τα μαθήματα Photoshop, τα οποία θα σας δώσουν το απαραίτητο βασικό επίπεδο γνώσεων.

Εάν διαβάζετε αυτό το άρθρο, το πιθανότερο είναι ότι έχετε έναν πολύ όμορφο σχεδιασμό ιστότοπου, πιθανώς κατασκευασμένο Adobe Photoshopκαι αποθηκεύστε σε μορφή PSD, JPG, PDF, AI ή PNG. Τώρα θέλετε να μετατρέψετε αυτό το αρχείο εικόνας σε θέμα WordPress, ώστε να μπορείτε να το εφαρμόσετε στον ιστότοπο ή το blog σας που μόλις δημιουργήσατε. Μπορεί επίσης να το επιθυμείτε Μετατροπέας PSD σε WordPress -Αλλά τι θα γινόταν αν μπορούσες να κάνεις αυτή τη μεταμόρφωση μόνος σου και αυτό επίσης ειναι δωρεάν!

Πολλοί άνθρωποι που είναι καλοί στη γραφιστική έρχονται σε αυτό το σημείο να μετατρέψουν θέματα PSD σε WordPress. Και νιώθουν κολλημένοι! Αλλά δεν φταίνε αυτοί. Η δημιουργία ενός ιστότοπου απαιτεί όχι μόνο την ικανότητα παραγωγής σχεδίων με εντυπωσιακή εμφάνιση, αλλά χρειάζεται επίσης κάποιες δεξιότητες προγραμματισμού. Πρέπει να είστε ειδικός τουλάχιστον σε HTML, CSS, JavaScript, jQuery και Προγραμματισμός PHPνα γυρίσει το δικό σου αρχείο PSDσε μια ιστοσελίδα. Το πρόβλημα είναι ότι οι περισσότεροι άνθρωποι είναι είτε καλός σχεδιαστής είτε καλός προγραμματιστής!

Ωστόσο, μην ανησυχείτε. Δεν είναι τόσο δύσκολο να μετατρέψετε το PSD σε θέμα WordPress. Το μόνο που χρειάζεται να γνωρίζετε είναι τα σωστά βήματα που πρέπει να κάνετε. Σε αυτό το άρθρο θα σας πω το ίδιο! Ας αρχίσουμε να μαθαίνουμε.

Τι είναι ένα αρχείο PSD;

Όσοι δεν ξέρουν Το PSD σημαίνει Έγγραφο Photoshop.Αυτή είναι η μορφή αρχείου στην οποία το Adobe Photoshop αποθηκεύει εκτελέσιμα αρχεία. Μπορείτε να ανοίξετε τα αρχεία PSD στο Photoshop και να κάνετε περαιτέρω αλλαγές στο σχέδιο όπως θέλετε. Τα αρχεία PSD ονομάζονται έτσι μερικές φορές ανοιχτά αρχεία (αναφερόμενος στο γεγονός ότι αυτά τα αρχεία μπορούν να επεξεργαστούν).

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

Τι είναι το WordPress;

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

Ο σχεδιασμός ιστοσελίδων με βάση το WordPress ονομάζεται θέμα(και μερικές φορές, δείγμα).

Μετατροπή PSD σε Θέμα WordPress

Βήμα 1: Κόψτε το αρχείο PSD

Μόλις το αρχείο PSD είναι έτοιμο, το πρώτο πράγμα που πρέπει να κάνετε είναι να το σπάσετε σε κομμάτια. Για ποιο λόγο? Λοιπόν, επειδή μια εικόνα θα είναι μεγάλο σε μέγεθος και θα χρειαστεί περισσότερος χρόνος για να φορτωθεί. Επιπλέον, θα πρέπει να συσχετίσετε διαφορετικές συμπεριφορές με διαφορετικά τμήματα εικόνας. Επομένως, πρέπει να το κόψετε.

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

Το Adobe Photoshop σάς επιτρέπει να χρησιμοποιείτε επίπεδα. Διαθέτει ένα ενσωματωμένο αντικείμενο για να κόψετε το PSD και να αποθηκεύσετε τα τμήματα που προκύπτουν ως ξεχωριστά αρχεία εικόνας. Μπορείτε να αποθηκεύσετε αυτές τις εικόνες σε μορφές JPG ή PNG. Εάν χρειάζεστε διαφάνεια για να εργαστείτε σε οποιοδήποτε από αυτά τα τμήματα, τότε πρέπει να το αποθηκεύσετε Μορφή PNGεπειδή το JPG δεν υποστηρίζει διαφάνεια.

Όταν κόβετε μια εικόνα, πρέπει να είστε ακριβείς. Το σφάλμα ακόμη και ενός μόνο pixel μπορεί να κάνει δύο μέρη ακατάλληλα για ένα αντίγραφο.

Ενώ κόβετε ένα PSD για να το μετατρέψετε σε θέμα WordPress, πρέπει να το καταλάβετε αυτήν τη στιγμή ώρα cssαρκετά ισχυρό και μπορεί να δημιουργήσει μια σειρά στοιχείων με λίγες μόνο γραμμές κώδικα. Για παράδειγμα, μπορείτε να δημιουργήσετε μονόχρωμα φόντο, ντεγκραντέ, κουμπιά ΔΙΑΦΟΡΕΤΙΚΟΙ ΤΥΠΟΙ, γραμμές, βέλη και ειδικοί χαρακτήρες, μόνο με χρησιμοποιώντας CSS. Με αυτόν τον τρόπο δεν χρειάζεται να αποθηκεύσετε αυτά τα πράγματα ως εικόνες. Λιγότερες εικόνες, πιο γρήγορα θα φορτώσει ο ιστότοπός σας.

Το παρακάτω βίντεο του YouTube δείχνει ακριβώς πώς να κόψετε σε φέτες ένα αρχείο PSD και να το αποθηκεύσετε ως διαφορετικές εικόνες:

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

Βήμα 2: Δημιουργήστε αρχεία HTML και CSS

Τώρα ξεκινά το κύριο μέρος κωδικοποίησης της διαδικασίας μετατροπής του PSD σε ιστότοπο. Βασικά πρέπει να δημιουργήσετε μια ιστοσελίδα και να συναρμολογήσετε όλες τις κομμένες εικόνες με τέτοιο τρόπο ώστε να μοιάζει ακριβώς με το PSD σας.

Πρώτα πρέπει να δημιουργήσετε ένα αρχείο HTML. Μπορείτε να το ονομάσετε όπως θέλετε, αλλά κατά σύμβαση ας το πούμε ευρετήριο.htm.Σε αυτό το αρχείο, θα χρειαστεί να γράψετε κώδικα HTML ή XHTML για να εμφανίσετε διαφορετικά μέρη της εικόνας από το PSD σας. Για να δημιουργήσετε μια διάταξη θεμελίωσης, μπορείτε να χρησιμοποιήσετε στοιχεία DIV. Τα στοιχεία DIV είναι πολύ ευέλικτα. Μπορείτε να τοποθετήσετε στοιχεία DIV το ένα δίπλα στο άλλο, να επικαλύπτονται, το ένα πάνω στο άλλο. Μπορείτε να ευθυγραμμίσετε το κέντρο ενός στοιχείου DIV προς τα αριστερά και προς τα δεξιά και μπορείτε να το τοποθετήσετε πολύ συγκεκριμένα σε συγκεκριμένες συντεταγμένες στην ιστοσελίδα.

Σε αυτά τα στοιχεία DIV μπορείτε να καλέσετε τις αποθηκευμένες εικόνες και να τις εμφανίσετε ως έχουν ή ως φόντο στο DIV.

Αφού ολοκληρώσετε αυτήν τη βασική διάταξη της ιστοσελίδας σας, θα πρέπει στυλ τογια να το κάνετε ίδιο με το PSD σας. Για το στυλ, πρέπει να χρησιμοποιήσετε κανόνες Cascading Style Sheets (CSS). Με αυτούς τους κανόνες, μπορείτε να χρησιμοποιήσετε διαφορετικά στυλ γραμματοσειράς, μεγέθη, χρώματα, σκιές κειμένου, κλίμακα του γκρι εικόνας, περιγράμματα κ.λπ.

Για να γράψετε κανόνες στυλ CSS, πρέπει να δημιουργήσετε ένα άλλο αρχείο που ονομάζεται στυλ.cssκαι μετά καλέστε αυτό το αρχείο css ευρετήριο.htm.Στυλ που υπάρχουν σε στυλ.cssθα ισχύει για διάφορα στοιχείαστα αρχεία HTML σας.

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

Εκμάθηση για HTML

1. Εκμάθηση HTML W3Schools
2. TutorialsPoint HTML Tutorials
3. HTML.net
4. HTML Dog

Εκμάθηση CSS

1. Εκμάθηση CSS
2. Εκμάθηση W3Schools CSS
3. Tuts Plus
4. Βασικά CSS

Βήμα 3: Σπάζοντας ένα αρχείο HTML σε αρχεία θεμάτων WordPress

Στο αυτή τη στιγμήστη διαδικασία μετατροπής ενός PSD σε θέμα WordPress, θα έχετε ένα αρχείο HTML (index.html)και ένα αρχείο css (styles.css).Στο τρίτο βήμα, θα χρειαστεί να χωρίσετε το αρχείο HTML ανάλογα Θέμα δομής WordPress.Ταραγμένος? Λοιπόν, το WordPress έχει ένα προκαθορισμένο σύνολο αρχείων που ονομάζονται μαζί για να δημιουργήσουν μια ιστοσελίδα. Για παράδειγμα, κατά την εμφάνιση μιας ανάρτησης, το WordPress απαιτεί μεταξύ άλλων τα περιεχόμενα μιας κεφαλίδας αρχείου, ενός αρχείου zip, ενός αρχείου πλευρικής γραμμής και ενός υποσέλιδου. Αλλά έχετε όλο τον κώδικα σε ένα μόνο αρχείο - ευρετήριο.htm.Επομένως, θα χρειαστεί να αναδιανείμετε τον κώδικα ευρετήριο.htmσε διάφορα αρχεία wp. Βασικά είναι μια δουλειά κομμένης πάστας! Ακολουθεί μια λίστα με μερικά από τα σημαντικά αρχεία θεμάτων για το WordPress:

• archive.php
• κατηγορίες.php
• σχόλια.php
• υποσέλιδο.php
• header.php
• index.php
• σελίδα.php
• αναζήτηση.php
• πλαϊνή γραμμή.php
• single.php
• στυλ.css
• 404.php

Για να δημιουργήσετε ένα βασικό θέμα WordPress, θα θέλατε να δημιουργήσετε τουλάχιστον header.php, footer.php, πλαϊνή γραμμή.php single.phpκαι index.php

Απλώς δημιουργήστε αυτά τα αρχεία PHP σε οποιοδήποτε πρόγραμμα επεξεργασίας κειμένου σημειωματάριο και αντιγράψτε τον σχετικό κώδικα από ευρετήριο.htmσε αυτά τα αρχεία. Ο κώδικας, δημιουργήστε το τμήμα επικεφαλίδας θα μπει header.php,ο κωδικός υποσημείωσης θα πάει στο υποσέλιδο.php... ούτω καθεξής και ούτω καθεξής.

Εάν δεν είστε πολύ εξοικειωμένοι με την PHP, μπορεί να δυσκολευτείτε να δημιουργήσετε σωστά αυτά τα αρχεία. Υπάρχουν μερικά πραγματικά καλά και δωρεάν διαδικτυακά μαθήματαΓια εκμάθηση PHP. Το W3Schools και το PHP.net παρέχουν εύκολα κατανοητά Βοήθεια PHP. Μπορείτε να περάσετε από αυτά τα σεμινάρια για να πάρετε μια αίσθηση για την PHP.

ΕΠΟΜΕΝΟ βίντεο youtubeθα σας βοηθήσει να κατανοήσετε πώς να ρυθμίσετε ένα "γυμνό θέμα WordPress" (βασικά σημαίνει -Ένα κενό θέμα του WodPress.

Βήμα 4: Προσθήκη δυνατοτήτων και ετικετών του WordPress

Τώρα ήρθε η ώρα να μετατρέψετε τα απλά αρχεία PHP σε αρχεία θεμάτων WordPress. Για να το κάνετε αυτό, θα χρειαστεί να προσθέσετε ετικέτες WordPress στα αρχεία. Αλλά μπορείτε να ρωτήσετε τι ακριβώς είναι οι ετικέτες WordPress;

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

Ας δούμε ένα παράδειγμα για να το καταλάβουμε καλύτερα. Στην αρχική σελίδα (index.php), μπορείτε να εμφανίσετε τη λίστα Πρόσφατες δημοσιεύσεις. Αυτή η λίστα θα πρέπει να αλλάζει αυτόματα τον τρόπο και το πότε κάνετε μια νέα ανάρτηση. Μπορείτε να γράψετε το δικό σας Συναρτήσεις PHPγια να εξαγάγετε δεδομένα ανάρτησης από τη βάση δεδομένων και να τα εμφανίσετε στην κύρια σελίδα. Αλλά οι δημιουργοί του WordPress έχουν κάνει τη ζωή σας πιο εύκολη! Δεν θα χρειαστεί να γράψετε το δικό σας λεπτομερείς λειτουργίες. Απλά χρησιμοποιήστε wp_get_recent_posts($arg, $output)από το WordPress και δείτε μια λίστα με τις πρόσφατες αναρτήσεις που εμφανίζονται!

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

• Ετικέτες προτύπων WordPress
• Σύνδεσμος λειτουργιών WordPress

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

Μπορείτε επίσης να συμπεριλάβετε σε ένα αρχείο εικόνας με το όνομα screenshot.jpgή screenshot.png.Αυτό το αρχείο θα εμφανίζεται ως μικρογραφία του θέματός σας. Είναι εύκολο να μάθετε πώς να τραβάτε ένα στιγμιότυπο οθόνης.

Η λίστα των αρχείων σε ένα τυπικό θέμα WordPress μπορεί να μοιάζει με την εξής:

Πρέπει να ανεβάσετε το φάκελο θέματος στον φάκελο /wp-content/themes Εγκαταστάσεις WordPress. Για παράδειγμα, εάν ονομάσετε το θέμα Minerva -Τότε τα αρχεία θέματος θα πρέπει να είναι μέσα / wp-content / θέματα / Minerva

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

Ρίξτε μια ματιά στο παρακάτω βίντεο για να δείτε την περαιτέρω διαδικασία:

Βήμα 5: Προσθέστε περισσότερες λειτουργίες όπως αναζήτηση και προσαρμοσμένες λειτουργίες

Το θέμα σας WordPress είναι ήδη σε λειτουργία. Το ταξίδι από το θέμα PSD στο WordPress έχει ολοκληρωθεί. Αλλά μπορείτε ακόμα να προσθέσετε περισσότερα λειτουργικότηταστο θέμα σου.

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

Επιπλέον, μπορείτε να δημιουργήσετε τις δικές σας συναρτήσεις PHP και να τις χρησιμοποιήσετε σε διάφορες άλλες Αρχεία PHP. Πρέπει να δημιουργήσετε ένα αρχείο λειτουργίες.phpγια να διατηρήσετε τις προσαρμοσμένες λειτουργίες σε ένα μέρος.

Για να αντιμετωπίσετε σφάλματα 404 (η σελίδα δεν βρέθηκε), μπορείτε να δημιουργήσετε ένα αρχείο 404.php.Το WordPress θα εμφανίζει τα περιεχόμενα αυτού του αρχείου κάθε φορά που κάποιος προσπαθεί να αποκτήσει πρόσβαση στη διεύθυνση URL του ιστότοπού σας που δεν υπάρχει.

Μπορείτε επίσης να προσθέσετε μερικά Λειτουργίες JavaScript. Η JavaScript είναι η πιο ευρέως χρησιμοποιούμενη γλώσσα δέσμης ενεργειών από την πλευρά του πελάτη. Μπορείτε να γράψετε συναρτήσεις JavaScript σε αρχεία .jsκαι καλέστε αυτές τις συναρτήσεις στα αρχεία σας PHP. Για παράδειγμα, η επικύρωση φόρμας είναι κάτι που συνήθως γίνεται με JavaScript. Εάν ένας χρήστης προσπαθεί να βρει κάτι στον ιστότοπό του χωρίς να πληκτρολογήσει λέξεις-κλειδιάστο πλαίσιο αναζήτησης, είναι η JavaScript που λέει στον χρήστη ότι πρέπει να εισαγάγει κριτήρια αναζήτησης.

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

Δωρεάν μετατροπείς PSD σε WordPress

έπεσα πάνω λογισμικό Elemente από την DivineProjects. Μπορείτε να κατεβάσετε αυτό το πρόγραμμα δωρεάν και θα μετατρέψει το PSD σας σε ένα έτοιμο προς χρήση θέμα WordPress με πλήρεις δυνατότητες. Αυτό το λογισμικό λειτουργεί σαν πρόσθετο Photoshop.

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

Μόλις πριν από λίγα χρόνια, εμφανίστηκε μια νέα σειρά υπηρεσιών που προσφέρουν την αυτόματη μετατροπή του σχεδιασμού της ιστοσελίδας σας από ένα αρχείο Photoshop. .PSDσε κώδικα HTML + CSSειναι δωρεάν. Κάποτε έμοιαζε με μια αδέξια προσπάθεια αυτοματοποίησης της εργασίας η καλύτερη ποιότητα, αλλά τώρα αυτές οι υπηρεσίες έχουν εξελιχθεί ώστε να προσφέρουν πλήρη ενοποίηση με συστήματα διαχείρισης περιεχομένου (όπως το WordPress).

Σε αυτό το άρθρο, θα σας παρουσιάσω μερικές αρκετά καλές υπηρεσίες που θα σας βοηθήσουν να εξοικονομήσετε χρόνο και χρήμα.

1 DevPress

Ο συγγραφέας αυτής της υπηρεσίας είναι ο Tung Do, ένας εξαιρετικός σχεδιαστής και προγραμματιστής WordPress που με έκανε χαρούμενο με το νέο του προϊόν. Η υπηρεσία που προσφέρει είναι ικανή για: Σχεδιασμό θεμάτων, κωδικοποίηση XHTML/CSS, ανάπτυξη θεμάτων XHTML-to-WordPress και διαχείριση ιστότοπου.

2. WP από PSD

Μια ομάδα επαγγελματιών κωδικοποιητών θα σας βοηθήσει να μετεγκαταστήσετε το σχέδιό σας σε ένα τυπικό θέμα WordPress μεταξύ προγραμμάτων περιήγησης. Όλες οι εργασίες υπόσχονται να γίνουν με τα υψηλότερα πρότυπα. ΧΑΜΗΛΕΣ ΤΙΜΕΣκαι στο όσο το δυνατόν συντομότερα. Απλά πρέπει να εμπιστευτούμε τα παιδιά :)

3. Κωδικοποίηση ατόμων

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

4. Καμβάς WP

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

5. PSD σε WP

Εάν έχετε δημιουργήσει έναν εξαιρετικό σχεδιασμό ιστότοπου και χρειάζεστε μια γρήγορη και υψηλής ποιότητας διάταξη, η υπηρεσία PSDtoWordPress θα σας βοηθήσει σε αυτό. Μετατρέψτε το σχέδιό σας σε έτοιμο θέμα WordPress με το PSDtowordpress.

6.PixelWP

Το PixelWP.com παρέχει στους πελάτες του έναν εξαιρετικό μετατροπέα προτύπων PSD σε wordpress στον οποίο μπορείτε να βασιστείτε. Μπορείτε να είστε σίγουροι ότι το σχέδιό σας θα υλοποιηθεί με υψηλή ποιότητα και έγκαιρα.

7. PSD σε Οποιοδήποτε

Η υπηρεσία μπορεί να δημιουργήσει ένα έτοιμο θέμα WordPress από τη συνημμένη διάταξη σχεδίασης. Εάν δεν έχετε δεξιότητες προγραμματισμού και εργάζεστε με αρχεία θεμάτων, αυτή η υπηρεσία σίγουρα θα σας φανεί χρήσιμη!

8. PSD 2 HTML

Η υπηρεσία κυκλοφόρησε για πρώτη φορά το 2005. Το P2H.com / PSD2HTML.com ήταν το πρώτο στο είδος του και έχει προσελκύσει περισσότερους από 50.000 πελάτες.

9.HTML Cut

Το HTMLcut είναι μια υπηρεσία βήμα προς βήμα προς εφαρμογή τελειωμένος κωδικόςαπό το σχέδιό σας. Ανεβάζετε Διάταξη PSD, - τα υπόλοιπα είναι μέχρι HTMLcut.

10. RapidXHTML

Αν θέλετε να μετατρέψετε το σχέδιό σας σε έτοιμο blogή έναν ιστότοπο σε ένα CMS, το RapidxHTML είναι το κατάλληλο για εσάς. Η υπηρεσία υποστηρίζει δημοφιλείς πλατφόρμες όπως wordpress, Blogger, Drupal, Joomla και Magento.