{"id":72167,"date":"2025-07-02T08:39:21","date_gmt":"2025-07-02T11:39:21","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=72167&#038;preview=true&#038;preview_id=72167"},"modified":"2025-07-03T03:42:11","modified_gmt":"2025-07-03T06:42:11","slug":"dicas-de-css-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/dicas-de-css-wordpress\/","title":{"rendered":"9 Dicas de CSS que Economizam Tempo para Usu\u00e1rios do WordPress"},"content":{"rendered":"<p>Se voc\u00ea est\u00e1 <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-personalizar-tema-wordpress\/\">personalizando um tema<\/a>, tentando limpar um painel sobrecarregado de plugins ou apenas quer que seu blog fique bonito em todas as telas, o <a href=\"https:\/\/kinsta.com\/pt\/blog\/css-wordpress\/\">CSS<\/a> ainda \u00e9 uma das maneiras mais r\u00e1pidas de fazer isso no <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-wordpress\/\">WordPress<\/a> sem instalar <em>mais um<\/em> plugin.<\/p>\n<p>Mas sejamos honestos: nem todo usu\u00e1rio de WordPress tem tempo para vasculhar folhas de estilo de tema ou decifrar os caprichos do <a href=\"https:\/\/www.youtube.com\/shorts\/yYcL3kUSGZA\">Editor de Blocos<\/a>. Por isso criamos esta lista de dicas pr\u00e1ticas de CSS, pensadas especificamente para quem quer economizar tempo no WordPress.<\/p>\n<p>N\u00e3o s\u00e3o truques gen\u00e9ricos. Essas dicas ajudam a resolver frustra\u00e7\u00f5es comuns enfrentadas por blogueiros, donos de sites, <a href=\"https:\/\/kinsta.com\/pt\/blog\/tipos-de-desenvolvedores\/\">desenvolvedores<\/a> e <a href=\"https:\/\/kinsta.com\/pt\/blog\/tipos-de-desenvolvedores\/\">freelancers<\/a> que trabalham com WordPress todos os dias.<\/p>\n<p>Este guia mostra como:<\/p>\n<ul>\n<li data-start=\"753\" data-end=\"811\">\n<p data-start=\"755\" data-end=\"811\">Corrigir problemas com cabe\u00e7alhos fixos e links \u00e2ncora<\/p>\n<\/li>\n<li data-start=\"812\" data-end=\"881\">\n<p data-start=\"814\" data-end=\"881\">Acelerar grades de artigos longos com t\u00e9cnicas modernas de layout<\/p>\n<\/li>\n<li data-start=\"882\" data-end=\"925\">\n<p data-start=\"884\" data-end=\"925\">Personalizar a tela de login sem plugin<\/p>\n<\/li>\n<li data-start=\"926\" data-end=\"982\">\n<p data-start=\"928\" data-end=\"982\">Ocultar elementos exagerados da interface de plugins<\/p>\n<\/li>\n<li data-start=\"983\" data-end=\"1000\">\n<p data-start=\"985\" data-end=\"1000\">E muito mais&#8230;<\/p>\n<\/li>\n<\/ul>\n<p>Independentemente de voc\u00ea usar um <a href=\"https:\/\/kinsta.com\/pt\/blog\/criar-tema-classico-wordpress\/\">tema cl\u00e1ssico<\/a>, um <a href=\"https:\/\/kinsta.com\/pt\/blog\/desenvolvimento-de-tema-de-blocos-wordpress\/\">tema baseado em blocos<\/a> ou um <a href=\"https:\/\/kinsta.com\/pt\/blog\/construtores-de-paginas-wordpress\/\">construtor<\/a>, essas dicas podem ajudar a otimizar seu fluxo de trabalho e melhorar o desempenho, tudo com algumas linhas de <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-css\/\">CSS<\/a>.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>1. Corrija problemas com links \u00e2ncora e cabe\u00e7alhos fixos<\/h2>\n<p>J\u00e1 clicou em um link que leva a uma se\u00e7\u00e3o da p\u00e1gina e percebeu que o t\u00edtulo ficou escondido atr\u00e1s do <a href=\"https:\/\/kinsta.com\/pt\/blog\/sticky-header\/\">menu fixo<\/a>? Esse \u00e9 um problema comum no WordPress, especialmente em artigos longos que usam plugins de \u00edndice (Table of Contents).<\/p>\n<p>A maioria dos temas usa <code>position: sticky<\/code> ou <code>fixed<\/code> para a barra de navega\u00e7\u00e3o, que cobre o topo da p\u00e1gina. Quando um usu\u00e1rio clica em um link \u00e2ncora (como <code data-start=\"1652\" data-end=\"1658\">#faq<\/code> ou <code data-start=\"1662\" data-end=\"1671\">#precos<\/code>), o navegador leva essa se\u00e7\u00e3o at\u00e9 o topo \u2014 logo abaixo da barra de navega\u00e7\u00e3o.<\/p>\n<p data-start=\"1751\" data-end=\"1909\">Voc\u00ea pode resolver isso com a propriedade <code data-start=\"1793\" data-end=\"1812\">scroll-margin-top<\/code> no CSS. Ela adiciona um espa\u00e7o acima do t\u00edtulo, evitando que ele fique encoberto pelo menu fixo:<\/p>\n<pre><code class=\"language-css\">h2, h3 {\n  scroll-margin-top: 80px;\n}<\/code><\/pre>\n<p>Uma boa pr\u00e1tica \u00e9 usar o mesmo valor da altura do seu cabe\u00e7alho. Se a barra de navega\u00e7\u00e3o fixa tiver 64px de altura, use <code data-start=\"2081\" data-end=\"2106\">scroll-margin-top: 64px<\/code> (ou um pouco mais). Aplique essa regra aos n\u00edveis de cabe\u00e7alho que voc\u00ea usa nos links \u00e2ncora, geralmente <code data-start=\"2213\" data-end=\"2217\">h2<\/code> ou <code data-start=\"2221\" data-end=\"2225\">h3<\/code>.<\/p>\n<h2>2. Direcione telas espec\u00edficas do admin do WordPress com classes do &lt;body&gt;<\/h2>\n<p>Muitos plugins do WordPress poluem a interface de administra\u00e7\u00e3o com avisos de upsell, banners ou elementos sem estilo. Mas remover ou ajustar isso em todo o site nem sempre \u00e9 pr\u00e1tico, especialmente quando voc\u00ea quer mudan\u00e7as apenas em uma tela espec\u00edfica, como as configura\u00e7\u00f5es do <a href=\"https:\/\/kinsta.com\/pt\/blog\/tutorial-woocommerce\/\">WooCommerce<\/a> ou o editor de um <a href=\"https:\/\/kinsta.com\/pt\/blog\/tipos-publicacoes-personalizadas-wordpress\/\">tipo de artigo personalizado<\/a>.<\/p>\n<p>O WordPress adiciona automaticamente classes contextuais \u00e0 tag <code data-start=\"475\" data-end=\"483\">&lt;body&gt;<\/code> nas p\u00e1ginas do admin. Essas classes incluem slugs de p\u00e1ginas, tipos de artigos e refer\u00eancias de itens do menu e s\u00e3o extremamente \u00fateis para escrever CSS segmentado, que se aplica apenas onde for necess\u00e1rio.<\/p>\n<p>Por exemplo, digamos que voc\u00ea queira ocultar avisos apenas na p\u00e1gina de configura\u00e7\u00f5es do WooCommerce.<\/p>\n<pre><code class=\"language-css\">body.toplevel_page_woocommerce .notice {\n  display: none;\n}<\/code><\/pre>\n<p>Para encontrar essas classes, abra o <a href=\"https:\/\/kinsta.com\/pt\/blog\/painel-administrativo-wordpress\/\">administrador do WordPress<\/a>, clique com o bot\u00e3o direito do mouse e escolha <strong>Inspecionar<\/strong> (ou pressione <code>Cmd+Option+I<\/code> \/ <code>Ctrl+Shift+I<\/code>). Procure a tag <code>&lt;body&gt;<\/code> &#8211; ela conter\u00e1 v\u00e1rias classes \u00fateis.<\/p>\n<p>Por exemplo, voc\u00ea pode obter isso em uma tela do painel:<\/p>\n<pre><code class=\"language-css\">&lt;body class=\"wp-admin wp-core-ui index-php wp-dashboard theme-astra ...\"&gt;<\/code><\/pre>\n<p>Algumas classes comuns que voc\u00ea pode ver:<\/p>\n<ul>\n<li><code>post-type-product<\/code>: editor de produtos do WooCommerce<\/li>\n<li><code>edit-tags-php<\/code>: gerenciamento de categorias\/tags<\/li>\n<li><code>settings_page_yoast<\/code>: configura\u00e7\u00f5es do Yoast SEO<\/li>\n<li><code>toplevel_page_woocommerce<\/code>: p\u00e1gina principal de configura\u00e7\u00f5es do WooCommerce<\/li>\n<\/ul>\n<p>Para usar essas classes no seu CSS, voc\u00ea precisar\u00e1 <a href=\"https:\/\/kinsta.com\/pt\/blog\/wp-enqueue-scripts\/\">registrar<\/a> uma folha de estilos personalizada para o admin. N\u00e3o \u00e9 poss\u00edvel adicion\u00e1-las pelo Customizer, pois ele s\u00f3 afeta o frontend.<\/p>\n<p>Adicione isso ao site do seu tema <code>functions.php<\/code>:<\/p>\n<pre><code class=\"language-php\">function my_custom_admin_styles() {\n  wp_enqueue_style(\n    'my-admin-css',\n    get_stylesheet_directory_uri() . '\/admin.css'\n  );\n}\nadd_action('admin_enqueue_scripts', 'my_custom_admin_styles');<\/code><\/pre>\n<p>Em seguida, crie um arquivo chamado <code>admin.css<\/code> na pasta do seu tema e adicione seus estilos com escopo l\u00e1.<\/p>\n<h2>3. Crie grades responsivas sem um construtor de p\u00e1ginas<\/h2>\n<p>Os construtores de p\u00e1ginas facilitam o layout, mas tamb\u00e9m adicionam incha\u00e7o. Se voc\u00ea estiver trabalhando com um tema cl\u00e1ssico (como <a href=\"https:\/\/kinsta.com\/pt\/blog\/generatepress-vs-astra\/\">Astra ou GeneratePress<\/a>) ou mesmo criando seu pr\u00f3prio <a href=\"https:\/\/kinsta.com\/pt\/blog\/modelos-de-blocos-do-wordpress\/\">modelo de bloco<\/a>, as grades CSS tornam mais r\u00e1pida e limpa a cria\u00e7\u00e3o de um layout responsivo.<\/p>\n<p>Isso \u00e9 especialmente \u00fatil para voc\u00ea:<\/p>\n<ul>\n<li data-start=\"2553\" data-end=\"2616\">\n<p data-start=\"2555\" data-end=\"2616\">Grades de artigos no blog em p\u00e1ginas iniciais ou de arquivo<\/p>\n<\/li>\n<li data-start=\"2617\" data-end=\"2709\">\n<p data-start=\"2619\" data-end=\"2709\">Listagem de tipos de artigos personalizados como eventos, membros da equipe ou depoimentos<\/p>\n<\/li>\n<li data-start=\"2710\" data-end=\"2786\">\n<p data-start=\"2712\" data-end=\"2786\">Layouts de produtos do WooCommerce sem sobrescrever arquivos de template<\/p>\n<\/li>\n<\/ul>\n<p>Voc\u00ea pode simplesmente adicionar isso \u00e0 folha de estilo do seu tema filho (child theme) (ou registrar via <code>functions.php<\/code>):<\/p>\n<pre><code class=\"language-css\">.post-list {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n  gap: 1.5rem;\n}<\/code><\/pre>\n<p>Em seguida, envolva seu loop em um cont\u00eainer como este:<\/p>\n<pre><code class=\"language-php\">&lt;div class=\"post-list\"&gt;\n  &lt;?php while (have_posts()) : the_post(); ?&gt;\n    &lt;div class=\"post-card\"&gt;\n      &lt;h2&gt;&lt;?php the_title(); ?&gt;&lt;\/h2&gt;\n      &lt;p&gt;&lt;?php the_excerpt(); ?&gt;&lt;\/p&gt;\n    &lt;\/div&gt;\n  &lt;?php endwhile; ?&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Esse CSS cria automaticamente quantas colunas couberem, garante que cada item tenha pelo menos 280 px de largura e reduz o n\u00famero de colunas em telas menores, sem necessidade de <a href=\"https:\/\/kinsta.com\/pt\/blog\/media-query-javascript\/\">consultas de m\u00eddia<\/a> ou plugin.<\/p>\n<h2>4. Use clamp() para tamanhos de fonte responsivos sem consultas de m\u00eddia<\/h2>\n<p>Projetar para v\u00e1rios tamanhos de tela geralmente significa fazer malabarismos com tamanhos de fonte por meio de consultas de m\u00eddia. Mas as consultas de m\u00eddia podem ficar confusas, especialmente quando voc\u00ea est\u00e1 lidando com v\u00e1rios pontos de interrup\u00e7\u00e3o ou deseja um dimensionamento consistente entre dispositivos.<\/p>\n<p>\u00c9 a\u00ed que entra o <code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/clamp\">clamp()<\/a><\/code> uma fun\u00e7\u00e3o CSS moderna que permite que voc\u00ea defina um valor fluido entre um tamanho m\u00ednimo, preferencial e m\u00e1ximo, tudo em uma \u00fanica linha.<\/p>\n<p>Aqui est\u00e1 o formato b\u00e1sico:<\/p>\n<pre><code class=\"language-css\">font-size: clamp(min, preferred, max);<\/code><\/pre>\n<p>Ele permite que o navegador ajuste o tamanho da fonte automaticamente com base na largura da janela de visualiza\u00e7\u00e3o, <em>sem<\/em> a necessidade de consultas de m\u00eddia separadas.<\/p>\n<p>A maioria dos temas WordPress (especialmente os baseados em blocos) j\u00e1 incorpora design fluido. Mas o <a href=\"https:\/\/kinsta.com\/pt\/blog\/editor-gutenberg-wordpress\/\">editor de blocos do Gutenberg<\/a> nem sempre oferece controle total sobre o escalonamento de fontes, especialmente para itens como:<\/p>\n<ul>\n<li>T\u00edtulos na se\u00e7\u00e3o hero<\/li>\n<li>T\u00edtulos de artigos em destaque<\/li>\n<li>Layouts de p\u00e1gina em largura total<\/li>\n<\/ul>\n<p>Em vez de usar v\u00e1rias media queries para definir tamanhos de fonte, <code data-start=\"1222\" data-end=\"1231\">clamp()<\/code> oferece um c\u00f3digo mais limpo, com menos repeti\u00e7\u00e3o e melhor responsividade. Pode ser usado para t\u00edtulos, bot\u00f5es, cita\u00e7\u00f5es e outros elementos, dentro de estilos personalizados via <code data-start=\"1410\" data-end=\"1422\">theme.json<\/code> ou <code data-start=\"1426\" data-end=\"1444\">editor-style.css<\/code>.<\/p>\n<pre><code class=\"language-css\">h1 {\n  font-size: clamp(1.8rem, 4vw + 1rem, 3rem);\n}<\/code><\/pre>\n<p><code>clamp()<\/code> \u00e9 compat\u00edvel com todos os navegadores modernos. \u00c9 seguro us\u00e1-lo em todos os projetos do WordPress, a menos que voc\u00ea esteja direcionado a navegadores corporativos extremamente desatualizados (por exemplo, Internet Explorer 11, que o pr\u00f3prio WordPress n\u00e3o suporta mais).<\/p>\n<h2>5. Melhore o desempenho em p\u00e1ginas longas com content-visibility<\/h2>\n<p>Se a sua p\u00e1gina inicial lista artigos do blog, sua loja exibe dezenas de produtos ou voc\u00ea est\u00e1 usando uma consulta personalizada para mostrar depoimentos, \u00e9 prov\u00e1vel que j\u00e1 tenha enfrentado problemas de desempenho, especialmente em dispositivos m\u00f3veis. Aquele atraso ao rolar uma longa lista? \u00c9 o navegador trabalhando mais do que deveria.<\/p>\n<p>A propriedade <code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/content-visibility\">content-visibility<\/a><\/code> CSS pode ajudar, dizendo ao navegador: &#8220;N\u00e3o renderize este elemento at\u00e9 que ele seja exibido na rolagem&#8221;<\/p>\n<pre><code class=\"language-css\">.article-card {\n  content-visibility: auto;\n  contain-intrinsic-size: 400px;\n}<\/code><\/pre>\n<p>\u00c9 como um lazy-loading para elementos HTML, reduzindo os custos de layout e renderiza\u00e7\u00e3o de conte\u00fado fora da tela. A propriedade <code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/contain-intrinsic-size\">contain-intrinsic-size<\/a><\/code> informa ao navegador uma altura estimada para reservar espa\u00e7o, evitando mudan\u00e7as visuais quando o conte\u00fado for carregado.<\/p>\n<p>Voc\u00ea pode fazer isso adicionando uma classe como <code>.article-card<\/code> ou <code>.product-card<\/code> a cada item do loop ao editar um tema e, em seguida, inserir o CSS na folha de estilo no <a href=\"https:\/\/kinsta.com\/pt\/blog\/tema-filho-no-wordpress\/\">tema filho (child theme)<\/a> ou inclu\u00ed-lo via <code>functions.php<\/code>.<\/p>\n<p>Se estiver usando o Gutenberg, voc\u00ea poder\u00e1 adicionar uma classe personalizada ao bloco (nas <strong>configura\u00e7\u00f5es avan\u00e7adas<\/strong>) e, em seguida, direcion\u00e1-la para a se\u00e7\u00e3o <strong>CSS adicional<\/strong> ou para o arquivo do seu tema.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Esse recurso n\u00e3o substitui uma boa estrat\u00e9gia de <a href=\"https:\/\/kinsta.com\/pt\/docs\/hospedagem-de-wordpress\/cache\/\">cache<\/a> ou o uso de um <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-um-cdn\/\">CDN<\/a>, mas \u00e9 uma forma inteligente, usando apenas CSS, de melhorar a percep\u00e7\u00e3o de desempenho ao renderizar listas longas de conte\u00fado. Ele tamb\u00e9m n\u00e3o afeta imagens (essas j\u00e1 s\u00e3o carregadas sob demanda nas vers\u00f5es modernas do WordPress).<\/p>\n<\/aside>\n\n<h2>6. Use !important com modera\u00e7\u00e3o, mas de forma estrat\u00e9gica para substituir estilos de plugins<\/h2>\n<p>Na maioria dos projetos do WordPress, voc\u00ea tenta estilizar algo e nada acontece. Voc\u00ea escreve a regra, verifica seu seletor, atualiza&#8230; e ainda assim os estilos originais do plugin ganham.<\/p>\n<p>Isso ocorre porque muitos plugins de WordPress adicionam estilos com:<\/p>\n<ul>\n<li>Alta especificidade (cadeias de classes longas)<\/li>\n<li>Atributos em linha <code>style<\/code><\/li>\n<li>Folhas de estilo carregadas depois das suas<\/li>\n<\/ul>\n<p>Em vez de buscar seletores complexos, a solu\u00e7\u00e3o mais limpa geralmente \u00e9 usar <code>!important<\/code> quando isso se justificar.<\/p>\n<p>Por exemplo, o <a href=\"https:\/\/kinsta.com\/pt\/blog\/contact-form-7\/\">Contact Form 7<\/a> usa classes espec\u00edficas como <code>.wpcf7-form-control<\/code>, mas seus estilos padr\u00e3o podem ser dif\u00edceis de substituir sem <code>!important<\/code>.<\/p>\n<p>Veja como arredondar as entradas do formul\u00e1rio:<\/p>\n<pre><code class=\"language-css\">input.wpcf7-form-control {\n  border-radius: 6px !important;\n}<\/code><\/pre>\n<p>\u00c9 importante que voc\u00ea o use com inten\u00e7\u00e3o. Em vez de espalhar <code>!important<\/code> por toda parte, isole as substitui\u00e7\u00f5es em uma folha de estilo dedicada ao administrador ou \u00e0 corre\u00e7\u00e3o de plugins. Isso mant\u00e9m o CSS do tema principal limpo e evita conflitos acidentais posteriormente.<\/p>\n<p>Se voc\u00ea estiver trabalhando com sites de clientes, essa abordagem o ajudar\u00e1 a controlar os estilos agressivos dos plugins <em>sem<\/em> precisar modificar os templates ou adicionar mais um plugin.<\/p>\n<h2>7. Use :where() para substituir estilos de bloco sem problemas de especificidade<\/h2>\n<p>Se voc\u00ea j\u00e1 tentou ajustar o estilo padr\u00e3o dos <a href=\"https:\/\/kinsta.com\/pt\/blog\/blocos-dinamicos-gutenberg\/\">blocos do Gutenberg<\/a>, sabe como \u00e9 dif\u00edcil: O n\u00facleo do WordPress e os temas baseados em blocos geralmente v\u00eam com seletores extremamente espec\u00edficos. Mesmo pequenas altera\u00e7\u00f5es, como ajustar as margens dos bot\u00f5es ou remover o espa\u00e7amento dos blocos, exigem substitui\u00e7\u00f5es complexas ou muita tentativa e erro.<\/p>\n<p>Voc\u00ea pode corrigir isso usando <code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:where\">:where()<\/a><\/code> um wrapper CSS que sempre tem zero especificidade, independentemente do que estiver dentro dele:<\/p>\n<pre><code class=\"language-css\">:where(.wp-block-button) {\n  margin-bottom: 0;\n}<\/code><\/pre>\n<p>Isso aplica um estilo a <code>.wp-block-button<\/code>, mas, ao contr\u00e1rio de um seletor normal, ele n\u00e3o &#8220;compete&#8221; com outras regras de CSS, o que o torna seguro e flex\u00edvel.<\/p>\n<p>Digamos que voc\u00ea esteja trabalhando em um site com um tema de blocos (como o <a href=\"https:\/\/kinsta.com\/pt\/blog\/tema-twenty-twenty-four\/\">Twenty Twenty-Four<\/a> ou o block starter do Astra). Voc\u00ea deseja remover a margem extra abaixo dos bot\u00f5es:<\/p>\n<pre><code class=\"language-css\">.wp-block-button {\n  margin-bottom: 0;\n}<\/code><\/pre>\n<p>Mas isso pode n\u00e3o funcionar porque o n\u00facleo do WordPress ou o tema pode ter uma regra mais espec\u00edfica, como:<\/p>\n<pre><code class=\"language-css\">.entry-content .wp-block-button:not(.is-style-outline) {\n  margin-bottom: 1.5rem;\n}<\/code><\/pre>\n<p>Voc\u00ea poderia aumentar a especificidade (fr\u00e1gil), usar <code data-start=\"2526\" data-end=\"2538\">!important<\/code> (pesado) ou simplesmente aplicar <code data-start=\"2572\" data-end=\"2582\">:where()<\/code> para um CSS mais sustent\u00e1vel que conviva bem com o restante do c\u00f3digo.<\/p>\n<h2>8. Personalize a tela de login do WordPress sem um plug-in<\/h2>\n<p data-start=\"2720\" data-end=\"2949\">Quer adicionar seu logo \u00e0 p\u00e1gina de login? Alterar a cor de fundo? Ajustar fontes ou estilos de bot\u00e3o? N\u00e3o precisa de plugin pra isso. O WordPress permite <a href=\"https:\/\/kinsta.com\/pt\/blog\/formularios-de-registro-wordpress\/\">personalizar a tela de login<\/a> com seu pr\u00f3prio CSS \u2014 tudo com um \u00fanico hook.<\/p>\n<p data-start=\"2951\" data-end=\"3040\">Basta enfileirar uma folha de estilo personalizada usando o hook <code data-start=\"3016\" data-end=\"3039\">login_enqueue_scripts<\/code>:<\/p>\n<pre><code class=\"language-php\">function custom_login_styles() {\n  wp_enqueue_style(\n    'my-login-styles',\n    get_stylesheet_directory_uri() . '\/login.css'\n  );\n}\nadd_action('login_enqueue_scripts', 'custom_login_styles');<\/code><\/pre>\n<p>Em seguida, em seu arquivo <code>login.css<\/code>, voc\u00ea pode adicionar estilos como este:<\/p>\n<pre><code class=\"language-css\">body.login {\n  background-color: #f9f9f9;\n}\n\n.login h1 a {\n  background-image: url('\/wp-content\/uploads\/your-logo.png');\n  background-size: contain;\n  width: 100%;\n  height: 80px;\n}\n\n.login #loginform {\n  border-radius: 8px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}<\/code><\/pre>\n<p>Isso d\u00e1 ao seu site um toque profissional e evita mais um plugin que s\u00f3 faz uma coisa.<\/p>\n<h2>9. Evite que imagens quebrem seu layout<\/h2>\n<p>A adi\u00e7\u00e3o de uma imagem muito larga para o seu cont\u00eainer pode quebrar o layout do WordPress, especialmente em temas cl\u00e1ssicos ou conte\u00fado de p\u00e1gina\/artigo. Se a imagem n\u00e3o for restringida por CSS, ela poder\u00e1 ultrapassar seu elemento principal, causando rolagem horizontal ou se\u00e7\u00f5es desalinhadas.<\/p>\n<p>Isso geralmente acontece quando:<\/p>\n<ul>\n<li>Um editor de conte\u00fado cola uma imagem sem definir o alinhamento ou o tamanho<\/li>\n<li>Um tema n\u00e3o tem um tratamento de imagem responsivo padr\u00e3o<\/li>\n<li>Voc\u00ea est\u00e1 adicionando imagens dentro de blocos personalizados ou c\u00f3digos de acesso herdados<\/li>\n<\/ul>\n<p>Para corrigir isso, voc\u00ea precisa definir uma largura m\u00e1xima e redefinir o comportamento do layout:<\/p>\n<pre><code class=\"language-css\">img {\n  max-width: 100%;\n  height: auto;\n  display: block;\n}<\/code><\/pre>\n<p>Veja o que isso faz:<\/p>\n<ul>\n<li><code>max-width: 100%<\/code>: garante que a imagem nunca ultrapasse o limite de seu cont\u00eainer<\/li>\n<li><code>height: auto<\/code>: preserva a propor\u00e7\u00e3o de aspecto original<\/li>\n<li><code>display: block<\/code>: remove lacunas inesperadas sob as imagens causadas por padr\u00f5es de layout em linha<\/li>\n<\/ul>\n<p>Voc\u00ea pode aplicar o mesmo padr\u00e3o para restringir v\u00eddeos:<\/p>\n<pre><code class=\"language-css\">iframe {\n  max-width: 100%;\n  height: auto;\n  display: block;\n}<\/code><\/pre>\n<p>Ou use um wrapper com <code>aspect-ratio<\/code> se o seu tema for compat\u00edvel com CSS moderno.<\/p>\n<h2>Resumo<\/h2>\n<p data-start=\"12\" data-end=\"145\">O CSS pode n\u00e3o parecer revolucion\u00e1rio por si s\u00f3, mas no WordPress, algumas linhas bem colocadas podem economizar horas de frustra\u00e7\u00e3o.<\/p>\n<p data-start=\"147\" data-end=\"356\">Seja para personalizar layouts, limpar o painel administrativo ou melhorar o desempenho do frontend, as dicas deste guia foram pensadas para ajudar voc\u00ea a trabalhar de forma mais inteligente, n\u00e3o mais dif\u00edcil.<\/p>\n<p>No entanto, mesmo o CSS mais otimizado s\u00f3 pode ir at\u00e9 certo ponto. Para que seus aprimoramentos de frontend realmente brilhem com p\u00e1ginas de carregamento r\u00e1pido, layouts est\u00e1veis e interatividade suave, voc\u00ea tamb\u00e9m precisa de uma <a href=\"https:\/\/kinsta.com\/pt\/hospedagem-wordpress\/\">plataforma de hospedagem desenvolvida para o desempenho<\/a>.<\/p>\n<p>Na Kinsta, <a href=\"https:\/\/kinsta.com\/pt\/docs\/hospedagem-de-wordpress\/como-comecar-wordpress\/infraestrutura-do-wordpress\/\">nossa infraestrutura<\/a> foi projetada para complementar essas otimiza\u00e7\u00f5es, com <a href=\"https:\/\/kinsta.com\/pt\/docs\/hospedagem-de-wordpress\/cdn-wordpress\/cdn-kinsta\/#image-optimization-1\">otimiza\u00e7\u00e3o de imagem integrada<\/a>, <a href=\"https:\/\/kinsta.com\/pt\/docs\/hospedagem-de-wordpress\/cache\/edge-caching\/\">Edge Caching<\/a>, <a href=\"https:\/\/kinsta.com\/pt\/docs\/hospedagem-de-wordpress\/cdn-wordpress\/\">suporte CDN<\/a> e desempenho em n\u00edvel de servidor ajustado para WordPress.<\/p>\n<p>Portanto, enquanto esses truques de CSS ajudam voc\u00ea a controlar a apar\u00eancia do seu site, a Kinsta ajuda a garantir que ele <em>carregue<\/em> e <em>tenha o desempenho<\/em> esperado pelos usu\u00e1rios.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Se voc\u00ea est\u00e1 personalizando um tema, tentando limpar um painel sobrecarregado de plugins ou apenas quer que seu blog fique bonito em todas as telas, o &#8230;<\/p>\n","protected":false},"author":287,"featured_media":72168,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1037],"class_list":["post-72167","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-dicas-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>9 dicas de CSS que economizam tempo para usu\u00e1rios do WordPress<\/title>\n<meta name=\"description\" content=\"Dicas simples de CSS para corrigir problemas comuns de layout no WordPress, limpar o painel e tornar seu site mais f\u00e1cil de gerenciar.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/pt\/blog\/dicas-de-css-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"9 Dicas de CSS que Economizam Tempo para Usu\u00e1rios do WordPress\" \/>\n<meta property=\"og:description\" content=\"Dicas simples de CSS para corrigir problemas comuns de layout no WordPress, limpar o painel e tornar seu site mais f\u00e1cil de gerenciar.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/dicas-de-css-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-02T11:39:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-03T06:42:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/06\/x-time-saving-css-tips-for-wordpress-users-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1470\" \/>\n\t<meta property=\"og:image:height\" content=\"735\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Dicas simples de CSS para corrigir problemas comuns de layout no WordPress, limpar o painel e tornar seu site mais f\u00e1cil de gerenciar.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/06\/x-time-saving-css-tips-for-wordpress-users-1.png\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/dicas-de-css-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/dicas-de-css-wordpress\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"9 Dicas de CSS que Economizam Tempo para Usu\u00e1rios do WordPress\",\"datePublished\":\"2025-07-02T11:39:21+00:00\",\"dateModified\":\"2025-07-03T06:42:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/dicas-de-css-wordpress\/\"},\"wordCount\":2188,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/dicas-de-css-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/06\/x-time-saving-css-tips-for-wordpress-users-1.png\",\"inLanguage\":\"pt-PT\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/dicas-de-css-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/dicas-de-css-wordpress\/\",\"name\":\"9 dicas de CSS que economizam tempo para usu\u00e1rios do WordPress\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/dicas-de-css-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/dicas-de-css-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/06\/x-time-saving-css-tips-for-wordpress-users-1.png\",\"datePublished\":\"2025-07-02T11:39:21+00:00\",\"dateModified\":\"2025-07-03T06:42:11+00:00\",\"description\":\"Dicas simples de CSS para corrigir problemas comuns de layout no WordPress, limpar o painel e tornar seu site mais f\u00e1cil de gerenciar.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/dicas-de-css-wordpress\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/dicas-de-css-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/dicas-de-css-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/06\/x-time-saving-css-tips-for-wordpress-users-1.png\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/06\/x-time-saving-css-tips-for-wordpress-users-1.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/dicas-de-css-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Dicas WordPress\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/dicas-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"9 Dicas de CSS que Economizam Tempo para Usu\u00e1rios do WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"9 dicas de CSS que economizam tempo para usu\u00e1rios do WordPress","description":"Dicas simples de CSS para corrigir problemas comuns de layout no WordPress, limpar o painel e tornar seu site mais f\u00e1cil de gerenciar.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/pt\/blog\/dicas-de-css-wordpress\/","og_locale":"pt_PT","og_type":"article","og_title":"9 Dicas de CSS que Economizam Tempo para Usu\u00e1rios do WordPress","og_description":"Dicas simples de CSS para corrigir problemas comuns de layout no WordPress, limpar o painel e tornar seu site mais f\u00e1cil de gerenciar.","og_url":"https:\/\/kinsta.com\/pt\/blog\/dicas-de-css-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2025-07-02T11:39:21+00:00","article_modified_time":"2025-07-03T06:42:11+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/06\/x-time-saving-css-tips-for-wordpress-users-1.png","type":"image\/png"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Dicas simples de CSS para corrigir problemas comuns de layout no WordPress, limpar o painel e tornar seu site mais f\u00e1cil de gerenciar.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/06\/x-time-saving-css-tips-for-wordpress-users-1.png","twitter_creator":"@olawanle_joel","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Joel Olawanle","Tempo estimado de leitura":"12 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/dicas-de-css-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/dicas-de-css-wordpress\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"9 Dicas de CSS que Economizam Tempo para Usu\u00e1rios do WordPress","datePublished":"2025-07-02T11:39:21+00:00","dateModified":"2025-07-03T06:42:11+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/dicas-de-css-wordpress\/"},"wordCount":2188,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/dicas-de-css-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/06\/x-time-saving-css-tips-for-wordpress-users-1.png","inLanguage":"pt-PT"},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/dicas-de-css-wordpress\/","url":"https:\/\/kinsta.com\/pt\/blog\/dicas-de-css-wordpress\/","name":"9 dicas de CSS que economizam tempo para usu\u00e1rios do WordPress","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/dicas-de-css-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/dicas-de-css-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/06\/x-time-saving-css-tips-for-wordpress-users-1.png","datePublished":"2025-07-02T11:39:21+00:00","dateModified":"2025-07-03T06:42:11+00:00","description":"Dicas simples de CSS para corrigir problemas comuns de layout no WordPress, limpar o painel e tornar seu site mais f\u00e1cil de gerenciar.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/dicas-de-css-wordpress\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/dicas-de-css-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/dicas-de-css-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/06\/x-time-saving-css-tips-for-wordpress-users-1.png","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/06\/x-time-saving-css-tips-for-wordpress-users-1.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/dicas-de-css-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Dicas WordPress","item":"https:\/\/kinsta.com\/pt\/topicos\/dicas-wordpress\/"},{"@type":"ListItem","position":3,"name":"9 Dicas de CSS que Economizam Tempo para Usu\u00e1rios do WordPress"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/pt\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/72167","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=72167"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/72167\/revisions"}],"predecessor-version":[{"id":72185,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/72167\/revisions\/72185"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/72167\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/72167\/translations\/it"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/72167\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/72167\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/72167\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/72167\/translations\/es"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/72167\/translations\/pt"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/72167\/translations\/jp"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/72167\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/72168"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=72167"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=72167"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=72167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}