COMO CONVERTER QUALQUER MODELO HTML5 EM UM ÓTIMO TEMA DO WORDPRESS

O que você faz quando não consegue encontrar o tema WordPress perfeito? Com toda a probabilidade, você provavelmente se volta para um quadro de temas. No entanto, de vez em quando, você provavelmente pensou nessa mente: “Eu deveria codificar um modelo HTML5 e convertê-lo em um tema do WordPress”.

Mas isso é apenas um sonho, certo? Vamos ser realistas.

A verdade é que, enquanto você tiver algumas habilidades básicas de programação do WordPress, a conversão de um modelo HTML5 em um tema WordPress está ao alcance – desde que esteja disposto a colocar o esforço. Nesta publicação, vou mostrar-lhe como.

Por que converter um modelo HTML em um tema do WordPress?

Existem algumas boas razões pelas quais você pode querer participar desse projeto.

  • Usar um modelo HTML5 significa que você tem controle completo sobre cada detalhe minucioso da aparência do seu site. Não gosta de alguma parte do modelo? Mude. É muito mais fácil ajustar um modelo HTML simples do que um tema complexo do WordPress.
  • Usar um modelo HTML5 significa que você não acaba carregando seu site com um monte de recursos que você não planeja usar.
  • Se você quer um tema do WordPress que não esteja sendo usado por milhares de outros sites, a conversão de um modelo HTML5 é uma maneira de acabar com um tema completamente personalizado do WordPress.
  • Se você nunca criou um tema do WordPress antes, converter um modelo realmente esticará seus músculos de desenvolvimento do WordPress – de uma maneira muito boa.

Neste artigo, vou começar com um modelo HTML5 simples e transformá-lo em um tema completo do WordPress. Acompanhe, e você poderá fazer o mesmo.

Configurando seu ambiente de desenvolvimento

Para converter um modelo HTML5 em um tema do WordPress, a primeira coisa que você precisará fazer é criar seu ambiente de desenvolvimento configurado.

Aqui estão as ferramentas que você precisará no lugar antes de começar a trabalhar:

  • Um servidor local para alimentar o WordPress: existem muitas opções a serem consideradas . Nós detalhamos como usar XAMPP , MAMP , WAMP , VVV e Vagrant . Escolha um e trabalhe.
  • Uma instalação local do WordPress: é melhor criar um tema do WordPress enquanto você tiver o menor número possível de plugins ativados, então crie uma nova instalação ou use uma instalação existente depois de desativar tantos plugins quanto possível.
  • Um repo git para acompanhar suas mudanças: Embora isso não seja tecnicamente um requisito, é uma boa idéia. Eu usei GitHub para acompanhar as minhas alterações e acolher o produto acabado, e Sourcetree para servir uma interface gráfica fácil de usar para git.

Você também precisará estar familiarizado com o funcionamento dos temas do WordPress e possuir habilidades básicas de codificação PHP antes de começar a iniciar o projeto neste projeto. Se os termos “hierarquia do modelo”, “códice” e “o loop” não são familiares para você, então você precisa fazer alguma lição de casa antes de saltar para este tutorial. Você pode aprender o que você precisa saber ao tomar um curso ou dois de A Academiaou pela leitura através da nossa iniciante e intermediário série de desenvolvimento WordPress.

Se você ficar preso em qualquer ponto ao longo do caminho e quiser comparar os arquivos de modelo que usei com o tema WordPress concluído, você pode obter uma cópia dos arquivos de modelo do Start Bootstrap e ver o código fonte do meu WordPress no GitHub .

Etapa 1: Encontre um modelo ou crie o seu próprio

Você pode converter qualquer modelo HTML em um tema do WordPress. No entanto, sua tarefa será muito mais fácil se você escolher um layout de modelo que fique bem perto da funcionalidade básica incorporada no WordPress: postagens, páginas, uma barra lateral, um cabeçalho e um rodapé. Ao olhar para modelos – ou codificar o seu próprio – pense sobre como as partes do modelo se traduzirão em um tema do WordPress.

Isso não significa que você não pode converter qualquer modelo em um tema do WordPress. Você pode. No entanto, quanto mais não tradicional o modelo que você selecionar, mais trabalho levará para convertê-lo em um tema WordPress totalmente funcional.

Eu sou minimalista quando se trata de web design e um proponente do design “primeiro móvel”. Como resultado, um modelo de blog básico baseado no Bootstrap é exatamente o tipo de coisa que estou procurando.

Para este tutorial, estabeleci os modelos de Blog Post e Blog Home no Start Bootstrap.

Captura de tela do modelo de casa do blog por inicialização bootstrap

Esses modelos são gratuitos, minimalistas, vão se traduzir facilmente para o WordPress, e eles são criados com o Bootstrap. Perfeito.

Uma vez que você se instalou no perfeito, ou codificou o seu, você está pronto para passar para o próximo passo: transformando o modelo em um tema do WordPress.

Passo 2: Transforme o modelo HTML5 em um tema do WordPress

Neste ponto, você deve ter um modelo HTML5 na mão. Ele deve ser composto por um diretório que inclui um index.html arquivo e subdiretórios para CSS e recursos de JavaScript. Copie todo o diretório do tema no diretório wp-content / themes / do seu site de desenvolvimento do WordPress.

O tema do WordPress agora está localizado onde precisa ser para o WordPress para encontrá-lo. No entanto, para ativar o tema do WordPress em seu site de desenvolvimento, é necessário fazer duas alterações:

  • Renomeie index.html como index.php .
  • Adicione um arquivo style.css com um cabeçalho de arquivo de tema corretamente formatado para o diretório do tema.

Alternativamente, você poderia simplesmente mover o arquivo CSS principal do modelo para um nível – fora do diretório / css e no diretório raiz do tema do WordPress. A chave é que deve haver um arquivo style.css no diretório raiz do tema e deve incluir um cabeçalho apropriado do tema.

Se você quiser, esse também seria o momento certo para adicionar uma captura de tela do tema ao seu diretório de temas.

Depois de fazer essas alterações, o seu tema do WordPress estará disponível para ativação quando você for Aparência> Temas na área de administração do WordPress. Vá em frente e ative o seu tema do WordPress e veja o front-end do seu site.

Neste ponto, o seu tema do WordPress não ficará bonito. Veja como meu site olhou para este ponto:

Como meu site olhou antes de criar estilos e scripts corretamente

O que está acontecendo é que todos os recursos CSS e JavaScript do seu tema estão contidos no diretório do seu tema, mas seu modelo HTML está configurado para encontrar os arquivos relativos ao domínio do seu site. Em outras palavras, os recursos do tema do WordPress estão localizados em http://yourdomain.com/wp-content/themes/your-theme-directory/ , mas seu modelo de site está procurando esses recursos em http://yourdomain.com .

Obviamente, não é encontrá-los. Então, o próximo passo é adicionar recursos CSS e JavaScript ao nosso tema WordPress de tal forma que o WordPress os encontrará.

Passo 3: inserir scripts e estilos adequadamente

Agora, dê uma olhada nos recursos CSS e JavaScript vinculados ao seu modelo HTML. Os recursos CSS serão adicionados no cabeçalho do modelo e os scripts podem ser adicionados na cabeça ou logo antes da etiqueta do corpo de fechamento.

Uma vez que você localizou todos os recursos CSS e JavaScript que você precisa adicionar ao seu tema WordPress, crie uma função que alqueia todos os scripts e recursos – não se esqueça de incluir o estilo.css do seu tema – e, em seguida , conecte a função Em seu tema WordPress com o wp_enqueue_scriptsgancho . Você quer adicionar a função e o gancho ao arquivo functions.php do seu tema .

Sua função de seleção será algo diferente. No entanto, para referência, aqui é um olhar sobre a função de criação que eu construí:

