Categorias
WordPress

Gifs e legendas para vídeos chegam no web stories para WordPress

Nos posts anteriores falei sobre o novo plugin de web stories para WordPress ness post vamos falar das novidades na versão 1.1 do plugin:

  • Suporte a inclusão de gifs
  • Legendas para vídeos
  • Inclusão de templates para textos

Um gif pode valer mais que mil palavras

Inclusão de gifs em stories é algo ajuda na parte editorial trazendo animações que trazem referências para um grupo específico ou assunto. O recurso já utilizado em outras plataformas e agora temos suporte a inclusão de gifs no Web Stories para WordPress através da plataforma Tenor. Da mesma forma que temos acesso a galeria do unsplash agora temos a inclusão da biblioteca de gifs do Tenor.

Novo painel de inclusão de gifs

Legendas

Legendas é um item essencial para acessibilidade e SEO, Agora temos a opção de adicionar legendas em nossos vídeos com o plugin. Outro fator importante de legenda muitas vezes usuários mobile assistem nosso vídeo sem áudio, em transporte público ou momentos onde não se pode reproduzir vídeos com áudio para esses casos a legenda tem um papel importante.

O formato suportado pelo web stories é o WebVTT, formato suportado por diversos players e padrão da web que possui o seguinte formato:

WEBVTT - Web Core Vitals 00:00.000 --> 00:03.005 O web core vitals é uma nova métricas que 00:03.000 --> 00:05.995 vai ai fazer parte do ranqueamento da busca do Google 00:06.039 --> 00:08.529 E ela vai ter o foco na experiência do usuário

O documento precisa começar com WEBVTT em seguida o título do vídeo(opcional) e os blocos sempre seguidos por um espaço. Cada bloco possui uma linha com o tempo e a segunda linha a legenda para aquele espaço de tempo.

WebVTT aceita propriedades como alinhamento e tamanho de fonte mas não vamos entrar nesses detalhes caso não queira tratar com esses ítens na web você vai encontrar alguns editores visuais para legenda como o VTT Creator:

Uma vez que criamos a legenda para o nosso vídeos adicionamos via painel lateral quando selecionamos o nosso vídeo:

Editor visual com vídeo selecionado

Templates para textos

Por último mais não menos importante temos a inclusão de templates para textos, funcionalidade que irá ajudar na parte gráfica a produção de stories. Nas primeiras versões tinhas templates para stories nesse caso temos combinações de textos e títulos que irão ajudar a harmonizar o seu conteúdo.

Novo painel de templates de textos

Se já está utilizando o plugin de stories para WordPress diga o que você está achando do plugin nos comentários. Para mais posts sobre WordPress acesse a página da categoria.

Categorias
Tutoriais

Lazy-loading nativo dos browsers

Lazy Loading ou Carregamento tardio para imagens e vídeos é um recurso onde você prioriza o carregamento dos itens visíveis na tela do usuário. O resultado dessa ação melhora o tempo de carregamento para a área visível do usuário e o carregamento de recursos somente quando necessário super relevante para usuários mobile.

Esse Recurso foi introduzido pelo internet Explorer 11 mas nenhum browser implementou o recurso nessa época. Em 2019 o Chrome voltou a colocar o recurso em pauta na versão 76. Atualmente o recurso está disponível para Edge, Firefox, Chrome, Opera e Android Browser. Já no Safari recurso está disponível em formato de teste.

Em Agosto de 2020 o recurso ganhou atenção quando passou a fazer parte do Core do WordPress na versão 5.5. Mas como esse recuso funciona? Nesse posts vamos ver como implementar essa funcionalidade e os requisitos para fazer uso do recurso.

Trabalhando com Lazy-Loading

Para aplicar o lazy-loading em imagens adicionamos o atributo loading na tag img, por exemplo:

<img loading="lazy"src="minha_foto.jpg" />

O atributo loading pode receber os seguintes valores:

  • auto: Executará o comportamento padrão do navegador
  • lazy: A image só será carregada quando o scroll chegar uma distância específica da área visível.
  • eager: Carrega o recurso imediatamente caso esteja localizado na página.

Além da propriedade loading as imagens precisam ter especificadas suas dimensões largura e altura. Isso porque até carregar as imagens o browser não sabe as dimensões da imagem. Além disso a falta de dimensões podem causar mudanças de layout durante o carregamento também um fator que pode comprometer a experiência do usuário.

A definição das dimensões é uma recomendação já antiga antes mesmo da propriedade loading existir. Com o lazy-loading isso se torna mais relevante sem as dimensões o carregamento fica ainda mais dependente dos browsers.

