A melhor maneira de adicionar uma fonte externa no seu site

As fontes disponíveis no WordPress são as Google Fonts. Porém o que fazer quando o layout pede uma fonte externa? Apesar de existir mais de uma maneira, a seguir você encontrará a mais eficiente para otimizar o seu site.

Porque essa é a melhor maneira

Embora esse não seja o único modo, ele é o melhor para você e o seu site. Mas por quê?

Por exemplo: se adicionar os arquivos da fonte no tema, não poderá continuar usando se precisar trocá-lo. Além disso, o melhor lugar para colocar sua fonte é no servidor do site já que o navegador baixa a fonte diretamente de lá. Isso significa não só que você pode trocar de tema, mas também que a fonte carregará mais rápido.

Também, se seguir devidamente o passo a passo, além de eficiente é uma maneira rápida e fácil.

Plugins

Você precisará de três plugins para adicionar a fonte externa. O File Manager para pegar o caminho da fonte, My Custom Funcionality Master para inserir o plugin e Elegant Custom Fonts onde adicionaremos as regras da fonte.

Passo a Passo

Por fim, agora vamos ao que realmente interessa: o passo a passo para a instalção.

1- Uma vez que tiver a fonte no seu PC ou notebook, deverá adicioná-la aos arquivos do My Custom Funcionality Master. Para fazê-lo, você só precisa extrair o arquivo .zip do plugin e colar os arquivos da fonte no seguinte local: my-custom-funcionality-master > assets > fonts. É muito importante que todas as fontes tenham seus nomes padronizados e formatos iguais. Por exemplo, se a família da fonte externa for Lato, os arquivos devem estar todos como no print abaixo (capitalize e .ttf). Depois disso, comprima o arquivo com a fonte e adicione-o ao seu site.

Arquivos da fonte

2 – Agora é a hora de instalar os outros plugins (File Manager e Elegant Custom Fonts).

3 – Ao instalar o File Manager, ele vai aparecer na barra lateral do WordPress. É só clicar que os arquivos irão aparecer. Na sequencia você deve procurar pelo seguinte caminho: wp-content > plugins > my-custom-funcionality-master > assets > fonts.

4 – Após chegar nos arquivos da fonte é só clicar com o botão direito, depois em Get info & Share. Em “Path :” você copiará o caminha da fonte a partir de /wp-content. Refaça esse processo em todos os arquivos, um a um. Uma dica interessante é que você copie e cole esse caminho, num bloco de notas por exemplo, para evitar erros e agilizar o processo.

5 – Feito isso temos a parte final e mais importante do processo. No Elegant Custom Fonts, adicione uma nova Font Family. Após colocar o nome, é hora de acrescentar a font-face. É nesse momento em que você precisa de mais atenção para que não adicione nada diferente do layout. Após escolher font-weight e font-style, o .woff URL é aquele caminho do passo 4, lembra? É só colar ele aqui. Não se esqueça de conferir se está tudo certo. Se houver uma segunda família de fonte, é só repetir o processo em uma nova Font Family.

6 – Depois de conferir e tudo estiver certo, a(s) fonte(s) irá aparecer no seu site e voilá! Você acabou de instalar uma fonte externa da melhor maneira possível!

É importante lembrar que, se algo deu errado, não precisa desanimar. Reveja o passo a passo com calma e refaça onde errou.

Se curtiu essa dica acompanhe nosso blog para muito mais!

Criando uma Option Page no seu site WordPress

Existem informações no seu site que não podem estar linkadas a páginas ou posts? Dados globais podem ser adicionados a Option Page, uma página completamente customizável que pode ajudar desenvolvedores e usuários.

O que é uma option page

A option page ou página de opções é uma página costumizável, onde os dados são salvos na tabela wp_options. Isso significa que eles são globais, ou seja, podem ser usados em qualquer parte do site, inclusive em mais de uma.

Possíveis utilidades

Ela pode ter páginas filhas e campos costumizáveis. Dessa maneira se torna uma grande aliada para mantes informações que aparecem mais de uma vez em todo o site. Assim os desenvolvedores poupam bastante tempo, tanto no desenvolvimento quanto em possíveis alterações futuras.

