Desde seu lançamento original em 2003, o WordPress evoluiu de uma simples ferramenta de blog para um poderoso e popular construtor de sites e um CMS (sistema de gerenciamento de conteúdo) abrangente usado por cerca de 38% dos sites na web! Dada sua popularidade, se o seu site precisa se destacar da multidão, você precisará criar um tema WordPress exclusivo para o seu site.
Na verdade, não é de se admirar que o WordPress foi capaz de fazer isso tão longe e se tornar tão popular.
A quantidade de flexibilidade que possui e os recursos que hospeda permitem seu amplo uso em diferentes tipos de sites. Além disso, o WordPress é bastante fácil de usar, com pouca ou nenhuma experiência anterior em codificação ou desenvolvimento web.
Estas são as razões por trás da história de sucesso do WordPress e são precisamente as razões quase 40% de todos os sites na World Wide Web são movidos por este software.
O WordPress tem uma variedade de recursos úteis que tornam o desenvolvimento e a programação web menos complicados e mais acessíveis a todos.
Introdução ao desenvolvimento de temas WordPress
Outro recurso popular que torna o WordPress tão popular são seus temas. O tema é simplesmente uma coleção de folhas de estilo e modelos que definem a aparência e exibição de um site com WP.
O software oferece ao usuário uma ampla variedade de opções de edição diferentes quando se trata de temas da área de administração do WP.
Centenas de temas WordPress são totalmente gratuitos ou com muitos outros a um preço razoável de algumas dezenas de dólares.
Na verdade, o WordPress.org hospeda um enorme banco de dados de temas em seu diretório de temas.
Outros sites, como Themeforest, também oferecem muitos temas premium de diferentes desenvolvedores.
Cada um desses temas apresenta um layout, padrão de design e recursos diferentes.
Cabe ao usuário encontrar aquele que melhor atenda às necessidades de seu site. Na maioria dos casos, os temas são elaborados com determinados setores ou profissões em mente, o que significa que, por exemplo, os proprietários de restaurantes podem encontrar facilmente os temas com recursos de reserva.
Embora existam muitos temas incríveis que podem atender às suas necessidades, é seguro dizer que, se você quiser fazer algo excepcional, você terá que fazer você mesmo. Se você não consegue programar, uma boa alternativa opção seria ir para um desenvolvedor de software freelance (os preços podem variar dependendo de vários fatores).
Neste artigo, no entanto, vamos passar por TODAS as etapas necessárias para criar seu próprio tema WordPress personalizado para o seu site com WP. Estaremos analisando todos os aspectos importantes para garantir que você obtenha o melhor que o WordPress tem a oferecer.
Começar a criar seu próprio tema como um iniciante pode, à primeira vista, parecer uma tarefa gigantesca.
No entanto, criar um tema personalizado do zero não é muito complicado no WP. Você não precisa ser um gênio do desenvolvimento web, se você tem o básico de codificação com PHP, pode facilmente aprender a criar um tema WordPress.
Além disso, criar seu próprio tema pode ser bastante gratificante, especialmente quando você vê o resultado final ao vivo em seu site.
Criando seu primeiro tema WordPress personalizado
Para começar a criar um tema WordPress, você precisará de algumas coisas básicas:
- Um site WordPress
- Um bom plano de hospedagem
- Um pouco de experiência anterior com coisas como ambientes de preparação locais
- Conhecimento básico de linguagens de codificação CSS e PHP
- Um tema inicial
Compreendendo a hierarquia de modelos do WordPress
No WordPress, os arquivos de modelo (os blocos de construção do seu tema) são modulares e reutilizáveis.
Os arquivos de modelo são responsáveis por gerar as páginas em seu site WP. Alguns desses arquivos são usados em quase todas as suas páginas, enquanto outros são usados apenas em circunstâncias específicas.
Dê uma olhada no diagrama abaixo – ele explica como a hierarquia de modelos do WordPress é organizada.
Os arquivos de modelo determinarão a aparência geral do conteúdo do site. Se quiser criar um cabeçalho, você usará um header.php arquivo, ou se quiser adicionar uma seção de comentários, você usará o comments.php arquivo.
Para entender a hierarquia do modelo, você deve saber que o WordPress usa algo chamado “string de consulta” para decidir qual modelo ou conjunto de modelos deve ser usado para criar e exibir uma determinada página.
A string de consulta são informações armazenadas no link de cada parte do site que você está tentando modificar. Em termos mais simples, o WordPress analisa as informações e realiza pesquisas na hierarquia de modelos para encontrar um arquivo de modelo que corresponda às informações fornecidas na string de consulta.
Este é basicamente um esquema no qual o WP procura por arquivos de modelo correspondentes toda vez que as páginas são carregadas.
Por exemplo, se você digitar o seguinte URL http://example.com/post/this-post, O WordPress localizará os arquivos de modelo necessários na seguinte ordem:
- Arquivos que correspondem ao slug, neste caso, esta postagem.
- Arquivos que correspondem ao ID da postagem.
- Um único arquivo de postagem genérico, como single.php.
- Um arquivo, neste caso, archive.php.
- O index.php arquivo.
O último arquivo (index.php) é necessário em todos os temas, pois é o padrão (ou reserva) se nenhum outro arquivo for encontrado no processo de correspondência. sublinhados (um tema inicial do WP) tem os arquivos mais comuns. Esses arquivos incluídos neste tema funcionarão imediatamente.
Você pode editá-los se desejar experimentar ou se precisar criar alguma funcionalidade personalizada em seu site.
O que é um tema WordPress Starter?
Um tema inicial é uma base básica de um tema WordPress personalizado.
Você pode usá-lo como base para colocar seu próprio tema exclusivo em funcionamento. Com um tema inicial, você pode criar seu próprio tema WordPress personalizado sem ter que projetar ou codificar um tema inteiro do zero.
Os temas iniciais do WordPress contêm todos os arquivos definidos pela hierarquia acima.
Usar um tema inicial permite que você compreenda melhor como o WordPress funciona, pois mostra o básico, a estrutura de um tema e como as diferentes partes funcionam juntas.
Um tema WordPress personalizado pode ser aplicado a uma variedade de diferentes tipos de sites, desde apresentações e diretórios a lojas online construído com WooCommerce, mídia social ou qualquer outra coisa para a qual você precise do seu site.
Optar por temas iniciais (como UnderStrap, Underscores e Bones) ajudará a criar um tema WordPress que abre a porta para o uso de uma variedade de opções diferentes.
Usar sublinhados pode ser a melhor escolha para iniciantes, pois oferece os recursos mais importantes. Ele também vem de um desenvolvedor confiável e de longa data. Isso significa que é mais provável que seja compatível, seguro e confiável e terá um suporte melhor no longo prazo.
Por que você deve usar um tema inicial
Conforme declarado acima, um tema inicial é uma base, um projeto que o ajuda a criar um site exclusivo. Já está funcionando totalmente, mas ainda não possui os principais recursos definidores que tornam um site amigável.
Essencialmente, ele ainda precisa ser estilizado e configurado corretamente.
Dito isso, os temas iniciais são ideais para quem tem pouca ou nenhuma experiência com WordPress ou desenvolvimento web em geral. É uma ótima maneira de se familiarizar com o tópico de construção de temas e aprender o básico de sites com tecnologia WP.
Um tema WordPress Starter economiza seu tempo e requer pouco ou nenhum conhecimento de fundo em codificação e no resto das complexidades do WordPress.
Você pode aproveitar anos de trabalho árduo dos desenvolvedores do tema inicial e usar essas diretrizes para obter uma melhor compreensão de como o WordPress e o design do tema funcionam.
Exemplos populares de temas para iniciantes
- sublinhados – Um tema inicial confiável e renomado que dá aos iniciantes uma vantagem inicial desenvolvimento de tema. Underscores é bem básico e perfeito para começar imediatamente se você tiver todas as ferramentas necessárias. O tema é ótimo para entender os conceitos de desenvolvimento de temas. Underscores é sobre começar um novo projeto que deve ser visto mais como um kit de ferramentas em constante evolução e menos como uma estrutura.
- Raízes – Este tema inicial oferece uma abordagem mais voltada para desenvolvedores, com sua marcação baseada no Boilerplate HTML5. Ele também oferece suporte a ferramentas mais avançadas, como Bootstrap e a Grunhido. O tema inicial do Roots também inclui um wrapper de tema que ajuda a manter seu processo simplificado e elimina chamar as mesmas partes do modelo repetidamente.
O Roots também usa pré-processadores CSS e suporta LESS, uma extensão de linguagem compatível com versões anteriores para CSS, que pode acelerar significativamente o processo de desenvolvimento de seu tema.
Dito isso, o Roots oferece uma abordagem mais pragmática e requer um pouco mais de know-how do desenvolvedor.
6 etapas básicas para desenvolver seu tema WordPress
Depois de cobrir o básico, você finalmente está pronto para começar a criar um tema WordPress.
Como este artigo é voltado mais para iniciantes, usaremos um tema inicial, no entanto, você também está livre para criar tudo do zero, sem nenhum tema inicial.
Se esse é o caminho que você deseja seguir, não se esqueça de que você precisará de muito mais tempo e de se aprofundar um pouco mais na codificação e no desenvolvimento web em geral.
1. Configurando o Ambiente de Desenvolvimento
Sua primeira etapa no processo deve ser a criação de um ambiente de desenvolvimento.
Este é basicamente um servidor que você precisa instalar em seu computador para gerenciar e desenvolver sites WP locais. Um ambiente de desenvolvimento permite desenvolver seu site com segurança, além de oferecer várias opções para a criação de um ambiente local.
utilização DesktopServer é um dos caminhos ideais que você pode seguir. É uma maneira fácil de obter uma versão local e rápida do WP compatível com Windows e Mac. Selecione a versão gratuita, registre-se e baixe-a e instale o software.
Depois de instalar, abra o programa e configure seu ambiente local.
É um processo bastante simples e você estará pronto em minutos. Após a configuração, você terá um site e um ambiente de desenvolvimento que funcionarão e se parecerão com qualquer site WP ativo.
2. Baixe e instale um tema inicial
Os temas iniciais mais básicos (como sublinhados) são fáceis para os iniciantes.
Ao contrário da maioria dos temas básicos, sublinhados permite personalizar opções através de seus Opções avançadas (como autor e descrição) após nomear seu tema.
Você também pode adicionar folhas de estilo sintaticamente impressionantes ou SASS que é uma linguagem CSS de pré-processamento que permite introduzir recursos como aninhamento, operações matemáticas, utilização de variáveis, etc.
Depois de fazer suas escolhas, basta clicar em Gerar para baixar o arquivo .zip com seu tema inicial.
Agora, instale o arquivo em seu site local. Se você fez tudo corretamente, agora você pode ver uma versão básica do seu tema personalizado do WordPress.
Compreendendo os Princípios Básicos do WordPress
Agora que o básico está configurado, você pode começar a trabalhar. No entanto, antes de mergulhar no processo de personalização, você precisará se familiarizar com os princípios e componentes básicos da criação de um tema WordPress usando os princípios básicos do WP.
Em primeiro lugar, você deve aprender sobre arquivos de modelo, os principais blocos de construção de qualquer tema no WP.
Os arquivos de modelo basicamente determinam como seu layout e conteúdo serão exibidos em seu site. Se você quiser criar um cabeçalho, você vai querer usar o header.php arquivo, enquanto comments.php seria usado para exibir quaisquer comentários.
Conforme discutido acima, o WP usa sua hierarquia de modelo para determinar qual arquivo de modelo ele escolherá para executar o conteúdo que um usuário está solicitando / precisa. Você pode trabalhar com esses arquivos como eles estão, mas como você está aqui para criar um tema WordPress, sua maior parte do trabalho será ajustar esses arquivos às suas necessidades.
Quando falamos sobre os princípios básicos do WP, você também deve entender o conceito por trás The Loop.
É o código que o WP usa principalmente para exibir seu conteúdo e pode ser encontrado em todos os arquivos de modelo de exibição de conteúdo, como o index.php or barra lateral.php. É um assunto bastante complexo, mas felizmente, ele vem junto com o tema inicial (se você usar Underscores), o que significa que seu processo deve ser mais simples.
Você precisará entender o conceito e trabalhar com ele. Confira alguns dos exemplos no link acima para entender melhor como o loop é usado e como você pode personalizar o código de acordo com suas necessidades.
3. Crie os detalhes do tema
Temas não são componentes puramente cosméticos.
Existem muitos recursos diferentes que você pode adicionar ao seu site que podem melhorar a funcionalidade. Vamos discutir como implementar alguns recursos básicos para apimentar seu site.
Adicionando Gancho para Bolsas pode permitir que você execute diferentes ações do PHP, exiba outras informações ou insira dados de estilo conforme necessário.
Ganchos são fragmentos de código que são inseridos em arquivos de modelo. A maioria deles é implementada diretamente como parte do núcleo do WordPress, mas alguns ganchos são muito úteis ao personalizar temas também.
Aqui está uma lista dos ganchos mais comuns e suas funções:
- wp_head () – é adicionado ao elemento em header.php. Ele ativa scripts, estilos e outras informações que são executados quando o site começa a carregar.
- wp_footer () – geralmente adicionado a footer.php antes do tag, mais frequentemente usada para inserir o código do Google Analytics ou outro código que precisa aparecer em cada página, mas é muito pesado para carregar no cabeçalho.
- wp_meta () – Geralmente encontrado em sidebar.php e é mais frequentemente usado para incluir scripts adicionais (por exemplo, uma nuvem de tags).
- comment_form () – Adicionado a comments.php diretamente antes do fechamento do arquivo tag para mostrar comentários.
Quando você estiver usando sublinhados, esses ganchos já estarão incluídos com o tema, mas é sempre uma boa ideia aprender mais sobre eles e ver todos os ganchos disponíveis. Ganchos permitem estender os recursos de seu tema personalizado.
4. Adicionando estilos usando CSS
Cascading Style Sheets ou CSS define a aparência do conteúdo no site que você está criando.
Ao utilizar a blockchain da style.css arquivo, que já está incluído em seu tema, você pode editar qualquer um dos estilos encontrados aqui e salvá-los para ver como ele altera seu design. Por padrão, ele contém apenas o estilo básico.
CSS é usado para permitir a apresentação e separação do conteúdo do seu site, desde o layout até as fontes e o conteúdo. CSS pode ajudar a tornar o conteúdo do seu site mais acessível e flexível.
Aprofundar-se em como usar estilos com temas WordPress pode ser complicado e está além do escopo deste artigo. Se você não tiver certeza sobre isso, leia mais sobre CSS antes de continuar.
5. Incluindo JavaScript
Adicionar arquivos JavaScript ao seu tema, se necessário, pode aumentar os recursos e capacidades interativos e ter um site com um funcionamento melhor. É especialmente útil quando você deseja incorporar plug-ins de terceiros em seus sites, como reprodutores de áudio ou vídeo específicos, coisas como controles deslizantes, suporte a pop-up e outras bibliotecas de terceiros para criar funcionalidades avançadas.
Para usar Javascript com seu site personalizado, você pode criar uma chamada usando a sintaxe abaixo para adicionar o arquivo de script ao tema.
Alternativamente, você pode usar o script diretamente em seu header.php arquivo de modelo entre as metatags e o link da folha de estilo, como você faria no caso de uma página HTML. Ao usá-lo no arquivo de cabeçalho, ele deve se parecer com isto:
Se você deseja usar JS diretamente, adicione a chamada para os arquivos diretamente conforme abaixo. Se você deseja definir um recurso “enviar para um amigo”, pode colocá-lo sob o título da postagem. Isso seria semelhante a este:
” rel=”bookmark”>