{"id":10153,"date":"2016-08-23T12:13:05","date_gmt":"2016-08-23T15:13:05","guid":{"rendered":"https:\/\/king.host\/blog\/?p=10153"},"modified":"2024-06-04T07:26:22","modified_gmt":"2024-06-04T10:26:22","slug":"underscore-e-odin-desenvolvimento-de-temas-wp-com-frameworks","status":"publish","type":"post","link":"https:\/\/king.host\/blog\/tecnologia\/underscore-e-odin-desenvolvimento-de-temas-wp-com-frameworks\/","title":{"rendered":"Underscores e Odin: desenvolvimento de temas WP com frameworks"},"content":{"rendered":"<p>Assistimos a diversas palestras interessantes durante o <a href=\"https:\/\/2016.belohorizonte.wordcamp.org\/\" target=\"_blank\" rel=\"noopener\">Wordcamp2016<\/a>. Sem fins lucrativos, o evento conta com o apoio da&nbsp;<a href=\"http:\/\/wordpressfoundation.org\/\" target=\"_blank\" rel=\"noopener\">Funda\u00e7\u00e3o WordPress<\/a> e da<a href=\"http:\/\/automattic.com\/\" target=\"_blank\" rel=\"noopener\"> Automattic<\/a>&nbsp;e acontece em diversas capitais&nbsp;do mundo. O Wordcamp \u00e9 o lugar ideal para debater o WordPress, quem participa tem a oportunidade de aprender e compartilhar muito conte\u00fado sobre o CMS mais utilizado na web.<\/p>\n<p>Durante a palestra de Rodrigo Brito, &#8220;Introdu\u00e7\u00e3o a desenvolvimento de temas com Frameworks&#8221;, foram apresentadas diversas dicas pr\u00e1ticas para quem est\u00e1 empenhado em aprender&nbsp;conceitos quanto a utiliza\u00e7\u00e3o de temas em WordPress.<\/p>\n<p>Destacamos com grande considera\u00e7\u00e3o o primeiro coment\u00e1rio de Rodrigo, em que foi citada a import\u00e2ncia de escolher um tema (seja pago ou gratuito) levando em conta&nbsp;suas&nbsp;funcionalidades e recursos. Ter essa ideia&nbsp;em mente \u00e9 essencial para utilizar&nbsp;temas&nbsp;relevantes ao projeto em quest\u00e3o.<\/p>\n<p>Tamb\u00e9m foi recomendado por Rodrigo que ao trabalhar com a cria\u00e7\u00e3o de temas para o WordPress, seja por meio de Frameworks ou outras aplica\u00e7\u00f5es, deve-se ter conhecimento da Hierarquia de Modelos do WordPress, a qual pode ser verificada e&nbsp;exemplificada graficamente conforme a imagem abaixo:<\/p>\n<p><a href=\"https:\/\/www.todoespacoonline.com\/w\/wp-content\/uploads\/2014\/08\/Hierarquia_de_Arquivos_de_Tema_WordPress.png\" target=\"_blank\" rel=\"noopener\"><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.todoespacoonline.com\/w\/wp-content\/uploads\/2014\/08\/Hierarquia_de_Arquivos_de_Tema_WordPress.png \" width=\"2722\" height=\"1826\" alt=\"\" title=\"\"><\/a><\/p>\n<p>Cr\u00e9ditos da Imagem: Codex.WordPress.org &nbsp;<a href=\"https:\/\/codex.wordpress.org\/pt-br:Hierarquia_de_Modelos_WordPress\" target=\"_blank\" rel=\"noopener\">Clique <\/a>para visualizar em tamanho maior.<\/p>\n<p>Al\u00e9m disso, como dica mais pr\u00e1tica, ele citou&nbsp;uma poderosa ferramenta para cria\u00e7\u00e3o de temas, o Underscores. De acordo com seus criadores o underscore \u00e9 um tema inicial (theme starter) m\u00ednimo, que deve ser trabalhado e estilizado. N\u00e3o se trata de um framework ou um &#8220;parent theme&#8221; para ser estendido. Ele se torna&nbsp;um tema pr\u00f3prio, quando customizado e finalizado.<\/p>\n<h3>Seguem alguns links do Underscores que podem ser \u00fateis para fins de conhecimento:<\/h3>\n<p><strong><a href=\"http:\/\/underscores.me\" target=\"_blank\" rel=\"noopener\">Underscores.me<\/a> <\/strong>&#8211; Site principal do underscores.<\/p>\n<p><strong><a href=\"http:\/\/components.underscores.me\" target=\"_blank\" rel=\"noopener\">Components.underscores.me<\/a><\/strong> &#8211; Subdom\u00ednio &#8220;components&#8221;, pelo qual podem ser criados temas b\u00e1sicos de acordo com a necessidade, seja para a cria\u00e7\u00e3o de blogs, sites institucionais, portf\u00f3lios e at\u00e9 mesmo revistas virtuais.<\/p>\n<p>Ao concluir sua apresenta\u00e7\u00e3o sobre o Underscores, Rodrigo mostrou outro Framework complementar. O segundo Framework citado foi o Odin, que foi criado com a finalidade de reduzir o consumo proveniente do servidor web, trabalhando diretamente do lado do cliente em suas execu\u00e7\u00f5es.<\/p>\n<p>Segue o link oficial do GitHub em que est\u00e1 o reposit\u00f3rio do Odin: https:\/\/github.com\/wpbrasil\/odin<\/p>\n<h3>Dentre os pontos mais interessantes quanto ao Odin destacamos:<\/h3>\n<ul>\n<li>Foi criado para ser executado em ambiente NodeJs, trabalhando diretamente na linguagem Javascript.<\/li>\n<li>Possui &#8216;Live Reload&#8217;, para o acompanhamento das mudan\u00e7as na p\u00e1gina em tempo real. Para tal fun\u00e7\u00e3o o Odin utiliza o <a href=\"http:\/\/gruntjs.com\/\" target=\"_blank\" rel=\"noopener\">GruntJs<\/a>.<\/li>\n<li>Ele tamb\u00e9m possui uma excelente compatibilidade para a cria\u00e7\u00e3o de temas personalizados com Bootstrap (<a href=\"http:\/\/getbootstrap.com\" target=\"_blank\" rel=\"noopener\">Getbootstrap.com<\/a>).<\/li>\n<li>\u00c9 um Framework de f\u00e1cil personaliza\u00e7\u00e3o e estiliza\u00e7\u00e3o (.css).<\/li>\n<li>Internamente, ele j\u00e1 possui um Contact Form, prevenindo a utiliza\u00e7\u00e3o de plugins extras para tal tarefa e formul\u00e1rios de contato.<\/li>\n<li>\u00c9 poss\u00edvel personalizar a taxonomia do WordPress conforme a necessidade (categoriza\u00e7\u00e3o).<\/li>\n<li>Possui compatibilidade para a utiliza\u00e7\u00e3o do <a href=\"http:\/\/jshint.com\/\" target=\"_blank\" rel=\"noopener\">JsHint<\/a> para fins de debug.<\/li>\n<\/ul>\n<p>Vale mencionar&nbsp;que nossa estrutura possui suporte para aplica\u00e7\u00f5es Node.Js, para mais informa\u00e7\u00f5es visite a <strong><a href=\"http:\/\/www.kinghost.com.br\/node-js\" target=\"_blank\" rel=\"noopener\">p\u00e1gina do plano Node.JS<\/a>&nbsp;<\/strong>e conhe\u00e7a suas especificidades.<\/p>\n<p>Acompanhe abaixo os slides da apresenta\u00e7\u00e3o:<\/p>\n<p><iframe width=\"576\" height=\"420\" src=\"\/\/slides.com\/rodrigo73\/desenvolvimento-temas\/embed?style=light\" scrolling=\"no\" frameborder=\"0\" webkitallowfullscreen=\"webkitallowfullscreen\" mozallowfullscreen=\"mozallowfullscreen\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Assistimos a diversas palestras interessantes durante o Wordcamp2016. Sem fins lucrativos, o evento conta com o apoio da&nbsp;Funda\u00e7\u00e3o WordPress e da Automattic&nbsp;e acontece em diversas capitais&nbsp;do mundo. O Wordcamp \u00e9 o lugar ideal para debater o WordPress, quem participa tem a oportunidade de aprender e compartilhar muito conte\u00fado sobre o CMS mais utilizado na web. [&hellip;]<\/p>\n","protected":false},"author":282,"featured_media":10158,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1179,8],"tags":[1375],"class_list":["post-10153","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento","category-tecnologia","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts\/10153","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\/282"}],"replies":[{"embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/comments?post=10153"}],"version-history":[{"count":1,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts\/10153\/revisions"}],"predecessor-version":[{"id":31395,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts\/10153\/revisions\/31395"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/media\/10158"}],"wp:attachment":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/media?parent=10153"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/categories?post=10153"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/tags?post=10153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}