Arena: The Contest

  • Site: Arena: The Contest
  • Tipo: Site oficial de jogo de tabuleiro
  • Tecnologias utilizadas: WordPress, Grunt, Sass, Foundation Framework, Slick Carousel, Advanced Custom Fields
  • Endereço: arenathecontest.com

Este talvez tenha sido um dos meus trabalhos com WordPress mais complexos! Consegui utilizar o WordPress e tecnologias agregadas para criar algo que foge quase que completamente do formato padrão que eu costumo criar com este CMS.

Este é o site oficial de um jogo de tabuleiro com temática medieval que está prestes a ser lançado, chamado Arena: The Contest. Ele mostra todos os detalhes do produto a ser lançado, bem como informações sobre o mundo medieval fantástico no qual este jogo se passa. Além disso, também há algumas páginas com formulário de contato, inscrição em newsletter e download de kits de material para imprensa.

Toda a identidade visual foi criada por uma agência digital contratada pelos donos do site, que também contrataram artistas para elaborar as ilustrações a serem exibidas nele. Meu trabalho aqui foi de pegar todo o conceito e a identidade visual definidos e criar um tema e algumas funcionalidades extras de gestão de conteúdo, para instalação e uso no WordPress.

Parte do conteúdo deste site precisava de uma forma de editoração diferenciada. Como não se trata de um blog ou outro tipo de site com publicações em ordem cronológica, foi necessário programar algumas telas com campos específicos para exibição de galerias de imagens, detalhes de peças, cenários, personagens, miniaturas e outros componentes do jogo. Para isso, adquiri e utilizei a versão Pro do plugin Advanced Custom Fields (que eu chamarei de ACF ao longo deste post), que permite criar campos personalizados e programar tais campos com estruturas condicionais e lógicas para salvar e exibir esse tipo de conteúdo diferenciado de forma dinâmica. Graças ao plugin ACF, também foi possível criar telas e menus de opções para gerenciar o esse tipo de conteúdo no Painel de Controle do WordPress.

Para o frontend, usei o sempre útil Foundation Framework 5.5.3, que novamente me foi bastante útil não só para implementar a responsividade, mas também na criação de componentes específicos para a exibição do conteúdo do site, como galerias, janelas modais e ilustrações exibidas de forma condicional (por exemplo: clicando em um botão específico que eu criei, os administradores do site poderão escolher se exibem um personagem do jogo ou um ponto de interrogação, para manter a expectativa do público. Você pode ver essa funcionalidade ativa na página Heroes deste site).

A apresentação de slides presente na página inicial do site não foi feita com nenhum plugin de slideshow tradicional disponível no WordPress. Em vez disso, eu utilizei tanto o ACF quanto uma bibioteca jQuery chamada Slick Carousel, implementando-os de forma combinada: primeiro eu implementei um slideshow comum seguindo as instruções da documentação do Slick. Depois eu criei campos de imagem no ACF e os programei para que exibissem imagens de forma recursiva, permitindo que os donos do site possam acrescentar, remover ou editar as imagens que compõem o slideshow.

Carrinho de compras