Pamela Ribeiro do Nascimento

Sou a web developer que veio do Oceano! Foi durante a faculdade de Oceanografia que tive o primeiro contato programação  Busquei aprender mais sobre HTML, CSS., PHP e JS. Descobri o WordPress e todo seu potencial.Mais tarde trabalhei em algumas agências de PP em São Paulo e também como freelancer. Atualmente trabalho como Desenvolvedora WordPress na Human Made.

Aprenda a restringir o login de editores no WordPress por horário.

Por

Você já precisou limitar o horário de acesso de alguns usuários em seu site WordPress?

Neste tutorial, vou te ensinar como restringir o login de editores (ou qualquer outro papel/role que você desejar) no WordPress para um determinado horário, garantindo mais segurança e controle sobre quem acessa seu site em horários específicos.


Essa função em WordPress verifica se o usuário que está tentando fazer login é um editor e se o horário atual está entre 9h e 14h, de segunda a sexta-feira. Se essas condições forem atendidas, o editor é automaticamente desconectado, redirecionado para a página inicial e o processo de login é encerrado. Você pode refinar essa funcionalidade e redirecionar para uma página contendo um aviso ou outro conteúdo.

No arquivo functions.php insira a função abaixo:

/**
 * Verifica se o papel do usuário está na lista de papéis restritos e se o horário atual está entre 9h e 14h, de segunda a sexta-feira.
 *
 * @return void
 */

function restringir_login_editor() {
    $usuario_atual = wp_get_current_user();

    if (in_array('editor', (array) $usuario_atual->roles)) {
        $horario_atual = current_time('H:i');
        $dia_semana = date('N');  // Obtém o número do dia da semana (1 para segunda, 2 para terça, etc.)

        // Se o horário estiver entre 9h e 14h e for um dia útil (segunda a sexta-feira)
        if ($horario_atual >= '09:00' && $horario_atual <= '14:00' && $dia_semana >= 1 && $dia_semana <= 5) {
            // Desloga o editor, redireciona para a página inicial e encerra o processo de login
            wp_logout();
            wp_redirect(home_url());
            exit;
        }
    }
}

// Adiciona a ação para verificar o horário e dia da semana no momento do login
add_action('wp_login', 'restringir_login_editor');

Com este simples tutorial, você aprendeu como restringir o login de editores no WordPress com base no horário atual. Essa funcionalidade pode ser útil para garantir que determinados usuários acessem o site apenas durante o horário desejado, aumentando a segurança e o controle sobre o acesso ao seu site WordPress.

Se preferir não usar código, existe um plugin que realiza a mesma ação:

User Blocker

Crie a base para temas, plugins e blocos em 10 segundos com apenas 1 comando.

Por

Quer criar temas, plugins ou blocos e fica perdido(a) na hora de começar? Existe um comando do WP-CLI (e se você não sabe o que é WP-CLI tá tudo bem, me cobra nos comentários de criar um artigo te explicando) que facilita o processo de desenvolvimento e garante uma estrutura consistente!

O wp scaffold é uma ferramenta que faz parte do WP-CLI (Command Line Interface do WordPress), permitindo gerar instantâneamente estruturas de código padrão para diversos componentes do WordPress. Essa funcionalidade é particularmente útil para criar temas, plugins e blocos de Gutenberg.

Neste artigo, exploraremos as utilidades do wp scaffold e como os desenvolvedores WordPress podem tirar o máximo proveito dessa ferramenta.

O que é o wp scaffold?

O wp scaffold é um comando WP-CLI (Command Line Interface do WordPress) que facilita a criação de arquivos e diretórios padrão para temas, plugins e blocos. Ele segue uma abordagem de convenção sobre configuração, acelerando o processo de desenvolvimento e permitindo que os desenvolvedores foquem mais no conteúdo específico do seu projeto. E a melhor parte: já fica tudo no padrão no WordPress! Não tem erro!

Sintaxe básica

A sintaxe básica do comando wp scaffold é a seguinte:

wp scaffold <tipo> <nome>
  • <tipo>: O tipo de estrutura a ser criada (por exemplo, “theme”, “plugin”, “block”).
  • <nome>: O nome do tema, plugin ou bloco a ser criado.

Vamos explorar algumas das utilidades específicas do wp scaffold para diferentes tipos de projetos.

1. Criando Temas WordPress

Para criar um tema WordPress usando o wp scaffold, você pode usar o seguinte comando:

wp scaffold theme <nome-do-tema>

Este comando criará a estrutura básica de um tema WordPress no diretório atual ou no diretório especificado pelo usuário.

2. Desenvolvendo Plugins WordPress

