{"id":150,"date":"2019-10-21T06:42:03","date_gmt":"2019-10-21T06:42:03","guid":{"rendered":"https:\/\/taroken.mixh.jp\/wp\/gatsby\/?p=150"},"modified":"2019-10-21T06:42:03","modified_gmt":"2019-10-21T06:42:03","slug":"gatsby-wordpress-rest-api-4","status":"publish","type":"post","link":"https:\/\/taroken.mixh.jp\/wp\/gatsby\/gatsby-wordpress-rest-api-4\/","title":{"rendered":"#4 Gatsby + WordPress REST API\u3067\u30d6\u30ed\u30b0\u3092\u4f5c\u308d\u3046\u3010breadcrumbs\u7de8\u3011"},"content":{"rendered":"<p>#3\u306b\u7d9a\u304d\u3001\u30d1\u30f3\u304f\u305a\u3092\u4f5c\u3063\u3066\u307f\u307e\u3059<\/p>\n<p>\u4eca\u56de\u306f<a href=\"https:\/\/www.gatsbyjs.org\/packages\/gatsby-plugin-breadcrumb\/\" rel=\"noopener noreferrer\" target=\"_blank\">gatsby-plugin-breadcrumb<\/a>\u3092\u4f7f\u3063\u3066\u307f\u307e\u3059<\/p>\n<p>Breadcrumbs\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u3063\u3066location\u7b49\u306eprops\u3092\u6e21\u305b\u3070\u4f5c\u308c\u308b\u304b\u3068\u601d\u3044\u307e\u3059\u304c\u3001Gatsby\u304c\u63d0\u4f9b\u3059\u308b\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u30ec\u30d3\u30e5\u30fc\u3082\u517c\u306d\u3066\u3001gatsby-plugin-breadcrumb\u3092\u7d39\u4ecb\u3057\u3066\u3044\u304d\u307e\u3059\u306d<\/p>\n<h2>\u307e\u305a\u306f\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h2>\n<p><code class=\"code\">yarn add gatsby-plugin-breadcrumb<\/code><\/p>\n<p><b>config\u306b\u8ffd\u52a0<\/b><\/p>\n<div class=\"gatsby-highlight\">\n<div class=\"codeLabel\">gatsby-config.js<\/div>\n<pre>\r\n<code class=\"language-js\">`gatsby-plugin-breadcrumb`,<\/code>\r\n<\/pre>\n<\/div>\n<h2>gatsby-plugin-breadcrumb\u306b\u3064\u3044\u3066<\/h2>\n<p>gatsby-plugin-breadcrumb\u306b\u306f\u4ee5\u4e0b\u306e\uff13\u7a2e\u985e\u30d1\u30f3\u304f\u305a\u306e\u8868\u793a\u65b9\u6cd5\u304c\u3042\u308a\u307e\u3059<\/p>\n<ol>\n<li>Click Tracking<\/li>\n<li>Sitemap<\/li>\n<li>useBreadcrumb<\/li>\n<\/ol>\n<p>\u300cClick Tracking\u300d\u306f\u305d\u306e\u540d\u306e\u901a\u308a\u3001<b>\u30e6\u30fc\u30b6\u30fc\u304c\u30af\u30ea\u30c3\u30af\u3057\u305f\u30da\u30fc\u30b8\u9077\u79fb\u5fdc\u3058\u3066\u30d1\u30f3\u304f\u305a\u304c\u4f5c\u3089\u308c\u307e\u3059<\/b><\/p>\n<p>\u3064\u307e\u308a\u30e6\u30fc\u30b6\u30fc\u304c\u6765\u305f\u9053\u304c\u30d1\u30f3\u304f\u305a\u306b\u306a\u308b\u8a33\u3067\u3059\u306d<\/p>\n<p>\u3053\u308c\u306f\u521d\u3081\u3066\u307f\u307e\u3057\u305f<\/p>\n<p>\u305d\u3082\u305d\u3082\u30d1\u30f3\u304f\u305a\u306f\u6765\u305f\u9053\u3092\u8ff7\u308f\u305a\u5e30\u308c\u308b\u3088\u3046\u306b\u3001\u30d1\u30f3\u306e\u30ab\u30b1\u30e9\u3092\u7f6e\u3044\u3066\u6b69\u304f\u307f\u305f\u3044\u306a\u30a4\u30e1\u30fc\u30b8\u306a\u306e\u3067\u672c\u8cea\u7684\u306a\u30d1\u30f3\u304f\u305a\u306b\u306a\u308a\u307e\u3059\u306d(\u591a\u5206w)<\/p>\n<p>\u9762\u767d\u3044\u306e\u3067\u3053\u308c\u3092\u4f7f\u3063\u3066\u307f\u3088\u3046\u304b\u3068\u601d\u3044\u307e\u3059<\/p>\n<p>\uff0a\u4ed6\u306e\u30d1\u30f3\u304f\u305a\u3082\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u901a\u308a\u3084\u308c\u3070\u5b9f\u88c5\u3067\u304d\u307e\u3057\u305f\u306e\u3067\u3001\u5fc5\u8981\u306b\u5fdc\u3058\u3066\u8a66\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044^ ^(\uff0a\u5225\u8a18\u4e8b\u3067\u7d39\u4ecb\u3059\u308b\u304b\u3082\u3067\u3059)<\/p>\n<p><b>Click Tracking\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u30e6\u30fc\u30b6\u30fc\u306e\u52d5\u304d\u306b\u5fdc\u3058\u3066\u30d1\u30f3\u304f\u305a\u304c\u751f\u6210\u3055\u308c\u307e\u3059<\/b><\/p>\n<ul>\n<li>\u30e6\u30fc\u30b6\u30fc\u306e\u52d5\u304d\uff1a\u300c\u30c8\u30c3\u30d7 -> \u4e0b\u5c64\u30da\u30fc\u30b8A -> \u4e0b\u5c64\u30da\u30fc\u30b8B -> \u8a18\u4e8bA\u300d<\/li>\n<li>\u30d1\u30f3\u304f\u305a\uff1a\u300cHome \/ \u4e0b\u5c64\u30da\u30fc\u30b8A \/ \u4e0b\u5c64\u30da\u30fc\u30b8B \/ \u8a18\u4e8bA\u300d<\/li>\n<\/ul>\n<ul>\n<li>\u30e6\u30fc\u30b6\u30fc\u306e\u52d5\u304d\uff1a\u300c\u30c8\u30c3\u30d7 -> \u8a18\u4e8bA -> \u8a18\u4e8bB -> \u8a18\u4e8bC \u300d<\/li>\n<li>\u30d1\u30f3\u304f\u305a\uff1a\u300cHome \/ \u8a18\u4e8bA \/ \u8a18\u4e8bB \/ \u8a18\u4e8bC \u300d<\/li>\n<\/ul>\n<p>\u3053\u308c\u306f\u4fbf\u5229\u306a\u306e\u304b\u308f\u304b\u308a\u306b\u304f\u3044\u306e\u304b\u8b0e\u3067\u3059\u304c\u3001\u3061\u3083\u3093\u3068\u52d5\u304f\u306e\u304b\u8a66\u3057\u3066\u307f\u307e\u3059^ ^<\/p>\n<h2>components\/layout.js\u3092\u5909\u66f4<\/h2>\n<p>\u30d1\u30f3\u304f\u305a\u304c\u5fc5\u8981\u306a\u30da\u30fc\u30b8\uff11\u3064\uff11\u3064\u306bBreadcrumb\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u8ffd\u52a0\u3057\u3066\u3082\u3044\u3044\u307f\u305f\u3044\u3067\u3059\u304c\u3001layout.js\u306b\u8ffd\u52a0\u3059\u308c\u3070\u3001\u3042\u3068\u306f\u5404\u30da\u30fc\u30b8\u3067location\u3068crumbLabel\u3092\u8ffd\u8a18\u3059\u308b\u3060\u3051\u3067\u30d1\u30f3\u304f\u305a\u304c\u8868\u793a\u3055\u308c\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059<\/p>\n<div class=\"gatsby-highlight\">\n<div class=\"codeLabel\">layout.js<\/div>\n<pre>\r\n<code class=\"language-js\">import\u00a0React\u00a0from\u00a0&quot;react&quot;\r\nimport\u00a0PropTypes\u00a0from\u00a0&quot;prop-types&quot;\r\nimport\u00a0{\u00a0useStaticQuery,\u00a0graphql\u00a0}\u00a0from\u00a0&quot;gatsby&quot;\r\nimport\u00a0{\u00a0Breadcrumb\u00a0}\u00a0from\u00a0&#039;gatsby-plugin-breadcrumb&#039;\r\n\r\nimport\u00a0Header\u00a0from\u00a0&quot;.\/header&quot;\r\n\r\nconst\u00a0Layout\u00a0=\u00a0({\u00a0location,\u00a0crumbLabel,\u00a0children\u00a0})\u00a0=&gt;\u00a0{\r\n\u00a0\u00a0const\u00a0data\u00a0=\u00a0useStaticQuery(graphql`\r\n\u00a0\u00a0\u00a0\u00a0query\u00a0SiteTitleQuery\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0site\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0siteMetadata\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0`)\r\n\u00a0\u00a0const\u00a0rootPath\u00a0=\u00a0`${__PATH_PREFIX__}\/`\r\n\r\n\u00a0\u00a0return\u00a0(\r\n\u00a0\u00a0\u00a0\u00a0&lt;&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Header\u00a0siteTitle={data.site.siteMetadata.title}\u00a0\/&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;main&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{location.pathname\u00a0!==\u00a0rootPath\u00a0&amp;&amp;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Breadcrumb\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0location={location}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0crumbLabel={crumbLabel}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0crumbSeparator=&quot;&quot;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0crumbStyle={{\u00a0color:\u00a0&quot;#666&quot;\u00a0}}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0crumbActiveStyle={{\u00a0color:\u00a0&quot;#333&quot;\u00a0}}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{children}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/main&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;footer&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a9\u00a0{new\u00a0Date().getFullYear()},\u00a0Built\u00a0with\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{`\u00a0`}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;a\u00a0href=&quot;https:\/\/www.gatsbyjs.org&quot;&gt;Gatsby&lt;\/a&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/footer&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;\/&gt;\r\n\u00a0\u00a0)\r\n}\r\n\r\nLayout.propTypes\u00a0=\u00a0{\r\n\u00a0\u00a0children:\u00a0PropTypes.node.isRequired,\r\n}\r\n\r\nexport\u00a0default\u00a0Layout<\/code>\r\n<\/pre>\n<\/div>\n<ul>\n<div class=\"listLabel\">\u30e9\u30d9\u30eb<\/div>\n<li>crumbLabel\uff1a\u5404\u30da\u30fc\u30b8\u304b\u3089\u6e21\u3063\u3066\u304f\u308b<\/li>\n<li>crumbSeparator\uff1a\u201d \/ \u201d\u3068\u3059\u308b\u3068\u300cHOME \/  \u30da\u30fc\u30b8A \/ \u30da\u30fc\u30b8B\u300d\u3068\u8868\u793a\u3055\u308c\u308b<\/li>\n<li>crumbStyle\uff1a\u30d1\u30f3\u304f\u305a\u306e\u30b9\u30bf\u30a4\u30ea\u30f3\u30b0<\/li>\n<li>crumbActiveStyle\uff1a\u4eca\u8868\u793a\u3055\u308c\u3066\u3044\u308b\u30da\u30fc\u30b8\u306e\u30d1\u30f3\u304f\u305a\u306e\u30b9\u30bf\u30a4\u30ea\u30f3\u30b0<\/li>\n<\/ul>\n<p>\u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u3067\u30d1\u30f3\u304f\u305a\u306f\u3044\u3089\u306a\u3044\u306e\u3067\u6761\u4ef6\u5206\u5c90\u3057\u3066\u3044\u307e\u3059<\/p>\n<p><code class=\"code\">const\u00a0rootPath\u00a0=\u00a0`${__PATH_PREFIX__}\/`<\/code>\u3067\u30eb\u30fc\u30c8\u306e\u30d1\u30b9(\u4eca\u56de\u306f\u30c8\u30c3\u30d7\u30da\u30fc\u30b8)\u3092\u53d6\u3063\u3066\u3001\u305d\u308c\u304c\u3082\u3057<code class=\"code\">location.pathname<\/code>(\u4eca\u3044\u308b\u3068\u3053\u306e\u30d1\u30b9)\u3068\u540c\u3058\u3058\u3083\u306a\u3051\u308c\u3070\u30d1\u30f3\u304f\u305a\u3092\u8868\u793a\u3059\u308b\u3088\u3046\u306b\u5206\u5c90\u3057\u3066\u3044\u307e\u3059<\/p>\n<p>location\u306fGatsby\u304b\u3089\u4e0e\u3048\u3089\u308c\u308b\u3082\u306e\u306a\u306e\u3067\u3001\u6700\u521d\u306econst Layout\u306e{}\u306e\u4e2d\u3067\u306blocation\u3092\u8ffd\u52a0\u3057\u3066\u304a\u3051\u3070\u4f7f\u3048\u307e\u3059<\/p>\n<h2>\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u30d1\u30f3\u304f\u305a\u3092\u8a2d\u5b9a\u3059\u308b<\/h2>\n<p>Click Tracking\u306f\u30af\u30ea\u30c3\u30af\u3055\u308c\u306a\u3044\u3068HOME\u3059\u3089\u51fa\u3066\u3053\u306a\u3044\u306e\u3067\u3001HOME\u3092\u5e38\u306b\u8868\u793a\u3059\u308b\u3088\u3046\u306b\u8a2d\u5b9a\u3057\u3066\u304a\u304d\u307e\u3059<\/p>\n<p><b>\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u30d1\u30f3\u304f\u305a\u8a2d\u5b9a\u306fgatsby-config.js\u3067\u884c\u3044\u307e\u3059<\/b><\/p>\n<div class=\"gatsby-highlight\">\n<div class=\"codeLabel\">gatsby-config.js<\/div>\n<pre>\r\n<code class=\"language-js\">{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0resolve:\u00a0`gatsby-plugin-breadcrumb`,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0options:\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0defaultCrumb:\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0location:\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0state:\u00a0{\u00a0crumbClicked:\u00a0false\u00a0},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0pathname:\u00a0\"\/\",\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0crumbLabel:\u00a0\"Home\",\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0crumbSeparator:\u00a0\"\",\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0crumbStyle:\u00a0{\u00a0color:\u00a0\"#666\"\u00a0},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0crumbActiveStyle:\u00a0{\u00a0color:\u00a0\"#333\"\u00a0},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\r\n\u00a0\u00a0\u00a0\u00a0}<\/code>\r\n<\/pre>\n<\/div>\n<p>\u3053\u308c\u304c\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u8a2d\u5b9a\u3067\u3059<\/p>\n<h2>\u5404\u30da\u30fc\u30b8\u306blocation\u3068crumbLabel\u3092\u8ffd\u52a0<\/h2>\n<p>\u30d1\u30f3\u304f\u305a\u3092\u8868\u793a\u3059\u308b\u5404\u30da\u30fc\u30b8\u306blocation\u3068crumbLabel\u306eprops\u3092\u8ffd\u52a0\u3057\u3066\u3042\u3052\u307e\u3059<\/p>\n<p>\u3053\u306e\u30c7\u30fc\u30bf\u3092\u5143\u306b\u30d1\u30f3\u304f\u305a\u304c\u751f\u6210\u3055\u308c\u307e\u3059<\/p>\n<div class=\"gatsby-highlight\">\n<div class=\"codeLabel\">BlogPost.js<\/div>\n<pre>\r\n<code class=\"language-js\">import\u00a0React\u00a0from\u00a0&quot;react&quot;\r\nimport\u00a0{\u00a0graphql\u00a0}\u00a0from\u00a0&quot;gatsby&quot;\r\nimport\u00a0Img\u00a0from\u00a0&quot;gatsby-image&quot;\r\nimport\u00a0Layout\u00a0from\u00a0&quot;..\/components\/layout&quot;\r\nimport\u00a0SEO\u00a0from\u00a0&quot;..\/components\/seo&quot;\r\n\r\nconst\u00a0BlogPostTemplate\u00a0=\u00a0({\u00a0location,\u00a0data\u00a0})\u00a0=&gt;\u00a0(\r\n\u00a0\u00a0&lt;Layout\u00a0location={location}\u00a0crumbLabel={data.wordpressPost.title}&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;SEO\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title={data.wordpressPost.title}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0description={data.wordpressPost.excerpt}\r\n\u00a0\u00a0\u00a0\u00a0\/&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;h1&gt;{data.wordpressPost.title}&lt;\/h1&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;span&gt;{data.wordpressPost.date}&lt;\/span&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;span&gt;{data.wordpressPost.categories[0].name}&lt;\/span&gt;\r\n\u00a0\u00a0\u00a0\u00a0{data.wordpressPost.featured_media\u00a0&amp;&amp;\u00a0(\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Img\u00a0fluid={data.wordpressPost.featured_media.localFile.childImageSharp.fluid}\u00a0\/&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\r\n\u00a0\u00a0\u00a0\u00a0)}\r\n\u00a0\u00a0\u00a0\u00a0&lt;div\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0dangerouslySetInnerHTML={{\u00a0__html:\u00a0data.wordpressPost.content\u00a0}}\r\n\u00a0\u00a0\u00a0\u00a0\/&gt;\r\n\u00a0\u00a0&lt;\/Layout&gt;\r\n)\r\nexport\u00a0default\u00a0BlogPostTemplate\r\n\r\nexport\u00a0const\u00a0query\u00a0=\u00a0graphql`\r\n\u00a0\u00a0query($id:\u00a0Int!)\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0wordpressPost(wordpress_id:\u00a0{\u00a0eq:\u00a0$id\u00a0})\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0content\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0excerpt\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0date(formatString:\u00a0&quot;YYYY.MM.DD&quot;)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0categories\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0name\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0slug\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0featured_media\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0localFile\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0childImageSharp\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fluid(maxWidth:\u00a01000)\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0...GatsbyImageSharpFluid\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0}\r\n`<\/code>\r\n<\/pre>\n<\/div>\n<p>\u8a18\u4e8b\u306e\u30bf\u30a4\u30c8\u30eb\u3092\u6e21\u3057\u3066\u307f\u307e\u3057\u305f<\/p>\n<p><code class=\"code\">gatsby develop<\/code>\u3092\u3057\u3066\u8a18\u4e8b\u30da\u30fc\u30b8\u306b\u884c\u304f\u3068\u30d1\u30f3\u304f\u305a\u304c\u8868\u793a\u3055\u308c\u3066\u3044\u308b\u304b\u3068\u601d\u3044\u307e\u3059<\/p>\n<p><img loading=\"lazy\" src=\"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-4-1.png\" alt=\"\" width=\"2880\" height=\"1800\" class=\"alignnone size-full wp-image-151\" srcset=\"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-4-1.png 2880w, https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-4-1-300x188.png 300w, https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-4-1-768x480.png 768w, https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-4-1-1024x640.png 1024w\" sizes=\"(max-width: 2880px) 100vw, 2880px\" \/><\/p>\n<p>\u30d1\u30f3\u304f\u305a\u304c\u300cHOME \u30b5\u30f3\u30d7\u30eb\u8a18\u4e8b\uff13\u300d\u3068\u8868\u793a\u3055\u308c\u3066\u3044\u307e\u3059\u306d<\/p>\n<p>\u3053\u306e\u307e\u307etest page(\u56fa\u5b9a\u30da\u30fc\u30b8)\u306b\u884c\u304f\u3068\u3002\u3002\u3002<\/p>\n<p><img loading=\"lazy\" src=\"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-4-2.png\" alt=\"\" width=\"2880\" height=\"1800\" class=\"alignnone size-full wp-image-152\" srcset=\"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-4-2.png 2880w, https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-4-2-300x188.png 300w, https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-4-2-768x480.png 768w, https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-4-2-1024x640.png 1024w\" sizes=\"(max-width: 2880px) 100vw, 2880px\" \/><\/p>\n<p>\u30d1\u30f3\u304f\u305a\u304c\u300cHOME \u30b5\u30f3\u30d7\u30eb\u8a18\u4e8b\uff13 test page\u300d\u3068\u8868\u793a\u3055\u308c\u3066\u3044\u3066\u3001\u30af\u30ea\u30c3\u30af\u3057\u3066\u304d\u305f\u30da\u30fc\u30b8\u304cTrack(\u8ffd\u8de1)\u3055\u308c\u3066\u3044\u307e\u3059\u306d\uff01<\/p>\n<p>\u4fbf\u5229\u306a\u306e\u304b\u3069\u3046\u304b\u306f\u3055\u3066\u7f6e\u304d\u304a\u3082\u3057\u308d\u3044\u3067\u3059\u306d\uff01\u7b11<\/p>\n<p>\u66f4\u306bSample Page\u306b\u884c\u304f\u3068\u3002\u3002\u3002<\/p>\n<p><img loading=\"lazy\" src=\"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-4-3.png\" alt=\"\" width=\"2880\" height=\"1800\" class=\"alignnone size-full wp-image-153\" srcset=\"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-4-3.png 2880w, https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-4-3-300x188.png 300w, https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-4-3-768x480.png 768w, https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-4-3-1024x640.png 1024w\" sizes=\"(max-width: 2880px) 100vw, 2880px\" \/><\/p>\n<p>\u307e\u3060\u8ffd\u8de1\u3055\u308c\u3066\u3044\u307e\u3059<\/p>\n<p>\u9762\u767d\u3044\u3053\u3068\u306b\u3053\u306e\u307e\u307e\u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u306b\u884c\u304d\u3001\u5225\u306e\u8a18\u4e8b\u30da\u30fc\u30b8\u306b\u884c\u304f\u3068\u3002\u3002\u3002<\/p>\n<p><img loading=\"lazy\" src=\"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-4-4.png\" alt=\"\" width=\"2880\" height=\"1800\" class=\"alignnone size-full wp-image-154\" srcset=\"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-4-4.png 2880w, https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-4-4-300x188.png 300w, https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-4-4-768x480.png 768w, https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-4-4-1024x640.png 1024w\" sizes=\"(max-width: 2880px) 100vw, 2880px\" \/><\/p>\n<p>\u4e00\u65e6\u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u306b\u623b\u3063\u3066\u3082\u5168\u90e8\u8ffd\u8de1\u3055\u308c\u3066\u3044\u307e\u3059<\/p>\n<p>\u3053\u308c\u306f\u305a\u3063\u3068\u7d9a\u304f\u306e\u304b\u7591\u554f\u306b\u601d\u3063\u3066\u3044\u308b\u304b\u3082\u3057\u308c\u307e\u305b\u3093<\/p>\n<p>\u8ffd\u8de1\u304c\u7d42\u308f\u308b\u306e\u306f\u3001\u4e00\u5ea6\u8a2a\u308c\u305f\u30da\u30fc\u30b8\u306b\u623b\u308b\u304b\u30da\u30fc\u30b8\u3092\u518d\u8aad\u307f\u8fbc\u307f\u3059\u308b\u3068\u7d42\u308f\u308a\u307e\u3059<\/p>\n<p>\u8a66\u3057\u306b\u3053\u306e\u307e\u307e\u300c\u30b5\u30f3\u30d7\u30eb\u8a18\u4e8b\uff13\u300d\u306b\u884c\u3063\u3066\u307f\u307e\u3059<\/p>\n<p><img loading=\"lazy\" src=\"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-4-5.png\" alt=\"\" width=\"2880\" height=\"1800\" class=\"alignnone size-full wp-image-155\" srcset=\"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-4-5.png 2880w, https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-4-5-300x188.png 300w, https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-4-5-768x480.png 768w, https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-4-5-1024x640.png 1024w\" sizes=\"(max-width: 2880px) 100vw, 2880px\" \/><\/p>\n<p>\u9577\u30fc\u30fc\u30fc\u3044\u30d1\u30f3\u304f\u305a\u304c\u306a\u304f\u306a\u308a\u307e\u3057\u305f\u306d\u7b11<\/p>\n<p>\u30c8\u30c3\u30d7\u306b\u623b\u3063\u3066\u3082\u307e\u3060\u8ffd\u8de1\u3055\u308c\u3066\u3044\u308b\u306e\u3067\u3001\u9055\u3046\u8a18\u4e8b\u3078\u305a\u30fc\u3063\u3068\u4f55\u5341\u56de\u3082\u9077\u79fb\u3055\u308c\u305f\u3089\u51c4\u3044\u9577\u3044\u30d1\u30f3\u304f\u305a\u306b\u306a\u308a\u307e\u3059\u306d\u7b11<\/p>\n<ul>\n<div class=\"listLabel\">\uff0a\u6ce8\u610f<\/div>\n<li>URL\u304c&#8221;\/&#8221;\u3042\u308a\u304b\u306a\u3057\u304b\u7d71\u4e00\u3057\u3066\u304a\u304b\u306a\u3044\u3068\u540c\u3058\u30d1\u30f3\u304f\u305a\u304c\u751f\u6210\u3055\u308c\u307e\u3059<\/li>\n<\/ul>\n<p>\u3067\u3082\u3001Click Track\u3082\u30e6\u30cb\u30fc\u30af\u306a\u6a5f\u80fd\u306a\u306e\u3067\u81ea\u5206\u306e\u30d6\u30ed\u30b0\u306e\u4e0a\u306b\u300cYou have been to&#8230;(\u3042\u306a\u305f\u304c\u884c\u3063\u305f\u3068\u3053\u308d\u306f\u3002\u3002\u3002)\u300d\u3068\u8f09\u305b\u3066\u6a2a\u30b9\u30af\u30ed\u30fc\u30eb\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u3066\u307e\u3059<\/p>\n<p>\u4ee5\u4e0a\u3067\u3059<\/p>\n<p>\u3067\u306f\u307e\u305f\uff01\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"<p>#3\u306b\u7d9a\u304d\u3001\u30d1\u30f3\u304f\u305a\u3092\u4f5c\u3063\u3066\u307f\u307e\u3059 \u4eca\u56de\u306fgatsby-plugin-breadcrumb\u3092\u4f7f\u3063\u3066\u307f\u307e\u3059 Breadcrumbs\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u3063\u3066location\u7b49\u306eprops\u3092\u6e21\u305b\u3070\u4f5c\u308c\u308b\u304b\u3068\u601d\u3044\u307e\u3059\u304c\u3001Gatsb&hellip; <a class=\"more-link\" href=\"https:\/\/taroken.mixh.jp\/wp\/gatsby\/gatsby-wordpress-rest-api-4\/\">\u7d9a\u304d\u3092\u8aad\u3080 <span class=\"screen-reader-text\">#4 Gatsby + WordPress REST API\u3067\u30d6\u30ed\u30b0\u3092\u4f5c\u308d\u3046\u3010breadcrumbs\u7de8\u3011<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":107,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[10,7,9,11,8],"_links":{"self":[{"href":"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-json\/wp\/v2\/posts\/150"}],"collection":[{"href":"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-json\/wp\/v2\/comments?post=150"}],"version-history":[{"count":1,"href":"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-json\/wp\/v2\/posts\/150\/revisions"}],"predecessor-version":[{"id":156,"href":"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-json\/wp\/v2\/posts\/150\/revisions\/156"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-json\/wp\/v2\/media\/107"}],"wp:attachment":[{"href":"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-json\/wp\/v2\/media?parent=150"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-json\/wp\/v2\/categories?post=150"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-json\/wp\/v2\/tags?post=150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}