Categorias
WordPress

Criando primeiro seu tema Frontity

Nesse post vamos criar nosso primeiro tema customizado com frontity. Frontity é um framework react para integrar com WordPress Headless.

No post anterior sobre Frontity vimos como criar o nosso primeiro projeto agora vamos com criar nosso primeiro tema totalmente customizado, caso não conheça o frontity confira o post que fiz uma introdução sobre o framework react. Para esse tutorial o primeiro passo é ir na pasta de nosso projeto e criar um novo pacote para nosso tema executando o seguinte comando em nosso terminal:

npx frontity create-package [nome-do-pacote]

O comando irá criar uma pasta com o nome do pacote que especificamos dentro da pasta packages, lá iremos armazenar todos os pacotes locais responsáveis pela funcionalidades e exibição do conteúdo o nosso site. Em outras palavras podemos chamar do tema de nossa aplicação se olharmos para o Frontity como uma aplicação wp.

Para o nosso projeto irei criar o pacote tutorial-fellyph o código será o seguinte:

npx frontity create-package tutorial-fellyph

O comando irá criar a seguinte estrutura dentro da pasta packages:

|__ packages/ |__ fellyph-tutorial/ |__ package.json |__ src/ |__index.js

Package.json

Contém as configurações do tema como nome do nosso pacote, descrição e dependências:

{ "name": "tutorial-fellyph", "version": "1.0.0", "description": "Frontity package created using the Frontity CLI.", "keywords": [ "frontity", "frontity-tutorial-fellyph" ], "license": "Apache-2.0", "dependencies": { "frontity": "^1.11.1" } }

Arquivo principal de nosso tema

O arquivo index.js será o arquivo de entrada do nosso pacote/tema e irá conter a seguinte código:

import React from "react"; const Root = () => { return ( <> You can edit your package in: <pre>packages/tutorial-fellyph/src/index.js</pre> </> ); }; export default { name: "tutorial-fellyph", roots: { tutorial-fellyph: Root }, state: { tutorial-fellyph: {} }, actions: { tutorial-fellyph: {} } };

Temos nosso componente principal e as principais configurações do nosso tema:

  • roots: aponta para nosso componente raiz
  • state: contém todos as variáveis armazenadas no estado de nossa aplicação.
  • actions: contém todas as ações compartilhadas em nosso tema.

Agora o próximo passo será ativar nosso novo tema e para isso precisamos alterar o nosso arquivo de configurações frontity.settings.js:

const settings = { "name": "frontity-tutorial", "state": { "frontity": { "url": "blog.fellyph.com.br", "title": "Blog Frontity Fellyph Cintra", "description": "Theme created to the frontity tutorial" } }, "packages": [ { "name": "tutorial-fellyph" }, { "name": "@frontity/wp-source", "state": { "source": { "api": "https://blog.fellyph.com.br/wp-json" } } }, "@frontity/tiny-router", "@frontity/html2react" ] }; export default settings;

Se tudo der certo o resultado será o seguinte:

Nosso ambiente de teste rodando o tema que acabamos de criar

Agora que temos nosso tema rodando e para alterar o conteúdo podemos alterar o componente Root dentro de nosso index.js. Mas para esse tutorial vamos mover e substituir nosso componente Root para um arquivo separado, nesse caso dentro da pasta tutorial-fellyph/src vamos criar uma pasta components lá iremos criar um arquivo chamado index.js, ele será responsável pelo esqueleto principal de nosso projeto, esse arquivo pode ter qualquer nome mas vamos seguir uma conversão para nos ajudar no futuro.

Agora movendo o código para o arquivo src/components/index.js o nosso código ficará da seguinte forma:

import React from 'react'; const Theme = () => { return ( <h1>Nosso Primeiro tema com Frontity</h1> ); }; export default Theme;

Modifiquei o nome do componente de Root para Theme e alterei o conteúdo para um h1. Já o src/index.js da seguinte forma:

import Theme from "./components/index"; export default { name: "tutorial-fellyph", roots: { "tutorial-fellyph": Theme, }, state: { "tutorial-fellyph": {} }, actions: { "tutorial-fellyph": {} } };

Agora conectamos os dois items, importando e adicionando o componente Theme a propriedade roots.

Lendo informações do WordPress

Até então ainda não lemos nenhuma informação de nossa aplicação WordPress, quando configuramos o nosso projeto dentro da lista de pacotes temos a configuração de wp-source ele será responsável por adicionar os dados do WordPress em nosso estado, se você trabalha com React o conceito estado é algo comum, caso contrário você pode conferir a documentação do react:

{ "name": "@frontity/wp-source", "state": { "source": { "api": "https://blog.fellyph.com.br/wp-json" } } },

Como podemos ver atribuímos a fonte de nosso conteúdo no estado de nossa aplicação com isso a vantagem de trabalhar com frontiy é que ele irá cuidar de fazer a configuração e filtros em diferentes requisições de conteúdo.

O pacote wp-source possui uma série de funcionalidades onde podemos abordar em mais detalhes no futuro. Mas já com as configurações atuais, podemos acessar esses dados e inspecionar via console no Chrome devTools ou qualquer browser moderno:

Quando inspecionamos frontity.state temos o resultado acima

Como podemos ver o state retorna um Objeto do tipo Proxy, ele permite criar uma um proxy para um outro objeto com operações fundamentais nele temos dois parâmetros:

  • target: O objeto que contém os dados.
  • handler: As possíveis operações que conseguimos realizar sobre objeto target.

Dentro de target temos 4 valores:

  • frontity: configurações do nosso projeto como url principal e nome do projeto
  • router: ferramenta de controle de rotas do frontity
  • source: os dados vindos da consulta do wp-source
  • tutorial-fellyph: dados a referente ao nosso tema

Agora vamos ler algumas informações em nosso arquivo principal Theme para isso precisamos conectar nosso vamos utilizar o método connect do Frontity da seguinte forma:

import React from 'react'; import { connect } from 'frontity'; const Theme = ({state}) => { return ( <> <h1>Nosso Primeiro tema com Frontity</h1> <p>URL Atual: {state.router.link}</p> <p>Autor: {state.source.author[1].name}</p> </> ); }; export default connect(Theme);

Assim temos o seguinte resultado:

Carregamos a url atual e o nome do autor

Para acessar os dados de forma mais elegante podemos vamos utilizar dois métodos get para quando temos os dados disponíveis em nosso estado and fetch quando queremos fazer uma requisição http a essa informação. Esses métodos estão disponíveis tanto em nosso router quando em nosso wp-source.

Por exemplo, podemos acessar nosso source e utilizar o método “get” para acessar as informações da página atual da seguinte forma e na sequência acessa a lista de post relacionados:

import React from 'react'; import { connect } from 'frontity'; const Theme = ({state}) => { const data = state.source.get(state.router.link); return ( <> <h1>Nosso Primeiro tema com Frontity</h1> <p>URL Atual: {state.router.link}</p> <p>Autor: {state.source.author[1].name}</p> { data.items.map( item => { const post = state.source.post[item.id] return ( <article key={post.id}> <h2>{post.title.rendered}</h2> </article> ) }) } </> ); }; export default connect(Theme);

Com o código acima acessamos os dados do post e realizamos um loop utilizando a função map para acessar item a item assim acessamos os dados do post com state.source.post[item.id] e na sequência retornamos uma article com o título do post.

Dentro do objeto post conseguimos acessar uma série dados como:

  • categories
  • date
  • excerpt
  • id
  • link
  • status
  • sticky
  • tags
  • title
  • type

Entre outras informações, o resultado visual é bem simples pois não estamos utilizando nenhum estilo até o momento:

Listagem de posts utilizando frontity

Agora temos o nosso primeiro tema com Frontity exibindo uma listagem de posts na home. Vamos finalizando esse post por aqui mas teremos uma continuação com mais customizações em nosso tema.

Caso queira acompanhar mais conteúdo sobre WordPress você pode conferir meu canal no youtube ou acessar a página da categoria WordPress.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *