Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Theme Development
Webdesign

Criando um tema para o Anchor CMS

by
Length:LongLanguages:

Portuguese (Português) translation by thierry rene matos (you can also view the original English article)

Vamos criar um tema customizado para o CMS open source Anchor. Anchor é um gerenciador de conteudo super simples, leve e rápido. Você pode efetuar download de uma cópia do Anchor através do site oficial do Anchor. Também pode aproveitar e dar uma olhada nos temas disponíveis para a plataforma na sessão Anchor Themes.

cleat-anchor

Porque utilizar o Anchor?

Talvez você seja um desenvolvedor web que gosta de utilizar soluções modernas. Ou talvez você possa ter um protótipo de um website em HTML, que você deseja colocar para funcionar o mais rápido possível, para criar posts e artigos rápidos, mas não quer lidar com código toda vez que precisar utiliza-lo. O Anchor CMS fornece este controle sem a dor de cabeça da parte de programação.

O que é preciso para rodar o Anchor?

Esse artigo pressupoem que você tenha algum conhecimento em webdesign e desenvolvimento, como por exemplo hospedar uma página ou criar uma página HTML. Podemos testar o Anchor tanto em um ambiente online, quanto offline. Para instalar o Anchor CMS (local ou remoto), basta baixar uma cópia da solução e seguir as instruções de instalação.

Após a instalação, precisamos de pelo menos um protótipo de tema. O protótipo pode ser um layout bem simples em HTML, CSS e JavaScript, além dos arquivos de imagem. Para agilizar esta etapa do tutorial, disponibilizo o tema que criei para o artigo. Você pode conferir o tema que criei abaixo. O link para download do tema está disponível no topo da página.

tutorial-images

Gosto de comparar a criação de temas para o Anchor com fazer sanduíches, e conheço várias pessoas que são boas nisso. Então espero que minhas referências te ajude a entender os procedimentos que vamos executar. Além do mais, prefiro apresentar o que de fato as funções do Anchor podem fazer, é mais fácil de entender seu potencial.


Introdução

Com fome? Vamos comer e então...

Vamos preperar o ambiente

Assim como outros sistemas de gerenciamento de conteúdo (CMS), o Anchor possui um diretório apenas para temas. Se você der uma olhada na raiz da pasta de instalação do Anchor, você vai notar a existência da pasta "themes". Crie uma nova pasta e dê o nome que você gostaria de dar ao seu tema, conforme o exemplo abaixo. No nosso caso, o tema se chama "Cleat". 

folder-structure

Também precisamos criar  o arquivo "about.txt". Esse arquivo de texto simples apenas informa os dados do tema, como o nome, referências do criador, entre outras informações. Esse arquivo pode ser comparado ao arquivo "read me", muito comum em repositórios de sistemas e processos de TI.  Dê uma olhada no meu exemplo abaixo:

Agora, na pasta onde se encontra o arquivo about.txt, também coloque os arquivos do tema de exemplo. É melhor manter os demais arquivos, como imagens e scripts em sub pastas separadas. Para criar o tema, vamos pegar algumas partes do arquivo HTML e colocar nos arquivos php aceitos pelo Anchor.

Preparando o ambiente

A maioria dos websites são estruturados com um header, footer, e entre os dois o conteúdo. O Anchor CMS se beneficia deste padrão permitindo quebrar o tema em diferente sessões. Isso ajuda com a organização e da consistência.

Crie um novo arquivo na pasta theme com o nome "header.php". Abra esse arquivo e o arquivo HTML do tema de exemplo. Copie o HTML desde a primeira linha, até o elemento que da inicio a parte principal de conteúdo. No meu caso, paramos logo após o menu. No meu layout, tudo que está acima do menu vai ser igual em qualquer uma das páginas.

header-compare-2

Agora vamos substituir as informações estáticas pelos php helpers disponibilizados pelo Anchor. Abaixo está o código do header que copiei do arquivo HTML com algumas alterações:

Note que o HTML não foi alterado, mas substituímos algumas informações por pequenos referências em PHP.  Esses pedaços de código em PHP são chamados de funções ou functions, e atuam como espaços para conteúdo. Quando o tema for utilizado, essas funções são substituidas pelo conteúdo do website. Abaixo tem uma lista das funções que utilizei para substituir o conteudo.

  • <?php echo page_title(); ?> - apresenta o titulo da página, simples.
  • <?php echo theme_url("assets/image.png"); ?> - utilizado para mapear recursos como arquivos de estilo e imagens.
  • <?php echo site_description(); ?> - descrição do site assim como informado na configuração do Anchor.
  • <?php echo site_name(); ?> - o nome do site, como configurado no Anchor.
  • <?php echo base_url(); ?> - url do caminho de instalação, que também deve ser o endereço principal do site.

Se você esquecer ou precisar de referências sobre as funções, pode dar uma olhada nas referências da documentação oficial do Anchor.

Criando o menu

Criar um menu no tema é bem simples desde que você já tenha conhecimento de como o recurso opera. O Anchor gera um menu com todas as páginas criadas e publicadas. Páginas definidas como rascunho ou arquivadas, não são apresentadas no menu.

Para utilizar as páginas publicadas, precisamos criar uma maneira para acessa-las. Dê uma olhada no exemplo abaixo:

Com esse esquema, permitimos ao tema criar um menu na página. Na linha 1 estamos checando "se tem algum item no menu", e na linha 3 fazemos a requisição "se houver algum item, faça tal ação em cada um deles". Na linha 5 fechamos o looping com os itens do menu, o que significa que interrompemos o processo após ser executado com todos os itens do menu. Assim que o looping do menu estiver concluído, passamos da linha 5 para a linha 7 onde é finalizado o processo de criação do menu.

Cada vez que ocorre alguma interação no menu, um conjunto de funções são processadas:

  • <?php echo menu_url(); ?> - retorna o link do item clicado.
  • <php echo menu_title(); ?> - retorna o titulo do item, que é o mesmo titulo da página.
  • <?php echo menu_name(); ?> - nome da página, conforme as opções.

Para entender melhor, compare as funções com o conteúdo gerado no tema.  Entender o funcionamento do menu vai ajudar bastante na hora de criarmos os posts.

Finalizando a outra parte to tema

Assim como fizemos com o header.php, vamos copiar todo o código do footer e colar no arquivo "footer.php". No meu tema deixei uma linha no footer para créditos. Como essa informação deve ser apresentada em todas as páginas, vamos inserir essa informação apenas com a marcação HTML.

footer-compare-3

O footer não é tão complexo quanto o header, mas é um bom lugar para apresentar informações sobre o tema e sobre o seu criador.

Agora que configuramos finalizamos a instalação e configuramos o tema com sucesso, podemos seguir com o tutorial.


Os três principais layouts para conteúdo

Para suprir garantir a apresentação de qualquer tipo de conteúdo no tema, precisamos criar três arquivos básicos. Esses arquivos são carregados entre o header e o footer, e são utilizados para exibir seus posts, artigos individuais ou páginas.

Posts

Assim como fizemos com o header e footer, copie a área principal (main) do tema e cole no arquivo (que deve ser criado) "posts.php". A marcação precisa iniciar exatamente onde termina o header e finalizar justamente onde inicia o footer. O arquivo posts.php é utilizado para apresentar todos os posts na página. Em outras palavras, a página principal do blog.

posts-area

Se você criou um tema pensando em um blog, como no meu tema de exemplo, o conceito fica mais claro. Agora que separamos todas as partes do tema em arquivos, precisamos junta-las novamente, e é ai que entra a função "theme_include". No inicio do seu arquivo posts.php, adicione linha de código:

Essa função adiciona o código presente no arquivo header.php, no topo do DOM da página. O mesmo vale para o footer, adicione o seguinte no fim do arquivo posts.php:

Com esse método podemos garantir a consistência do header e do footer no tema, sem contar podemos fazer alterações no código fonte de forma simples.

Looping de posts

Lembra da técnica que utilizamos na criação do menu? Dê uma no conteúdo abaixo e veja se identifica algo em comum:

Existem algumas similaridades, não dos nomes, mas da maneira como a função é executada. Na linha 2 definimos um looping "se eu tenho post e enquanto tiver posts" que ao executar, exibi os itens do menu. Como ele é executado fora dos posts, o processo termina na linha 12. Assim como o menu, os posts também contam com um conjunto de funções básicas. Abaixo segue algumas funções para mais detalhes:

  • <?php echo article_url(); ?> - retorna o link do post.
  • <?php echo article_title(); ?> - o título do post.
  • <?php echo article_date(); ?> - quando o post foi criado, no formato dia/mês/ano.
  • <?php echo article_description(); ?> descrição do post, campo opcional.