<? Php
/ * Enqueue estilos e scripts * /
Função jpen_enqueue_assets () {
/ * Arquivo principal do estilo theme.css * /
Wp_enqueue_style ( main-css , get_stylesheet_uri ());
/ * Arquivo css principal do modelo * /
Wp_enqueue_style ( startup-boostrap-css , get_template_directory_uri () . ./css/blog-post.css );
/ * Boostrap recursos de arquivos de tema * /
Wp_enqueue_style ( bootstrap-css , get_template_directory_uri () . /css/bootstrap.min.css );
Wp_enqueue_script ( bootstrap-js , get_template_directory_uri () . /js/bootstrap.min.js , array ( jquery ), false , true );
/ * Recursos condicionais para IE 9 * /
Wp_enqueue_script ( simple-blog-html5 , https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js , array (), 3.7.0 );
Wp_script_add_data ( simples-blog-html5 , condicional , lt IE 9 );
Wp_enqueue_script ( simples-blog-respondjs , https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js , array (), 1.4.2 );
Wp_script_add_data ( simples-blog-respondjs , condicional , lt IE 9 );
}
Add_action ( wp_enqueue_scripts , jpen_enqueue_assets );
? >

Com os recursos CSS e JavaScript enqueued, o WordPress agora reconhecerá os recursos que o seu tema depende. No entanto, para inseri-los em seu site ao vivo, você precisa adicionar dois ganchos ao arquivo index.phpdo tema do WordPress :

  • wp_head: Deve ser adicionado imediatamente antes da <head>tag de fechamento em index.php .
  • wp_footer: Deve ser adicionado imediatamente antes da <body>tag de fechamento em index.php .

Aqui está uma aproximação do que seu arquivo index.php deve aparecer com essas tags adicionadas :

Com esses ganchos adicionados, e scripts e estilos adequadamente enfileirados, seu tema do WordPress agora deve ser parecido com o modelo HTML original.

O próximo passo é que vamos quebrar index.php nas múltiplas partes para que possamos reutilizar o cabeçalho , rodapé e barra lateral com posts, páginas, páginas de arquivo e muito mais.

Etapa 4: criar parciais de modelos

Um modelo parcial é parte de um tema do WordPress que é usado apenas quando é referenciado por um dos arquivos de modelo do seu tema.

Vejamos um exemplo, praticamente todos os temas do WordPress quebram a cabeça do documento em um arquivo header.php . Dessa forma, o cabeçalho pode ser reutilizado com páginas, postagens, página inicial, páginas de arquivo e 404 e páginas de pesquisa. No entanto, header.phpnunca é chamado diretamente . Ele é usado somente quando é chamado por um arquivo de modelo, como index.php .

Na maioria dos casos, você quer criar pelo menos três parciais de modelos:

  • Header.php
  • Footer.php
  • Sidebar.php

Criar cabeçalho.php

Crie um novo arquivo no diretório raiz do tema do WordPress e nomeie-o header.php . O arquivo header.php do seu tema incluirá a declaração do tipo de documento, a tag HTML de abertura, todo o elemento principal, a etiqueta do corpo de abertura e a navegação do seu site – em suma, tudo o que você deseja aparecer no topo de cada página do seu site .

Antes de copiar esse código, você precisa criar um cabeçalho de arquivo . Todo arquivo em seu tema do WordPress deve incluir um cabeçalho de arquivo que é simplesmente uma breve explicação do propósito do arquivo. Dê uma olhada em alguns cabeçalhos de arquivos de temas disponíveis no diretório do tema do WordPress. Você verá que todos eles parecem bastante semelhantes. Seu cabeçalho de arquivo para header.php deve ser algo assim:

<? Php
/ **
* O cabeçalho do nosso tema.
*
* Exibe toda a seção <head> e tudo até <div id = “content”>
*
* @package Tema de Blog Simples
* /
? >

