A ideia de criar um rodapé flutuante em uma página não é novidade para ninguém e pode ser visto em vários websites em toda a internet, inclusivamente nos websites da rede Escolas+. No entanto aquilo que queremos levar até si neste artigo é a criação de um rodapé flutuante no seu website sem a utilização de qualquer plugin, que como já foi referido anteriormente é preferível do que estar a encher a sua instalação com plugins, muitos dos quais contêm código desnecessário e scripts que só farão com que o tempo de resposta e carregamento do seu website aumente e torne o mesmo um pouco mais lento. Embora este artigo esteja orientado para a utilização do rodapé flutuante em WordPress, esta poderá ser inserida em qualquer website, uma vez que é feita com a utilização apenas de HTMl, CSS e jQuery!

Para a conclusão deste tutorial é necessário que você tenha conhecimentos básicos de programação a nível do HTML/CSS e que tenha entendimento básico sobre como funcionam os ficheiros de um theme WordPress.


1. PORQUÊ UM RODAPÉ FLUTUANTE?

A utilização de um rodapé flutuante no seu website poderá ser feita com o intuito de buscar a atenção dos visitantes para um artigo particular, uma nota, uma informação, ou algo a que simplesmente pretenda dar destaque. Naturalmente existem soluções pré-feitas para atingir este mesmo objetivo, com plugins como a HelloBar ou outras dentro do mesmo gênero. O rodapé flutuante que iremos criar e utilizar no website é muito mais simples que todas as outras existentes através de plugins, sendo um rodapé estático que vai fazer uma rotação dos artigos inseridos através de código jQuery que iremos apresentar mais à frente.

A razão pela qual você deverá utilizar este rodapé é simplesmente pela sua leveza enquanto faz o mesmo trabalho. Não necessita de instalar plugins que contêm scripts que irão consumir recursos e dos servidor e consequentemente ajudar a que o website não seja tão rápido quanto poderia ser. No entanto, se pretender ter á sua disposição funcionalidades avançadas, aí sim terá de recorrer a uma solução mais complexa que encontrará em um plugin.
2. PRIMEIRO PASSO: CRIAÇÃO DA DIV

Como falamos na introdução do artigo, este rodapé flutuante é criado com a utilização de HTML e CSS juntamente com um toque de jQuery que faz a rotação dos artigos. O processo passa pela criação de DIV’s que irão ser estilizadas com CSS com a definição da posição, cor de fundo, tipo de letra, entre outras propriedades. Por último é inserido um pequeno script jQuery que irá fazer a rotação entre os artigos inseridos.

Utilizando um cliente de FTP á sua escolha (recomendamos a utilização do cliente FTP Filezilla) ligue-se ao servidor do seu website e para a criação das div’s do rodapé flutuante, localize a pasta do template do seu website e localize o ficheiro footer.php:

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Spoiler:

Neste pequeno trecho de código é onde você vai inserir os items que pretende que sejam mostrados no rodapé flutuante. Neste exemplo temos 2 artigos, mas você pode inserir quantos quiser, bastando para isso inserir uma ou mais novas entradas dentro da lista, seguindo o exemplo acima.
3. ESTILIZAÇÃO DAS DIV

Para fazer a estilização das div, determinando a cor de fundo, transparência, tipo de letra, tamanho, entre outras propriedades, localize o ficheiro style.css dentro da pasta do seu theme:

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Edite o artigo e insira o seguinte código:

Spoiler:

Na primeira linha do código é onde estilizamos a div principal, em que definimos os valores para as propriedades da cor de fundo, espaçamento, a familia do tipo de letra, o tamanho do tipo de letra, o z-index, determinar a posição do float, o alinhamento a margem, opacidade entre outros elementos. Nesta linha o elemento que faz a diferença é o position:fixed, pois dá o aspecto flutuante ao rodapé. Inserimos também um pouco de transparência de forma a que o conteúdo por trás do rodaºé flutuante continue a ser visível.

Uma vez que definimos que a largura da div principal é 100%, daí a necessidade de utilizar uma segunda div para fazer com que o conteúdo seja alinhado ao centro e não à esquerda. Na segunda linha do código definimos algumas opções para a div secundária onde é introduzido o texto e os links, determinando o alinhamento do texto ao centro. As restantes linhas vão determinar alguns pormenores para dar o toque final ao rodapé flutuante.
4. CÓDIGO JQUERY

Para o correto funcionamento do nosso rodapé flutuante é necessário inserir um pequeno script jQuery que irá fazer a rotação dos artigos inseridos na lista que criámos no ponto 2 deste artigo. Este código irá fazer com que seja mostrado um item da lista em cada vez que o rodapé flutuante for carregado. Para inserir o código, localize o ficheiro footer.php dentro da pasta do seu template e insira o seguinte código:

Spoiler:

É importante salientar que para o funcionamento deste pequeno script é necessário que jQuery esteja a ser carregado. Normalmente e na grande maioria dos casos os websites já têm o jQuery a ser carregado, pelo que a utilização de scripts como o acima irão funcionar plenamente. No caso de você querer inserir apenas uma nota de rodapé, uma informação ou um item único, não será necessária a introdução deste script, uma vez que não haverá rotação de itens.

O único contratempo que poderá encontrar na utilização deste método é a falta de uma interface no seu painel de administração que permita a introdução e remoção de itens da lista, mas como referenciamos, é preferível fazer a introdução do método desta forma se pretender um rodapé simples, evitando a utilização de plugins desnecessários. Caso realmente pretenda uma solução mais avançada e com outro tipo de opções incluídas, aí sim poderá optar pela utilização de um plugin.

e É SÓ ISSO PESSOAL DA DESIGNER DA NET ATÉ OUTRO TUTORIAL !

FONTE:Como criar um rodapé flutuante em WordPress