Μετατροπή HTML σε WordPress (Βήμα προς βήμα)


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


Ωστόσο, αυτό δεν σημαίνει ότι οι στατικοί ιστότοποι HTML δεν υπάρχουν πλέον. Στην πραγματικότητα, το HTML5, η τελευταία επανάληψη της γλώσσας σήμανσης, είναι πολύ ισχυρό και σας επιτρέπει να δημιουργήσετε ποιοτικούς ιστότοπους χωρίς CMS πίσω τους.

Ωστόσο, το αυξανόμενο μερίδιο αγοράς του WordPress δείχνει ότι όλο και περισσότεροι άνθρωποι μεταβαίνουν στην πλατφόρμα.

Μερίδιο αγοράς WordPress το 2019

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

Παρακάτω, θα σας δείξουμε διάφορους τρόπους για να μετατρέψετε από HTML σε WordPress. Πρώτον, θα μάθετε ποιες είναι οι διαφορετικές επιλογές καθώς και τα πλεονεκτήματα και τα μειονεκτήματά τους. Μετά από αυτό, θα σας δείξουμε πώς να εκτελέσετε καθένα από αυτά βήμα προς βήμα.

Ας ξεκινήσουμε.

Contents

Οι 3 τρόποι μετάβασης από το στατικό HTML στο WordPress

Για να μετακινηθείτε από HTML σε WordPress, πρέπει να μετατρέψετε το σχεδιασμό HTML σε θέμα WordPress. Ένα θέμα ελέγχει την εμφάνιση και την αίσθηση ενός ιστότοπου WordPress, ενώ η λειτουργικότητα παρέχεται από το ίδιο το CMS καθώς και πρόσθετα πρόσθετα.

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

Α) Μη αυτόματη μετατροπή HTML σε θέμα WordPress

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

Δεν είναι πολύ περίπλοκο, ειδικά αν έχετε εμπειρία κωδικοποίησης. Μπορείτε να το ξεπεράσετε με λίγο HTML, CSS και κάποιες γνώσεις PHP. Πολλά από αυτά είναι αντιγραφή και επικόλληση.

Το μειονέκτημα: ενώ θα καταλήξετε σε ένα λειτουργικό θέμα WordPress, δεν θα έχει όλες τις δυνατότητες που προσφέρει το WordPress. Για παράδειγμα, αν δεν το δημιουργήσετε μετά το γεγονός, ο ιστότοπός σας δεν θα διαθέτει περιοχές widget ή τη δυνατότητα αλλαγής του μενού από το backend του WordPress.

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

Β) HTML σε WordPress μέσω παιδικού θέματος WordPress

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

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

Γ) Εισαγωγή περιεχομένου από HTML στο WordPress με χρήση της προσθήκης

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

A) Τρόπος μη αυτόματης μετατροπής HTML σε θέμα WordPress

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

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

1. Δημιουργήστε ένα φάκελο θεμάτων και βασικά αρχεία

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

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

  • style.css
  • index.php
  • header.php
  • sidebar.php
  • footer.php

Μην κάνετε τίποτα μαζί τους, διατηρήστε τα αρχεία ανοιχτά στον επεξεργαστή. Θα τα χρειαστείτε σύντομα.

2. Αντιγράψτε το υπάρχον CSS στο φύλλο στυλ WordPress

Τώρα ήρθε η ώρα να προετοιμάσετε το φύλλο στυλ του WordPress (το αρχείοstyle.css μόλις δημιουργήσατε) για να αντιγράψετε το CSS του παλιού σας ιστότοπου. Για αυτό, ανοίξτε το αρχείο και επικολλήστε τα εξής:

/ *
Όνομα θέματος: Είκοσι δεκατρία
URI θέματος: http://wordpress.org/themes/twentythirteen
Συγγραφέας: η ομάδα του WordPress
Συγγραφέας URI: http://wordpress.org/
Περιγραφή: Το θέμα του 2013 για το WordPress μας επιστρέφει στο ιστολόγιο, με ένα πλήρες φάσμα μορφών ανάρτησης, το καθένα εμφανίζεται όμορφα με τον δικό του μοναδικό τρόπο. Οι λεπτομέρειες σχεδίασης αφθονούν, ξεκινώντας με έναν ζωντανό συνδυασμό χρωμάτων και εικόνες κεφαλίδας που ταιριάζουν, όμορφη τυπογραφία και εικονίδια και μια ευέλικτη διάταξη που φαίνεται υπέροχη σε οποιαδήποτε συσκευή, μεγάλη ή μικρή.
Έκδοση: 1.0
Άδεια χρήσης: GNU General Public License v2 ή μεταγενέστερη έκδοση
URI άδειας: http://www.gnu.org/licenses/gpl-2.0.html
Ετικέτες: μαύρο, καφέ, πορτοκαλί, μαύρισμα, λευκό, κίτρινο, ελαφρύ, μία στήλη, δύο στήλες, δεξιά πλευρική γραμμή, εύκαμπτο πλάτος, προσαρμοσμένη κεφαλίδα, προσαρμοσμένο μενού, στυλ επεξεργαστή, επιλεγμένες εικόνες, μικρομορφές, post-formats, rtl-language-support, sticky-post, μετάφραση-έτοιμη
Τομέας κειμένου: είκοσι δεκατρία

* /

Αυτή είναι η λεγόμενη κεφαλίδα φύλλου στυλ (Σημαντικό: μην αφήσετε το σχόλιο/*...*/ ετικέτες!). Συμπληρώστε σε κάθε μέρος ως εξής:

  • Όνομα θέματος – Ακολουθεί το όνομα του θέματος. Μπορεί να είναι οτιδήποτε θέλετε, αλλά συνήθως είναι το ίδιο με το όνομα του φακέλου θεμάτων σας.
  • URI θέματος – Θα δημοσιεύατε συνήθως την αρχική σελίδα του θέματος εδώ, αλλά μπορείτε να χρησιμοποιήσετε τη δική σας διεύθυνση ιστότοπου.
  • Συντάκτης – Αυτός είσαι. Βάλτε το όνομά σας εδώ ή ό, τι θέλετε να κληθείτε.
  • Συγγραφέας URI – Ένας σύνδεσμος προς την αρχική σας σελίδα. Μπορεί να είναι αυτό που χτίζετε ή ό, τι έχει νόημα.
  • Περιγραφή – Προαιρετική περιγραφή του θέματος. Αυτό θα εμφανιστεί στο backend του WordPress.
  • Εκδοχή – Η έκδοση του θέματος σας. Δεδομένου ότι δεν το δημοσιεύετε, δεν έχει σημασία. Συνήθως βάζουμε 1,0 εδώ.
  • Άδεια, URI άδειας, Ετικέτες – Αυτά τα πράγματα είναι σημαντικά μόνο εάν σκοπεύετε να υποβάλετε το θέμα σας στο Κατάλογος θεμάτων WordPress. Μπορείτε να τους αφήσετε έξω σε αυτήν την περίπτωση, τους συμπεριλάβαμε μόνο για λόγους ολοκλήρωσης.

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

3. Διαχωρίστε την υπάρχουσα HTML σας

Για το επόμενο μέρος, πρέπει να καταλάβετε ότι το WordPress χρησιμοποιεί συνήθως PHP για να αντλεί πληροφορίες από τη βάση δεδομένων του. Για αυτόν τον λόγο, πρέπει να κόψετε το υπάρχον HTML σε διαφορετικά κομμάτια, ώστε το CMS να τα συνδυάσει σωστά.

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

html σε wordpress σελίδα παραδείγματος

Όπως μπορείτε να δείτε, είναι ένα τυπικό πρότυπο HTML που περιλαμβάνει κεφαλίδα, περιοχή περιεχομένου, πλευρική γραμμή και υποσέλιδο. Ο συνοδευτικός κωδικός είναι ο εξής:





Τίτλος ιστότοπου







Τίτλος ιστότοπου

  • nav στοιχείο # 1
  • nav στοιχείο # 2
  • nav στοιχείο # 3

Τίτλος άρθρου

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas προσωρινά. Nunc vel Vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. Στο εξάμηνο, το eu porta velit mollis nec.

Υπότιτλος

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas προσωρινά. Nunc vel Vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. Σε εξάμηνο, το eu porta velit mollis π.δ.κ.α. Curabitur posuere enim eget turpis feugiat sementara. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Συμμετέχετε στην ευκολία pharetra.

Υπότιτλος

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas προσωρινά. Nunc vel Vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. Σε εξάμηνο, το eu porta velit mollis π.δ.κ.α. Curabitur posuere enim eget turpis feugiat sementara. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Συμμετέχετε στην ευκολία pharetra.

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

Αρχικά, ανοίξτε το τρέχον index.html (το κύριο αρχείο του ιστότοπού σας HTML). Μετά από αυτό, διαβάστε τα αρχεία WordPress που δημιουργήσατε πρόσφατα και αντιγράψτε τα παρακάτω (τα παρακάτω παραδείγματα είναι η σήμανση μου):

header.php

Τα πάντα, από την αρχή του αρχείου HTML έως την κύρια περιοχή περιεχομένου (συνήθως υποδηλώνεται με

ή

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




Τίτλος ιστότοπου






Τίτλος ιστότοπου

  • nav στοιχείο # 1
  • nav στοιχείο # 2
  • nav στοιχείο # 3

sidebar.php

Όλα όσα ανήκουν στην ενότητα

Μετά από αυτό, τελειώσατε με index.html και μπορεί να το κλείσει. Αποθηκεύστε όλα τα άλλα αρχεία στο φάκελο θέματος και κλείστε τα εκτός από header.php και index.php. Έχετε κάποια δουλειά να κάνετε μαζί τους.

4. “WordPressify” Header.php και Index.php

Για την κεφαλίδα, το μόνο που μένει είναι να αλλάξετε την κλήση για το φύλλο στυλ από HTML σε μορφή WordPress. Για να το κάνετε αυτό, αναζητήστε έναν υπάρχοντα σύνδεσμο στο Ενότητα. Μπορεί να μοιάζει κάπως έτσι:

Αντικαταστήστε το με αυτό:

Ωραία, τώρα μπορείτε να αποθηκεύσετε και να κλείσετε header.php. Στη συνέχεια, στρίψτε index.php. Θα πρέπει να είναι άδειο αυτή τη στιγμή. Έτσι, πρώτα, αντιγράψτε και επικολλήστε αυτές τις γραμμές κώδικα:




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

Το τελευταίο είναι το μέρος του WordPress όπου το CMS εξάγει περιεχόμενο που δημιουργήθηκε στο backend. Είναι σημαντικό αν θέλετε το WordPress να προσθέτει περιεχόμενο δυναμικά στις σελίδες σας, το οποίο θα εισαγάγετε αργότερα. Για το σκοπό αυτό, επικολλήστε το εδώ αμέσως μετά :


Τώρα, αποθηκεύστε index.php αρχείο και κλείστε το. Μπράβο! Το βασικό σας θέμα είναι έτοιμο. Τώρα μπορείτε να το προσθέσετε στον νέο σας ιστότοπο WordPress.

5. Δημιουργήστε ένα στιγμιότυπο οθόνης και ανεβάστε ένα θέμα

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

Για να το κάνετε αυτό, ανοίξτε τον υπάρχοντα ιστότοπό σας σε ένα πρόγραμμα περιήγησης και τραβήξτε ένα στιγμιότυπο οθόνης με τη μέθοδο που προτιμάτε. Μετά από αυτό, ανοίξτε το λογισμικό επεξεργασίας εικόνων της επιλογής σας και περικόψτε το σε 880 × 660 pixel. Αποθηκεύστε το ως screenshot.png και προσθέστε το στο φάκελο θέματος. Τώρα είστε έτοιμοι να ανεβάσετε το θέμα σας.

Για να μεταφέρετε το νέο θέμα στον ιστότοπό σας στο WordPress, έχετε πολλές επιλογές. Ωστόσο, η προϋπόθεση είναι ότι όλα τα αρχεία βρίσκονται μέσα στο φάκελο θεμάτων σας.

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

ανεβάστε το θέμα που έχει μετατραπεί

Στο επερχόμενο μενού χρησιμοποιήστε το κουμπί για να περιηγηθείτε στη θέση του αρχείου zip. Σημειώστε το και κάντε κλικ Ανοιξε, τότε Εγκατάσταση τώρα. Όταν τελειώσει, ενεργοποιήστε το θέμα.

Εναλλακτικά, μπορείτε να συνδεθείτε στον διακομιστή σας μέσω FTP (ή απλώς μεταβείτε στον τοπικό κατάλογο του σκληρού σας δίσκου) και μεταβείτε στο wp-content / θέματα. Στη συνέχεια, μεταφορτώστε τον (αποσυμπιεσμένο) φάκελο θέματος εκεί. Μετά από αυτό, ενεργοποιήστε το θέμα από το ίδιο μέρος με πριν.

Ομορφη! Η διεπαφή του νέου σας ιστότοπου πρέπει τώρα να μοιάζει με τον παλιό σας ιστότοπο. Το μόνο που μένει για να ολοκληρώσετε τη μετάβαση από το HTML στο WordPress είναι να εισαγάγετε το υπάρχον περιεχόμενό σας. Θα το καλύψουμε παρακάτω παρακάτω όταν μιλάμε για χρήση ενός υπάρχοντος θέματος WordPress.

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

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

Β) HTML σε WordPress μέσω παιδικού θέματος WordPress

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

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