Depois de ter um cabeçalho de arquivo no local, vá em frente e copie todo o código de cabeçalho de index.php para o cabeçalho.php . Em seguida, exclua todo o código de cabeçalho de index.php e substitua -o get_header()pela função WordPress assim:

<? Php
/ **
* O arquivo de modelo principal
* Ele coloca a página inicial se nenhum arquivo home.php existir.
*
* @package Tema de Blog Simples
* /
Get_header (); ? >
<! – o início da página ou o conteúdo do post ->

Crie sidebar.php e footer.php

Repita o mesmo processo, criando um arquivo separado para todos os conteúdos da barra lateral e um arquivo adicional para todos os conteúdos do rodapé. Depois de copiar o código de index.php para os arquivos relevantes e excluí-lo de index.php , use as funções get_sidebare get_footerWordPress para vincular todos os arquivos de modelo juntos.

Quando você terminar, index.php deve começar com um cabeçalho de arquivo e get_header, e terminar com get_sidebarseguido imediatamente get_footer. Entre essas três funções devem ser o conteúdo principal da sua página.

Aqui está um olhar simplificado sobre o que o index.php deve ter neste momento:

<? Php
/ **
* O arquivo de modelo principal
* Ele coloca a página inicial se nenhum arquivo home.php existir.
*
* @package Tema de Blog Simples
* /
Get_header (); ? >
<! – Toda a página ou conteúdo da publicação deve estar entre o cabeçalho e a barra lateral ->
<? Php get_sidebar (); ? >
<? Php get_footer (); ? >

Etapa 4: adicione o loop

O loop é a função que consulta o banco de dados do WordPress e gera o conteúdo exibido em todas as páginas do seu site WordPress. Em geral, você quer ter pelo menos duas versões diferentes do loop:

  • Uma versão do loop para a página do seu blog que exibe títulos de postagem, metadados, a imagem em destaque e um trecho de publicação.
  • Uma segunda versão para suas páginas e postagens individuais que exibem o conteúdo completo da página ou publicação.

Além disso, você pode querer refinar ainda mais o loop criando variações para páginas individuais, postagens individuais, páginas de resultados de pesquisa e muito mais.

Na sua mais básica, veja o aspecto do loop do WordPress:

<? Php se (have_posts ()): while (have_posts ()): the_post (); ? >
/ * Insira o conteúdo do post aqui * /
<? Php no final ; outra coisa : ? >
< P > <? Php _e ( Desculpe, não doesn \’ t parecem ser qualquer coisa aqui. ); ? > </ P >
<? Php endif ; ? >

Claro, o comentário nesse bit de código teria que ser substituído pelas funções do WordPress para gerar conteúdo e tags HTML para renderizar esse conteúdo corretamente.

O loop precisa levar páginas, postagens individuais, a página do blog, a página inicial, as páginas de arquivo e o 404 e as páginas de pesquisa em conta. Como resultado, fazer tudo em um único arquivo é um desafio. Por esse motivo, a maioria dos temas públicos quebra o loop fora do index.php e colocá-lo em vários arquivos separados com títulos como content.php , content-single.php , content-page.php e assim por diante.

Se você decidir colocar o loop em vários arquivos, use tags condicionaisjunto com a get_template_partfunção para fazer referência à versão do loop que deseja usar.

A minha recomendação é começar simples e lentamente iterar o (s) loop (s) até ficar feliz com o que aparece no seu site WordPress. Se tudo mais falhar, o seguinte ciclo deve funcionar para praticamente todos os sites do WordPress, embora o resultado possa não ser tão impressionante quanto você gostaria. No entanto, é um bom ponto de partida se o loop for novo para você.