Mas não para por aí: com os campos costumizáveis, a página de opções também é interessante para os usuários. Muitas vezes alterações simples podem ser uma dor de cabeça para pessoas que não entendem de tecnologia, o que custa tempo (ou até dinheiro) dos desenvolvedores e do próprio cliente. Informações como número de telefone ou email que geralmente aparecem no header e footer podem ser alteradas em todo o site mudando somente na option page. Já que ela fica situada no menu do WordPress até mesmo um usuário leigo pode alterar informações sem grandes problemas.

Como obter

Vale lembrar que a página de opções não é um recurso do WordPress. Esse recurso pertence ao Advanced Custom Field (ACF), um plugin WordPress. Embora seja um plugin grátis, a option page é um recurso pago. Pode ser adquirida por meio do ACF PRO ou comprando uma licença que dá acesso a esse recurso extra.

Como usar

Atualização do ACF PRO 6.2

A versão 6.2 do ACF Pro traz uma nova funcionalidade que permite criar Option Pages sem utilizar qualquer código, e de um jeito prático bem semelhante a como se cria custom fields, confira o vídeo:

Depois de adquirido o recurso, você precisará criar a option page por meio do seu arquivo de funções php.

Para um página de funções simples, você pode adicionar:

if( function_exists('acf_add_options_page') ) {
	
	acf_add_options_page();
	
}

Para uma página de funções personalizável e/ou página filhas:

if( function_exists('acf_add_options_page') ) {
	
	acf_add_options_page(array(
		'page_title' 	=> 'Site name', //change to the client name
		'menu_title'	=> 'Site name', //change to the client name
		'menu_slug' 	=> 'site-name', //change to the client name without space and special chars
		'capability'	=> 'edit_posts',
		'redirect'		=> false,
		'position' => 2,
	));
	
	acf_add_options_sub_page(array(
		'page_title' 	=> 'Footer',
		'menu_title'	=> 'Footer',
		'parent_slug'	=> 'footer',
	));
	
	cf_add_options_sub_page(array(
		'page_title' 	=> 'Header',
		'menu_title'	=> 'Footer',
		'parent_slug'	=> 'theme-general-settings',
	));
	
}

Neste caso, as páginas filhas são header e footer, porém você pode adaptar como preferir.

Campos da option page

Outra dica para atingir todo o potencial da Option page são os custom fields. Também são um recurso do ACF, entretanto boa parte desses campos são gratuitos. É desse modo que as informações podem ser facilmente alteradas pelo cliente.

Já para usar essa informação no seu template, você pode optar por qualquer função (get_field, the_field…) se aliada a um segundo parâmetro, como no exemplo:

<?php the_field('header_title', 'option'); ?>

Você também pode optar pela opção insert dynamic data > advanced custom field que aparecem em alguns pagebuilders e temas.

Se gostou desse post, fique ligado no nosso blog para não perder mais dicas sobre wordpres, social media e muito mais!

Como estilizar uma scrollbar usando CSS

A scrollbar ou barra de rolagem facilita a visualização do usuário, entretanto pode interferir no design do seu site. Para que isso não ocorra podemos aderir a estilização por meio do CSS.

Como adicionar a scrollbar?

Para adicioná-la na vertical e horizontal podemos utilizar: 

.classe {overflow:scroll}

Para aparecer só na vertical ou só na horizontal, respectivamente temos:

.classe {overflow-y:scroll}

.classe {overflow-x:scroll}

Ainda podemos adicionar uma altura que determine se o scroll aparecerá ou não. Por exemplo, se a altura definida for de 300px, o scroll só funcionará a partir de 301px.

Estilizando a scrollbar

A barra de rolagem possui classes que podem torná-la formatável. Para uma scrollbar comum podemos utilizar estilos simples, mas que já fazem total diferença.

Utilizando o CSS abaixo podemos resolver o problema:

