O vídeo HTML5 no meu tema WordPress não reproduz automaticamente. Por quê?

O YouTube e o Vimeo são serviços muito usados para guardar vídeos, mas como fazer se for importante reproduzir o vídeo a partir de nossa hospedagem?

Não é de hoje que os vídeos têm se tornado um meio muito importante para comunicar-se com seu público e cada vez mais eles estão aparecendo nos sítios WordPress. O YouTube e o Vimeo são serviços muito usados para guardar estas mídias, mas em alguns casos, é importante hospedar e reproduzir o vídeo a partir de nossa hospedagem. Neste caso, como fazer?

Em HTML5, a marcação é muito simples, como vemos abaixo:

<video width="100%" height="auto" preload="auto" autoplay="autoplay" autoplay loop>
    <source src="meu-video.mp4" type=video/mp4>
</video>

Os parâmetros “autoplay” e “loop” servem para iniciar a reprodução e repeti-la automaticamente ao final do vídeo. O parâmetro “preload” faz a pré-carga do vídeo e garante que ele esteja disponível e possa ser reproduzido o mais rápido possível e que tenha menos chance de bloquear a primeira renderização da página, levando a melhorias no desempenho.

Até aí, tudo muito fácil. Com o tempo, entretanto, muitos portais e websites começaram a sobrecarregar os usuários com irritantes vídeos que pipocavam de todos os cantos e começavam a tocar sozinhos em alto som, logo que se entrava nas páginas. A leitura de conteúdos começou a ficar pobre e confusa, e isso gerou um movimento da Google e Mozilla para a mudança nas regras de reprodução de vídeo em páginas HTML5.

A mais importante delas é que os vídeos não poderiam mais tocar automaticamente, pelo menos, se tiverem som. Com isso, outras marcações se tornaram importantes para controlar cada vez mais a reprodução de vídeos.

Tudo isso para dizer que hoje é necessário adicionar o parâmetro “muted” (ou seja, “mudo”) para que o vídeo reproduza automaticamente sem a necessidade da intervenção do usuário (ou seja, que ele toque no botão “Play”, principalmente nos celulares).

Por fim, no Safari, ainda há necessidade de adicionar o parâmetro “playsinline” para que o vídeo seja tocado automaticamente no iPhone e no iPad.

O código completo fica assim, então:

<video width="100%" height="auto" preload="auto" autoplay="autoplay" autoplay loop muted playsinline>
    <source src="meu-video.mp4" type=video/mp4>
</video>

Vídeos em temas WordPress

Para incluir um vídeo no seu tema WordPress, basta adicionar este trecho no código do modelo da página do tema WordPress que estamos montando e substituir o parâmetro “src” pelo arquivo que se quer reproduzir.

Se for um vídeo fixo, podemos armazenar o vídeo junto ao próprio tema e usar get_template_directory_uri() para pegar o URL correto da pasta onde estará guardado o arquivo.

Se for um vídeo varíavel, precisamos adicionar uma opção no tema e resgatá-la com a função get_theme_mod().

Conclusão

Adicionar vídeos em temas WordPress é algo simples, só precisamos ter atenção em adicionar os parâmetros “muted” e “playsinline” para fazê-lo tocar automaticamente em nosso modelo de página.

Ficaste com alguma dúvida? Queres fazer uma observação? Deixa teu comentário aí embaixo para a gente conversar!

Quais plug-ins não devem faltar em um projeto com WordPress?

Uma das perguntas recorrentes em fóruns de suporte é “quais os plug-ins devo ter no meu website”? Veja aqui uma lista ampla de plug-ins por mim conhecidos para atender às necessidades da maioria dos projetos.

Uma das perguntas recorrentes em fóruns de suporte do WordPress é “quais os plug-ins ‘obrigatórios’ que devo ter no meu website?” ou “quais plug-ins não devem faltar no meu site?”, dentre outras semelhantes.

Pois bem, minha ideia neste texto é tentar esclarecer a relação entre plug-ins e o WordPress e fazer uma lista ampla de plug-ins por mim conhecidos para atender às necessidades recorrentes na maioria dos projetos.

(Antes de sair adicionando plug-ins, tu já fizeste a configuração inicial que sugiro na minha palestra “10 coisas que deves fazer após criar teu blog WordPress“?)

O que são plug-ins?

Sobre os plug-ins, já deves saber que são complementos ao WordPress que adicionam funcionalidades que não estão no “core”, isto é, no núcleo do WordPress. Na prática estas funcionalidades não estariam embutidas na instalação básica da nossa plataforma preferida.

Sendo assim, os plug-ins são incluídos no nosso trabalho para atender a uma necessidade específica que nem o WordPress e nem o tema escolhido não oferecem.

Plug-ins que “não devem faltar”

Como sempre, não existe uma resposta única para todos os projetos baseados no WordPress. Os plug-ins que “não devem faltar” estão ligados ao objetivo do teu trabalho. De qualquer maneira, normalmente consideramos seguintes tópicos que não estão cobertos totalmente pelo núcleo do WordPress: 

  • segurança 
  • desempenho 
  • SEO 

Passo abaixo um apanhado de plug-ins que podem complementar teu trabalho, para torná-lo mais robusto. A lista é baseada em minha experiência como programador WordPress nestes últimos anos. 

Plug-ins para aumentar a segurança

Para segurança, temos vários plug-ins que procuram ser um “canivete suíço”, com várias funcionalidades. Te listo três: 

iThemes Security: https://br.wordpress.org/plugins/better-wp-security/
Wordfence Security: https://br.wordpress.org/plugins/wordfence/
Defender Security: https://br.wordpress.org/plugins/defender-security/

Pessoalmente, eu uso o iThemes Security. Acho completo e sempre está sendo atualizado. Todos já têm um “assistente de iniciação”, que faz uma configuração inicial do plug-in para oferecer uma segurança mínima.

Para este tópico, sugiro consultar a lista WordPress Security Checklist (http://
listadesegurancawp.org/
), compilada pelo meu amigo Rafael Funchal, que é uma referência fundamental para te certificar que teu blog está seguro.

Plug-ins para melhorar o desempenho

Para velocidade, normalmente usamos a técnica de “cache” para tornar mais rápido o acesso, mas existem outras técnicas, como a redução dos tamanhos de arquivos de imagens e de código (JavaScript, CSS etc.) e a compressão destes no envio dos arquivos pelo servidor. Há plug-ins específicos e há plug-ins que tentam reunir diversas funcionalidades. 

Plug-ins para compressão de imagens

reSmush.it: https://br.wordpress.org/plugins/resmushit-image-optimizer/
Imagify: https://br.wordpress.org/plugins/imagify/
Smush: https://br.wordpress.org/plugins/wp-smushit/
Imsanity: https://br.wordpress.org/plugins/imsanity/
ShortPixel Image Optimizer: https://br.wordpress.org/plugins/shortpixel-image-optimiser/

Eu uso o reSmush.it. Foi um dos primeiros plug-ins de compressão que conheci, é gratuito e fácil de usar. 

Plug-ins de cache 

Fastest Cache: https://br.wordpress.org/plugins/wp-fastest-cache/
LiteSpeed Cache: https://br.wordpress.org/plugins/litespeed-cache/
WP Super Cache: https://br.wordpress.org/plugins/wp-super-cache/
W3 Total Cache: https://br.wordpress.org/plugins/w3-total-cache/

Eu uso o Fastest Cache por ser simples e fácil de usar, mas os outros têm mais opções para controlar como está sendo feito o cache e podem ser importantes para otimizar ao máximo tua hospedagem. 

Plug-ins de otimização

Autoptimize: https://br.wordpress.org/plugins/autoptimize/
Hummingbird: https://br.wordpress.org/plugins/hummingbird-performance/
WP-Optimize: https://br.wordpress.org/plugins/wp-optimize/

Estes procuram juntar em um só lugar várias técnicas para tornar teu website mais rápido. Eu uso de acordo com o projeto, às vezes, não uso nenhum. O mais “querido” da comunidade é o Autoptimize. 

Plug-ins para SEO

Yoast SEO: https://br.wordpress.org/plugins/wordpress-seo/
Rank Math: https://br.wordpress.org/plugins/seo-by-rank-math/
All in One SEO: https://br.wordpress.org/plugins/all-in-one-seo-pack/
SmartCrawl: https://br.wordpress.org/plugins/smartcrawl-seo/

SEO é uma técnica para tornar teu website mais fácil de ser indexado pelos mecanismos de busca, especialmente o Google. Isso colabora para que ele seja mais facilmente encontrado pelos usuários e, principalmente, teu público-alvo.

O Yoast SEO é o meu preferido, por ser muito didático e completo. Sua versão básica serve para a maioria dos projetos e no caso projetos maiores, há complementos pagos que cobrem problemas específicos. 

Conclusão

O uso de plug-ins complementares é, sem dúvida, uma técnica importante para auxiliar na segurança e desempenho de qualquer projeto baseado no WordPress, mas eles devem ser usados com critério, de acordo com a necessidade do trabalho. Não adianta encher teu sítio de plug-ins e achar que eles irão resolver o problema sozinhos.

Também vale destacar que todos os plug-ins acima listados têm suas vantagens e desvantagens, não pretendo me estender nisso, porque é muita coisa para considerar. Minha ideia com este artigo foi listar plug-ins que me são conhecidos por tópico e funcionalidade para que possas fazer teus próprios testes.

Todos os plug-ins listados são bem recomendados e são gratuitos (pelo menos em suas funcionalidades básicas, que servem para a maioria dos projetos).

Tens alguma sugestão de plug-in que não listei aqui? Ficaste com alguma dúvida? Comenta aí embaixo!

Qual a melhor hospedagem para WordPress?

Em todos os fóruns de suporte, grupos de discussão e encontros técnicos, sempre surge esta questão: “qual a melhor hospedagem para WordPress?”, “que hospedagem eu escolho?”, “qual hospedagem vocês usam?”. O assunto então é discutido repetidas vezes, todo mundo tem sua opinião e é possível encontrar diversas referências toda a vez que se busca algo.

Resolvi então publicar as minhas recomendações, baseadas na minha experiência e no meu uso diário. Ou seja, eu utilizo todos os serviços que listo a seguir e eles foram minhas escolhas depois de alguns anos de estudo.

Observação: Os links incluídos neste artigo são patrocinados e me dão alguns centavos pela indicação. Alguns deles também oferecem gratuidades ou créditos de uso, conforme indicado.

Hospedagem compartilhada: SiteGround

SiteGround, serviço de hospedagem

Se ler em Inglês ou Espanhol não for problema, a SiteGround (https://www.siteground.com/go/marcoandrei-recomenda) é excelente. O serviço é de primeira linha, tem alto desempenho, o suporte é muito responsivo e oferece tudo necessário para um sítio WordPress, sendo de muito fácil administração. Ela inclusive é recomenda pela Yoast, WP Beginner e outros conhecidos no mundo WP.

Os planos são por espaço em disco tu podes hospedar quantos domínios quiseres, dentro deste limite. Os serviços oferecidos incluem também correio eletrônico, contas de acesso FTP para terceiros, bases de dados, certificado SSL Let’s Encrypt e cache da própria SiteGround, que dá uma agilidade sensível para teus sítios. O cuidado é que a utilização da maioria das coisas conta dentro do limite de armazenamento. Ou seja, tens que monitorar isso de perto.

Servidor gerenciado: Umbler

Falando de provedores nacionais, eu estou iniciando uma relação com a Umbler (https://www.umbler.com/br/seja-bem-vindo?a=j37nr07k), que está investindo em parcerias com agências, dando prioridade de atendimento. Clicando no endereço acima, tu recebes 7 dias de uso gratuito, independente do plano escolhido.

Há opções de hospedagem compartilhada (como a SiteGround) ou servidor próprio (como a DigitalOcean), mas eu uso os contêineres, que são como mini servidores VPS gerenciados pela Umbler, mas com diversas opções de configuração feitas no painel de controle. Tu podes ir aumentando (ou diminuindo) a capacidade do container de acordo com tua necessidade.

Eles também oferecem correio eletrônico com sistema próprio de webmail (bem legal, por sinal). Nas hospedagens, eles já oferecem uma conta gratuita de 1GB incluída no valor. Para mais contas e mais armazenamento, há mais opções (https://www.umbler.com/br/precos#emails?a=j37nr07k).

Servidor VPS não gerenciado: DigitalOcean

DigitalOcean

Se tens conhecimento de administração de servidores Linux e preferires montar teu próprio servidor, eu usaria a DigitalOcean (https://m.do.co/c/515618457caf). Eu tenho alguns servidores com eles, sem reclamações. O custo mínimo por mês é US$ 5 + US$ 1 se quiseres acionar o becape semanal, o que recomendo fortemente. O cupom no URL acima te dá US$ 100 de crédito para usar em 60 dias. Em um servidor de 1GB eu consigo hospedar 15 sítios WP com um acesso que não seja alto. Para sítios mais movimentados, eventualmente será necessário ter um servidor dedicado.

Painel administrativo para VPS: RunCloud

Para administrar os servidores da DigitalOcean, eu uso o que chamamos de Panel as a Service (PaaS), o painel de controle RunCloud (https://runcloud.io/r/z805M2aBekNd), que facilita o trabalho e instala o NGINX como servidor Web, que tem um desempenho melhor que o Apache. Há um plano gratuito para apenas UM servidor, com restrições, mas acho que vale a pena experimentar, porque já dá uma visão geral da interface e das facilidades do sistema. Se fores fazer um plano pago, o cupom no URL acima te dá 15 dias de uso gratuito em qualquer plano pago.

Alternativas gratuitas

Caso não queiras pagar pelo painel de controle, sugiro estudar o EasyEngine (https://easyengine.io/) ou o WordOps (https://wordops.net/), que é uma derivação dele. Para quem prefere fazer tudo pela linha de comando é uma mão na roda.

Os dois são scripts que são instalados no próprio servidor e ajudam a instalar a pilha LEMP (Nginx, MySQL e PHP no Linux) no teu servidor, além de facilitar a criação e manutenção de virtual hosts (espaço no servidor para cada domínio) e até mesmo instalar o próprio WordPress já com os plugins e configurações de cache.

Por fim, são programas de software livre que tem uma comunidade forte e bastante ativa. Nos fóruns de suporte, poderás tirar tuas dúvidas, mas a documentação dos dois é excelente.

E as hospedagens gratuitas? Vale a pena?

Essa é outra pergunta que sempre surge dentro desse tema. E a resposta direta para ela é: NÃO. Se tiveres oportunidade de testar, pode perdê-la.

Eu mesmo resolvi testar e tentei hospedar uma página básica e não consegui. Além do serviço ser LENTÍSSIMO para administrar (sim, lento MESMO), as hospedagens gratuitas ou te forçam a usar “construtores de sites” em que a estrutura já vem pronta, sem nenhuma personalização, ou limitam muitíssimo o espaço, pois são servidores compartilhados entre centenas (ou milhares) de clientes. Simplesmente não tem como usá-las para um projeto comercial sério.

Ah, sim: graças a “reputação” do Brasil, brasileiros estão banidos em alguns serviços por má fama em quebrar as regras do serviço ou por uso ilegal. Pois é.

E então? Gostaste das dicas? Ficaste com alguma dúvida? Tens um provedor preferido que gostarias de compartilhar? Deixa aí nos comentários, vamos trocar uma ideia!

Como atualizar o PHP no macOS?

Se tu usas Mac para desenvolver teus sítios WordPress, deves ter notado que felizmente o macOS já vem com o PHP instalado. A questão é que nem sempre a versão instalada é a mais nova, principalmente se estás rodando uma versão antiga do macOS, como eu, que uso o El Capitan no meu Mac Pro 2009.

Ter a última versão PHP é um pré-requisito para poderes desenvolver teus projetos e uma versão antiga pode ficar atrapalhando tua vida, principalmente se queres usar ferramentas auxiliares como a extensão PHP Intellisense dentro do VSCode.

O macOS Catalina já vem com a versão 7.3 do PHP, e o Mojave e o High Sierra até vêm com o PHP 7.1 pré-instalado, mas a versão instalada no macOS Sierra é a 5.6 e o El Capitan vem com o PHP 5.5. Péssimo.

Felizmente o pessoal do grupo php-osx mantém pacotes dos últimos “builds” das versões do PHP desde a 5.3 até 7.3, que podem ser instalados desde o Snow Leopard (OS X 10.6) até o High Sierra (macOS 10.13). Como os programas são instalados na pasta /usr/local/php5, eles não afetam em nada tua instalação padrão do macOS.

Instalando o PHP no macOS

Mais fácil que correr cancha com tropeiro de lesma. Escolhe a versão, abre o Terminal e digita a linha correspondente, abaixo:

PHP 7.3

$ curl -s http://php-osx.liip.ch/install.sh | bash -s 7.3

PHP 7.2

$ curl -s http://php-osx.liip.ch/install.sh | bash -s 7.2

PHP 7.1

$ curl -s http://php-osx.liip.ch/install.sh | bash -s 7.1

PHP 5.6

$ curl -s http://php-osx.liip.ch/install.sh | bash -s 5.6

Infelizmente o pessoal do php-osx não montou um pacote para a versão 7.4 e ainda não descobri uma maneira mais fácil de instalar esta versão sem ter que instalar utilitários extras, como o Homebrew. Quando descobrir, atualizo o artigo.

Verificando se a nova versão do PHP está funcionando

Agora que tudo está instalado, precisamos adicionar a pasta do pacote ao PATH do sistema:

$ export PATH=/usr/local/php5/bin:$PATH  

Depois, é só verificar se a nova versão é a padrão:

Mac-Pro:~ marcoandrei$ php -v

PHP 7.3.8 (cli) (built: Aug 11 2019 20:50:16) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.3.8, Copyright (c) 1998-2018 Zend Technologies
with Zend OPcache v7.3.8, Copyright (c) 1999-2018, by Zend Technologies
with Xdebug v2.7.2, Copyright (c) 2002-2019, by Derick Rethans

Feito!

“Tá, mas o VS Code continua dando erro…”

Pois é, em alguns casos, quando o VS Code continua dando erro, é porque a extensão PHP Intellisense não identificou corretamente a versão do PHP, mesmo que o sistema aponte a versão nova. A solução é preencher o parâmetro “executablePath” nas configurações da extensão.

Dentro do VS Code, vai em Extensions e encontra a extensão “PHP Intellisense”. Clica na engrenagem e seleciona Extension Settings. Adiciona (ou edita) esta linha no arquivo settings.json:

"php.executablePath": "/usr/local/php5/bin/php"

Agora sim!

Bueno, este tutorial te ajudou? Tens alguma dúvida? Deixa teu comentário aí embaixo e a gente troca uma ideia!