Categoria: WordPress

POST de TESTE – Gutenberg block editor

Um pouco melhor a cada dia =)

Depois de bem estável, resolvi testar e atualizar para a versão 5.1.1 do WordPress aqui no blog. Isso implica a aderência, por padrão, do novo editor Gutenberg (em detrimento ao bom e velho TinyMCE) que usa blocos na construção do conteúdo.

Enquanto muitos ficam com medo da nova tecnologia, saiba que é mais rápido e fácil do que o TinyMCE.. bem menos botões. Tudo ficou mais simples e fácil. Me sinto na frente de uma máquina de escrever olivetti, onde só o que se vê são as teclas do teclado e o texto sendo digitado, saindo logo acima.

Para quem preferir continuar com o editor clássico, o WordPress ainda dará suporte para o plugin do Editor Clássico até 2021.

O plugin Editor Clássico restaura o editor anterior do WordPress e a tela de edição de posts, do jeitão antigo. Para instalá-lo, visite sua página de plugins e clique no botão “Instalar agora” ao lado do “Editor Clássico”. Depois que a instalação do plugin terminar, clique em “Ativar” e pronto!

O WordPress também ressalta observação para usuários de tecnologia assistiva: se tiver problemas de usabilidade com o editor de blocos, recomendamos que continue usando o editor clássico.

Plugin este que hoje, 1º de Abril de 2019 conta com mais de 4 milhões instalações ativas e teve sua última atualização de código ha 1 mês.

Mas por enquanto, estou experimentando o Gutenberg e decidido a continuar com ele. Ao menos até que algo me mostre o contrário. Sendo que durante o período de experimento, tenho adicionado exemplos de código como este:

<?php

/* This 3 lines should be commented when finishing development */
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

Ou ainda texto pré formadato como este:

While I agree with this statement, it’s worth noting that in most cases, it is possible to send a mail merge or a group email to multiple recipients from a regular Gmail account, especially if the Gmail account being used has a long history with Google and is established as a legitimate account belonging to a real person.

Ou ainda block-quote (citações – tipo de bloco é o “Citar”) como esta que é bem usada aqui no blog e os fiéis leitores sabem:

Definitivamente não enviei mais de 500 mensagens, e mesmo assim o Gmail está rejeitando as mensagens.

Existe ainda outro tipo de citação maior, mais destacada, que é o bloco “Citação”:

O que me refiro quando digo mensagens (de 1 destinatário) não é que estou tendo este problema apenas com um destinatário. Mas sim que todas as mensagens que estou tendo esse problema, não são mensagens com vários destinatários, mas sim mensagens simples, enviadas para apenas um destinatário.

E ainda vídeos incorporados como este do YouTube, usando o bloco de código incorporado:

Então fica a dica. Tudo foi relativamente fácil de fazer. Únicos dois sustos que tive foram:

  1. Na hora de usar o botão “Visualizar” o que estou escrevendo como se já estivesse publicado. Não apareceu nada além do título. Então percebí que é porque lá em cima na barra de edição, ao lado do botão Visualizar, o status mostrava o link “Salvar como rascunho” ao invés de “Salvo.”. Um pouco lento esse intervalo de auto-save do Gutenbert, mas tudo bem.
  2. Ainda não consegui inserir um ícone no meio do texto, como por exemplo um smile, ou um check (v) em html. Mas deve ter alguma maneira de fazer. Anteriormente a gente variava entre as abas “Visualização” e “Texto” e fazia horrores.

Mas agora tudo parece apenas um pouco diferente. Sugiro que, se ainda não o fez, tire um tempo para exercitar. Nunca é tarde. Para quem for mais tradicionalista fique com o editor clássico, a opção do plugin está aí (e tem bastante aderência). Para quem for mais moderno, insista no Gutenberg e aprenda como fazer as coisas nele. Algo de bom Matt Mullenweg e sua comunidade devem ter visto nele para colocá-lo assim como padrão no WordPress.

nginx Error: 413 Request Entity Too Large

Ao instalar um WordPress, um dos problemas que talvez enfrente seja: Erro: 413 Request Entity Too Large
Costuma aparecer ao fazer upload de um plugin, tema, mídia ou arquivo qualquer para seu wordpress. Indica que o tamanho do que você está ‘upando‘ é muito grande. Maior do que o esperado.

O que é necessário fazer pra solucionar?

