O que é HTML5 e porque você deve usá-lo.
1° Passo – Armazenando seu Tema e seus arquivos
Etapa 2 – criando arquivos modelos e a folha de estilos CSS
Etapa 3 – antes de começar o desenvolvimento
Etapa 4 – construindo um layout com modelos Header.php
Utilizando consultas de mídia
Entendendo tag de modelos WordPress e os ganchos de ação.
Ações gancho
Os temas no WordPress são arquivos que definem a fachada de seu website. Um tema inclui HTML, PHP e CSS, e frequentemente JavaScript/Query também.
Nesse tutorial de WordPress, você irá aprender como criar um tema WordPress usando HTML5, CSS3, e os princípios do design responsivo. Você também irá aprender como separar várias partes do tema em 'Templates'.
Temas, como plugin, são separados do meio do código do WordPress. Temas permitem que seu website tenha um layout consistente para cada página e post, e pode rapidamente ser modificado para mudar completamente o visual de seu website e sua experiência. Para exibir a informação do WordPress ou do conteúdo de um post, você deve utilizar as tags de template que são fornecidas pelo WordPress, e é isso que que será explicado nesse tutorial.
Após completar esse tutorial e criar um novo tema no WordPress, é uma boa ideia seguir o como criar um tema filho no WordPress no tutorial para ampliar o que você aprendeu aqui. O tema que você criou nesse tutorial te dará os fundamentos perfeitos para usar no tutorial do tema filho.
Acesso FTP para sua conta Host
Instalação de WordPress de trabalho
Para completar os passos nesse tutorial de desenvolvimento de Temas no WordPress você irá precisar de um editor de texto como Notepad++ ou NetBeans. Você também precisará de um acesso FTP para sua conta de hospedagem e a instalação em funcionamento do WordPress
Também é recomendado baixar a Folha de Dicas CSS e deixá-la aberta enquanto nesse tutorial você estará editando um arquivo WordPress Style.CSS
HTML5 é a última versão de linguagem markup HTML e oferece um grande conjunto de características e fazer mais fácil mostrar seu conteúdo consistentemente em qualquer computador, laptop, tablet ou smartphone.
A maior mudança é que um novo conjunto de elementos semânticos está disponível. Por exemplo, o rodapé de qualquer página HTML pode agora ser definida usando o elemento <footer></Footer>, e isso conta para o navegador de web que o conteúdo contido nesta parte do rodapé. Na versão antiga do HTML, o conteúdo do rodapé será criado usando um elemento genérico como <div></div>
O documento basico HTML5 vai se parecer com isso:
Design Responsivo significa que seu website é automaticamente mostrado para o visitante no melhor formato se baseando no tamanho de sua tela. O layout da página responde literalmente ao espaço disponível na tela do visitante.
O conteúdo colocado perfeitamente para que nada seja cortado, nada transborde para fora da tela, seu website parece tão limpo quanto o possível.
Você deve pensar no layout de seu website como uma série de grades e o conteúdo a porcentagem da largura da grade. Por exemplo, a div pode tirar 50% do espaço disponível, em vez de ter 800px de largura. Uma largura de página total DIV leva 100% do espaço disponível se você quiser quatro divs dentro dele em linha, cada um recebe 25% do espaço.
Para imagens, usando a largura: 100% em vez da largura máxima:100% causaria a imagem ocupar 100% do espaço disponível em vez de parar na largura atual em pixels. Se a imagem é de 200px de largura mas dentro na div que ocupa 100% da tela, largura máxima significa que a imagem nunca será maior que 200px de tamanho.
Para fazer um tema WordPress totalmente responsivo, você pode também utilizar um recurso CSS3 chamado consulta de mídia. Na consulta de mídia você define opcionalmente um tipo de mídia para afetar (tela, impressão etc), pelo menos um recurso de mídia (largura-máxima, orientação etc). Os recursos de mídia podem ser encadeado usando um 'E' Palavra-chave.
Uma lista completa de tipos de mídia e recursos de mídia está disponível no site Mozilla Developer Network Website
Em sua Stylesheet CSS, você define regras que ditam quando o conteúdo é mudado, qual conteúdo é mudado e como o conteúdo é mudado. Você pode mudar qualquer CSS atributo dessa forma, como a largura de qualquer caixa de texto, ou a cor do plano de fundo de uma div. Alguns exemplos de regras de características de mídia que ditaram quando as regras são aplicadas
Largura máxima – Largura máxima da área visível do navegador, mais ampla que isso é a regra não é aplicada.
Largura mínima – Largura mínima da área visível, menor que isso e a regra não é aplicada.
Orientação – se a tela está no modo retrato ou paisagem.
Um exemplo comum é quando você tem duas caixas de texto lado a lado e ambas ocupam 50% da tela. À medida que a janela do navegador fica menor, as caixas automaticamente se ajustam para continuar ocupando 50% da janela em vez de desaparecer ao lado. Se a janela do navegador fica muito pequena para mostrar uma em cima da outra. Você também pode esconder o conteúdo inteiramente se for mais apropriado.
Mesmo fazendo mudanças mínimas em um tema pode causar erros e fazer seu site inutilizável. Um problema comum após fazer mudanças em seu código, se você tentar carregar seu website e em vez de abrir uma tela branca conhecida como 'A tela branca da morte'. Depurar o erro que causou a tela branca pode ser difícil.
Para evitar qualquer interrupção para seu website, é importante testar todas as mudanças na versão offline. Uma vez que as mudanças estão completas, você pode atualizar a versão funcional para seu website. Você pode aprender como criar um Servidor de desenvolvedor WordPress no windows aqui, tutorial de como rodar WordPress no Docker (qualquer OS) pode ser encontrado aqui.
Vamos começar o tutorial atual e aprender como criar um tema no WordPress! Os Temas WordPress são armazenados em sua própria pasta no content-wp/theme/. Na pasta wp_content/themes/, crie uma nova pasta chamada meu-tema. A pasta criada precisa de um nome curto e único que seja fácil de ser identificado.
Nota: O nome das pastas não poderão conter números e espaços, seu tema não deve ter o mesmo nome que outro tema, se você planeja compartilhar seu tema, você deve checar se outro tema com o mesmo nome já não foi utilizado na pasta tema do wordpress.org
Os temas no WordPress são criadas somente com dois arquivos – index.php e style.css – e o WordPress usará isso para mostrar cada página e post de seu site.
Obviamente, você quer postagens, páginas, e outras seções de seu site tenham seus próprios layouts. Cada seção de seu website é dado o seu próprio arquivo que contém o HTML e o PHP que somente se aplicam a essas seções – cada arquivo é chamado de "Modelo".
Se você utiliza posts personalizados, você pode criar modelos que somente se aplicarão ao post deste tipo. Caso queira que um post de uma categoria específica seja personalizada diferente, você pode utilizar as afirmações dentro do loop.
Cada arquivo modelo deve utilizar o nome correto conforme definido pela documentação da WordPress.
Alguns arquivos modelos além do index.php:
Header.php – contém qualquer HTML que vai no topo de sua página, começando pelo <!DOCTYPEhtml>
Single.php – usado ao exibir somente uma página de seu Blog
Comments.php – define como os comentários e a caixa de texto são exibidos
Footer.php – contém qualquer HTML que vai no final de suas paginas, incluindo </html>
Para uma lista completa de Modelos. Visite o Manual de desenvolvimento de temas WordPress.
Agora que você tem a pasta para armazenar seus temas, você precisará criar algum arquivo modelo básico.
No primeiro passo após todos os arquivos serem criados é adicionar alguma informação no topo do style.css que o WordPress irá ler e exibirá no painel de controle do administrador.
NOTA: na sétima e oitava linhas só são necessárias se planeja compartilhar seu tema na WordPress.org. Se você estiver utilizando o tema em seu próprio website você pode pular essas duas linhas e fechar a seção de comentários.
Nesse ponto, seu tema já está visível na seção de temas do painel de controle do administrador. Você verá uma caixa branca e cinza com meu tema escrito abaixo. Após seu tema estiver completo você pode capturar sua tela para exibi-la aqui.
Antes de realmente começar criando o layout do tema do WordPress. Você deve adicionar alguns pedaços de códigos a vários arquivos para se dar um bom ponto de partida para se construir. Esses passos não são requeridos mas são altamente recomendados.
Essas etapas terão uma explicações esclarecimentos para que você possa alcançar rapidamente para realmente criar um layout.
Primeiramente incluiremos um arquivo CSS chamado normalize.css. Diferentes navegadores terão diferentes configurações padrão para coisas como margens da página e preenchimento. Normalize.css define explicitamente uma série de números de atributos para assegurar que todos os navegadores exibem sua página exatamente como ela é. Se você não usar uma folha de estilos para definir padrões, um problema comum é quando você tenta fazer do seu cabeçalho principal no canto superior esquerdo de sua página, haverá espaço em branco acima do cabeçalho
Abra functions.php e adicione os seguintes códigos:
view rawLoad normalize CSS hosted with ❤ by GitHub
Em seguida você precisa ativar os widgets da barra lateral. Se você não incluir esse codigo, o link do menu de widgets não ficará visível no painel de controle do administrador e você não poderá adicionar nenhum widget. Enquanto ainda estiver em functions.php, abaixo da função anterior, adicione o seguinte código:
Agora nós precisaremos registrar um menu de navegação personalizado para permitir o uso do Appearance -> menus feature No painel de administração, abaixo do código anterior adicione o seguinte:
Salve e faça o upload do functions.php para o diretório de seu tema.
Agora abra o arquivo sidebar.php e o seguinte código. Isso faz com que a barra lateral e os widgets apareçam no seu tema sempre que get_sidebar() é inserido.
A primeira linha diz ao WordPress que se não há widgets ativado, a barra lateral HTML não deve aparecer. A segunda linha estabelece os atributos do elemento que contém os widgets. HTML5 fornece o elemento 'alem' das barras laterais. A terceira linha é a função do wordPress para realmente exibir os widgets. A última linha encerra a instrução if inicial.
Salve e faça o upload do sidebar.php para o diretório de seu tema.
Para facilitar a navegação entre posts e páginas, abra o painel de controle do administrador e adicione widgets página e posts recentes na barra lateral. Agora vamos avançar para construir o layout.
Header.php definirá o topo do nosso documento, começando com a declaração DOCTYPE.
Todo documento HTML deve começar com a declaração do DOCTYPE, que informa ao seu navegador como deve interpretar o documento. O doctype do HTML5 é simplesmente um html. A marca de abertura <html> precisa de um atributo de idioma correto para o idioma escolhido durante a instalação – language_attributes()
No campo do título,você usa uma linha de código que exibe o nome do seu site, seguindo de uma abreviatura, uma declaração para exibir o slogan de seu site, OU o título da página atual ou publicação que você está vendo.
O caractere '?' é um operador condicional PHP nomeado o operador ternário. Na linha de código, is_front_page() é uma função do WordPress que se torna TRUE se vendo a primeira página, ou FALSE se vendo qualquer post ou página. A função antes do cólon é usada se TRUE for retornado. E a função após o cólon é utilizada caso se torne FALSE.
Como você vê abaixo, a função bloginfo() é repetitivamente utilizadas com diferentes parâmetros para conseguir diferentes pedaços de informação pela base de dados do WordPress. Antes da tag <head> ser fechada com </head>, você deve incluir a ação wp_head() para se certificar que todas as funções anexadas a ele sejam executadas.
A função body_class() dará ao corpo a função das classes padrão definidas pelo WordPress a linha final permite o menu de navegação estar amostra se ele for criado no painel de controle do administrador. O header.php se parece com isso:
Caso queira usar uma logo como cabeçalho, substitua <?php bloginfo('name'); ?> com seu código de imagem dentro das tags <header>
Salve e faça o upload do header.php para o diretório de seu tema.
Index.php define a página inicial e também será usado como layout padrão se os modelos específicos (i.e single.php. page.php) não forem encontrados.
Usaremos tags de modelo para garantir que o cabeçalho (get_header), a barra lateral (get_sidebar) e o código do rodapé (get_footer) estejam incluídos em nossa página inicial. Alguns de nossos elementos terão classes atribuídas a eles, e as classes serão escritas quando chegarmos ao arquivo style.css.
O Loop começa no <?php if (have_posts() ) : while ( have_posts() ) : the_post(); ?> e termina em <php endif; ?> dentro do loop, os seguintes tags de modelo são usados:
<?php the_permalink(); ?> – exibe o URL correto da postagem atual
<?php the_title_atribute(); ?> – exibe o título dessa postagem num formato seguro para o atributo do título do link
<?php the_tigle(); ?> – produz o título da postagem
<?php the_author(); ?> – exibe o trecho da postagem que é gerado automaticamente caso você não tenha escrito
<?php the_excerpt(); ?> – exibe o trecho da publicação, que é gerado automaticamente caso você não tenha escrito nada.
<header> </ header> podem ser usados várias vezes em qualquer página e não se referem especificamente ao cabeçalho da página.
Seções e artigos devem ter elementos de cabeçalho onde qualquer texto dentro de <h1>, <h2>, etc é usado. Se uma seção ou artigo não tiver texto de cabeçalho, eles poderão ser excluídos.
Salve, faça o upload do index.php para o diretório de seu tema, se você visitar seu site agora, você verá uma página muito simples.
Você pode ver que o título da guia é o nome e o slogan do seu site. O topo da página tem o título do seu site( ou o seu logotipo caso tenha optado por isso). Quaisquer posts que existam tem seu título, autor e trecho exibidos. Embora a página seja exibida bem, você ainda precisa fechar as tags <body> e <html> abertas em footer.php
Footer.php define o rodapé de cada uma das páginas e deve fechar qualquer tag HTML aberta em outros modelos de arquivo. neste caso <body> e <html> ainda estão abertos pelo header.php.
Também deve incluir a ação wp_footer() para assegurar que qualquer código final do WordPress e Java Script está adicionado à página. Se você estiver logado como administrador quando você visitar sua homepage, post, ou página, você vai notar que a barra de administrador não aparece. O código mostra que a barra do administrador está conectado à ação wp_footer().
Também iremos adicionar o elemento semântico HTML5 <footer></footer> para definir explicitamente o rodapé.
Salve e faça o upload de footer.php para o diretório do seu tema.
Single.php define o layout quando vendo um único post no seu website. Isso pode ser completamente diferente para o index.php.
Nesse caso, nós não iremos adicionar a barra lateral para os posts apenas para realçar a diferença no layout.
O conteúdo principal pega a largura inteira da página desde que nós coloquemos na categoria "conteúdo completo" pela página de estilos, o link foi removido do título como sendo desnecessário aqui. A função para exibir o post inteiro é the_content():
Page.php define o jeito que as páginas são exibidas e pode ser novamente diferente do layout do índice e do post
Lembre-se de que se não existem modelos, o modelo do index.php é usado no lugar. Se você não criar page.php, não usará o mesmo layout como post.php.
Para fazer a diferença mais visível, iremos novamente adicionar uma barra lateral ao layout, e fazer o conteúdo da página ocupar 70% de sua largura.
Salve e faça o upload de page.php para o diretório do seu tema.
Adicione o mesmo para o fundo da folha de estilos. Isso irá causar várias caixas terem o fundo branco e borda azul, para ajudar a visualizar quanto espaço cada um realmente toma.
Salve style.css e faça o upload para o diretório do seu tema.
Agora que você tem os modelos básicos e a página de estilo, você pode facilmente navegar pelas suas postagens e páginas. Seu novo tema criado deverá aparecer com isso.
Desde que nosso layout básico tenha 2 linhas de caixas na página principal, nós podemos facilmente mudar o jeito que eles funcionam quando a janela do navegador é muito pequena para mostrar propriamente o texto.
Para esse tutorial de temas do WordPress nós iremos mudar a largura dos posts na lista de postagem quando a janela do navegador estiver abaixo de 800px. Em vez de ter 2 posts lado a lado, cada post irá ter sua própria linha. Nós faremos isso adicionando a consulta de mídia. Se você precisar recomeçar consulta de mídia, volte para a seção O que é "design responsivo"? antes de continuar.
Quando estiver escrevendo na consulta de mídia, você pode escrever em qualquer lugar da folha de estilos. Você pode colocar. Todas as consultas de mídia no fundo da folha de estilo, ou escrever, consultas de mídia específicas para itens específicos logo abaixo da definição original. É apenas uma questão do que você considera mais lógico.
Nós primeiramente iremos escrever a consulta de mídia que afeta a categoria .article-loop, na qual tem a largura padrão de 49%. Escreveremos isso diretamente abaixo da definição original; a consulta de mídia irá estar que se a janela do navegador é menor que 800px de largura, a categoria .article-loop deverá utilizar 99% do espaço disponível.
Então nós iremos escrever consulta de mídia que, quando a janela do navegador é menor que 600px de largura, estende a barra lateral abaixo do conteúdo principal e a barra lateral para ficar com 100% da largura. Isso seria um layout muito mais apropriado para um aparelho móvel onde o espaço é limitado.
Ainda em style.css, encontre .article-loop que deve estar na linha 73. Abaixo da categoria .article-loop, escreva:
A primeira linha aqui, indica que a consulta de mídia deve somente afetar telas (ou seja, não a afeta a impressão) é apenas afeta a janela dos navegadores que estão a 800px ou menos de largura. Salve e faça o upload de style.css para o seu website. Mude o tamanho da janela do seu website, quando passar de 800px de largura você verá que as caixas de cada post mudam de largura e se sobrepõem.
Continue reduzindo a largura da janela do navegador até estar menor possível. Você verá que todo o texto se torna mais difícil para ler conforme o espaço fica muito pouco. Mas em nenhum ponto desaparece da tela. Se as larguras forem definidas como pixel em vez de porcentagens, logo que a janela ficar muito pequena, a barra lateral irá desaparecer e requer um scroll horizontal.
A próxima consulta de mídia, nós iremos adicionar e irá ser similar com a de cima. Irá informar o conteúdo principal e a barra lateral para pegar 100% do espaço disponível, e a barra lateral irá para baixo do conteúdo principal.
NOTA: como isso afeta diferentes categorias que estão em lugares diferentes na pagina de estilo, em vez disso, compensa colocar isso na parte de baixo da página de layout.
Salve e faça o upload do style.css para a o diretório do seu tema. Volte para sua página principal e redimensione a janela do navegador até que o conteúdo ocupa 100% da largura e a barra lateral vá para baixo do conteúdo principal.
Usando a barra lateral, clique em qualquer lugar disponível na página e você verá a barra lateral também está abaixo do conteúdo da página, e tudo se encaixa perfeitamente.
Para integrar completamente seu tema com o WordPress, você deve usar as Tags modelo e ação gancho, esses dois são duas coisas totalmente distintas.
Tags modelo são funções PHP providas pela WordPress para facilmente incluir os arquivos modelo (como o header.php) de onde seu tema em outro arquivo ou para mostrar alguma informação do banco de dados.
Por exemplo, para mostrar o rodapé na página principal, mas não em qualquer outra, adicione get_footer() e no final do index.php, mas não na page.php.
Abaixo há duas breves listas de algumas importantes tags modelo lhe dar uma ideia de como as tags estão disponíveis.
Tags modelo para incluir os arquivos modelo:
get_header() – inclui o modelo header.php
get_sidebar() – inclui o modelo sidebar.php
get_footer() – inclui o modelo footer.php
get_search_form() – inclui o modelo searchform.php
Tags modelo para mostrar a informação da base de dados.
NOTA: algumas tags modelo são usadas no loop. O loop é explicado após o tutorial, e simplesmente significa que o código recupera qualquer post solicitado.
bloginfo() – mostra a informação solicitada como parâmetro, se não bloginfo("nome") apareça no nome do seu website como definido no painel de controle do administrador (como definido na lista de parâmetros)
single_post_title() – mostra o título da publicação atualmente exibida em single.php
the_author() – mostra o autor da publicação atualmente exibida
the_content() – mostra o texto principal de um post ou página.
the_exerpt() – o trecho do post ou página.
A lista completa de Tags modelo WordPress podem ser encontradas aqui.
Ações gancho são funções gancho providas pela wordPress que geralmente tem outra função enganchada a ela, alguns ganchos não tem funções ligadas por padrão e existe para ser usado por plugins. Ações gancho permitem plugins se ligarem às suas próprias funções e tê los funcionando em vários pontos da pagina carregando.
No cabeçalho de seu tema modelo, a ação gancho wp_head() é chamada para incluir o cabeçalho HTML padrão dentro das tags <head></head>. Possui algumas funções básicas do WordPress para adicionar o HTML à página, e permite que qualquer função seja anexada aos plugins para serem executados.
Na seção de rodapé de seus temas, o gancho de ação wp_footer() é chamado para incluir o HTML e o JavaScript padrão e executar todas as funções anexada aos plugins
Se você não usar as ações gancho ao criar o tema do WordPress, o código principal é importante estará faltando e os plugins não poderão funcionar corretamente.
Se você por exemplo, não chamar wp_footer() em seu modelo footer.php impedirá que a barra do administrador apareça quando você estiver logado como administrador. O código principal do WordPress que faz com que a barra de administração apareça anexada a ação gancho wp_footer() e as funções anexas não podem ser executadas se a ação gancho não existir.
Para uma explicação completa sobre ações gancho, leia as seções "ações" e "ações gancho" no tutorial de Como criar um plugin WordPress.
O loop é usado para exibir posts. Ele pode ser usado para mostrar um único post ou todas as postagens publicadas em uma única página, o HTML que você escreve dentro do loop será usado para exibir todas as postagens solicitadas pelo loop. O código continua em loop até que chega no final do post. Se exibindo um post você usa a tag modelo, use a tag modelo the_content() dentro o loop para mostrar o conteúdo de um post. Se exibir uma lista de todos os posts publicados, você pode usar the_excerpt() dentro do loop para que a postagem inteira não seja exibida.
O loop é uma abreviatura de várias linhas if… then… declaração composta de quatro linhas de código. A primeira linha indica que, se um post está disponível use o código a seguir para mostrar o post. Se nenhuma publicação correspondente for encontrada, você pode definir um texto substituto. O exemplo padrão do WordPress parece assim e a linha comentada é onde suas tags de modelo HTML são escritas.
Parabéns! Você criou o seu primeiro tema responsivo HTML5 no WordPress!
Agora você entende Modelos e Tags Modelo, você deve dar uma outra olhada na lista de modelos e as Tags modelos do codex do WordPress e experimentar adicionar novas seções em seu layout. Experimente alterar o estilo, largura do css e ver como seu navegador responde a várias situações. Altere as regras para as consultas de mídia e veja se há melhores regras que podem ser definidas.
Você pode também seguir para o tutorial sobre como criar um tema filho no WordPress.
Vocês transformaram algo complicado em algo simples, esse tutorial ficou muito bom, e bem explicado, valew