Assim como fizemos no meu, analise as funções e substitua as informações pelas funções correspondentes.

Ótimo; já estamos com o header, footer e posts operando.

Uma prévia do que fizemos até aqui

Essa é a primeira vez que vamos checar o tema para ver como está ficando. Logue no Anchor e selecione o tema criado no menu Extend > Site Metadata. 

theme-option

Se você seguiu as instruções corretamente, já é possível visualizar um preview da pagina de posts do tema.

Se houver erros, não se preocupe, deve ser apenas alguma coisa fora do lugar. Aproveite a oportunidade para conferir se está tudo como descrito até aqui no tutorial.

Páginas

Alguns devem estar pensando "e se eu tiver muitos posts?". Bom, não se preocupe, vamos analisar essa situação de maneira simples. Dê uma olhada nesse bloco de código:

Perceba que a paginação é criada de maneira similar ao menu, porém mais simples. Na linha 1 verificamos se os posts excedem o limite. Se sim, são criados os botões próximo e anterior, comuns em blogs. Na linha 6 finalizamos o processo.

Nota: o número de posts por página pode ser definido no dashboard nas opções Extend > Site Metadata.

Esse código deve estar presente no arquivo posts.php, e não deve ficar dentro de nenhum outro looping. No meu tema, o recurso deve ser apresentado antes do footer, então declarei a função no fim do arquivo posts.php.

Artigos

Os artigos são muito simples comparados a às páginas de posts. Mais uma vez, você vai precisar da seção principal (main) do seu tema, ou qualquer outra referência HTML que você desejar utilizar. Assim como no arquivo posts.php, o conteudo deve ser enquadrado entre o header e footer. No meu tema de exemplo, o artigo tem um título, data e o conteúdo.

single-post-area

Crie um novo arquivo com o nome "article.php" na pasta do tema, e cole o bloco de código abaixo. Você também vai precisar adicionar as funções include para o header e o footer, como fizemos no arquivo posts.php. No meu tema, o código para os artigos ficou bem simples:

Mais uma vez, além das funções include, apenas substituimos as informações estáticas pelas funções fornecidas pelo Anchor. Segue relação:

  • <?php echo article_title(); ?> - o título do post.
  • <?php echo article_markdown(); ?> - o conteúdo do post.
  • <?php echo article_date(); ?> - data de criação do post, com dia/mês/ano.

Como fizemes anteriormente, basta substituir as informações estáticas pelas funções citadas. Após finalizar o arquivo article.php, podemos visualizar um artigo no browser. Aqui temos a chance de conferir se tudo está operando em ordem.

Página

Você pode não acreditar, mas as páginas são ainda mais simples que os artigos. Copie novamente o código do main, mas desta vez cole no arquivo (que deve ser criado) "page.php". Não esqueça dos includes referentes ao header e footer. Em websites, páginas normalmente apresentam informações que não são alteradas com frequência. Por essa razão, páginas não precisam de data. Dê uma olhada no código abaixo:

É praticamente igual ao arquivo article.php, mas estamos utilizando duas funções diferentes:

  • <?php echo page_title(); ?> - titulo da página.
  • <?php echo page_content(); ?> - o conteúdo da página.

Após declarar as funções, tente testar uma página. O conteúdo de exemplo que vem com o Anchor não oferece uma página, então precisamos criar uma e adicionar conteúdo.


Finalizando

Se você seguiu todos os passos do tutorial, você deve ter terminado com um tema simples mas bem útil para o Anchor. Se você está enfrentando problemas, confira o código novamente com cautela. É muito comum esquecer um caractere ou declarar o código na ordem errada.

Para maiores informações, ainda temos a nossa disposição a comunidade do Anchor que pode nos ajudar. Acesse o fórum do Anchor e procure por problemas similares aos seus.

Também recomendo dar uma olhada no Anchor Themes, onde você pode baixar temas, acessar sites criados com o Anchor e ainda enviar o seu trabalho. Espero que este tutorial tenha ajudado a criar um tema para o Anchor! Até!

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.