Categoria: WordPress

Categorias
WordPress

Web Stories para WordPress

Stories nos últimos anos se tornou um dos conteúdos mais consumidos no mundo dos dispositivos móveis, formato introduzido pelo Snapchat se popularizou no Instagram e em seguida se espalhou pelo facebook, whatsApp e recentemente foi adicionado no LinkedIn.

Um ponto que todas essas plataformas tem em comum? Elas são plataformas privadas o conteúdo gerado nessas plataformas estão a controle de terceiros. Em fevereiro de 2018 com uma iniciativa de adicionar o recurso a web aberta, AMP lançou stories para web. O recurso está disponível no framework onde você pode criar seus próprios stories para qualquer dispositivo mobile independente do sistema operacional e sem a necessidades da instalação de um App.

Já se passaram dois anos e porque estamos falando de stories só agora? No Google I/O do ano passado tivemos o anúncio da inclusão de web stories nos resultados da busca do Google, esse resultados vão estar disponíveis no Google Images e Discovery(2019 o recurso teve 800 milhões de usuários ativos mensalmente).

Esse anúncio trás um novo significado para o recurso, agora temos uma nova oportunidade de capitalizar usuários de forma orgânica, atualmente o recurso está em formato de teste nos Estados Unidos e será lançado em outras regiões ainda esse ano.

Video de apresentação do web stories no Google I/O 2019

Web Stories é uma incógnita inicialmente alguns portais como Washington Post e CNN estão fazendo uso do recurso. Mas a pergunta é: stories é utilizado em sua maioria em redes sociais, será que o formato irá vingar em caracter informativo?

O plano inicial do Google é utilizar o recursos nas seguintes categorias:

  • Viagens
  • Filmes
  • Receitas
  • Fashion
  • Games
  • Shows de TV

Como criar Web Stories

A implementação dos Stories é em AMP teremos dois caminhos programando ou utilizar um editor visual. Depois de implementado os web stories seu conteúdo precise seguir alguns critérios para isso podemos testar nosso Web Stories com Search Console onde entraremos em mais detalhes a seguir.

Para a criação de web stories com programação vou dedica um post exclusivo para esse post vamos ter uma introdução e ver alguns conceitos relacionados utilizando editores visuais. Os editores visuais temos algumas opções plataformas gratuitas com recursos premium como:

makestories amp stories visual editor

Anteriormente tínhamos o plugin de AMP que tinha como recurso a possibilidade de criar AMP Stories esse recurso foi descontinuado no plugin de AMP oficial e o Google começou a focar em um plugin exclusivo para AMP Stories agora chamadoWeb Stories para WordPress. O plugin está na sua versão beta assim como o Site Kit o Google utilizou a mesma estratégia está utilizando sua base de seguidores para testar o plugin antes do seu lançamento no repositório oficial.

Como mencionei anteriormente o plugin está na versão beta então muita coisa ainda vai mudar e se caso queira testar o plugin saiba que ele ainda não está 100%. O plugin tem previsão para ficar disponível non final do verão nos EUA isso pode ser por meados de Setembro.

Plugin Web Stories for WordPress

Agora vamos falar sobre o plugin, vou realizar um teste aqui no meu blog e monitorar como se comporta a audiência referente aos stories. Para isso vamos instalar o plugin caso estiver lendo esse post após o lançamento do plugin no repositório oficial do WordPress o processo de instalação será diferente.

Mas caso queira instalar a versão beta os passos serão

1. Baixar o zip do plugin no endereço https://google.github.io/web-stories-wp/beta/

Página do plugin versão beta do WebStories

2. Logar no painel do WordPress em que você deseja instalar o plugin

3. Ir na seção plugin no menu lateral esquerdo e selecionar “adicionar novo”

Tela da administração de plugins

4. Na tela de adicionar novo escolher a opção no topo “Enviar plugin” e enviar o zip que acabamos de baixar no site do plugin.

Tela adição de plugins

5.Após o envio clique em “ativar plugin

último passo ativando plugin

6. Quando instalado o menu de stories ficará disponível na sessão Stories no seu menu lateral e ele terá o seguinte visual:

Criando Web Stories com o plugin

