{"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&#038;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<p><em>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<figure class=\"wp-block-image size-large\"><a class=\"deve-redirecionar\" href=\"https:\/\/king.host\/hospedagem-wordpress?utm_source=wiki&amp;utm_medium=banner&amp;utm_term=wp-banner-top&amp;utm_content=adicionar-css-personalizado-wp&amp;utm_campaign=oferta-produto\" target=\"_blank\" v-on:click=\"toggle_modal\" rel=\"noopener\"><img data-original=\"https:\/\/king.host\/wiki\/wp-content\/uploads\/2021\/10\/WP-728x90-1.png\" alt=\"Plataforma completa para um site WordPress.\" class=\"wp-image-22354\"\/><\/a><\/figure>\n\n\n\n<p>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.<br>Neste post, utilizaremos como exemplo o plugin <a rel=\"noopener noreferrer\" href=\"https:\/\/br.wordpress.org\/plugins\/wp-add-custom-css\/\" target=\"_blank\">WP Add Custom CSS<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Por_que_nao_devo_editar_diretamente_os_arquivos_do_tema_que_estou_utilizando_%F0%9F%98%90\"><\/span>Por que n\u00e3o devo editar diretamente os arquivos do tema que estou utilizando? \ud83d\ude10<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>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.<br>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<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Instalando_o_plugin_de_customizacao\"><\/span>Instalando o plugin de customiza\u00e7\u00e3o<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/www.kinghost.com.br\/wiki\/wp-content\/uploads\/2016\/09\/wp-custom-css-0001.png\"><img decoding=\"async\" data-src=\"https:\/\/www.kinghost.com.br\/wiki\/wp-content\/uploads\/2016\/09\/wp-custom-css-0001.png\" alt=\"wp-admin &gt; Plugins &gt; Adicionar novo\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/www.kinghost.com.br\/wiki\/wp-content\/uploads\/2016\/09\/wp-custom-css-0001.png\" alt=\"wp-admin &gt; Plugins &gt; Adicionar novo\"\/><\/noscript><\/a><\/figure><\/div>\n\n\n\n<p>No painel administrativo do seu site WordPress, navegue at\u00e9 o menu <strong>Plugins<\/strong> e selecione a op\u00e7\u00e3o <strong>Adicionar Novo<\/strong>.<br><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/www.kinghost.com.br\/wiki\/wp-content\/uploads\/2016\/09\/wp-custom-css-0002.gif\"><img decoding=\"async\" data-src=\"https:\/\/www.kinghost.com.br\/wiki\/wp-content\/uploads\/2016\/09\/wp-custom-css-0002.gif\" alt=\"WP Add Custom CSS\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/www.kinghost.com.br\/wiki\/wp-content\/uploads\/2016\/09\/wp-custom-css-0002.gif\" alt=\"WP Add Custom CSS\"\/><\/noscript><\/a><\/figure><\/div>\n\n\n\n<p>Assim que carregar a nova p\u00e1gina, digite no campo de busca no canto superior direito da tela o termo <strong>WP Add Custom CSS<\/strong>. O primeiro resultado \u00e9 o plugin que desejamos instalar. Clique no bot\u00e3o <span class=\"button is-light\">Instalar agora<\/span>.<br>O plugin ser\u00e1 instalado e voc\u00ea deve clicar no bot\u00e3o <span class=\"button is-light\">Ativar<\/span> para habilitar seu uso.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Realizando_a_customizacao\"><\/span>Realizando a customiza\u00e7\u00e3o<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/www.kinghost.com.br\/wiki\/wp-content\/uploads\/2016\/09\/wp-custom-css-0003.png\"><img decoding=\"async\" data-src=\"https:\/\/www.kinghost.com.br\/wiki\/wp-content\/uploads\/2016\/09\/wp-custom-css-0003.png\" alt=\"WP Add Custom CSS\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/www.kinghost.com.br\/wiki\/wp-content\/uploads\/2016\/09\/wp-custom-css-0003.png\" alt=\"WP Add Custom CSS\"\/><\/noscript><\/a><\/figure><\/div>\n\n\n\n<p>Assim que instalado, surgir\u00e1 um novo menu no painel administrativo do WordPress chamado <strong>Add Custom CSS<\/strong>.<br>Posteriormente, clique nesse menu e no campo em branco voc\u00ea j\u00e1 pode come\u00e7ar a inserir c\u00f3digo CSS personalizado.<br>Mas lembre-se que a cria\u00e7\u00e3o dos c\u00f3digos CSS deve ser feita por algu\u00e9m que possui conhecimento na \u00e1rea.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Exemplo_de_uso_criando_um_botao\"><\/span>Exemplo de uso: criando um bot\u00e3o<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>No exemplo abaixo, h\u00e1 um c\u00f3digo que cria um bot\u00e3o como este: <span class=\"button is-light\">Exemplo de bot\u00e3o<\/span>.<br>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.<br><span style=\"color: #808080;\">A linha 1 deste c\u00f3digo \u00e9 onde voc\u00ea define o nome da classe.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\" lang=\"wp-block-preformatted\">.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<p>Para utilizar o bot\u00e3o em seus posts, utilize a seguinte sintaxe: <code> &lt;span class=\"btn-novo\"&gt;BOTAO&lt;\/span&gt; <\/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":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/article\/2041"}],"collection":[{"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/comments?post=2041"}],"version-history":[{"count":2,"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/article\/2041\/revisions"}],"predecessor-version":[{"id":6167,"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/article\/2041\/revisions\/6167"}],"wp:attachment":[{"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/media?parent=2041"}],"wp:term":[{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/article-category?post=2041"},{"taxonomy":"article-tag","embeddable":true,"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/article-tag?post=2041"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}