Para criar um plugin, o comando é semelhante:

wp scaffold plugin <nome-do-plugin>

Isso criará os arquivos e diretórios necessários para começar a desenvolver um plugin WordPress.

3. Construindo Blocos do Gutenberg

Para quem está interessado em criar blocos para o editor Gutenberg, o comando wp scaffold também oferece suporte:

wp scaffold block <nome-do-bloco>

Isso gerará a estrutura básica para um bloco Gutenberg, permitindo que você inicie o desenvolvimento imediatamente.

Dicas Adicionais

Além de temas, plugins e blocos, existem outras funcionalidades para o “wp-scaffold”:

Conclusão

O wp scaffold é uma ferramenta poderosa para desenvolvedores WordPress que desejam acelerar o processo de criação de temas, plugins e blocos. Ao adotar essa abordagem de convenção sobre configuração você economizar tempo e garantir uma estrutura consistente e padronizada em seus projetos.

Para informações mais detalhadas, consulte a documentação do WordPress sobre o wp scaffold: https://developer.wordpress.org/cli/cwp scaffold child-themeommands/scaffold/

Lição de Chesterton para Devs: Valorizando o Tesouro Escondido

Por

Você conhece a Cerca de Chesterton? É um conceito apresentado por G.K. Chesterton, destaca uma abordagem cautelosa e reflexiva antes de realizar mudanças significativas ou descartar tradições estabelecidas. Chesterton usou a metáfora de uma cerca para ilustrar a ideia de que, antes de removermos ou questionarmos uma estrutura existente, devemos entender completamente o propósito dela. A premissa é que tradições ou estruturas estabelecidas muitas vezes têm razões profundas para existir, sendo essencial compreender essas razões antes de tomar decisões que possam ter consequências não desejadas. Há um termo no futebol que de certo modo se relaciona a isso: “Time que está ganhando não se mexe”. Na nossa área isso nem sempre é verdade, mas é fato que se está ganhando, tenha muito cuidado ao modificar.

Podemos aplicar esse conceito ao lidar com código legado: compreender o código existente é crucial antes de tomar medidas como descartar ou modificá-lo. Sempre vamos nos deparar com o código legado, e provavelmente seremos tentados a descartá-lo considerando-o obsoleto. No entanto, uma atitude precipitada pode resultar em bugs.

A lição aqui é clara: assim como Chesterton nos instiga a compreender o propósito de uma cerca antes de removê-la, devemos adotar uma abordagem reflexiva ao lidar com código antigo. Em vez de simplesmente descartá-lo, questionemos:

Qual é o valor REAL desse código?

  • Pode conter conhecimentos cruciais, soluções únicas para desafios passados ou insights que economizariam tempo e esforço no presente.
  • Pode garantir compatibilidade com platafromas, browsers e plugins antigos e que ainda estão em uso.

Um dos pilares para evitar armadilhas futuras é simples, porém algo que muitos devs tem resistência em fazer: leitura e criação de documentação. A documentação age como a chave para desvendar os segredos do código legado e proteger contra a criação de bugs causados por nossa falta de compreensão. Ler a documentação existente é vital, proporcionando uma visão clara do que foi feito e por quê.

DOCUMENTAÇÃO: LER E FAZER

Além de LER é crucial cultivar uma cultura de CRIAR documentação desde o início do desenvolvimento. Isso pode se manifestar de várias formas, como wikis, READMEs e comentários pertinentes no código. Cada linha de código deve contar uma história clara e compreensível não apenas para quem o escreveu, mas para todos os que possam interagir com ele no futuro.

Ao seguirmos o conselho de Chesterton, valorizando o tesouro escondido no código legado, não apenas preservamos a sabedoria acumulada ao longo do tempo, mas também construímos as bases para um desenvolvimento mais robusto e sustentável. Nessa busca pela compreensão e preservação do legado digital, a documentação emerge como nossa ferramenta mais poderosa.

Lembre-se: o código que você escreve hoje, amanhã será um código legado.

Leia a documentação antes de iniciar.
Crie documentação conforme escreve seu código.
Seja gentil com o passado e o futuro: preserve cercas relevantes e construa cercas fascinantes 😉

Simplificando a Criação de Conteúdo com “wp post generate”

Por

Você já se perguntou como agilizar a criação de posts no WordPress? A resposta pode estar no comando wp post generate. Vamos explorar como usar essa ferramenta e como ela pode ser benéfica para otimizar a produção de conteúdo.

O que é wp post generate?

O WP-CLI, uma interface de linha de comando para o WordPress, oferece uma funcionalidade poderosa chamada wp post generate. Com esse comando, podemos criar posts facilmente, e isso é especialmente útil quando precisamos gerar conteúdo fictício para testes ou para preencher um site com dados de exemplo.