Basta adicionar a seguinte instrução ao arquivo de configuração do nginx que define o wordpress (/etc/nginx/sites-available/seu_wordpress.conf):

server {
client_max_body_size <Tamanho Desejado>M;

}

 
Dessa maneira, passamos a barreira do nginx.
Daí seu blog começa a avisar que o limite encontrado foi no upload_max_filesize do php.ini.
Então, visando ultrapassar a barreira do php.ini, basta incluir isso no final do .htaccess que esta na raiz do blog(/var/www/seu_wordpress/):

php_value upload_max_filesize 64M
php_value post_max_size 64M
php_value max_execution_time 300
php_value max_input_time 300

 
Feito, isso, ultrapassamos a barreira do php.
Agora sim. Tudo funcionando:

Instalando tema do arquivo enviado: meutema.zip

Descompactando o pacote…

 

Referências:
http://www.wpbeginner.com/wp-tutorials/how-to-increase-the-maximum-file-upload-size-in-wordpress/
http://pt.stackoverflow.com/questions/41619/enviando-arquivos-no-nginx-erro-413-request-entity-too-large

Desenvolvimento de temas WordPress a partir de template HTML– Parte 1

Após a instalação do wordpress, crie a pasta com o nome que quiser em wordpress/wp-content/themes/pasta-criada/.

Dentro dela extrai seu template siga os seguintes passos.

O primeiro passo a ser feito é subdividir seu index em páginas lógicas. Inicialmente serão criados os seguintes arquivos:

  • header.php
  • footer.php
  • index.php
  • functions.php
  • style.css

No arquivo header.php, como o nome já diz, irá todo o cabeçalho que estamos acostumados a fazer num index normal, desde o doctype até o fechamento do <header>.

No footer.php seria o que colocamos no rodapé do nosso bom e velho index, do início do <footer> até o final, onde tem o </html>.

No index.php irá toda a parte principal do site onde será colocado todo o conteúdo e o loop (que será explicado mais detalhadamente em futuro POST da série).

No functions.php será onde colocaremos todas as funções do WordPress, a parte mais programática da coisa.

E finalmente crie o style.css. Para o wordpress reconhecer um tema é necessário ter um arquivo style.css com comentários, contendo as informações do tema. Então dentro do style.css adicione o comentário:

/*
Theme Name: Seu Tema
Theme URI: https://blog.smallbee.com.br/
Description: Meu primeiro tema em wordpress.
Author: Seu nome
Author URI: https://blog.smallbee.com.br/
Version: 1.0
Tags: WordPress, smallbee
*/

Agora no index.php adicione na primeira linha a função
<?php get_header(); ?>
que chamará o arquivo header.php. E na última linha
<?php get_footer(); ?>
que chamará o footer.php.

Configurando o Header

Para adicionar título dinâmico utilize a template tag
<?php bloginfo('name'); ?>
entre as tags title ficando assim:

<title><?php bloginfo('name'); ?></title>

Para adicionar descrição dinâmica utilize a template tag <?php bloginfo('description'); ?> na meta tag description, ficando assim:

<meta name="description" content="<?php bloginfo('description'); ?>">

Para colocar a codificação do site adicione a template tag <?php bloginfo('charset'); ?> na meta tag charset <meta charset="<?php bloginfo('charset'); ?>">

Na criação de temas para wordpress é obrigatório o uso de caminho absoluto de imagens, scripts e estilos. A template tag <?php bloginfo( ‘template_url’ ); ?>. Então adicione em todas imagens, scripts e estilos <?php bloginfo( 'template_url' ); ?>/

Exemplos:

<img src="<?php bloginfo( 'template_directory' ); ?>/img//logo.png" alt="Smallbee">

<script src="<?php bloginfo( 'template_url' ); ?>/js/main.js"></script>

<link href="<?php bloginfo( 'template_url' ); ?>/css/main.css" rel="stylesheet">

Pronto! Está feita a primeira parte! Para ver seu mais novo tema em funcionamento, ainda faltam alguns passos que serão postados no decorrer da série, mas você já pode ver seu monstrinho disponível ao acessar seu wordpress/wp-admin no menu Aparência -> Temas e ele estará lá…

Obrigado pela leitura!

Para aprofundar o seu conhecimento da template tag bloginfo consulte a documentação do wordpress, seu melhor amigo a partir de agora: https://codex.wordpress.org/Function_Reference/bloginfo