Instalei o plugin no meu blog pessoal, para esse post eu criei dois Stories como teste. Quando você clica em adicionar Web Stories a primeira impressão é que você está trabalhando eu outro software, o editor visual com um tema dark como podemos ver na imagem a seguir:

Editor de Web Stories

Primeiro passo foi criar minha primeira história, alguns momentos é difícil de identifica se o elemento na tela é editável ou é apenas uma informação, por exemplo, Rascunho automático é o título do meu stories completo e também vai definir o slug do meu story.

Mas o editor gráfico é completo com várias opções de edição alguns momentos a resposta não é precisa mas normal para um plugin que está na sua versão beta.

Criei dois stories sobre posts antigos em meu blog referente a lista de coisas que aprendi depois que me mudei para Dublin então já tinha o conteúdo a maior parte do trabalho foi achar as imagens. Cada Story contém 6 páginas. Com titulo e descrição a inclusão de texto é livre mas temos alguns items que são relevantes a validação de nosso stories.

Nesse post vamos focar no processo completo de criação de stories. Para o processo de edição de stories melhor material é seria gravar um vídeo com um passo-a-passo. Mas depois que concluímos o nosso Story temos que ficar atento a alguns pontos:

  • Primeiro no menu lateral direito temos os controles sobre o documento, como configurações gerais. Para ter um story válido precisamos de um ícone e uma imagem de cobertura esses itens serão essenciais para busca.
  • Quando completo o processo teremos um permalink para o nosso story em um endereço começando com /stories/, por exemplo : https://blog.fellyph.com.br/stories/5-coisas-que-aprendi-no-meu-primeiro-ano-de-trabalho-na-irlanda/
  • Possivelmente esse processo irá mudar mas na versão beta precisa desse link pra adicionar em nosso bloco Gutenberg como na imagem a seguir:
Exemplo de bloco web stories

Validando suas web stories

Depois de tudo pronto o último passo para verificar se nossos stories são válidos para os cards especiais na busca é validar nossos stories com Search Console https://search.google.com/test/amp, para testar sua web story você precisa somente passar o endereço de sua web story e assim você terá o feedback:

Conclusão

Quando comecei a escrever esse post tinha minhas dúvidas sobre web story após começar a criar stories comecei ver alguns benefícios. Por exemplo no meu blog sempre faço essas listas: “5 coisas que aprendi como…” ou “5 erros comuns na hora de…” e o esforço pra criar esse conteúdo foi mínimo, primeira web story passei 30 min para criar mas desse tempo maior parte foi escolhendo fotos e entendendo a interface do editor visual as seguintes foram mais rápidas em torno de 20 a 15 minutos.

Primeiro conteúdo que veio em mente para os stories foi reciclar meu conteúdo já existente isso pode ser uma boa forma de renovar seu conteúdo dando mais alternativas para os leitores. Por fim vou criar mais alguns stories e esperar um impacto na audiência do meu blog.

Sobre a experiência de edição o plugin está na versão Beta muita coisa ainda não funciona 100%. Mas se o Google colocar o mesmo investimento que fizeram no Site Kit em 3 meses teremos uma versão 100% estável.

Vale a pena investir em Web Stories? Como toda nova tecnologia essa é uma aposta você pode sair na frente da concorrência e assumir os riscos ou esperar ver como o mercado irá reagir e investir com mais segurança mais ai sua concorrência será ainda maior. Particularmente você não tem nada a perder pegue seus posts que não tem aquele desempenho e adicione stories e veja se você tem alguma melhoria no tráfego.

Mais posts sobre acesse a página da categoria WordPress.

Categorias
PWA - Progressive web apps WordPress

Transformando seu site WordPress em uma PWA

Nesse post iremos ver como utilizar o plugin oficial do Google para converter seu site WordPress em uma Progressive Web App, atualmente temos uma série de plugins para converter seu site em uma PWA, os 3 principais plugins são:

Plugin PWA Google

Nesse post vamos focar no plugin mantido pelo time do Google e XWP. Esse plugin foi criado com a intenção de fazer parte do core do WordPress aos poucos, no ano passado o plugin foi utilizado no tema do WordCamp Europe Berlin. Pelo fato que o plugin tem como objetivo fazer parte do core uma vez instalado o plugin não ativa nenhum painel mas quando realizamos auditoria com Lighthouse temos o seguinte resultado:

Lighthouse usa um checklist para fazer a validação se nosso site como uma PWA

Lighthouse olha para três categorias:

  • Rápido e estável: Rápido carregamento e suporte a offline.
  • Instalável: Uso de HTTPS e uso de web app manifest
  • Otimizado: Configurações para barra de navegação customizada, design responsivo, conteúdo disponível sem a execução de JavaScript, inclusão de configuração para apple-touch-icon

O plugin gera web app manifest através da REST API uma vez que o plugin é ativado você pode conferir o endereço /wp-json/wp/v2/web-app-manifest.

Meu blog por exemplo:

{
  "name": "Blog Fellyph Cintra",
  "start_url": "https:\/\/blog.fellyph.com.br\/",
  "display": "minimal-ui",
  "dir": "ltr",
  "lang": "pt-BR",
  "background_color": "#fafafa",
  "theme_color": "#fafafa",
  "description": "Blog sobre WordPress, JavaScript, HTML, CSS, eventos e algo mais",
  "icons": [
    {
      "src": "https:\/\/blog.fellyph.com.br\/wp-content\/uploads\/2018\/11\/cropped-1796698_795991100415208_12473649_n-192x192.jpg",
      "sizes": "192x192",
      "type": "image\/jpeg"
    },
    {
      "src": "https:\/\/blog.fellyph.com.br\/wp-content\/uploads\/2018\/11\/cropped-1796698_795991100415208_12473649_n.jpg",
      "sizes": "512x512",
      "type": "image\/jpeg"
    }
  ]
}

As propriedades são geradas da seguinte forma:

  • name: O título do site carregada pela função get_option(‘blogname’)
  • short_name: copia do site title com no máximo 12 caracteres
  • description: descrição do site get_option(‘blogdescription’)
  • lang: idioma do site get_bloginfo(‘language’)
  • start_url: home URL via get_home_url()
  • theme_color: background customizado via get_background_color()
  • background_color: também carregado pelo background customizado
  • display: por padrão é minimal-ui
  • icons: o ícone do site via get_site_icon_url()

Para a configuração completa sem modificação no código o título do site precisa ter menos de 12 caracteres, caso contrário precisamos customizar o nosso código, em outras palavras precisamos tocar no código. Weston criador do plugin PWA também criou um mini plugin para incluir essas informações sem código:

https://gist.github.com/westonruter/dec7d190060732e29a09751ab99cc549

A Primeira vez que rodei a auditoria tive dois problemas, o primeiro era o título do menu site era maior que 12 caracteres e o segundo o ícone do meu site era inferior a 512px.

Primeira auditoria com lighthouse

Para resolver o problema do short_name inclui o plugin do Weston, ele inclui um campo extra no meu painel de configuração

Atributo short name

Após corrigir o problema com o short name o segundo problema foi referente aos ícones para isso precisamos adicionar uma PNG com mais de 512px como ícone de nossa aplicação no menu Personalizar > Identidade do site:

Atualizando ícone do site

Com o manifest.json corrigido temos a possibilidade de instalar o nosso site WordPress como na imagem a seguir:

Banner de instalação

Personalizando manifest.json

Lembrando que a ideia que esse plugin faça parte do core, muita coisa ainda pode mudar na versão de Julho de 2020 caso queiramos personalizar informações do manifest.json precisamos adicionar filtros(codificar) em nossa aplicação via tema com function.php ou criando um plugin: 

add_filter( 'web_app_manifest', function( $manifest ) {
    $manifest['short_name'] = 'Shortness';
    return $manifest;
} );

Caso o seu tema não suporte ícones ou background personalizado precisamos incluir a informação, por exemplo, o theme_color:

add_filter( 'web_app_manifest', function( $manifest ) {
    $manifest['theme_color'] = '#0073AA';
    return $manifest;
} );

Versão Offline

Um dos recursos do plugin é a inclusão de template para usuários offline Erro 500, caso queira enviar uma mensagem personalizada para o usuário você pode incluir uma template com seguinte nome offline.php, 500.php ou error.php para uma mensagem mais genérica.

Versão offline padrão

Caso queira testar seu template você pode acessar o seguinte endereços:

  • https://your-site-name.com/?wp_error_template=offline;
  • https://your-site-name.com/?wp_error_template=500

