{"id":13037,"date":"2018-03-20T09:35:26","date_gmt":"2018-03-20T12:35:26","guid":{"rendered":"https:\/\/king.host\/blog\/?p=13037"},"modified":"2024-06-03T17:01:13","modified_gmt":"2024-06-03T20:01:13","slug":"tema-wordpress-com-underscores","status":"publish","type":"post","link":"https:\/\/king.host\/blog\/servicos-de-hospedagem\/tema-wordpress-com-underscores\/","title":{"rendered":"Como criar tema WordPress com Underscores (_s)"},"content":{"rendered":"<p>Buenas, pessoal! A convite da KingHost, vou apresentar para voc\u00eas uma maneira r\u00e1pida de desenvolver seu pr\u00f3prio tema WordPress, usando um gabarito (template) chamado Underscores (_S).<\/p>\n<p>Quem \u00e9 web designer ou web developer deve saber que uma das atividades do dia-a-dia no WordPress \u00e9 a cria\u00e7\u00e3o de um tema. Ele \u00e9 uma s\u00e9rie de arquivos que traduzem o visual das p\u00e1ginas e tamb\u00e9m definem as funcionalidades do teu novo website.<\/p>\n<p>Mas mesmo com o acesso f\u00e1cil \u00e0 documenta\u00e7\u00e3o e facilidade para entender a estrutura dos arquivos dos temas WordPress, criar um tema desde o in\u00edcio pode ser uma atividade cansativa e que vai tomar muito de nosso tempo.<\/p>\n<h2>O Underscores (_s)<\/h2>\n<p>Para acelerar esse processo, apresento o Underscores (_s), um gabarito criado pela equipe da Automattic que serve de base para a cria\u00e7\u00e3o de novos temas para o WordPress.<\/p>\n<p>Uma coisa importante: esse \u201ctema inicial\u201d (starter theme) \u00e9 adequado para o trabalho de desenvolvedores, que j\u00e1 t\u00eam algum conhecimento de HTML, CSS e PHP. Para usar o Underscores, \u00e9 preciso ter um leiaute j\u00e1 desenhado, de modo que vamos us\u00e1-lo de refer\u00eancia para construir nosso tema.<\/p>\n<p>Desenvolvido em 2012, o Underscores \u00e9 uma evolu\u00e7\u00e3o do tema Toolbox, que era oferecido como tema inicial no servi\u00e7o WordPress.com. Ainda hoje, o _s \u00e9 base para uma s\u00e9rie de temas produzidos pela pr\u00f3pria Automattic, incluindo os temas disponibilizados no pacote de instala\u00e7\u00e3o e j\u00e1 est\u00e1 sendo atualizado para suportar o novo Gutenberg.<\/p>\n<p>Al\u00e9m de uma base forte para teu tema, o Underscores ainda \u00e9 recheado de ajustes e quitutes que aceleram o desenvolvimento e tamb\u00e9m d\u00e3o uma melhorada no visual, incluindo:<\/p>\n<ul>\n<li>Arquivos de modelos de p\u00e1gina desenvolvidos em HTML5, modernos e bem comentados;<\/li>\n<li>C\u00f3digos-exemplo para a implementa\u00e7\u00e3o de recursos j\u00e1 dispon\u00edveis no WordPress (e que alguns programadores inclusive n\u00e3o conhecem!) e exemplos de CSS para posicionar uma barra de widgets \u00e0 esquerda ou \u00e0 direita;<\/li>\n<li>Um folha de estilos CSS m\u00ednima, mas finamente organizada e documentada, que vai ajudar-nos a montar o visual de nosso tema.<\/li>\n<li>Para usar o Underscores \u00e9 muito simples. H\u00e1 uma p\u00e1gina preparada pela Automattic em <a href=\"http:\/\/underscores.me\" target=\"_blank\" rel=\"noopener\">http:\/\/underscores.me<\/a>. L\u00e1, podemos personalizar o c\u00f3digo desse tema inicial antes mesmo de baix\u00e1-lo, colocando nossos pr\u00f3prios dados, como nome do tema, \u201cslug&#8221; (identificador \u00fanico), nome do autor e outros. Vamos clicar em \u201cAdvanced Options\u201d e preencher os campos.<\/li>\n<\/ul>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter wp-image-13134 size-large\" src=\"https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2018\/03\/underscores-780x463.png\" alt=\"undercores\" width=\"780\" height=\"463\" title=\"\" srcset=\"https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2018\/03\/underscores-780x463.png 780w, https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2018\/03\/underscores-300x178.png 300w, https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2018\/03\/underscores-768x456.png 768w, https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2018\/03\/underscores-1024x608.png 1024w, https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2018\/03\/underscores-400x238.png 400w, https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2018\/03\/underscores-1320x784.png 1320w, https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2018\/03\/underscores.png 1561w\" sizes=\"(max-width: 780px) 100vw, 780px\" \/><br \/>\nAgora \u00e9 s\u00f3 subir no Administrador do WordPress o ZIP gerado, como se faz com um pacote de tema comum. Em Apar\u00eancia &gt; Personalizar j\u00e1 ser\u00e1 poss\u00edvel ver as op\u00e7\u00f5es que est\u00e3o ativadas por padr\u00e3o e come\u00e7ar a ajustar o leiaute.<br \/>\nAproveito para deixar o convite para todos os interessados em saber mais de WordPress para participarem do evento WordCamp Porto Alegre 2018, no dia 5 de maio de 2018. Ele \u00e9 evento oficial do WordPress e \u00e9 organizado por um grupo de volunt\u00e1rios para promover e divulgar conhecimento sobre plataforma!<\/p>\n<p>Boa sorte e at\u00e9 a pr\u00f3xima!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Buenas, pessoal! A convite da KingHost, vou apresentar para voc\u00eas uma maneira r\u00e1pida de desenvolver seu pr\u00f3prio tema WordPress, usando um gabarito (template) chamado Underscores (_S). Quem \u00e9 web designer ou web developer deve saber que uma das atividades do dia-a-dia no WordPress \u00e9 a cria\u00e7\u00e3o de um tema. Ele \u00e9 uma s\u00e9rie de arquivos [&hellip;]<\/p>\n","protected":false},"author":321,"featured_media":33955,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1326,1324],"tags":[1375],"class_list":["post-13037","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hospedagem-wordpress","category-servicos-de-hospedagem","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts\/13037","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/users\/321"}],"replies":[{"embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/comments?post=13037"}],"version-history":[{"count":7,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts\/13037\/revisions"}],"predecessor-version":[{"id":35960,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts\/13037\/revisions\/35960"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/media\/33955"}],"wp:attachment":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/media?parent=13037"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/categories?post=13037"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/tags?post=13037"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}