{"id":3485,"date":"2014-09-05T15:19:20","date_gmt":"2014-09-05T18:19:20","guid":{"rendered":"http:\/\/blog.turbosite.com.br\/?p=3485"},"modified":"2014-09-05T15:19:20","modified_gmt":"2014-09-05T18:19:20","slug":"criando-um-tema-filho-child-theme-para-wordpress","status":"publish","type":"post","link":"https:\/\/www.turbosite.com.br\/blog\/criando-um-tema-filho-child-theme-para-wordpress\/","title":{"rendered":"Criando um tema filho (Child Theme) para WordPress"},"content":{"rendered":"

Saiba como criar temas filhos (child-theme) para o WordPress, um recurso important\u00edssimo que pode evitar dores e cabe\u00e7a e reprograma\u00e7\u00e3o.<\/p>\n

O processo de cria\u00e7\u00e3o \u00e9 bem simples e vamos explor\u00e1-lo nas linhas abaixo, vamos l\u00e1.<\/p>\n

Imaginem duas situa\u00e7\u00f5es:<\/h3>\n
    \n
  1. Voc\u00ea est\u00e1 criando um site em WordPress<\/a>\u00a0e \u00a0utilizando um dos milhares de temas pagos ou gratuitos (muito cuidado com temas pagos-gratuitos, se \u00e9 que me entende…). At\u00e9 a\u00ed tudo bem, certo? Voc\u00ea mexe no style.css<\/em>, functions.php<\/em> e at\u00e9 no index.php<\/em> e outros arquivos de p\u00e1ginas. O site est\u00e1 rodando do jeito que voc\u00ea quer: perfeito! A\u00ed seu cliente clica em “atualizar” e BOOM! perdeu tudo. Todo o seu trabalho foi apagado!!<\/li>\n
  2. Voc\u00ea tem uma rede de sites\/blogs numa instala\u00e7\u00e3o Multisite<\/a>\u00a0e n\u00e3o quer todos os blogs iguais: vai criar um tema para cada site? Nossa… podem ser o que? 1000 temas?<\/li>\n<\/ol>\n

    Solu\u00e7\u00e3o<\/h3>\n

    H\u00e1 v\u00e1rias solu\u00e7\u00f5es para esses problemas, mas entre elas a mais anti-gambiarra<\/del>\u00a0elegante \u00e9 a utiliza\u00e7\u00e3o de um recurso do WordPress muito legal chamado Child Theme<\/a>\u00a0ou Tema Filho.<\/p>\n

    Um Child Theme (prefiro usar os termos em ingl\u00eas para me acostumar na consulta do Codex) \u00e9 um tema derivado. Ele “sobrescreve” um outro tema, ou seja, voc\u00ea n\u00e3o vai ativar o pai, mas sim o filho, no menu\u00a0Apar\u00eancia >> Temas<\/strong>.<\/p>\n

     <\/p>\n

    Vamos praticar:<\/h3>\n

    1\u00ba Passo: \u00a0<\/strong>Crie uma pasta no seu diret\u00f3rio de temas para guardar seu Child Theme, o Codex do WordPress e eu =D, aconselhamos que o nome seja nomedotema-child<\/strong>.<\/p>\n

    Por exemplo:<\/p>\n

    \"temas-child-dica-turbosite\"<\/p>\n

    Vamos criar um Child Theme para o tema padr\u00e3o do WP: Twenty Fourteen.<\/em><\/p>\n

    2\u00ba Passo:\u00a0<\/strong>Quais s\u00e3o os arquivos b\u00e1sicos de um tema? O styles.css<\/em> e o index.php<\/em>! Como um Child Theme utiliza os arquivos do Tema Pai, o index.php<\/em> \u00e9 dispens\u00e1vel, ent\u00e3o o 2\u00ba passo \u00e9 criar o \u00fanico arquivo obrigat\u00f3rio: o style.css:<\/strong><\/p>\n

     <\/p>\n

    \n
    \n
    \/*\nTheme Name: Twenty Fourteen Child\nTheme URI: http:\/\/wordpress.org\/themes\/fourteen\nDescription: Esse \u00e9 um Child Theme!\nAuthor: M\u00e1rio Valney\nAuthor URI: http:\/\/mariovalney.com\nTemplate: twentyfourteen\nVersion: 1.0.0\n*\/<\/pre>\n
    Se voc\u00ea j\u00e1 criou um tema ou j\u00e1 fu\u00e7ou algum tema, sabe que esse coment\u00e1rio no in\u00edcio do arquivo style.css<\/em>\u00a0\u00e9 obrigat\u00f3rio e respons\u00e1vel pelas informa\u00e7\u00f5es do tema. A \u00fanica diferen\u00e7a desse para o do Tema Pai \u00e9 a linha “Template”. \u00a0\u00c9 nessa linha que escrevemos o nome do tema o qual o Child Theme ser\u00e1 subordinado (\u00e9 o mesmo nome na linha\u00a0“Text Domain” do Tema Pai).<\/p>\n
     <\/p>\n<\/div>\n<\/div>\n
    3\u00aa Passo:\u00a0<\/strong>Agora voc\u00ea s\u00f3 precisa ativar o Tema Filho e ser feliz =D<\/p>\n
    Como modificar seu tema<\/h3>\n
    Agora que voc\u00ea j\u00e1 criou e ativou o seu Child Theme, vai perceber que o seu site perdeu o estilo (com perd\u00e3o do trocadilho). Isso acontece, porque todos os arquivos do Tema Pai, com exce\u00e7\u00e3o do functions.php<\/em>, s\u00e3o sobrescritos, se houver um arquivo de mesmo nome no Tema Filho.
    \nComo existe um style.css<\/em> no Child Theme, o original \u00e9 descartado, por isso, se quisermos utiliz\u00e1-lo, devemos acrescentar uma linha:<\/p>\n
    \n
    \n
    @import url(\"..\/twentyfourteen\/style.css\");<\/pre>\n
    Isso ir\u00e1 importar o arquivo do Tema Pai e assim o site vai voltar exatamente ao que \u00e9, se o Tema Pai estiver ativado.<\/p>\n<\/div>\n<\/div>\n
    Para todos os outros arquivos, basta criar um arquivo de mesmo nome e ele ser\u00e1 chamado no lugar do correspondente no Tema Pai.<\/p>\n
     <\/p>\n
    Quando usar?<\/h3>\n
    Se os motivos de criar um Child Theme, no lugar de modificar os arquivos de um Tema, n\u00e3o ficaram claros, aqui vai uma lista:<\/p>\n