What is this file doing? After importing your dependencies, it constructs the layout of the post with JSX. In your src directory, create a directory called templates and in the newly created templates folder, create a filed named blog-post.js. As you watch the terminal you should see two Post objects log to the terminal:Įxcellent! As explained in Part 7 of the tutorial, this createPages export is one of the Gatsby “workhorses” and allows us to create your blog posts (or pages, or custom post types, etc.) from your WordPress install.īefore you can create the blog posts, however, you need to specify a template to build the pages. Next, stop and restart the gatsby develop environment. Open up your gatsby-node.js file in the root of your project (it should be blank except for some comments) and add the following: You can skip creating slugs, since you already have them. Since you are using WordPress and not Markdown files, you can grab the slugs that get returned from your API call to the WordPress source. In Part 7 of the tutorial, the first step in creating pages is creating slugs for the markdown files. If you haven’t already, please read through Part 7 of the foundational tutorial, as it goes through the concept and examples of this process with Markdown instead of WordPress. Link up the title on the index page with the post page.And helpful to insert a screenshot of the final result here Create pages for each blog post and link to themĪn index page with a post title and excerpt is great, but you should also build pages out for each of the blog posts, and link to them from your index.js file. NOTE: to future editors: it would be useful to also have examples of how to load blog posts to their own individual pages. Save these changes and look at to see your new homepage with a list of sorted blog posts! Here’s what your home page component in src/pages/index.js should look like: Now that you’ve created GraphQL queries that pull in the data you want, you’ll use that second query to create a list of sorted blogpost titles on your site’s homepage. This next query will pull in a sorted list of the blog posts: Rendering the blog posts to index.js This first query will pull in the blogpost content from WordPress: In your browser, open to see your site, and open so that you can create your GraphQL queries.Īs an exercise, try re-creating the following queries in your GraphiQL explorer. You will create a query that pulls in the title of the blog posts, date they were posted, and blogpost content. Now you are ready to create a GraphQL query to pull in some data from the WordPress site. Creating GraphQL queries that pull data from WordPress For extra reading on the plugin’s features and examples of GraphQL queries not included in this tutorial, see the gatsby-source-wordpress plugin’s README file.Īdd the gatsby-source-wordpress plugin to gatsby-config.js using the following code, which you can also find in the demo site’s source code. Install the gatsby-source-wordpress plugin. Creating a site with the gatsby-source-wordpress pluginĬreate a new Gatsby project and change directories into the new project you just created: If you’d like to look at the growing number of source plugins available to you, search for “source” in the Gatsby plugin library. This tutorial will walk you through the basics of connecting your Gatsby site to a CMS, pulling in data, and using React to render that data in beautiful ways on your site. While each source plugin may operate differently from others, it’s worth going through this tutorial because you will almost definitely be using a source plugin in most Gatsby sites you build. The same authentication schemes supported by the WP-API are supported in wp-graphql, which can be used with the gatsby-source-graphql plugin. If you prefer using GraphQL, there’s a wp-graphql plugin to easily expose both default and custom data in WordPress. This Gatsby + WordPress demo site shows you the source code for an example site similar to what you’re going to be building in this tutorial, although it’s missing the cool images you’ll be adding in the next part of this tutorial, Adding Images to a WordPress Site. In this tutorial, you will install the gatsby-source-wordpress plugin in order to pull blog and image data from a WordPress install into your Gatsby site and render that data. Please follow the tutorial on creating a new site with gatsby-source-wordpress instead, as that package is a beta of the next major version of gatsby-source-wordpress. The reason for this is that we’ve adopted the use of WPGraphQL to support Preview and incremental builds as well as to make the schema generally more stable and consistent. The version of gatsby-source-wordpress that this tutorial uses will soon be deprecated and replaced with a complete rewrite in the next major version (v4). How to create a site with data pulled from WordPress Warning:
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |