{"id":2041,"date":"2016-09-13T09:14:46","date_gmt":"2016-09-13T12:14:46","guid":{"rendered":"https:\/\/www.kinghost.com.br\/wiki\/?post_type=article&p=2041"},"modified":"2021-12-04T09:12:54","modified_gmt":"2021-12-04T11:12:54","slug":"adicionar-css-personalizado-wordpress","status":"publish","type":"article","link":"https:\/\/king.host\/wiki\/artigo\/adicionar-css-personalizado-wordpress\/","title":{"rendered":"WordPress: Como adicionar CSS personalizado"},"content":{"rendered":"\n

Veja como voc\u00ea pode adicionar css personalizado em seu site WordPress sem precisar editar os arquivos PHP do seu template.<\/em><\/p>\n\n\n\n

\"Plataforma<\/a><\/figure>\n\n\n\n

Uma maneira bem f\u00e1cil de voc\u00ea adicionar estilos ao seu site WordPress sem precisar editar os arquivos PHP de seu tema, \u00e9 utilizando um plugin espec\u00edfico para isso.
Neste post, utilizaremos como exemplo o plugin WP Add Custom CSS<\/a>.<\/p>\n\n\n\n

<\/span>Por que n\u00e3o devo editar diretamente os arquivos do tema que estou utilizando? \ud83d\ude10<\/span><\/h4>\n\n\n\n

Editar diretamente os arquivos do seu template pode comprometer o funcionamento,performance e seguran\u00e7a do seu site. O ideal \u00e9 que, se voc\u00ea tiver conhecimento em edi\u00e7\u00e3o CSS, configure um childtheme em sua aplica\u00e7\u00e3o.
Uma outra alternativa mais simples de ser utilizada, seria a utiliza\u00e7\u00e3o de plugins que customizam o CSS do seu site.<\/p>\n\n\n\n

<\/span>Instalando o plugin de customiza\u00e7\u00e3o<\/span><\/h2>\n\n\n\n
\"wp-admin<\/a><\/figure><\/div>\n\n\n\n

No painel administrativo do seu site WordPress, navegue at\u00e9 o menu Plugins<\/strong> e selecione a op\u00e7\u00e3o Adicionar Novo<\/strong>.
<\/p>\n\n\n\n

\"WP<\/a><\/figure><\/div>\n\n\n\n

Assim que carregar a nova p\u00e1gina, digite no campo de busca no canto superior direito da tela o termo WP Add Custom CSS<\/strong>. O primeiro resultado \u00e9 o plugin que desejamos instalar. Clique no bot\u00e3o Instalar agora<\/span>.
O plugin ser\u00e1 instalado e voc\u00ea deve clicar no bot\u00e3o Ativar<\/span> para habilitar seu uso.
<\/p>\n\n\n\n

<\/span>Realizando a customiza\u00e7\u00e3o<\/span><\/h2>\n\n\n\n
\"WP<\/a><\/figure><\/div>\n\n\n\n

Assim que instalado, surgir\u00e1 um novo menu no painel administrativo do WordPress chamado Add Custom CSS<\/strong>.
Posteriormente, clique nesse menu e no campo em branco voc\u00ea j\u00e1 pode come\u00e7ar a inserir c\u00f3digo CSS personalizado.
Mas lembre-se que a cria\u00e7\u00e3o dos c\u00f3digos CSS deve ser feita por algu\u00e9m que possui conhecimento na \u00e1rea.
<\/p>\n\n\n\n

<\/span>Exemplo de uso: criando um bot\u00e3o<\/span><\/h2>\n\n\n\n

No exemplo abaixo, h\u00e1 um c\u00f3digo que cria um bot\u00e3o como este: Exemplo de bot\u00e3o<\/span>.
Voc\u00ea pode copiar o c\u00f3digo abaixo para utilizar em seu site. Portanto pegue o c\u00f3digo e coloque dentro da configura\u00e7\u00e3o do plugin.
A linha 1 deste c\u00f3digo \u00e9 onde voc\u00ea define o nome da classe.<\/span><\/p>\n\n\n\n

.btn-novo {\n    border-radius: 4px;\n    margin-bottom: 0;\n    padding: 2px 8px;\n    color: #555;\n    border: 1px solid #ccc;\n    background: #f7f7f7;\n    -webkit-box-shadow: 0 1px 0 #ccc;\n    box-shadow: 0 1px 0 #ccc;\n    vertical-align: top;\n}\n<\/pre>\n\n\n\n
Para utilizar o bot\u00e3o em seus posts, utilize a seguinte sintaxe:  <span class=\"btn-novo\">BOTAO<\/span> <\/code>.<\/p>\n","protected":false},"author":9,"featured_media":0,"menu_order":20,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","article-category":[205],"article-tag":[],"class_list":["post-2041","article","type-article","status-publish","format-standard","hentry","article-category-wp-gerenciamento-site"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t