.classe::-webkit-scrollbar-track{
	/*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/
	border-radius:0;
	background-color: #D0D4CE;
}

.classe::-webkit-scrollbar{
	width: 6px;
	background-color: #D0D4CE;
}

.classe::-webkit-scrollbar-thumb{
	border-radius:0;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #71806B;
}

Este CSS corresponde a Scrollbar representada abaixo:

estilizar uma scrollbar

Onde: 

.classe se refere a classe onde a scrollbar está. No print acima, seria a classe da div branca, a div mãe do conteúdo.

-webkit-scrollbar-track  a alça fixa da scrollbar

-webkit-scrollbar  refere-se a scrollbar inteira

-webkit-scrollbar-thumb  é a alça de rolagem móvel

Outras classes

Observe que, no print a scrollbar é simples, porém a formatação do CSS é versátil e útil. Além disso, existem outras classes que também podem ser úteis:

::-webkit-scrollbar-button se refere as setas da scrollbar comum

::-webkit-scrollbar-track-piece é a parte da alça fixa que não é coberta pela alça móvel

::-webkit-scrollbar-corner canto inferior onde as barras de rolagem y e x se encontram

::-webkit-resizer redimensionamento da box que aparece no canto inferior

Todas essas classes podem ser usadas em conjunto, de maneira que sua barra de rolagem seja completamente formatável.

Gostou das dicas do post? Acompanhe nosso blog para não perder mais desse conteúdo, além de ter acesso a muito mais.

O que é CMS? E porque seu site deveria usar um

Você tem um site estático feito em PHP ou HTML, e não consegue trocar uma frase sem ter que ligar para o suporte, para resolver isso você precisa de um CMS, mas o que é CMS?

O que é CMS?

Um CMS (content management system) é, numa tradução literal um Sistema de Gerenciamento de Conteúdo. Esses sistemas tem uma interface amigável, o que permite aos usuários gerenciarem com facilidade os conteúdos de um site.

Por conteúdo, podemos dizer: páginas institucionais de um site (sobre, história, contato), imagens, vídeos, as postagens de um blog, suas tags e categorias.

Ao utilizar qualquer um dos sistemas de gerenciamento de conteúdos dá para economizar com a manutenção do site, ter mais autonomia.

Além de ter a possibilidade de aproveitar melhor seu site dando os primeiros passos no Marketing de Conteúdo sem ajuda externa.

Benefícios de utilizar um CMS

Gerenciamento simplificado

Ao utilizar um gerenciador de conteúdos, usuários de nível básico conseguem se virar muito bem com tarefas como:

Não é preciso conhecer HTML, CSS ou qualquer outra linguagem. Tudo isso é feito através de um painel de controle, sem instalar nada em seu computador, tudo 100% online.

Muitos dos sistemas de gerenciamento de conteúdos são grátis

As melhores opções de gerenciadores de conteúdos são gratuitas.

Você terá acesso ao CMS e diversos plugins que dão novas funcionalidades a ele, e a maior parte é de graça.

Não preciso entender nada de programação?

No entanto, é preciso ter em mente que a instalação de alguns CMS como WordPress, Joomla e Magento, pode ser um pouco complicada.

Se você não tem muita intimidade com serviços de hospedagens, configuração de domínio e outras tarefas relacionadas ao desenvolvimento de websites e blogs.

Muitos serviços de hospedagens e profissionais, como webdesigners costumam deixar tudo pronto para o dono do site só se preocupar com o gerenciamento do conteúdo.

Infelizmente muitas pessoas imaginam que por ser de graça ela não terá custos, você não paga pela plataformas, ainda assim terá alguns custos fixos como:

Há boas opções no mercado com preço acessível, é possível ter um site funcionando com um custo mensal em torno de 40,00.

Seu grande aliado para Marketing de Conteúdo

A partir do momento que sua empresa tem um site, deixar ela bem ranqueada nas buscas do Google vai te trazer muitas oportunidades de vendas.

Fazer esse trabalho em um site feito em HTML, ou usando o construtor da sua hospedagem vai ser muito penoso. Muito mesmo.

Outras plataformas estilo “arrasta e solta” prometem, mas quase nunca conseguem entregar, realmente é simples montar o site, mas o gerenciamento (principalmente de SEO) não é dos melhores.

Já ao utilizar um gerenciador de conteúdos, você terá diversos plugins para auxiliar e automatizar tarefas, e fazer alterações em lote.

No WordPress, por exemplo, plugins como Seo by Yoast e Rank Math deixam esse trabalho mais prático, e fácil de quem não é especialista entender.

Qual o melhor gerenciador de conteúdos (CMS) gratuito

Agora que você já sabe o que é CMS (content management system), conheça a melhor opção de gerenciador de conteúdos para sites institucionais e blogs.

O site da MDGA e 27% dos sites do mundo inteiro utilizam WordPress, é um número impressionante!

Por ser o mais utilizado no mundo o WordPress, e ter uma comunidade muito ativa, apresenta as melhores opções para sites dos mais simples aos mais complexos como portais de notícias e lojas virtuais.

Por que usar o WordPress?

WordPress é uma plataforma Open Source, gratuita e extremamente estável. São muitas pessoas trabalhando para melhora-la cada vez mais.

Há muitos temas e plugins, que são o que permite você personalizar o seu site, e adicionar funções que não são nativas, por exemplo.

Existe um mercado enorme por trás dessa estrutura, designers e programadores que criam serviços grátis e premiuns, e tudo isso impulsione a plataforma, pode usar sem medo de algo como deixar de existir suporte no futuro.

Facilidade de uso

Você precisa de zero conhecimentos técnicos para manter um site WordPress.

Ao escolher um bom tema, o painel de controle é tão intuitivo que as principais funcionalidade serão simples de usar desde o seu primeiro acesso.

Tarefas como trocar imagens, editar textos, e criar posts do blog são bem fáceis.

Temas e plugins

São muitos temas e plugins grátis. Eles permitem um nível básico de personalização, e trazem muitas funções novas para o gerenciador de conteúdo.

Há plugins para facilitar o SEO, melhorar a velocidade de carregamento do site, transformar o WordPress em ecommerce, usar botões de compartilhamento.

Dá para fazer praticamente tudo com os plugins existentes.

Claro, plugins e temas premiuns permitem um nível ainda maior de funções e personalização, mas para um uso básico em sites institucionais e blogs as versões gratuitas atendem perfeitamente as necessidades.

Dificilmente um problema não tem solução

A comunidade WordPress lembra um pouco o Yahoo Respostas, porque a dúvida ou problema que você tem agora, provavelmente alguém já teve.

Então, na maioria das vezes é fácil resolver problemas ou esclarecer dúvidas com uma simples busca no Google. Há muito conteúdo sobre o CMS, inclusive em português.

Outras opções de sistemas de gerenciamento de conteúdos

Considero o WordPress o principal, mas a outras opções que também são muito boas como Joomla, e Magento.

Joomla

Se o seu objetivo é um site institucional ou blog, o Joomla é uma boa opção de gerenciador de conteúdos.

Existe desde 2005 e dentre os sites que usam sistemas de gerenciamento de conteúdos tem 6,6% do mercado.

Assim como o WordPress também tem uma série de plugins e temas para auxiliar o gerenciamento do seu site.

Drupal

O Drupal, é entre o gerenciador de conteúdos mais antigo dentro os citados, foi lançado em 2001.

Tem 4,6% dos sites que  utilizam CMS. Ele se destaca por ser a plataforma escolhida por sites maiores.

Quem opta pelo Drupal, geralmente busca um CMS que exija hospedagens menos robustas, e sites muito personalizados.

As opções de temas grátis são muito simples, e se escolher ele, provavelmente precisará investir em um tema pago.

Espero que tenha explicado bem o que é CMS e quais as vantagens de utilizar um em seu site.

Os plugins são grandes aliados para começar a implantar o Marketing Digital, e principalmente usar estratégias de Marketing de Conteúdo, e colocar seu site no caminho da primeira página de buscas do Google.

Ficou alguma dúvida deixa nos comentários ou envie uma mensagem para MDGA.