Este artigo é uma edição localizada do original em japonês. Ler o original em japonês
O Blocksy é um tema gratuito e multifuncional para WordPress. Quase todas as configurações são feitas em "Aparência" → "Personalizar" (Appearance → Customize, o Personalizador), com visualização em tempo real, e o cabeçalho e o rodapé são montados arrastando e soltando. Este artigo explica, na ordem das configurações, como instalar o tema e o plugin auxiliar "Blocksy Companion", quais cores e fontes definir primeiro, como montar o cabeçalho, como configurar a lista do blog e as páginas de artigo e como preparar um tema filho.
Entenda como o Blocksy é composto
O Blocksy é composto por três partes.
- Blocksy (o tema em si): pode ser obtido gratuitamente no WordPress.org. Traz as configurações de design no Personalizador e os construtores de cabeçalho e rodapé
- Blocksy Companion (plugin gratuito): cuida de carregar sites iniciais (dados de demonstração) e de adicionar extensões
- Blocksy Pro (pago): acrescenta elementos extras de cabeçalho, exibição condicional, recursos de layout mais detalhados e outros
O caminho natural é começar com o tema e o Companion e só considerar o Pro quando você perceber que os recursos gratuitos não bastam (a divisão de recursos e os preços podem mudar, então confira no site oficial, com as informações de outubro de 2026).
O Blocksy também tem uma construção mais próxima de um tema clássico e é compatível com o editor de blocos. Como a forma de operar é diferente da dos temas de blocos, em que tudo é montado no Editor do site ("Aparência" → "Editor"), vale lembrar: "o design geral fica no Personalizador e o conteúdo dos artigos e páginas fica no editor de blocos".
Instalação e configuração do Companion
- Em "Aparência" → "Temas" → "Adicionar novo tema" (Appearance → Themes → Add New Theme), procure por "Blocksy", instale e ative
- Pelo aviso exibido depois da ativação, ou pelo painel do Blocksy que é adicionado ao painel de administração, instale e ative o Blocksy Companion
Com o WP-CLI, dá para instalar assim.
wp theme install blocksy --activate
wp plugin install blocksy-companion --activateSe você vai trocar o tema de um site já existente, faça antes um backup do site inteiro. Ao mudar de tema, shortcodes e widgets próprios do tema anterior, além das posições dos menus, podem não ser mantidos.
Usar ou não um site inicial
Depois de instalar o Companion, é possível carregar um "site inicial" (starter site) pelo painel do Blocksy. Como páginas já desenhadas, as configurações do Personalizador e os plugins necessários vêm todos juntos, em um site novo você percebe rapidamente como será o resultado final.
Porém, é mais prudente evitar carregá-lo em um site que já tem artigos. São adicionadas páginas, imagens e menus de demonstração e as configurações do Personalizador são sobrescritas, o que torna difícil saber o que era a configuração original. Se for usar, recomendo fazê-lo no início de um site novo, ou testar em um ambiente de homologação e depois reproduzir apenas as configurações necessárias.
Configurações gerais para definir primeiro
Ao abrir "Aparência" → "Personalizar", aparecem os itens de configuração do Blocksy. Os nomes dos itens costumam estar traduzidos, mas podem mudar conforme a versão. As duas primeiras coisas a mexer são estas, que afetam o site todo.
Cores (paleta de cores)
Nas configurações de cores dentro da configuração geral, defina a paleta das cores básicas usadas no site. No Blocksy, a cor do texto, a dos links, a dos botões e outras referem-se às cores dessa paleta, então, ao mudar a paleta, o esquema de cores do site inteiro muda de uma só vez.
Se você especificar as cores diretamente em cada ponto, depois terá que corrigir uma a uma quando quiser mudar o esquema. O mais fácil de administrar é definir tudo pela paleta e especificar individualmente só as partes que realmente precisam de outra cor.
Fontes (tipografia)
Nas configurações de tipografia, defina a fonte, o tamanho e a altura de linha do texto e dos títulos. Um ponto de atenção em sites em japonês é que escolher uma fonte latina não a aplica aos caracteres japoneses. As partes em japonês são exibidas com a fonte do dispositivo do visitante, então deixe a fonte do texto no padrão, como "fonte do sistema", ou especifique uma fonte compatível com japonês.
Carregar uma fonte japonesa como web font gera arquivos grandes e pode afetar a velocidade de exibição. Se for usar, reduza os tipos de espessura e verifique o impacto na velocidade com o PageSpeed Insights ou similar.
Monte o cabeçalho
Ao abrir o item de cabeçalho do Personalizador, o construtor de cabeçalho aparece na parte inferior da tela. O cabeçalho é dividido em linhas superior, central e inferior, e elementos como o logotipo (título do site), o menu, a busca e botões são arrastados para a esquerda, o centro ou a direita de cada linha.
O que costuma confundir é que os cabeçalhos para computador e para celular são configurados separadamente. Se você mudar a exibição do construtor para celular, aparece outra disposição. No celular, o básico é colocar o menu dentro de um "off-canvas" que se abre pelo ícone de hambúrguer (trigger). Se você configurar só o cabeçalho para computador e publicar, pode acontecer de o menu não aparecer no celular, então confira as duas exibições.
Ao clicar em um elemento, as configurações dele (tamanho do texto, cor, margens etc.) aparecem à esquerda. Os itens a serem exibidos no menu são criados em "Aparência" → "Menus" (Appearance → Menus) e atribuídos ao elemento de menu do cabeçalho.
O rodapé é montado com o construtor de rodapé, que segue a mesma lógica. Para mudar a posição das áreas de widgets e do aviso de copyright, edite pelo item de rodapé.
Exibição da lista do blog e das páginas de artigo
O Personalizador tem itens de configuração por tipo de página, como a lista de posts (blog), posts individuais e páginas.
- Lista de posts: forma de organizar (cartões, lista etc.), número de colunas por linha, proporção da imagem destacada, tamanho do resumo e informações do post exibidas (data de publicação, categorias etc.)
- Post individual: largura da área de conteúdo, presença e posição da barra lateral, forma de exibir o título, exibição de artigos relacionados e informações do autor
- Páginas: assim como nos posts individuais, configure a largura e a presença da barra lateral
O que mais influencia a legibilidade da página de artigo é a largura do texto. Em japonês, textos longos ficam difíceis de ler quando a linha é comprida demais; por isso, sem barra lateral, defina uma largura de texto mais estreita e confira se, no celular, as letras não ficam pequenas demais.
Se você quiser mudar o layout de apenas um artigo, pode usar as configurações do Blocksy exibidas na barra lateral da tela de edição do post e, por exemplo, tirar a barra lateral só desse artigo.
Prepare um tema filho
Se você editar diretamente os arquivos do tema, as alterações se perdem quando o tema é atualizado. Para acrescentar só um pouco de CSS, basta usar o "CSS adicional" (Additional CSS) do Personalizador. Quando precisar personalizar PHP ou sobrescrever templates, crie um tema filho.
O site oficial do Blocksy distribui um modelo de tema filho. Se for criar o seu, coloque em wp-content/themes/blocksy-child/ o seguinte style.css,
/*
Theme Name: Blocksy Child
Template: blocksy
*/e, no functions.php da mesma pasta, carregue o estilo do tema filho.
<?php
add_action( 'wp_enqueue_scripts', function () {
wp_enqueue_style(
'blocksy-child-style',
get_stylesheet_uri(),
array(),
wp_get_theme()->get( 'Version' )
);
}, 20 );Ao mudar para o tema filho, as configurações do Personalizador são salvas separadamente das do tema pai, e o que você configurou no tema pai pode parecer sumido. Se o Companion estiver instalado, as configurações do Personalizador podem ser transferidas pela função de exportação e importação, então exportá-las antes de mudar para o tema filho evita retrabalho.
Atualização e cuidados na operação
O Blocksy e o Companion são atualizados com frequência. Faça um backup antes de atualizar e, depois, confira o cabeçalho, as páginas de artigo e a exibição no celular. Se a exibição quebrar, limpe o cache dos plugins de cache e da CDN antes de conferir de novo. Se você usa plugins de aceleração que combinam e comprimem CSS, um CSS antigo que permaneça pode fazer a página parecer quebrada.
Resumo
- Comece usando o Blocksy com o tema e o Blocksy Companion, e só considere o Pro depois de saber quais recursos fazem falta
- Use o site inicial em um site novo ou em um ambiente de homologação e, em sites existentes, cuidado com a sobrescrita das configurações
- Defina o conjunto pela paleta de cores e pela tipografia. Lembre que fontes latinas não afetam o japonês
- O construtor de cabeçalho é separado para computador e celular. Confira as duas exibições e use um tema filho se for mexer em PHP
Dúvidas sobre WordPress? Quem publica este site fica no Japão e responde em japonês. Contato (em japonês)