1. Επιλέξτε ένα κατάλληλο θέμα

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

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

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

2. Δημιουργήστε έναν νέο φάκελο

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

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

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

3. Ρυθμίστε το φύλλο στυλ

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

Θα φτάσουμε στο δεύτερο μέρος αργότερα. Προς το παρόν, δημιουργήστε το συνηθισμένο style.css και τοποθετήστε το στο φάκελο θέματος. Στη συνέχεια, προσθέστε τα ακόλουθα:

/ *
Όνομα θέματος: Είκοσι δεκαπέντε παιδιά
URI θέματος: http://example.com/twenty-fifteen-child/
Περιγραφή: Είκοσι δεκαπέντε παιδιά θέμα
Συγγραφέας: John Doe
URI συγγραφέα: http://example.com
Πρότυπο: είκοσι δεκαπέντε
Έκδοση: 1.0.0
Άδεια χρήσης: GNU General Public License v2 ή μεταγενέστερη έκδοση
URI άδειας: http://www.gnu.org/licenses/gpl-2.0.html
Ετικέτες: φωτεινό, σκοτεινό, δύο στήλες, δεξιά-πλευρική γραμμή, διάταξη απόκρισης, έτοιμη για προσβασιμότητα
Τομέας κειμένου: είκοσι δεκαπέντε-παιδί
* /

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

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

4. Δημιουργήστε Functions.php και κληρονομήστε στυλ γονέα

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

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

Ωστόσο, σε αυτήν την περίπτωση, θα το χρησιμοποιήσετε μόνο για να καλέσετε το στυλ του γονέα. Για αυτό, δημιουργήστε ένα νέο αρχείο και καλέστε το functions.php. Το πρώτο πράγμα που θα προσθέσετε στην αρχή είναι αυτό:

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

λειτουργία child_theme_enqueue_styles () {

$ parent_style = 'γονικό στυλ';

wp_enqueue_style ($ parent_style, get_template_directory_uri (). '/style.css');
wp_enqueue_style ("παιδικό στιλ",
get_stylesheet_directory_uri (). "/style.css",
πίνακας ($ parent_style),
wp_get_theme () -> get ('Έκδοση')
)
}
add_action ('wp_enqueue_scripts', 'child_theme_enqueue_styles');

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

5. Ενεργοποιήστε το παιδικό θέμα

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

Μπορείτε να προσθέσετε ένα στιγμιότυπο οθόνης σε αυτό όπως στις παραπάνω οδηγίες εάν θέλετε. Εκτός από αυτό, μπορείτε είτε να το φερμουάρ και να το προσθέσετε στο WordPress μέσω Εμφάνιση> Θέματα> Προσθήκη νέου> Μεταφόρτωση θέματος ή απλά προσθέτοντας το φάκελο όπως είναι wp-content / θέματα.

Και στις δύο περιπτώσεις, όταν ενεργοποιείτε το θέμα, ο ιστότοπός σας θα πρέπει τώρα να μοιάζει ακριβώς με τον γονέα του.

6. Προσαρμόστε το σχέδιο

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

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

html για wordpress μέσω παιδικής σελίδας παραδείγματος θέματος

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

σώμα {
περιθώριο: 0;
}

Στη συνέχεια, κάνουμε το ίδιο με το νέο θέμα WordPress όπου βρίσκουμε αυτά τα στυλ:

σώμα. ιστότοπος {
margin-top: 48 εικονοστοιχεία;
margin-top: 3.428571429rem;
margin-bottom: 48 εικονοστοιχεία;
margin-bottom: 3.428571429rem;
}

Στόχος μου είναι τώρα να εφαρμόσω το στυλ από τον ιστότοπο HTML στο θέμα του WordPress. Σε αυτήν την περίπτωση, μπορούμε να το επιτύχουμε απλώς προσθέτοντας τα ακόλουθα στο θέμα του παιδιού μου style.css:

σώμα. ιστότοπος {
περιθώριο: 0 αυτόματη;
}

Μετά την αποθήκευση, το θέμα του WordPress εφαρμόζει τα νέα στυλ:

html σε wordpress μέσω παιδικής θεματικής επεξεργασμένης σελίδας παραδείγματος

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

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

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

Γ) Εισαγωγή περιεχομένου από HTML στο WordPress με χρήση της προσθήκης

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

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

1. Εγκαταστήστε την Εισαγωγή προσθήκης

Το πρώτο πράγμα που πρέπει να κάνετε είναι να εγκαταστήσετε την προσθήκη Εισαγωγή HTML 2. Ο ευκολότερος τρόπος για να το επιτύχετε αυτό είναι να πάτε Προσθήκες> Προσθήκη νέου και αναζητήστε το με το όνομα. Όταν το βρείτε στη λίστα (μπορεί να βρίσκεται πιο κάτω), κάντε κλικ στο Εγκατάσταση τώρα. Ενεργοποιήστε το όταν τελειώσει.

πρόσθετο εισαγωγής html to wordpress

2. Προετοιμάστε την εισαγωγή

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

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

Αρχεία

html σε αρχεία εισαγωγής wordpress

Διαμορφώστε αυτήν την οθόνη ως εξής:

  • Κατάλογος για εισαγωγή - Εισαγάγετε τη διαδρομή στην οποία μόλις αντιγράψατε τα υπάρχοντα αρχεία σας.
  • URL παλιού ιστότοπου - Χρησιμοποιείται για ανακατευθύνσεις. Εισαγάγετε την παλιά σας διεύθυνση URL. Θα το εξετάσουμε ξανά αργότερα σε αυτό το άρθρο.
  • Προεπιλεγμένο αρχείο - Το προεπιλεγμένο αρχείο για καταλόγους στον παλιό ιστότοπο, συνήθως index.html.
  • Επεκτάσεις αρχείων προς συμπερίληψη - Οι επεκτάσεις αρχείων που θέλετε να εισαγάγετε.
  • Κατάλογοι προς εξαίρεση - Εάν έχετε καταλόγους στον παλιό ιστότοπο που δεν θέλετε να εισαγάγετε, εισαγάγετέ τους εδώ.
  • Διατήρηση ονομάτων αρχείων - Για να έχετε αυτόματα την προσθήκη χρησιμοποιώντας τα ονόματα των αρχείων σας ως τη νέα διεύθυνση URL, επιλέξτε αυτό το πλαίσιο. Αυτό έχει νόημα εάν οι τίτλοι σας είναι πολύ μεγάλοι γιατί συνήθως, ο εισαγωγέας θα τους χρησιμοποιήσει για να δημιουργήσει το γυμνοσάλιαγκας.