Como Usar o Comando

A sintaxe básica é simples:

wp post generate --count=5 --post_type=post

Este comando cria 5 posts do tipo ‘post’ com títulos, conteúdo e metadados aleatórios.

Benefícios para Produtores de Conteúdo

  1. Eficiência na Criação: Imagine a facilidade de gerar múltiplos posts com um simples comando. Isso economiza tempo, especialmente ao criar ambientes de teste ou ao preencher um site com conteúdo de exemplo.
  2. Testes e Desenvolvimento: Desenvolvedores podem utilizar wp post generate para criar rapidamente uma variedade de posts e testar o design, layout e funcionalidades do site em diferentes cenários.
  3. Treinamento e Demonstração: Ao criar posts fictícios, é possível realizar treinamentos ou demonstrações sem comprometer o conteúdo real do site.

Dicas Adicionais:

  • Personalização Avançada: O comando wp post generate suporta várias opções para personalizar o conteúdo gerado, como definir o autor, a data de publicação e outros metadados.
  • Adapte para Suas Necessidades: Ajuste os parâmetros conforme necessário, escolhendo o tipo de post, status e outras opções que se alinhem com seus requisitos.

Em resumo, wp post generate é uma ferramenta valiosa para simplificar a criação de posts no WordPress, oferecendo eficiência e flexibilidade. Experimente e descubra como ela pode beneficiar seu fluxo de trabalho de produção de conteúdo.

O GitHub atualizou as host key RSA SSH.

Por

Você deve ter se deparado com a seguinte mensagem ao tentar fazer pull / push / etc:

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@ WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED! @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY!
Someone could be eavesdropping on you right now (man-in-the-middle attack)!
It is also possible that a host key has just been changed.
The fingerprint for the RSA key sent by the remote host is
SHA256:uNiVztksCsDhcc0u9e8BujQXVUpKZIDTMczCvj3tD2s.
Please contact your system administrator.
Add correct host key in ~/.ssh/known_hosts to get rid of this message.
Host key for github.com has changed and you have requested strict checking.
Host key verification failed.

Mantenha a calma!

O GitHub teve que fazer uma atualização de segurança e com isso você precisa de algumas ações simples para se livrar dessa mensagem.

Existem 3 opções:

Isso deve resolver rapidamente o problema!
Pode volta ao código!

Passando variáveis do PHP para javascript através do head [WordPress]

Por

Utilizar dados fornecidos através de funções ou variáveis de PHP em algum código javascript já foi ou será uma necessidade em algum momento para quem trabalha com WordPress. existe uma função específica para trazer variáveis do backend para o front: wp_localize_script().

Vamos tomar como exemplo um código JavaScript que irá receber o ID do post. (E sim! Existem outros meios de identificar o ID do post utilizando o JavaScript, é apenas um exemplo 😊)

Começaremos pelo código PHP. Crie uma função na qual o arquivo JavaScript é registrado antes da função wp_localize_script(), caso contrário não irá funcionar.

PHP

function passar_variaveis() {
	global $post;
	wp_enqueue_script('variaveis-post-id', 'assets/src/js/global.js');
	wp_localize_script('variaveis-post-id', 'post_id', $post->ID);
 
}
add_action('wp_enqueue_scripts', 'passar_variaveis');

Também é possível passar várias variáveis ao mesmo tempo:

function passar_variaveis() {
	global $post;
         $todas_variaveis = array(
             'post_id'       => $post->ID,
              'variavel_1'   => 'var_1',
              'variavel_2'. => 'var_2'
         );
	wp_enqueue_script('variaveis-post-id', 'assets/src/js/global.js');
	wp_localize_script('variaveis-post-id', 'post_id', $post->ID);
 
}
add_action('wp_enqueue_scripts', 'passar_variaveis');

Javascript

Apenas uma variável:

var post_id = window.post_id;

Diversas variáveis:

var post_id = window.post_id;
var variavel_1 = window.variavel_1;
var variavel_2 = window.variavel_2;

Resultado – HTML

Analisando o HTML renderizado é possível ver a variável disponível dentro do <head> e pronto para ser usado pelo javascript:

<script id="variaveis-post-id">
    var post_id = 10;
</script>

Foto de Alex Andrews: https://www.pexels.com/pt-br/foto/tres-brinquedos-de-monofone-pretos-821754/

Crie um ambiente local usando WordPress VIP e Docker

Por

Recentemente tive experiências ruins na hora de configurar ambientes locais de WordPress VIP usando Chassis. Percebendo o tempo que vinha gastando eu decidi utilizar uma ferramenta com a qual tenho mais familiaridade: Docker.