Comentários Offline

Outro recurso do plugin é a possibilidade de comentários offline, o plugin utiliza Background Sync API para enviar os comentários quando o usuário recuperar a conexão.

Estratégias de Cache

O plugin utiliza WorkBox integrado com PHP para realizar abstração da implementação das estratégias de cache, para isso precisamos indicar extensões e rotas e quais estratégias serão implementadas:

  • Cache first
  • Stale while revalidate
  • Cache only
  • Network only

Para implementar estratégias de cache precisamos utilizar hooks e adiciona-los em nosso function.php

add_action( 'wp_front_service_worker', function( \WP_Service_Worker_Scripts $scripts ) {
	$scripts->caching_routes()->register(
		'/wp-content/.*\.(?:png|gif|jpg|jpeg|svg|webp)(\?.*)?$',
		array(
			'strategy'  => WP_Service_Worker_Caching_Routes::STRATEGY_CACHE_FIRST,
			'cacheName' => 'images',
			'plugins'   => array(
				'expiration' => array(
					'maxEntries'    => 60,
					'maxAgeSeconds' => 60 * 60 * 24,
				),
			),
		)
	);
} );

No código acima adicionamos uma estratégia cache first a todas as imagens dentro da pasta \wp-content\.

add_action( 'wp_front_service_worker', function( \WP_Service_Worker_Scripts $scripts ) {
	$scripts->precaching_routes()->register(
		'https://example.com/wp-content/themes/my-theme/my-theme-image.png',
		array(
			'revision' => get_bloginfo( 'version' ),
		)
	);
} );

No segundo exemplo acima realizamos precaching de uma image específica em nosso tema e vinculamos uma versão para manter em cache até o plugin atualizar a versão, mais informações na página do github plugin.

Conclusão

Caso faça parte do core do WordPress isso será uma grande adição para o core do WordPress, o uso de bibliotecas externas como Workbox pode adicionar mais complexidade na incorporação desse plugin, mas o plugin é uma alternativa rápida para implementação de recursos de uma Progressive web app em nossos sites WordPres.

Vantagens

  • Fácil integração com outros plugins do Google como AMP para WordPress e Site Kit.
  • Inclusão de template para versão offline.
  • Possiblidade de comentários offline
  • API para implementação de estratégias de cache
  • Geração automática de Web App Manifest

Desvantagens

  • Necessidade de codificação para alguns recursos
  • Ausência de um painel de personalização para determinadas informações
  • Nenhuma integração para service worker

Após as configurações adicionadas corretamente temos nosso site WordPress atingindo as três metas: Rápido, estável, instalável e otimizado.

Auditoria final

Para mais posts sobre PWA acesse a página da categoria.

Categorias
WordPress

Monitorando seu site com Site Kit by Google

O Site Kit é o plugin oficial do Google para monitoramento de sites WordPress, o plugin agrupa as principais ferramentas de monitoramento do Google, como:

  • Google Search Console – relatórios sobre como sua aplicação se comporta na busca
  • Google Analytics – relatórios de como o usuário navega pelo seu site
  • Google Tag manager – Permite adição de tags de monitoramento sem a adição de código
  • AdSense – Relatórios sobre os ganhos com anúncios do Google
  • PageSpeed Insights – Veja como sua aplicação se comporta referente a desempenho
  • Optimize – Ferramentas para teste A/B

O plugin conecta com todas essas ferramentas, mas não polui a interface do painel do WordPress. Com o Site kit podemos listar algumas Vantagens:

  • Ele trás uma interface com informações simplificadas dos seus relatórios caso queira ter um relatório mais completo você é direcionado para as ferramentas específicas.
  • O plugin que você consegue centralizar essas informações em um único painel.
  • Também disponibiliza métricas por postagem.
  • As permissões podem ser disponibilizada por ferramentas
  • O plugin é inteiramente grátis
Relatórios por página

Instalação em 3 passos

Site Kit Wizard

Para instalar o plugin você precisará de acesso para a conta que administra as contas dos serviços o qual você deseja vincular. E os passos serão os seguintes:

  • Verificar se você é proprietário da aplicação
  • Permitir acesso ao Google aos dados do domínio relacionado
  • Configurar a ferramenta desejada

Um ano utilizando o plugin