Περιεχόμενο

Κάτω από το περιεχόμενο, πρέπει να διαμορφώσετε την ετικέτα HTML που περιέχει το περιεχόμενο του ιστότοπού σας.

html to wordpress εισαγωγή περιεχομένου

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

, οι πληροφορίες που θα εισαγάγατε θα ήταν div, ταυτότητα και κύριος.

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

Τίτλος & Μεταδεδομένα

html σε wordpress εισαγωγή τίτλου και μεταδεδομένων

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

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

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

Προσαρμοσμένα πεδία

html για wordpress εισαγωγή προσαρμοσμένων πεδίων

Εάν έχετε δεδομένα που πρέπει να εισαχθούν σε προσαρμοσμένα πεδία, μπορείτε να το διαμορφώσετε εδώ.

Κατηγορίες & Ετικέτες

html σε λέξεις εισαγωγής λέξεων και ετικετών

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

Εργαλεία

html to wordpress εργαλεία εισαγωγής

Αυτή η οθόνη παραθέτει μια σειρά χρήσιμων εργαλείων για την επιτυχή εισαγωγή από HTML σε WordPress.

3. Ξεκινήστε την εισαγωγή

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

html για εισαγωγή wordpress

(Σημείωση: μπορείτε επίσης να φτάσετε εδώ μέσω Εργαλεία> Εισαγωγή και στη συνέχεια να πάρει Εκτέλεση Εισαγωγέα σύμφωνα με το HTML επιλογή.)

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

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

Πρόσθετα βήματα

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

Το πρώτο είναι να ελέγξετε τις διευθύνσεις URL των πρόσφατα εισαγόμενων αναρτήσεων και των σελίδων σας για να βεβαιωθείτε ότι είναι φιλικές στη μηχανή αναζήτησης (δηλ. Συμπεριλάβετε τις λέξεις-κλειδιά για τις οποίες θέλετε να κατατάξετε). Είναι πολύ απλό - απλώς μεταβείτε σε μια σελίδα ή ανάρτηση και δείτε τη διεύθυνση URL κάτω από τον τίτλο.

ελέγξτε τους μόνιμους συνδέσμους μετά το html για την εισαγωγή wordpress

Για να το αλλάξετε, κάντε κλικ Επεξεργασία στα δεξιά, αλλάξτε τη διεύθυνση URL της επιλογής σας και πατήστε Εντάξει.

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

Εάν έχετε συμπληρώσει την παλιά διεύθυνση του ιστότοπου στην προσθήκη HTML, θα δημιουργήσει τον κωδικό ανακατεύθυνσης για εσάς. Μπορείτε να το αντιγράψετε και να το επικολλήσετε στο αρχείο.htaccess που βρίσκεται στον διακομιστή σας (συνήθως στον ριζικό κατάλογο).

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

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

Μετακινήσατε με επιτυχία από HTML σε WordPress?

Και αυτό είναι. Μόλις μάθατε πώς να μετατρέψετε έναν στατικό ιστότοπο HTML σε WordPress. Κατά συνέπεια, έχετε γίνει μέρος μιας από τις μεγαλύτερες κοινότητες στον Ιστό και αποκτήσατε πρόσβαση σε χιλιάδες πόρους για να κάνετε τον ιστότοπό σας ακόμη καλύτερο.

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

  • Προσαρμόστε το WordPress βήμα προς βήμα
  • Μετακινήστε τον ιστότοπό σας από HTTP σε HTTPS
  • Προσθέστε προσαρμοσμένες γραμματοσειρές στο WordPress
  • Επιταχύνετε τον ιστότοπό σας στο WordPress
  • Προσθέστε μια φόρμα επικοινωνίας στον ιστότοπό σας στο WordPress

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

Μετακινήσατε τον ιστότοπό σας από HTML σε WordPress; Πώς ήταν η εμπειρία σας; Υπάρχουν συμβουλές για προσθήκη; Ενημερώστε μας στην παρακάτω ενότητα σχολίων.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map