As tags picture, video e iframe também podem fazer o uso do lazy loading como no exemplo abaixo:

<picture> <source media="(min-width: 900px)" srcset="wordcamp.jpg 1x, wordcamp_2x.jpg 2x"> <img src="wordcamp_fallback.jpg" loading="lazy"> </picture>
<video src="./wordcamps/wordcamp_edinburgh_2018.MP4" width="720" height="1280" loop loading="lazy" controls="false" muted></video>
<iframe width="900" height="515" loading="lazy" src="https://www.youtube.com/embed/yT7fCspMrU8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

No código anterior temos múltiplas alternativas de carregamento mas o atributo loading só precisa ser definido na tag img.

Carregamento de imagens e sua visualização

A implementação do recurso tenta garantir performance sem afetar a experiência do usuário. Assim o carregamento da imagem irá iniciar quando a imagem atingir uma distância minima da área visível. Mas vale lembrar que o carregamento das imagens ficam dependentes da rede do usuário.

Comparado a algumas bibliotecas de lazy loading a distância implementada pelos browsers que rodam a engine do Chrome são um pouco conservadoras.

Mas no Chrome essa distância não é fixa ele é dependente de alguns fatores:

  • O tipo da imagem que está sendo carregada
  • Se o modo econômico tá habilitado
  • Conexão efetiva do device

Mudanças em 2020

Após a implementação do recurso na versão 76 em Julho de 2020 essa distância foi reduzida baseada nos relatórios recolhidos nos primeiros meses de uso do recurso. Para conexões 4G o primeiro carregamento ficava restrito a uma área de 3000px agora foi reduzido para 1250px. e para conexões lentas de 4000px para 2500px.

Essas medidas reduzem o carregamento médio de imagens em até 40%. O assunto não é muito extenso então vamos ficando por aqui para mais tutoriais acesse a página da categoria tutoriais. Também fiz um vídeo em meu canal onde eu abordo o assunto:

Para mais informações sobre lazy loading acesse o site do web.dev: https://web.dev/native-lazy-loading/.

Categorias
Geral

Estilizando temas Frontity com CSS-in-JS

Nesse post vamos falar sobre como estilizar nossos temas Frontity, o framework trabalha com emotion uma biblioteca css que nos ajuda a escrever CSS-in-JS. Essa é a primeira vez eu acho que falamos em CSS-in-JS no blog. Esse post faz parte de uma série sobre Frontity:

CSS-in-JS

Antes de entrar no assunto de estilização com Frontity vamos falar sobre CSS-in-JS é um assunto que tomou o hype a dois anos atrás com Styled Components, emotion e outros frameworks ele permite a escrita de CSS dentro de arquivos JavaScript, assim adicionamos super poderes em nosso estilo, com emotion temos várias formas de escrever CSS-in-JS, como por exemplo:

import styled from '@emotion/styled' const Button = styled.button` padding: 32px; background-color: hotpink; font-size: 24px; border-radius: 4px; color: black; font-weight: bold; &:hover { color: white; } ` render(<Button>This my button component.</Button>)

Como podemos ver utilizando string literals para escrever CSS atualmente os principais editores de texto reconhecem essa sintaxe, por exemplo, VS Code. Para simples mas temos uma série de conceitos que podemos ver nesse código e também parte de compilação.

  • nesting: algo comum com LESS e SASS é o uso de nesting onde podemos agrupar seletores.
  • CSS + Javascript: podemos definir regras e concatenar variáveis como JavaScript.
  • Compilação: muita gente pensa que CSS-in-JS é inline CSS mas esse código é compilado gerado uma style tag para esse elemento, como podemos ver o código a seguir:
<button class="css-txevan ezh9olb0">This my button component.</button> <style> .css-txevan { padding: 32px; background-color: hotpink; font-size: 24px; border-radius: 4px; color: black; font-weight: bold; } </style>
  • CSS modular: temos a possibilidade de criar um CSS modular criando seletores únicos dinamicamente e só carregando o CSS quando necessário.
  • Cross-browsing: Além disso bibliotecas como styled components e emotion cuidam de fazer todo o trabalho de cross-browsig.

Emotion é a biblioteca adotada por Frontity para trabalhar como ela você não precisa fazer nenhuma instalação uma vez que você instala Frontity já pode fazer uso dos recursos, para isso importamos classes e funções dentro do Frontity.

Nosso projeto

Alguns desses conceitos vamos abordar quando começamos a estilizar nosso tema. Agora vamos voltar para o nosso projeto, para definir o estilo da nossa aplicação vamos utilizar o Starter Theme da Alessandra Stalanto como base:

Demo do Stater Theme

No último post criamos o seguinte componente principal:

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);

Estilo Global

Como vimos no exemplo anterior o estilo criado com emotion fica vinculado ao componente criando uma estrutura mais modular. Caso queiramos adicionar um estilo de forma global precisamos adicionar o componente Global esse componente recebe como parâmetro um estilo que será o seguinte:

import { css } from "frontity"; export default css` body { margin: 0 font-size: 1.25rem; color: #0d405b; background-color: #FBEED9; } html, body { max-width: 100%; overflow-x: hidden; } a, a:visited { color: inherit; text-decoration: none; } `;

Vamos adicionar esse estilo dentro da pasta tutorial-fellyph > src > styles criamos o arquivo globalStyles.js. Um ponto importante desse código que importamos uma função css ela nos ajudará a manipular o conteúdo como CSS e não uma simples string literal. Agora o próximo passo será adicionar nosso estilo global.

import React from 'react'; import { Global, connect } from 'frontity'; import globalStyles from "../styles/globalStyles"; const Theme = ({state}) => { const data = state.source.get(state.router.link); return ( <> <Global styles={globalStyles} /> <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);

O arquivo global tem algumas regras básicas. Podemos criar algo um pouco mais complexo para utilizar o Componente Global para adicionar nossas fontes, para isso vamos criar um arquivo fontFace.js dentro da mesma pasta que globalStyles:

import React from "react"; import { Global, css } from "frontity"; import baumansWOFF2 from "../fonts/baumans_regular-webfont.woff2"; import khandmediumWOFF2 from "../fonts/khand_500-webfont.woff2"; const FontFace = () => ( <Global styles={css` @font-face { font-family: "khandmedium"; src: url(${khandmediumWOFF2}) format("woff2"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "baumansregular"; src: url(${baumansWOFF2}) format("woff2"); font-weight: normal; font-style: normal; font-display: swap; } `} /> ); export default FontFace;

Como podemos ver o component FontFace por se só acessa diretamente o componente Global, além carregar as fontes que iremos trabalhar baumas e khand mas para vincular as fontes precisamos adicionar em nosso componente principal.

Antes de mostrar o Theme componente vamos mover a estrutura de nosso post para um componente Post:

import React from 'react'; import { styled } from 'frontity'; export const Post = ({ post }) => { return ( <Box> <h2>{post.title.rendered}</h2> </Box> ) } const Box = styled.article` box-sizing: border-box; margin: 0; min-width: 0; width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; padding: 20px; max-width: 900px; margin-bottom: 48px; box-shadow: 0px 1px 10px rgba(0,0,0,0.05); background-color: #fdf6eb; color: #0d405b; h2 { font-family: baumansregular, sans-serif; line-height: 1.1; color:#0d405b; font-size: 2rem; margin-top: 8px; } `;

Também vamos criar um componente para nosso cabeçalho com o component header:

import React from 'react' import { styled } from 'frontity'; export const Header = ({ title }) => { return ( <HeaderContainer> <h1>{title}</h1> </HeaderContainer> ) } const HeaderContainer = styled.header` background-color: #082737; color: #FBEED9; font-weight: bold; margin: 0 0 20px 0; padding: 1em; box-shadow: 0px 1px 10px rgba(0,0,0,0.05); h1 { font-size: 2rem; text-transform: uppercase; font-family: baumansregular,sans-serif; text-align: center; letter-spacing: 4px; line-height: 1.5; color: #FCB458; margin: 0; } `;

Agora como esses dois componentes vamos finalizar nosso Theme componente para esse tutorial:

import React from 'react'; import { Global, connect } from 'frontity'; import globalStyles from '../styles/globalStyles'; import FontFace from '../styles/fontFace'; import { Post } from './post/post.js'; import { Header } from './header/header'; const Theme = ({state}) => { const data = state.source.get(state.router.link); return ( <> <FontFace /> <Global styles={globalStyles} /> <Header title="Nosso Primeiro tema com Frontity" /> { data.items.map( item => { const post = state.source.post[item.id] return ( <Post key={post.id} post={post} /> ) }) } </> ); }; export default connect(Theme);

Assim o resultado será o seguinte:

Tema carregando os estilos

Vamos fechando esse post por aqui, para conferir o código completo você pode conferir o a branch que criei em meu github: https://github.com/fellyph/frontity-tutorial/tree/videos/04-css-in-js-final para mais posts sobre WordPress acesse a página da categoria.

Categorias
WordPress

Criando primeiro seu tema Frontity

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.

Categorias
WordPress

Criando seu primeiro projeto com Frontity

No post anterior eu fiz uma introdução sobre Frontity nesse post eu irei mostrar o passa-a-passo de como criar o seu primeiro Projeto com Frontity.

Para isso teremos alguns pré-requisitos:

  • Node.js instalado em nossa máquina
  • Terminal de linha de comando
  • Um editor de texto para codificar o nosso tema no meu caso irei utilizar o vs code
  • Ter uma aplicação WordPress para conectar com sua aplicação Frontity

Agora com tudo pronto precisamos abrir o nosso terminal na página que queremos criar o nosso projeto e rodar o seguinte comando:

npx frontity create frontity-tutorial

Esse comando irá criar um projeto dentro da pasta frontity-tutorial nesse caso podemos utilizar qualquer nome para o nosso projeto. O processo de instalação utiliza npx, mas caso não conheça ele tem o comportamento similar ao npm mas com uma diferença ele irá. Remover os pacotes uma vez que executados. Caso queira saber mais sobre o recurso acesse este artigo.

Terminal rodando o script para criar um projeto frontity

Quando executado o comando as o recurso irá rodar um passo-a-passo, com duas perguntas a primeira qual será o tema inicial Mars theme ou Twenty Twenty e a segunda pergunta caso queira se inscrever na newsletter do Frontity. Uma vez criado podemos entrar na pasta que criamos e rodar a nossa a aplicação em modo desenvolvimento:

cd frontity-tutorial && npx frontity dev

Agora acessando a pasta frontity-tutorial temos a seguinte estrutura:

my-app/ |__ node_modules/ |__ package.json |__ frontity.settings.js |__ favicon.ico |__ packages/ |__ mars-theme/

Uma vez que rodamos frontity em modo desenvolvimento teremos nossa aplicação rodando no endereço localhost:3000

Tema mars rodando no localhost

Como podemos ver a nossa aplicação está lendo posts de uma aplicação WordPress, mas precisamos adicionar a nossa própria aplicação, caso esteja rodando uma aplicação local você também pode apontar para ela. Mas no meu teste eu vou utilizar o meu blog pessoal e para isso precisamos alterar as configurações do nosso projeto no arquivo frontity.settings.js que contém o seguinte código

const settings = { "name": "frontity-tutorial", "state": { "frontity": { "url": "https://test.frontity.org", "title": "Test Frontity Blog", "description": "WordPress installation for Frontity development" } }, "packages": [ { "name": "@frontity/mars-theme", "state": { "theme": { "menu": [ [ "Home", "/" ], [ "Nature", "/category/nature/" ], [ "Travel", "/category/travel/" ], [ "Japan", "/tag/japan/" ], [ "About Us", "/about-us/" ] ], "featured": { "showOnList": false, "showOnPost": false } } } }, { "name": "@frontity/wp-source", "state": { "source": { "api": "https://test.frontity.org/wp-json" } } }, "@frontity/tiny-router", "@frontity/html2react" ] }; export default settings;

Como podemos temos inicialmente algumas configurações do nosso projeto e na parte final temos um endereço guardado na propriedade API esse é um blog de test do frontity para o meu test irei substituir o endereço test.frontity.org por blog.fellyph.com.br assim teremos o seguinte resultado:

Tema inicial apontado para meu blog

Como podemos ver minha aplicação frontity passou a carregar os posts do meu blog pessoal mas o header ainda continua com o conteúdo antigo. Nesse caso essa informação é controlada pelo nosso arquivo de configuração nas propriedades título, descrição e os links pela propriedade menu, assim com a atualização o nosso arquivo ficará o seguinte:

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": "@frontity/mars-theme", "state": { "theme": { "menu": [ [ "Home", "/" ], [ "Tutoriais", "/category/tutoriais/" ], [ "Curso PWA", "/curso-online-progressive-web-apps/" ], [ "Sobre", "/sobre/" ] ], "featured": { "showOnList": false, "showOnPost": false } } } }, { "name": "@frontity/wp-source", "state": { "source": { "api": "https://blog.fellyph.com.br/wp-json" } } }, "@frontity/tiny-router", "@frontity/html2react" ] }; export default settings;

Se você navegar pela a aplicação verá que todos os posts páginas de categorias serão renderizados. Agora o próximo passo caso queira alterar o tema padrão você irá precisar ir na pasta packages/mars-theme/ para entender mais sobre acesse a documentação do tema.

Mas para essa série de posts vamos criar o nosso tema do zero e entender os conceitos por trás do Frontity mas isso eu irei deixar guardado para o próximo post. Para ler mais posts sobre WordPress acesse a página da categoria WordPress.