No ano passado tomei conhecimento do plugin visitando o WordCamp Europe em Berlin, na ocasião vi que o plugin estava em beta e comecei a testar-lo desde então. De um ano pra cá vi a sua evolução nos primeiros meses após o lançamento. Na fase inicial alguns problemas foram encontrados devido ao teste em massa realizado pela comunidade. Agora vou falar um pouco sobre minha experiência particular com o Site Kit.

Utilizei por anos o MonsterInsights plugin que trazia bastante informação era um plugin bem completo mas acabava comprometendo o desempenho do painel do WordPress. Depois de uma tempo utilizando o Site Kit não senti mais falta da quantidade de gráficos e informações que o MonsterInsights disponibilizava. A solução pelo Site Kit de redirecionar os relatórios completos para as ferramentas específicas.

Outro detalhe importante com o Site Kit habilitei apenas os serviços do meu interesse. No caso Search console, PageSpeed Insights e Google Analytics. Então tenho um painel customizado sem a necessidade de carregar scripts desnecessários.

Por fim a integração com outros plugins do Google, como por exemplo o plugin de AMP para WordPress do Google eu não tenho interferência na validação das minhas páginas.

Limitações do plugin

Algo já de conhecimento do time do Google são algumas limitações na ativação ou na utilização do plugin.

Browsers

  • Opera: Para ativar o Site Kit com o Opera desative temporariamente a funcionalidade de Ad Blocker.
  • Firefox e Chrome: Se o seu site seguro (HTTPS) fizer uso de recursos HTTP, ele poderá ser classificado como conteúdo misto enquanto estiver usando o navegador Chrome ou Firefox.

Plugins WordPress

Plugins de cache (WP Super Cache, Breeze, Autoptimize): desative temporariamente os plugins de cache enquanto estiver configurando o Site Kit.

Monster Insights: desative temporariamente o Monster Insights enquanto estiver realizando a configuração do módulo do Google Analytics.

Updraft Plus: Desative a opção de armazenamento de backup do Google Drive durante a configuração do Site Kit ou desative o Updraft Plus durante a instalação do Site Kit.

WordPress Multisite

Atualmente o Site Kit não dá suporte a versão multisite do WordPress. Se você deseja utilizar em uma aplicação multisite realize a ativação de forma individual. O suporte para cobertura de toda a aplicação multisite está sendo desenvolvida para versões futuras mas sem previsão de Release.

Conclusão

Apesar das limitações existentes e períodos de instabilidade nas primeiras versões. Após um ano minha experiência com o plugin é satisfatória, apesar do contratempo das primeiras versões a integração de todos os serviços de monitoramento um um lugar só e sem ser de forma poluída ajuda bastante, lembrado que todas as funcionalidades são de graça.

Caso tenha alguma dúvida sobre o plugin deixe um comentário e para ler mais sobre WordPress acesse a página da categoria.

Categorias
JavaScript WordPress

Como JavaScript está influenciando o desenvolvimento com WordPress

Final de 2018 tivemos o lançamento do Gutenberg a nova experiência de edição do WordPress, uma das ações mais impopulares da história da plataforma dava um passo muito relevante referente ao core da plataforma. Ação invisível para a maioria dos usuário Gutenberg iria influenciar o desenvolvimento JavaScript e WordPress como conhecemos.

Desde o lançamento do WordPressa mais de 15 anos atrás muita coisa mudou na web e especialmente referente a desenvolvimento JavaScript. Gutenberg trouxe para o core do WordPress JavaScript moderno algo necessário para evolução da plataforma. Tecnologias como React, fazem parte do core do WordPress isso mesmo: React.

Esse movimento está transformando o desenvolvimento WordPress para muito mais modular, onde tivemos a introdução de blocos componentes visuais independentes que reduzem a responsabilidade dos temas referentes a funcionalidades.

Essa transição nós trouxe uma pergunta qual será a responsabilidade de um tema em uma aplicação WordPress?

Para isso precisamos entender alguns itens dentro do Gutenberg:

Blocos

Blocos trazem uma estrutura que permite nosso editor de conteúdo sair de um grande bloco de texto para items modulares que permitem sua composição de Layout, os Blocos são divididos em categorias como:

  • Layout
  • Formatação
  • Widgets
  • Códigos incorporados

Por de trás das cortinas no banco de dados os blocos continuam sendo gravados na mesma tabela wp_content com uma diferença os blocos são marcados com comentários e renderizados pela API do Gutenberg.

Componentes e estado

Com a introdução de Blocos e React conceitos como Componentes e estado foram introduzidos com React elementos visual armazenam estado que armazena informações relacionadas a um dado especifico compartilhado por diferente elementos visuais. Mas isso trouxe uma série de desafios para a plataforma como controlar esse fluxo com PHP e React. Algumas modificações foram feitas e o React foi encapsulado para se adaptar com a plataforma. Funções para fazer a ponte entre PHP e React.

Modularização

Dentro da biblioteca do Gutenberg existe um módulo com uma série de componentes base que podem ser reutilizados tanto no editor quando o front-end da aplicação se abrimos o console de nossa aplicação e digitarmos “wp.” conseguimos visualizar todos os módulos disponíveis dentro do WordPress e se digitarmos “wp.components”conseguimos ver todos os components disponíveis no WordPress.

Todos os módulos do JavaScript para WordPress estão disponíveis como pacotes do nodeJS onde podemos ver no link: https://www.npmjs.com/search?q=%40wordpress

pacotes node WordPress

Além disso o uso de pacotes permite o uso do Gutenberg fora do WordPress como foi utilizado pelo Drupal recentemente.

JavaScript moderno

Com Gutenberg temos a possibilidade de desenvolver com EcmaScript 5 ou EcmaScript 2015+ ou superior. Se ainda não domina a nova sintaxe do JavaScript você pode continuar desenvolvendo com EcmaScript 5 mas o recomendado é o uso de JavaScript moderno seu código ficará mais enxuto e você terá a possibilidade de trabalhar com JSX.

Nem todos os browsers suportam JavaScript moderno, por exemplo, Internet Explorer 11. Para isso precisamos fazer o uso de transpilers para fazer a conversão de JavaScript moderno para EcmaScript 5.

Plugins e Temas

Mas todos esses benefícios estão restritos para o Gutenberg? Não, os recursos do Gutenberg podem ser utilizados por plugins e temas. With the package @wordpress/scripts podemos incorporar scripts do core em nossos plugins e temas. Para isso importamos em nosso projeto com o seguinte código:

npm install @wordpress/scripts --save-dev

Com esse pacote nodeJS conseguimos realizar formatação, validação de código e tests:

  • wp-scripts build
  • wp-scripts format-js
  • wp-scripts lint-style
  • wp-scripts lint-js
  • wp-scripts start
  • wp-scripts test-e2e
  • wp-scripts test-unit-js

Para saber mais sobre os pacotes acesse: www.npmjs.com/package/@wordpress/scripts

Block Scaffolding

Lançado no final de fevereiro de 2020 um pacote node que cria um template básico de um bloco Gutenberg. Como o conhecido create-react-app do React.

Para instalar rode o seguinte comando:

npm install @wordpress/blocks --save

O pacote cria um template de uma bloco com elementos básicos customização de CSS, JavaScript e PHP sem se preocupar com configuração de elementos como webpack, babel e ESLint.

Por padrão ele irá utilizar EcmaScript 2015+ mas podemos através de configurações definir o uso de EcmaScript 5. Depois de instalado o pacote @wordpress/blocks para criar um bloco básico em seu terminal de linha de comando digite:

npm init @wordpress/block [nome-do-seu-bloco]

Ele irá criar um bloco com os comandos para:

  • Inicia o desenvolvimento: npm start
  • Compilar o código para produção: npm run build
  • Formatar o código JavaScript de sua aplicação: npm run format:js
  • validação de código css e js: npm run lint:css ou npm run lint:js

Os requisitos básicos para utilizar o pacote são node 10.0.0 e npm 6.9.0.

Conclusão

Ainda estamos no inicio de uma revolução os desenvolvedores que acompanham o Gutenberg desde o inicio já estão tirando proveito desses benefícios, mudando sua rotina referente ao desenvolvimento. Muitas empresas ainda estão adiando essa mudança de paradigma pode enxergar o WordPress apenas como um editor visual e outras por conta de Código legado.

Essa mudança irá mudar o jeito em que desenvolvemos nossa aplicação WordPress de forma mais modular iremos sair da estrutura padrão de templates estáticos e entraremos numa estrutura que blocos serão utilizados em qualquer parte de nossa aplicação. Assim reduzindo ainda mais a dependência de funcionalidades de uma aplicação WordPress com o tema.

Nos próximos posts estarei abordando o @wordpress/block com mais detalhes vamos ver na prática como utilizar essa poderosa ferramenta. Para acompanhar ver mais posts sobre Gutenberg e WordPress acesse a página da categoria.

Categorias
AMP Accelerated mobile pages Geral WordPress

Plugins WordPress não são tecnologias ou processos

Navegando pelo YouTube encontro muitos vídeos, plugin de performance WordPress, plugin de SEO WordPress e outros casos como AMP pode matar o seu projeto. Muitas vezes criam uma visão com dois cliques eu irei resolver todos os meus problemas, plugins WordPress ajudam na automatização de tarefas mas muitas vezes criamos essa visão que eles resolvem todos os nossos problemas ou representam uma tecnologia ou um processo.

Por exemplo SEO é um assunto muito complexo, temos ótimos plugins disponíveis, mas o fato de instalar um plugin de SEO não vai resolver todos os seus problemas referentes ao tema. Eles ajudam e otimizar a realização de tarefas, mas temos que implementar o SEO de nossa aplicação como, inclusão de meta informações, inclusão e otimização de palavra chave e manutenção.

Somente a inclusão do plugin sem o cadastro de nenhuma informação pode prejudicar o SEO de sua aplicação, mas nessa situação é um problema do plugin ou do seu mal uso?

Dai caímos num segundo problema, culpar toda uma tecnologia ou processo por conta plugin, isso é muito comum de achar, por exemplo, no canal do mestre SEO do Fabio Ricotta que eu admiro bastante eu vi o seguinte relato:

Fabio sempre aponta informações baseado em experiências próprias, falando que sua experiência não foi válida mas analisando o vídeo vou comentar certos pontos:

  • Começando pelo título “Como AMP pode matar o seu projeto” já temos o direcionamento de para a tecnologia.
  • Nenhum momento ele especifica qual plugin utilizou generaliza o problema para tecnologia
  • Falhas como esquecer de adicionar código de tracking não é um problema da tecnologia
  • Depois atribuiu o fato plugin remover o código de tracking, novamente não é uma falha da tecnologia. Quando esse tipo de problema acontecer recomendado é notificar o desenvolvedor do plugin para que o problema não se repita
  • Por fim atribui limitações de não ter caixa de comentários, eu utilizo o plugin oficial do AMP tenho todas as funcionalidades do core do WordPress rodando normalmente, mas isso pode ser a limitação do plugin a qual ele utilizou
  • “por padrão o plugin cria uma versão tosca” – Importante especificar qual plugin foi utilizado, por exemplo, novamente a tecnologia sendo resumida a um plugin do AMP oficial a versão reader não é recomendada pelo próprio Google, mas existem opções de customização. Mas temos opções de disponibilizar uma versão idêntica a versão não-AMP.

Opiniões de influenciadores como o Fabio tem um peso muito grande e quem não conhece a tecnologia cria resistência sem mesmo nunca ter utilizado. Por isso é importante antes de compartilhar experiências ser mais específico sobre plugins WordPress e cenários de sua experiência.

Perfomance, SEO ou AMP, por exemplo, não se resumem apenas a instalar um plugin. O plugin de AMP facilitam o seu uso, mas a instalação sem o mínimo de configuração prejudicam a experiência do usuário. Além disso podemos criar um tema totalmente com AMP.

Performance não se resume a adicionar cache tem outra série de recursos que ações que melhoram o desempenho de sua aplicação. Além disso, SEO e Performance são tarefas continuas que nunca acabam precisam de manutenção constante.

Qualquer pessoa tem o total direito de não gostar de uma tecnologia específica mas é importante validar certos pontos antes de compartilhar qualquer opinião. Sou totalmente aberto a tecnologias e contra a clubismo com tecnologia. AMP possui pontos a melhorar assim com WordPress, JavaScript, PHP e outras linguagens, frameworks e CMSs.

Que você acha sobre o assunto? deixe um comentário com sua opnião.