<? Php
// Nota: este loop é uma versão simplificada de um loop publicado em uma postagem em Elegant Themes
// Fonte: https://www.elegantthemes.com/blog/tips-tricks/converting-html-sites-to-wordpress-sites
Se (have_posts ()): while (have_posts ()): the_post (); ? >
< Div id = post- <? Php the_ID (); ? > <? Php post_class (); ? > >
< Header class = post-header >
< H2 > < a href = <? Php? The_permalink (); ? > > <? Php the_title (); ? > </ A > </ h2 >
< P > Por <? Php the_author_posts_link (); ? > , <? Php the_time ( M jy ); ? > </ P >
</ Header >
< Div class = entry clear >
<? Php the_post_thumbnail (); ? >
<? Php the_content (); ? >
</ Div >
< Footer class = post-footer >
< Div class = comments > <? Php comments_popup_link ( Deixe um comentário , 1 comentário , % Comentários ); ? > </ Div >
</ Footer >
</ Div >
<? Php no final ; / * Rebobinar ou continuar se todas as postagens foram obtidas * / ? >
< Div class = index de navegação >
< Div class = alignleft > <? Php next_posts_link ( & larr; Antigo ); ? > </ Div >
< Div class = alignright > <? Php previous_posts_link ( Mais novo & rarr; ); ? > </ Div >
</ Div >
<? php outra coisa : ? >
<? Php endif ; ? >

A cobertura do loop em profundidade está além do escopo deste tutorial. No entanto, é um tópico que abordamos antes e você pode aprender tudo sobre ele ao ler o desenvolvimento do WordPress para usuários intermediários: Consultas e Loops .

Etapa 5: Substitua o conteúdo do arquivo do modelo com as funções do WordPress

Este próximo passo pode variar consideravelmente de um modelo HTML para o próximo. O que você quer fazer é trabalhar o caminho através de cada arquivo de modelo – cabeçalho, índice, conteúdo (se aplicável), barra lateral e rodapé – substituindo cada parte do conteúdo estático por uma função apropriada do WordPress.

Comece com header.php . Toda vez que você entra em um pouco de conteúdo, substitua-o por uma função do WordPress. Se você não tem certeza de qual função usar, há duas coisas que você pode fazer para encontrar a função correta:

  • Dê uma olhada nos arquivos de modelo de um tema WordPress bem codificado, como Twenty Sixteen e copie o que eles fazem. Vinte e dezesseis é GPL, copiar está bem – mesmo incentivado!
  • Use o Google para localizar as funções apropriadas no WordPress Codex, procurando por termos como “função de charset de WordPress”.

Um passo que pode ser particularmente complicado é configurar o menu do cabeçalho. Vamos dar um minuto para ver esse passo em detalhes.

Configurando o Menu do Cabeçalho

Adicionar um menu de cabeçalho é um processo de duas etapas:

  • Adicione o local do cabeçalho ao seu tema do WordPress, adicionando uma função a functions.php .
  • Insira o menu no cabeçalho.php tendo o cuidado de duplicar as classes e ids empregados pelo modelo HTML.

Você precisará usar a register_nav_menusfunção para adicionar uma localização de menu ao seu hema do WordPress. No caso do exemplo WordPress tema, eu deixei a seguinte função em functions.php :

/ * Adicionar área do menu do tema * /
Register_nav_menus (array (
‘Primário’ => ‘Menu principal’,
));

Em seguida, você precisa usar a wp_nav_menufunção em header.php para gerar seu menu. Preste atenção especial às classes e ids aplicadas ao menu em seu modelo HTML. Você precisará duplicar esses seletores para que o CSS do modelo seja aplicado ao seu novo menu. Felizmente, a função WordPress torna isso muito fácil. Veja como o código que adiciona o menu ao cabeçalho do tema do WordPress.php parece:

<? Php
Wp_nav_menu ( array (
Theme_location => primary ,
Menu_class => nav navbar-nav ,
Container_id => bs-example-navbar-collapse-1 ,
Container_class => colapsar navbar-colapso ,
));
? >

Observe que adicionei duas classes ao menu em si nave navbar-nav, além de uma ID e duas classes para o recipiente do menu. Acabei de copiar esses seletores do modelo HTML. Isso garante que o menu escolha os estilos do modelo.

