Χρησιμοποιήστε το Wordpress ως ακουστικό CMS

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

• Οι καλύτερες υπηρεσίες φιλοξενίας ιστοσελίδων το 2019

Είχα ήδη βιώσει πόσο εύκολα μπορεί ένας διακομιστής να πάει κάτω, να βγάζει όλες τις τοποθεσίες σε αυτό, οδηγώντας σε λεπτά ή ώρες πανικού σταδιακού πανικού (υπήρχαν 24 στο ορυχείο). Είχα δει επίσης πώς ένας μονολιθικός ιστότοπος με έδρα το CMS θα μπορούσε να υποστεί συμβιβασμό ασφαλείας και να καταβάλει πολλές προσπάθειες για την επισκευή (που με πήρε περισσότερο από δύο ημέρες μη αμειβόμενης εργασίας). Για μια σειρά από web hosting Επιλογές παρόχου, ελέγξτε τον οδηγό μας.

• 23 Μεγάλα παραδείγματα ιστοσελίδων WordPress

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

Ξεκινώντας

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

Η εξαίρεση είναι εάν χρειάζεστε προσαρμοσμένα πεδία meta για επιπλέον περιεχομένου. Πιθανότατα χρησιμοποιείτε προηγμένα προσαρμοσμένα πεδία για να το κάνετε αυτό. Μπορείτε να προσθέσετε αυτά τα δεδομένα στο API WordPress από Εγκατάσταση αυτού του πρόσθετου .

Χρησιμοποιήστε μια στατική γεννήτρια τοποθεσίας

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

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

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

npm install -global gatsby-cli

Τώρα, μεταβείτε στο φάκελο όπου θέλετε να διατηρήσετε τον ιστότοπό σας και να εκτελέσετε αυτήν την εντολή:

gatsby new blog

Αυτό θα δημιουργήσει ένα νέο φάκελο που ονομάζεται «Blog» και θα εγκαταστήσει το Gatsby και τις εξαρτήσεις του σε αυτόν τον φάκελο. Ανοίξτε αυτόν τον φάκελο στον αγαπημένο σας επεξεργαστή κειμένου. Μπορεί να φαίνεται ότι υπάρχουν πολλά αρχεία εκεί. Μην ανησυχείτε, θα επεξεργαστούμε απευθείας μόνο το gatsby-config.js , gatsby-node.js αρχεία και το src φάκελο, που είναι όπου ζουν τα πρότυπα μας.

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

Να πάρει το περιεχόμενό μας

Το πρώτο βήμα που θέλουμε να πάρουμε είναι να φέρω το περιεχόμενό μας από το API του ιστότοπου Wordpress.

Για να το κάνετε αυτό, θα εγκατασταθούμε gatsby-source-wordpress , ένα προετοιμασμένο plugin για το WordPress. Αυτό απεικονίζει έναν από τους κύριους λόγους που αγαπώ gatsby - μπορείτε να πάρετε τα δεδομένα σας από μια ποικιλία διαφορετικών πηγών. Πολλοί στατικοί γεννήτριες περιοχής περιορίζονται στη χρήση αρχείων MarkDown, αλλά ο Gatsby είναι πολύ ευέλικτος.

Το οικοσύστημα Plugin του Gatsby είναι πολύ ώριμο. Υπάρχουν πολλά προετοιμασμένα τρόπους να πάρει τα δεδομένα σας και πολλές άλλες έξυπνες λειτουργίες που έρχονται και χρήσιμα.

Για να εγκαταστήσετε το plugin, πρώτης αλλαγής καταλόγου στη θέση New Gatsby χρησιμοποιώντας αυτήν την εντολή: blog cd .

Τώρα εκτελέστε αυτήν την εντολή: NPM εγκατάσταση --save gatsbysource-wordpres μικρό.

Μόλις γίνει αυτό, ήρθε η ώρα να ανοίξετε το αρχείο Gatsby-Config.js. Θα δείτε ότι υπάρχει ήδη κάποια βασική ρύθμιση στη θέση του ότι ο Gatsby μας δίνει από προεπιλογή. Θα χτίσουμε σε αυτό για να διαμορφώσουμε το plugin εδώ:

 module.exports = {
 Sitemetadata: {
  Τίτλος: 'Gatsby Default Starter',
 },
 plugins: [
  'gatsby-plugin-helmet-κράνος',
  {
   Επιλύστε: "Gatsby-Source-WordPress",
   Επιλογές: {
    Baseurl: "My-Wordpress-site.com",
    Πρωτόκολλο: "https",
    HOSTINGWPCOM: FALSE,
    Useacf: TRUE,
    ΑναζήτησηΑπλέγουνΕπαλλαγές: {
     Sourceurl: "https://my-wordress-site.com",
     Αντικατάσταση: "https://my-static-site.com",
    }
   },
  },
 ],
} 

Δούλεψε?

Μπορείτε να ελέγξετε ανοίγοντας το τερματικό σας, πληκτρολογώντας Ο Gatsby αναπτύσσει και να παρακολουθήσετε τι συμβαίνει. Να προειδοποιηθείς! Ακόμα κι αν έχετε τις ρυθμίσεις σας σωστές, θα πάρετε κάποιες προειδοποιήσεις ούτως ή άλλως - αυτό μπορεί να είναι gatsby αναζητώντας περιεχόμενο που δεν έχετε γράψει ακόμα.

Τώρα είστε σε θέση να δείτε το Gatsby-Starter-προεπιλογή στο πρόγραμμα περιήγησης.

  http: // localhost: 8000 / 

Δείτε το graphiql, ένα in-browser, για να εξερευνήσετε τα δεδομένα και το σχήμα του ιστότοπού σας.

  http: // localhost: 8000 / ___ graphql 

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

Αν ο προεπιλεγμένος αστέρας Gatsby δεν είναι αυτό που παίρνετε, ελέγξτε ότι η ιστοσελίδα σας WordPress δεν βρίσκεται σε ένα υποτομέα, ότι είναι σίγουρα χρησιμοποιείτε https ή http και ότι έχετε το ίδιο στις ρυθμίσεις σας.

Τώρα μπορούμε να πάμε στο http: // localhost: 8000 / και να δείτε την περιοχή Gatsby!

Μπορούμε να αναρωτηθούμε τα δεδομένα μας;

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

  http: // localhost: 8000 / ___ graphql 

Αυτό το ενσωματωμένο εργαλείο ονομάζεται graphiql και είναι μια άλλη μυστική δύναμη του Gatsby.

Το GraphQL είναι παρόμοιο με το υπόλοιπο: είναι ένας τρόπος για να αναζητήσετε δεδομένα. Αλλά με το graphql, μπορείτε να αλληλεπιδράσετε με τα δεδομένα σας πολύ πιο εύκολα. Graphiql (ένα οπτικό IDE για το graphql) μπορεί να μας δείξει μερικά από αυτά τα κόλπα. Στο αριστερό πλαίσιο, δοκιμάστε να πληκτρολογήσετε τα εξής:

 {
 wallwordpresspost {
  άκρες {
   κόμβος {
    ταυτότητα
    γυμνοσάλιαγκας
    κατάσταση
    πρότυπο
    μορφή
   }
  }
 }
} 

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

Τι πήρατε όταν πατήσετε Ctrl + Enter στο GraphIQL; Ελπίζουμε ότι θα έχετε δει τις δημοσιεύσεις και τη σελίδα σας στη δεξιά πλευρά της οθόνης.

Θα χρησιμοποιήσουμε πραγματικά αυτό το ερώτημα στο επόμενο βήμα μας, οπότε κρατήστε το εύχρηστο! Ίσως θελήσετε να δείτε ποια άλλα δεδομένα μπορείτε να πάρετε με το Graphiql ενώ είστε εδώ. Αν θέλετε να το κάνετε αυτό, δοκιμάστε να μετακινήσετε τον κέρσορα γύρω και πληκτρολογώντας είτε Ctrl + χώρο και / είτε Ctrl + Enter. Που θα αποκαλύψει άλλες ομάδες περιεχομένου.

Έτσι, έχουμε τώρα περιεχόμενο στο Gatsby. Στη συνέχεια, πρέπει να το δείξουμε.

Εμφανίστε τις αναρτήσεις μας

Για αυτό το επόμενο βήμα θα κάνουμε τη χρήση του gatsby-node.js αρχείο.

gatsby-node.js είναι ένα αρχείο που μπορείτε να χρησιμοποιήσετε για να αλληλεπιδράσετε με το "κόμβο κόμβου" του Gatsby. Εδώ μπορείτε να ελέγξετε τον τρόπο δημιουργίας του ιστότοπού σας και δημιουργεί σελίδες, αναρτήσεις και πολλά άλλα.

Θα γράψουμε κάποιες οδηγίες εδώ για να πείτε στους Gatsby τι να κάνουν με τα δεδομένα μας:

 Const Path = απαιτείται (`διαδρομή);

εξαγωγές.
= & gt; {
 const {createpage} = boundactioncreats
 Επιστρέψτε τη νέα υπόσχεση ((αποφασιστικότητα, απορρίψτε) = & gt; {
  graphql (
   `
   {
    wallwordpresspost {
     άκρες {
      κόμβος {
       ταυτότητα
       γυμνοσάλιαγκας
       κατάσταση
       πρότυπο
       μορφή
      }
     }
    }
   }
  `
 ) .Then (αποτέλεσμα = & gt; {
   Εάν (αποτέλεσμα) {
    console.log (αποτέλεσμα.
    απόρριψη (αποτέλεσμα.
   }

   Const PattTemplate = Path.resold (`./src/Templates/
post.js`)

   Αποτέλεσμα.Data.allwordpresspost.Edges.Fooeach (Edge = & GT; {
    δημιουργία σελίδας({
     Διαδρομή: `/ $ {άκρη.node.slug} /`,
     Στοιχείο: μετατόπιση,
     συμφραζόμενα: {
      ID: Edge.NODE.ID,
     },
    })
   })
   αποφασίζω()
  })
 })
} 

Αυτός ο κώδικας δημιουργεί σελίδες από το ερώτημά μας graphql και για κάθε σελίδα που θα χρησιμοποιήσει ένα πρότυπο που ορίσαμε ( /src/templates/post.js ). Έτσι, πρέπει να δημιουργήσουμε αυτό το αρχείο!

Δημιουργία πρότυπου δημοσίευσης

Μέσα στο / src / φάκελο, δημιουργήστε ένα φάκελο που ονομάζεται πρότυπα και ένα αρχείο στο εσωτερικό που ονομάζεται post.js . Προσθήκη σε αυτόν τον κωδικό:

 Η εισαγωγή αντιδρά από το "αντιδράσει"
Εισαγωγή κράνους από το «αντιδράσει-κράνος»

η κατηγορία μετά την εκτείνεται αντιδράσει το {
 render () {
  const post = this.props.data.wordprost;
  const slug = that.props.data.wordpresspost.slug;

  ΕΠΙΣΤΡΟΦΗ (
   & lt; div & gt;
   & lt; κράνος τίτλος = {`$ {titlestring} | $ {sitetitle} `} / & gt;
   & lt; h1 επικίνδυνοsetinnerhtml = {{__html: post.title}}} / & gt;
   & lt; div επικίνδυναsetEnnerhtml = {{__html: post.content}} / & gt;
   & lt; / div & gt;
  )
 }
}

Εξαγωγή προεπιλογής Pageetemplate

Εξαγωγή Query Conct = graphql »
 QueryPostPost ($ ID: String!) {
  WordPressPost (ID: {EQ: $ ID}) {
   τίτλος
   περιεχόμενο
   γυμνοσάλιαγκας
  }
  ιστοσελίδα {
   sitemetadata {
    τίτλος
   }
  }
} 

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

Εάν θέλετε να δείτε γρήγορα μια λίστα με όλες τις αναρτήσεις σας, μπορείτε να πληκτρολογήσετε http: // localhost: 8000 / a στη γραμμή διευθύνσεων του προγράμματος περιήγησης. Αυτό θα σας μεταφέρει σε μια εξέλιξη 404 σελίδων, η οποία παραθέτει όλες τις θέσεις σας. Κάντε κλικ σε ένα για να το επισκεφθείτε!

Επόμενα βήματα

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

Υπάρχουν πολλά περισσότερα για αυτή την ιστορία και τους συναδέλφους μου και έχω blogged γι 'αυτό εκτενώς Ινδική δέντρο . Έχω επίσης γράψει περισσότερα για το προσωπικό μου blog, Νόστιμο reverie .

Παρακαλείσθε να έρθετε σε επαφή μαζί μου μέσω αυτών των καναλιών και στο Twitter για να ακούσετε πιο συναρπαστικές εξελίξεις στον κόσμο της Headless CMS!

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

Σχετικά Άρθρα:

• 40 λαμπερά μαθήματα wordpress
• 6 κορυφαίες συμβουλές για την επιτυχία Cro στο WordPress
• 10 μεγάλα plugins Wordpress για σχεδιαστές