MaxBlog - Blog WorkControl Novo

Parabéns por adquirir o tema WorkControl MaxBlog!

MaxBlog é um tema desenvolvido para o CMS WorkControl, trazendo simplifidade, um visual tradicional, focado em usabilidade e performance.

Dedicamos toda nossa atenção para oferecer a melhor experiência e performance de uso, tornando seu projeto incrível e poderoso. Sempre focando nos padrões mais recentes de desenvolvimento de projetos web.


Se você realmente gosta do nosso trabalho, deixei sua avaliação em nosso perfil no Google Business, isso realmente nos motiva a oferecer projetos cada vez melhores.
★ ★ ★ ★ ★


Projeto: MaxBlog
Versão: 1.01
Desenvolvido em: 30/05/2021
Última Atualização: 01/06/2021 - Ver Changelog
Por: Evertec Digital

Documentação criada em: 30/05/2021
Documentação atualizada em: 01/06/2021
Suporte: suporte@evertecdigital.com.br
Veja esse e outros projetos em nossa WebStore
MaxBlog - Tema para Blog WorkControl
Premissas de Desenvolvimento

Como forma de orientação durante o desenvolvimento, utilizamos as seguintes premissas de desenvolvimento:

  • Priorizar os recursos pré-existentes do WorkControl;
  • Oferecer uma experiência aprimorada para o usuário, focando em performance e conversão.
  • Substituir reset de estilo e de javascript padrão do WorkControl pelo Bootstrap 4.6;
  • Fazer uso do SASS com o Bootstrap para tornar possível a fácil customização de padrões do tema.

Recursos Renovados

Como já dito anteriormente, esse tema foi desenvolvido utilizando o Bootstrap 4.6 e também utilizamos outros plugins baseados da biblioteca jQuery. Isso nos permitiu customizar e melhorar alguns widgets pré-existentes do WorkControl. Assim, além de melhorar a experiencia do usuário nesse tema, você poderá reutilizar esses widgets em outros projetos, podendo dispensar os bots originais do WorkControl.

Os seguintes recursos foram renovados:

Blog

No blog, conservamos a estrutura visual semelhante a padrão do WorkControl, porém cuidamos para que não houvesse erros de direcionamento na navegação do site pela URL.

Blog
Página de Pesquisa

A página de pesquisa do tema está mais expansiva, ela agora permite buscar artigos por categoria, por autor, pelo título, pelo subtítulo e pelo conteúdo do artigo, ajudando os usuários do blog encontrar mais facilmente o conteúdo desejado.

Blog: Página de Pesquisa
Single Post

A principal diferença da página single post do blog do tema, está no Schema do post, que aprimoramos a utilização de dados estruturados para aumentar as chances de um bom posicionamento nos motores de busca.

Blog: Single Post

Sistema de Comentários

Sistema de Comentários

Mantendo a mesma essência, o sistema de comentários foi reestilizado utilizando o Bootstrap 4.6

Com isso a integração da App Comments em qualquer tema será muito mais harmoniosa, melhorando a experiencia do usuário em seus projetos.

A interação com o sistema de avaliação e com os "likes" foram modificados para melhorar a interface.

Widget Account

Widget Account

Devido a estrutura original do WorkControl, optamos por manter o padrão visual do Widget Account.

Apenas adotamos os recursos do Bootstrap 4.6 e também adicionamos um novo formulário de contato diretamente no painel do usuário

Widget Share

Widget Share

O widget de compartilhamento passou por atualizações, removemos o sistema de compartilhamento via Google Plus (já que o mesmo foi descontinuado) e adicionamos um botão de impressão acionado por Javascript.

Para complementar o recurso de impressão, as páginas single de artigos e automóveis foram customizadas para que a impressão não exiba outros elementos do site, entregando um conteúdo totalmente limpo, facilitando a apresentação do conteúdo e/ou compartilhamento por PDF.

Página de Contato

Página de Contato

Apenas dois aspectos foram modificados do formulário originalmente criado para o WorkControl.