Configurando Áreas de Widget

Você também precisará configurar as áreas do widget barra lateral, cabeçalho e rodapé conforme aplicável com base no modelo que você está usando. Adicionar áreas de widget é um processo de duas etapas:

A register_sidebarfunção aceita uma matriz de valores que inclui o nome da área do widget, a identificação da área do widget, bem como os bits de HTML que devem aparecer antes de cada widget e o título do widget. A register_sidebarfunção é aninhada dentro de uma função personalizada, e essa função personalizada é conectada ao WordPress usando owidgets_initgancho .

Veja como funciona a função que registra a área da barra lateral para o meu tema do WordPress nas funções do meu tema.php :

<? Php
/ * Registrar áreas de widget * /
Função jpen_sidebar_widget_area () {
Register_sidebar ( array (
Nome => Área do widget de barra lateral ,
Id => jpen-sidebar-widgets ,
Before_widget => <div class = “well”> ,
After_widget => </ div> ,
Before_title => <h4> ,
After_title => </ h4> ,
));
}
Add_action ( widgets_init , jpen_sidebar_widget_area );
? >

Com a área do widget registrada, podemos adicioná-la à sidebar.php com dynamic_sidebar. A dynamic_sidebarfunção aceita a ID da área do widget que nos registramos register_sidebarem functions.php .

Veja como o código que adiciona a área do widget a sidebar.php parece no meu tema:

< Div class = col-md-4 >
<? Php dynamic_sidebar ( jpen-sidebar-widgets ); ? >
</ Div >

Essas duas funções funcionam juntas para gerar a área do widget da barra lateral do meu tema. A área do widget será contida em uma div com uma classe de col-md-4. Além disso, cada widget será contido em uma div com uma classe de well, e cada título de widget será aninhado dentro de um elemento de título de quarto nível.

Você pode aplicar esse processo para adicionar qualquer número de áreas de widget ao seu tema do WordPress. Tudo o que você precisa fazer é:

  1. Crie uma register_sidebarfunção diferente com uma ID exclusiva para cada área de widget. Você pode empilhar todas as suas register_sidebarfunções dentro de uma única função personalizada e, em seguida, inicializá-los todos de uma vez usando o widgets_initgancho.
  2. Use a dynamic_sidebarfunção e a identificação da área do widget exclusivo para carregar a área do widget onde quer que ela apareça: na barra lateral, cabeçalho ou rodapé.

Próximos passos…

Se você seguiu, passo a passo, neste momento você converteu um modelo HTML5 em um tema funcional do WordPress. Parabéns!

Eu segui esse mesmo processo para criar este tema do WordPress:

Captura de tela do tema de blog simples concluído

Se você olhar para o modelo na parte superior deste tutorial, verá que é praticamente um duplicado no local.

Embora você esteja indubitavelmente satisfeito com o que você realizou até agora, há uma boa chance de você não estar completamente satisfeito com o que você criou. Os próximos passos que você provavelmente deseja tomar incluem:

  • Criando modelos e loops personalizados para postagens individuais, páginas, resultados de pesquisa e um modelo de página 404.
  • Adicionando uma seção de comentários às suas postagens e páginas individuais.
  • Criando widgets personalizados que combinam com o estilo dos widgets mostrados no seu modelo.
  • Internacionalizando seu tema WordPress se você planeja tornar seu tema disponível publicamente.

Se você chegou até aqui, você terá as habilidades necessárias para assumir cada uma dessas tarefas adicionais. No entanto, orientá-lo através do processo está além do escopo deste tutorial. Se você precisar de ajuda para assumir essas tarefas, entre e contato com nossa equipe!

5 (100%) 2 votes
More from William Freitas

FAZENDO SUA SENHA DO WORDPRESS MAIS FORTE COM BCRYPT

O núcleo do WordPress é seguro, mas você pode tornar as senhas...
Read More

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *