Plugin SiteOrigin CSS – WordPress

Uma das grandes vantagens, e também desvantagens, do WordPress está na enorme quantidade de plugins que existem para complementar esse CMS. Entretanto, plugins podem ajudar ou prejudicar o seu site, seja derrubando o desempenho de carregamento das páginas ou por causa das vulnerabilidades que muitos deles apresentam – mas isso é assunto para um outro artigo!

Quando alguém resolve usar o WordPress acaba se deparando com a necessidade de saber ao menos um pouco de três coisas: CSS, HTML e PHP. Nem sempre será necessário fazer alterações no PHP/HTML, mas quase sempre você precisará fazer alguma alteração no CSS – seja para alinhar alguma coisa, trocar uma cor, o tamanho de uma fonte, etc. Fazer as alterações direto na folha de estilos do seu tema principal irá te causar um problema no futuro: ao atualizar seu tema você perderá todas as alterações que foram feitas… Uma solução para evitar isso seria utilizar um “tema filho” ou “child theme”, que nada mais é do que é um tema que herda as funcionalidades e estilos de outro tema, chamado de “tema pai”. Você pode aprender um pouco mais sobre eles nesta página do Codex do WP. Porém, existe uma maneira mais simples de manter as alterações feitas no CSS e ainda facilitar a sua tarefa no momento de encontrar a class ou ID de um elemento qualquer, quem te ajuda nesta tarefa é um plugin do WordPress chamado SiteOrigin CSS.

O SiteOrigin CSS é gratuito, simples de usar e funciona em qualquer tema. Após instalado ele fica disponível no menu esquerdo da área de administração do WordPress, basta acessar “Aparência > Custom CSS”. Chegando lá você irá encontrar uma tela como esta abaixo. Nela será possível escrever as alterações que você desejar fazer no CSS.

Site Origin CSS
Tela do Editor de Código do SiteOrigin CSS | Clique para ampliar
SiteOrigin CSS
Editor de CSS do plugin SiteOrigin CSS

Uma das vantagens deste editor é que ele irá autocompletar o CSS a medida que você for escrevendo o código, além disso, ele irá lhe indicar as classes e IDs presentes na folha de estilo do seu tema, como aparece na imagem anterior.

Mas as vantagens não param por aí!

Ele também disponibiliza um editor visual onde você poderá identificar com mais facilidade cada um dos elementos da sua página e os respectivos IDs e classes deles! Uma verdadeira mão na roda! Para ativar esta função basta acessar o menu “Aparência > Custom CSS” e clicar no ícone do “olho” que aparece no canto superior direito da janela do editor de código.

Editor CSS WordPress
Editor visual do SiteOrigin CSS | Clique para ampliar

Tudo fica mais simples de acompanhar se estivermos vendo as coisas acontecerem na nossa frente, no site oficial do plugin você poderá ver um vídeo feito pelo Greg Priday, desenvolvedor do SiteOrigin CSS.

Para saber mais visite a página do SiteOrigin CSS no repositório de plugins do WordPress.

3 comentários em “Plugin SiteOrigin CSS – WordPress”

  1. Oi podeira me ajudar, uso o tema Épico e instalei este plugin, porem no momento em que clico no icone do olho para fazer alterações manuais ele não funciona. Simplesmente não acontece nada. Poderia me ajudar?

    1. Olá Renata, pode ser que esta funcionalidade do plugin não seja compatível com o tema que está em uso no seu site. Se for possível e se você souber fazer experimente trocar o tema do site e fazer um teste.

Deixe uma resposta