logo

WordPress Web Development με Bedrock

WordPress Web Development με Bedrock

Ετικέτες:

Έχουμε διαπιστώσει ότι είναι καλή πρακτική να χρησιμοποιούμε εναλλακτική δομή αρχείων για το WordPress όταν κάνουμε web development. Αυτό επιτρέπει:

  • Την καλύτερη και πιο καθαρή δόμηση των αρχείων που επεξεργαζόμαστε, και κατά συνέπεια και του .gitignore.
  • Την χρήση του composer package manager για την διαχείριση των plugins, του core wp και των themes
  • Την εύκολη μεταφορά μεταξύ περιβάλλοντων σε dev, stage, production
  • Το εύκολο στήσιμο νέου workstation σε local περιβάλλον

Έχουμε επιλέξει το Bedrock που είναι ένα δυνατό boilerplate για αυτή τη δουλεία και το έχουμε εμπολουτίσει με το Understrap και το Understrap Child που χρησιμοποιούμε και με κάποιες ρυθμίσεις και βασικά plugins για εύκολη ανάπτυξη σε WordPress. Μπορείτε να βρείτε το δικό μας Boilerplate εδώ και να το χρησιμοποιήσετε. Όλα όσα μας ενδιαφέρουν είναι μέσα στο φάκελο web και όλα όσα είναι εξωτερικά dependencies είναι καταγεγραμμένα στο composer.json.

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

Για να φτιάξουμε ένα καινούργιο έργο

  1.  Σιγουρευόμαστε ότι έχουμε εγκατεστημένο στον υπολογιστή μας βασικά εργαλεία για το local development. Συγκεκριμένα Composer , Gulp καθώς και φυσικά κάποιο Local server όπως ο XAMPP , μπορείτε να διαβάσετε περισσότερα εδώ.
  2. Κάνουμε ενα καινούργιο git repo στο git service μας (εμείς παίζουμε με bitbucket) και το κάνουμε clone στο local περιβάλλον μας
  3. Κατεβάσουμε το Boilerplate από το εδώ σαν zip και το βάζουμε μέσα στο καινούργιο git repo με copy paste αφού το έχουμε κάνει unzip.
  4. Μπαίνουμε μέσα στο φάκελο του repo με cli και εκτελούμε composer install & composer update
  5. Φτιαχνουμε βάση & χρήστη & salt keys και το θέτουμε στο αρχείο /.env. Εντός του αρχείου υπάρχει παράδειγμα και οδηγίες
  6. Κάνουμε vhost στο local dev περιβάλλον μας και βάζουμε το url της επιλογής μας στο αρχείο /.env καθώς και στο web/app/themes/understrap-child/gulpconfig.json
  7.  Κάνουμε npm install μέσα στο φάκελο του child theme (web/app/themes/understrap-child) για να δουλέψουμε με gulp.

Να έχουμε στο μυαλό μας

  • Κάνουμε κανονικά το commit μας στο git στην κορυφή του repo
  • Προσέχουμε τα ονόματα του specific plugin και του child theme. Αν τα αλλάξουμε πρέπει να τα αλλάξουμε πρέπει να τα αλλάξουμε και στο .gitignore!
  • Ότι plugin ή theme είναι από εξωτερικό repo το εγκαθιστούμε μέσω composer! Με την εντολή composer require wpackagist-plugin/woocommerce εγκαθιστούμε για παράδειγμα το woocommerce. Μπορείτε επίσης να το βάλετε κατευθείαν μέσα στο composer.json στο σημείο require και να κάνετε μετά composer install & composer update. Μπορείτε να βρείτε links για το όλα τα plugins εδώ. Επί της ουσίας το όνομα είναι ίδιο με το slug στο wordpress.org plugins repo.
  • Για να δουλέψουμε με gulp κάνουμε gulp watch-bs μέσα στο φάκελο του child theme. Αν κολλάει ίσως φταίει η έκδοση του gulp που έχουμε στο pc μας οπότε κάνουμε npm install gulp -g για να την ανανεώσουμε.

Για αντιγραφή repo

Αν υπάρχει ήδη ένα repo που θέλουμε να μεταφέρουμε σε νέο περιβάλλον τότε κάνουμε τα παρακάτω:

  1. Σχετικά με τη βάση καλό, αν δεν είναι μεγάλη,  ο συνάδελφος μας να τη κάνει commit στο git κάνοντας ένα wp db export με χρήση wp-cli. Αλλιώς μας τη στέλνει σαν zip.
  2. Κάνουμε clone το git repo στο τοπικό περιβάλλον ανάπτυξης
  3. Μπαίνουμε μέσα στο φάκελο του repo με cli και εκτελούμε composer install & composer update
  4. Φτιαχνουμε βάση & χρήστη & salt keys και το θέτουμε στο αρχείο /.env. Εντός του αρχείου υπάρχει παράδειγμα και οδηγίες
  5. Κάνουμε import τη βάση με wp db import
  6. Κάνουμε vhost στο local dev περιβάλλον μας και βάζουμε το url της επιλογής μας στο αρχείο /.env
  7. Κάνουμε npm install μέσα στο φάκελο του child theme (web/app/themes/understrap-child) για να δουλέψουμε με gulp
  8. Τα αρχεία είκονων δεν μεταφέρονται. Αν τις θέλετε θα πρέπει να το κάνετε χωριστά.

 

0 found this helpful