O primeiro é que ele foi feito em AJAX para melhorar a usabilidade. O segundo aspecto é que é possível enviar para múltiplos destinatários, bastando acessar o arquivo _app\Config\Client.inc.php ou o campo relacionado no painel de configuração e informar os destinatários na constante SITE_ADDR_EMAIL separados por ponto e vírgula (;) conforme a seguir:

Obs.: O e-mail é exibido em diversas partes do site, como footer, header e pagina de contato. Em todos esses lugares a informação foi tratada, sendo que no Header, irá mostrar apenas um e-mail, nas demais partes irá mostrar todas os e-mails adicionados a essa constante.

 define('SITE_ADDR_EMAIL', 'contato@worcontrol.com.br; email2@seudominio.com.br; email3@seudominio.com.br'); //E-mail de contato                                            
                                

Instalação do Tema MaxBlog

Devido as nossas premissas de desenvolvimento, o processo de implementação do tema é muito simples e prático, nada diferente do que já estamos acostumados com o WorkControl. Para tornar ainda mais fácil, criamos um passo a passo detalhado mostrando a implementação na prática, basta seguir a risca cada etapa do procedimento.

Como instalar - Passo a Passo

Passo 1: Instalação do WorkControl

Para o processo de instalação do tema MaxBlog, estamos considerando a instalação padrão do WorkControl sem que haja qualquer tipo de configuração após a instalação em seu servidor local. Como esse é um produto voltado apenas para programadores licenciados do WorkControl, não mostraremos aqui como instalar o CMS, passando diretamente para o passo a passo de implementação do tema.

Logo depois que concluir a instalação padrão, é imprescindível que faça o primeiro acesso ao Painel Admin do WorkControl, antes de passar para o passo 2.

Passo 2: Adicionando arquivos do tema

No pacote de arquivos do seu tema na área de membros em nossa WebStore, existe uma pasta chamada “01_MaxBlog_pack”, nela contém o tema e todos os widgets que foram criados ou customizados para esse projeto. Basta copiar todo o conteúdo e colar na pasta raiz do seu projeto.

Passo 3: Configurações do Projeto

No arquivo _app/Config/Config.inc.php

Informe o nome do tema na constante THEME com o valor maxblog:

    define('THEME', 'maxblog'); //template do site                                
                                

Desative as seguintes constantes (valor = 0): APP_EAD, APP_PRODUCTS, APP_ORDERS e APP_IMOBI:

    define('APP_EAD', 0); //Plataforma EAD
                                
    define('APP_PRODUCTS', 0); //Produtos
    define('APP_ORDERS', 0); //Pedidos
    define('APP_IMOBI', 0); //Imóveis
    define('APP_SLIDE', 0); //Slide Em Destaque
                                

Mude a constante IMAGE_W para 1280 e a constante IMAGE_H para 628. (OPCIONAL)

    define('IMAGE_W', 1280); //Tamanho da imagem (WIDTH)
    define('IMAGE_H', 628); //Tamanho da imagem (HEIGHT)                                 
                                
Passo 4: Desativando recursos nativos

Nativamente, o WorkControl carrega alguns bots de CSS e JavaScript, além da biblioteca de ícones que não iremos utilizar em nosso tema e que poderão afetar negativamente alguns recursos do nosso projeto. Então precisaremos desabilita-los.

No arquivo index.php principal da instalação do WorkControl (na raiz), faça as modificações a seguir:

Comente ou exclua as linhas abaixo:


                                        
                                
                                      
                                
Passo 5: Página de Contato (OPCIONAL)

Você pode criar uma página de contato através do painel Admin nativo do WorkControl. Apenas atenta-se a manter o link alternativo como "contato", para que a página criada possa ser carregada corretamente.


O seu projeto, já está pronto e funcional!

Base DEMO (OPCIONAL)

Sabemos que você irá precisar de um projeto pronto e populado para ser apresentado para o seu prospect ou cliente. Então criamos uma base de dados de exemplo, com usuários, slides e posts que você poderá utilizar para popular o seu projeto e assim poder apresentar rapidamente todos os recursos que preparamos para você.

Então para utilizar nossa base de dados, caso ainda não tenha feito, acesse sua área de membros em nossa WebStore e baixe a “02_MaxBlog_demo.” e siga os passos abaixo:

  1. Faça a importação do arquivo “maxblog_demo.sql” para a base de dados do seu projeto;
  2. Copie todo o conteúdo da pasta “uploads” para a pasta uploads do seu projeto.

Estrutura de Arquivos de Estilo e JavaScript

Com o objetivo de aproveitar os recursos de auto inclusão de arquivos já existente do WorkControl, utilizamos as pastas padronizadas wc_js e wc_css, para a inclusão de todos os arquivos de estilo e de javascript do tema.

Como alguns desses arquivos possuem dependências de ordem de carregamento, numeramos esses arquivos para que carreguem na ordem correta.

Como é possível observar, temos uma nova pasta chamada "scss" que contém os arquivos SASS utilizados para a personalização desse tema.

Devido a estrutura adotada aqui para a utilização do recurso de SASS, também adicionamos na pasta "_cdn" os arquivos do Bootstrap 4.6. Porém não será necessário realizar qualquer intervenção nos arquivos do Bootstrap.

Estrutura de Arquivos CSS e JS

Paleta de Cores

A paleta de cores utilizada no tema é a paleta do Bootstrap 4.6. Fizemos dessa forma para facilitar a customização de acordo com a sua necessidade.

Consulte a paleta de cores do Bootstrap 4.6 aqui


Personalizando as cores

Esse tema foi criado aproveitando as vantagens de se trabalhar com o framework Bootstrap 4.6, utilizando o SASS para processamento do CSS, logo, para mudar o padrão de cores do tema é altamente recomendável que você utilize esse recurso, mantendo assim, a alta performance do seu tema.

Para mudar o padrão de cores, recomendamos que utilize o processador SASS Scout-App, que é um aplicativo muito simples, intuitivo e autoexecutável. Acesse o site do Scout-App para baixar e utilizar em seu projeto.

Após iniciado o seu processador SASS, acesse o arquivo themes\maxblog\scss\_setup.scss e mude os padrões de cores conforme a sua preferência.

$primary: #007BFF;
$secondary: #6C757D;
$success: #28A745;
$danger: #DC3545;
$warning: #FFC107;
$info: #17A2B8;
$light: #F8F9FA;
$dark: #343A40;
$white: #fff;
$body: #494f54;
$muted: #6c757d;
                                    
Paleta de Cores Bootstrap 4.6

Changelog

Versão: 1.01 (01/06/2021)

  • Blog->Single:
    Artigos Relacionados com informações incorretas (subtitle e author).
    themes/maxblog/inc/artigo.php
  • Blog->Sidebar:
    Melhoria de usabilidade na apresentação dos campos de busca.
    themes/maxblog/inc/sidebar_article.php
    themes/maxblog/pesquisa.php
  • Tema->Header:
    Tratamento do contato de e-mail para mostrar apenas o primeiro contato, caso haja mais de um contato na constante SITE_ADDR_EMAIL.
    themes/maxblog/inc/header.php
  • Tema->Footer:
    Adição de looping para mostrar multiplos contatos de e-mail da constante SITE_ADDR_EMAIL.
    themes/maxblog/inc/footer.php
  • Pagina de Contato:
    Adição de looping para mostrar multiplos contatos de e-mail da constante SITE_ADDR_EMAIL.
    themes/maxblog/page-contato.php

Compromisso com a
Qualidade

Qualidade

Como pode ver, existem muitas novidades nesse tema. Todas elas foram exaustivamente testadas, afim de garantir a qualidade funcional, sempre tendo como foco as premissas básicas de desenvolvimento, mencionadas no início desse documento.

 

Porém, somos suscetíveis a cometer erros. Caso encontre algum erro funcional ou até mesmo alguma característica estética que não estava contemplada pela proposta desse tema, entre em contato conosco para que possamos fazer as correções o mais rápido possível.

 

Nosso e-mail de suporte é suporte@evertecdigital.com.br

"Os pequenos atos que se executam são melhores que todos aqueles grandes que se planejam."

George Marshall