Render Header Menu từ WordPress sang Gatbsy

Trong bài trước mình đã hướng dẫn các bạn cách kết nối Gatsby với WordPress và hướng dẫn cơ bản về cách sử đụng GraphQL. Thì với bài này chúng ta sẽ tiếp tục tìm hiểu và tạo header menu từ WordPress sang Gastby nhé.

Tạo Menu trên WordPress

Để tạo menu đưa từ WordPress sang Gatsby các bạn cần cái plugin WP API Menus để đưa data menu vào api của WordPress.  Sau khi activate plugin chúng ta sẽ bắt đầu tạo menu trên WordPress. Các bạn vào dashboard tạo menu nhé sau đó vào terminal  bật Gatsby:

gatsby develop

Sau đó chúng ta cùng bật GraphQL để kiểm tra bằng cách vào đường dẫn sau: http://localhost:8000/__graphql.  Các bạn query thoe dòng code sau nhé:

query MyQuery {
  allWordpressMenusMenusItems {
    edges {
      node {
        name
        items {
          slug
          title
        }
      }
    }
  }
}

Và kết quả trả về sẽ như sau :

{
  "data": {
    "allWordpressMenusMenusItems": {
      "edges": [
        {
          "node": {
            "name": "Main menu",
            "items": [
              {
                "slug": null,
                "title": "Home"
              },
              {
                "slug": "sample-page",
                "title": "Sample Page"
              }
            ]
          }
        }
      ]
    }
  }
}

Vậy là chúng ta đã hoàn thành xong bước đưa menu và xem kết quả trả về trên GraphQL. Tiếp theo chúng ta sẽ render trên Gatsby

Đưa menu từ WordPress lên Gatsby

Và kết quả trả về sẽ như sau :

import React from 'react'
import {graphql, StaticQuery, Link} from "gatsby";
const Navbar = () =>(
   <div className="navbar">
     <div className="navbar__contain container">
       <ul className="navbar__list">
           <StaticQuery query={graphql`{
                   allWordpressMenusMenusItems {
                      edges {
                        node {
                           name
                            items {
                               slug
                                 title
                                    }
                                 }
                             }
                        }
                   }
             `} render={props =>props.allWordpressMenusMenusItems.edges[0].node.items.map((menuItem,index) =>(
                   <li className="navbar__item" key={index}>
                       <Link className="navbar__link" to={menuItem.slug}>{menuItem.title}</Link>
                    </li>
                    ))}/>
             </ul>
    </div>
  </div>
)
export default Navbar

Mình sẽ giải thích code như sau: trước nhất các bạn cần import module react và graphql, StaticQuery, Link để chúng ta sử dụng. Mình tạo một react component theo khai báo arrow function như ES6 và export component Navbar để có thể đưa vào component Layout trong layout.js mà theme mặc định đã tạo sẵn. Sau đó mình dùng thẻ StaticQuery để query dữ liệu mà chúng ta đã query mẫu trên GraphQL. Và dùng thuộc tính render để render array dữ liệu ra ngoài front page bằng cách dùng hàm map trong JavaScript. Khi render các bạn nhớ truyền vào key cho từng component con để tránh bị báo lỗi trên console. Ở đây mình dùng thẻ Link để làm navigator cho các trang nội bộ bên trong.

Tổng kết

Qua bài này mình đã giúp các bạn các liên kết render header từ WordPress sang Gatsby. Bài kế tiếp mình sẽ hướng dẫn các bạn làm Hamburger button và overlay menu khi responsive trên Gatsby

Cảm ơn các bạn.