A troca valeu a pena! Estou rodando diversos ambientes – a maioria multisite – e minha máquina vem aguentando bem, sem travar e com o banco de dados rodando com velocidade. 😎

Antes de iniciar o passo-a-passo devo dizer que existe uma documentação oficial sobre o assunto. Mas eu gostaria de esmiuçar mais o assunto e trazê-lo para o português.

Requerimentos ⚠

  1. npm
  2. nvm
  3. Docker Desktop

Passo a passo 👣

  1. Primeiramente, ajuste a versão do Node para 14 ou superior: nvm use 14
  2. Instale o VIP: npm install -g @automattic/vip
  3. Certifique-se que o Docker está aberto e rodando.
  4. Crie um novo ambiente de desenvolvimento: vip dev-env create --slug=site-exemplo – Não se preocupe com pastas e repositórios nesse momento.
  5. Configure o novo ambiente (dev-env) seguindo os passos:
    ✔ WordPress site title · Site Exemplo
    ✔ Multisite (y/N) · true
    ✔ PHP version to use · 8.0
    ✔ WordPress – Which version would you like · 6.1
    ✔ How would you like to source vip-go-mu-plugins · image
    ✔ How would you like to source application code · local
    ✔ What is a path to your local application code · ./site-exemplo
    ➡️ Nesse último passo eu apontei o ambiente para uma pasta clonada de um repositório chamado site-exemplo. Caso escolha seu próprio repositório certifique-se que esta contém as pastas: plugins, themes, private, images, client-mu-plugins, vip-config. Mas você pode escolher utilizar uma cópia do repositório VIP, escolha a opção local.
    ✔ Enable Elasticsearch (needed by Enterprise Search)? (y/N) · true
    ✔ Enable phpMyAdmin (y/N) · false
    ✔ Enable XDebug (y/N) · true
    ✔ Enable MailHog (y/N) · false
  6. Agora o VIP lhe dará as urls e informação sobre o ambiente criado:
    SLUG site-exemplo
    LOCATION /Users/.local/share/vip/dev-environment/site-exemplo
    SERVICES devtools, nginx, php, database, memcached, wordpress, vip-mu-plugins
    NGINX URLS http://site-exemplo.vipdev.lndo.site/
    STATUS DOWN
    DEFAULT USERNAME vipgo
    DEFAULT PASSWORD password
  7. Pronto! Ambiente criado!
  8. Inicie o novo ambiente: vip dev-env start --slug=site-exemplo – Isso pode demorar um pouco na primeira vez.
  9. Se algo der errado rode o comando:
    vip dev-env start --slug=site-exemplo --debug @automattic/vip:bin:dev-environment
  10. Agora você pode acessar a URL:  http://site-exemplo.vipdev.lndo.site/wp-admin/
  11. Se você tem alguma cópia de algum banco de dados é hora de importá-lo e rodar o comando search-replace, deixe o arquivo sql na raiz:
    vip dev-env import sql database.sql --slug=site-exemplo --search-replace="url-antiga-aqui,site-exemplo.vipdev.lndo.site"
  12. Limpe o cache: vip dev-env exec --slug example-site -- wp cache flush
  13. Crei um novo usuário e senha, se desejar: vip dev-env exec –slug=site-exemplo — wp user create USERNAME-AQUI EMAIL-DO-USUÁRIO —user_pass=password –role=administrator
  14. Se desejar, adicione o novo usuário como super admin: vip dev-env exec --slug=site-exemplo -- wp super-admin add USERNAME-AQUI

É isso! Agora é sua vez de tentar! Em caso de dúvidas é só deixar nos comentários.

Como não deixar nada passar batido em seu projeto.

Por

Responda rápido: você já começou um projeto que ganhou uma proporção muito maior do que imaginava?

De acordo com a sua resposta acima é possível que algo não tenha ficado claro no início do seu projeto ou o objetivo não estava claro desde o início. E quem é o culpado por isso?

Não importa. 

Apontar culpados não vai resolver seus problemas e não os previnirá  no futuro.

O fato é que isso afeta o seu trabalho diretamente e o melhor jeito de não apontar culpados é evitar problemas em seu projeto. 
E como evitar problemas? Procurando. 
Uma técnica muito legal para evitar problemas é listar as etapas do seu projeto e as ações necessárias em cada etapa.

No final deste post há presente para você: um checklist modelo para usar em seus próximos projetos. Mas antes precisamos entender o porque dos ítens deste checklist e como se adaptam à sua realidade. Vamos ao primeiro item então:

1- Qual o objetivo deste projeto?

Sempre faça essa pergunta para seu cliente/gestor e tenha certeza de que está bem claro qual é o problema que precisa ser resolvido. Talvez o objetivo não seja condizente com a proposta.
Exemplo: O cliente quer trazer um público maior para sua loja. 
 

2- Qual a solução oferecida? 

Vamos seguir com o exemplo acima: O cliente acredita que apenas ter um site institucional atrairá mais clientes para a sua loja. 
É bem provável que esse cliente mude de ideia, resolva fazer um e-commerce, depois comece a investir em ads nas redes sociais e no fim mude toda a estrutura de páginas para landing pages.

Soa bem familiar, não é mesmo? E isso poderia ter sido evitado se todos entendessem qual é a solução ideal para o problema apresentado.

4- O que preciso ter para começar esse projeto?

É fundamental ter conhecimento de todos os ítens necessários para iniciar o projeto. Isso garantirá seu fluxo de trabalho, lhe dará maior precisão para estimar prazos, saber quem precisa estar envolvido nele e o que é vital nesse processo.

Não dá para construir um barco enquanto se navega! Tenha certeza que os recursos vitais para o projeto estão disponíveis antes do início ou com data definida. Caso esteja faltando algo comunique-se com as partes e mostre o quão vital é ter esses material em mãos para iniciar.

Economize seu tempo: deixe esses recursos todos listados em um lugar só para que você não perca tempo procurando aquele e-mail com o link do servidor, qual o nome da pasta que está o layout, etc.

5 – Stakeholders – Quem deve estar a par deste projeto?

Tenha a mãe esses nomes, contatos, horários de disponibilidade e qual a melhor forma de falar com eles (e-mail, mensagem, ligação e etc). Esse é um modo eficiente de mantê-los atualizados sobre o projeto, adiantar decisões e solicitar recursos.

6- Blockers: Existe algo que me impeça de avançar no projeto?

Faça um levantamento das possíveis situações que bloquearão o avanço do projeto. Seja bastante diligente e use sua experiência para projetá-las, entenda como elas podem causar atrasos e até paralisações.
 

7- O que indica que esse projeto está concluído?

Só acaba quando termina. Já ouviu essa frase. Tenha certeza o que significa “concluído”. Para você pode ser apenas entregar, para o cliente pode significar entregue, testado e funcionando por 10 dias seguidos. Tenha isso descrito e claro para todos.
 
Baixar checklist

Como limitar caracteres e manter palavras inteiras em strings no PHP.

Por

Certamente você já se deparou com a dificuldade em limitar a quantidade de caracteres e não cortar palavras em títulos e resumos.

Função limitadora

Apresento uma função que quando aplicada é capaz de limitar a quantidade de caracteres e manter as palvras intactas. Seguem dois exemplos:

Frase original:

Hoje está um belo dia de sol e vamos comemorar meu aniversário.

Frase com caracteres limitados SEM uso da função:

Hoje está um belo dia de sol e vamos comem…

Frase com caracteres limitados COM uso da função:

Hoje está um belo dia de sol e vamos…

Construindo a função

<?php

function trim_title_keep_words($title, $max_lenght, $more)  {
    // Title will remain untouched if character counut is smaller than max lenght
    // O título permanecerá intacto se a quantidade de caracteres for menor que o máximo estabeleido.
    if (strlen($title) <= $max_lenght) {
        return $title;
    }
    
    // Title is trimmed and word are kept intact
    // O título é cortado mas a última palavra permanece inteira                               
    $trimmed_title = substr($title, 0, $max_lenght);
    if ( substr($trimmed_title,-1,1) != ' ' ) {
        $trimmed_title = substr($trimmed_title, 0, strrpos($trimmed_title, " "));
    }
    // Adding read more to final                              
    $trimmed_title = $trimmed_title.$more;
    return $trimmed_title;
}

Como usar essa função

  1. Identifique os parâmetros que serão usados na função: trim_title_keep_words($title, $max_lenght, $more)

    $title -> use a função do WordPress para pegar o título

    $max_lenght -> defina quantos characteres devem ter no máximo

    $more -> Defina que símbolo quer usar para indicar que o título foi cortado. Exemplo.: …, >>, +

  2. Aplique a função e imprima o resultado: 
    $new_title = trim_title_keep_words( get_the_title(), 30, ‘…’);
    echo $new_title;

Resultado esperado:

Título cortado SEM essa função: “Olá meu mundo li…”

Título cortado COM essa função: “Olá meu mundo…”

Você pode encontrar esse código meu GitHub

Github

WordCamp São Paulo 2021: Palestra Elementor

Por