Muitas vezes não nos damos conta de que simples detalhes pode dar um maior conforto para nossos leitores, como uma simples seta de voltar ao topo.
Em geral o blogs são muito extensos na altura, as vezes 3, 4 dobras e depois do usuário chegar ao final e quiser voltar ao topo terá que rolar a página manualmente. Então por que não facilitar essa ação?
O que vamos ver hoje você aprende em um curso de html básico e o que faremos apenas é colocar a codificação dentro de uma função que será incluÃdo no arquivo functions.php  para não precisar manipular diretamente o código nas página do WordPress.
Aproveite e baixe esse pacote de Ãcones de setas setas.zip, descompacte e coloque dentro da subpasta “uploads” dentro da pasta  ”wp-content”. Se ao descompactar ficarem duas pastas “setas” uma dentro da outra, deixe apenas a que contém as imagens.
A nossa função é muito simples e usa basicamente HTML. Porém só funcionará no IE se o seu tema tiver definido como HTML5, com essa tag de definição “<!DOCTYPE html>” pois usa a propriedade de posicionamento “fixed” que não funciona se a página estiver definida como HTML4 no IE e por padrão, pelo menos até a versão 9 do IE, se nenhuma tag de definição estiver presente  o documento será considerado como HTML4.
Vamos ver a nossa função então:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
//|||||| FUNCAO VOLTAR AO TOPO ||||||
function topo(){
?>
<style type="text/css">
.voltar{
position:fixed;
bottom:0px;
right:17px;
opacity:0.65;
-moz-opacity: 0.65;
filter: alpha(opacity=65);
}
</style>
<a name="topo" style="font-size:0p"></a>
<a href="#topo">
<img src="<? bloginfo('url');?>/wp-content/uploads/setas/seta-vermelha1.png" class="voltar" alt="voltar ao topo" width="48" height="48" border="0">
</a>
<?
}
add_filter ('wp_head', 'topo');
//|||| FIM FUNCAO VOLTAR AO TOPO ||||
A função será incluÃda em tempo real no cabeçalho “wp_head”. Primeiro colocamos uma pequena  CSS apenas para configurar a imagem da seta.
Depois será colocado um link vazio com a propriedade name definida como “topo” esse link não irá aparecer na página, serve apenas de referência para onde o link da seta terá que direcionar.
Em seguida o link que contém a seta, e observe que o endereço (href) contém um sinal “#” que represente a própria página e seguido do nome do link que ficará invisÃvel no topo e é ele quem será chamado ao clicar no link da seta, fazendo com que a página role para cima.
Agora observe que o link com a seta ficará fisicamente no cabeçalho junto com o outro link, porém será movido para o canto inferior direito ao abrir a página, através do posicionamento CSS e veja que também foi aplicado um nÃvel de transparência para que no caso de ficar sobre uma pequena porção de texto, este ainda seja visÃvel.
Agora é só incluir o código no arquivo “functions.php” do seu tema, se não souber como fazer pode ler o seguinte tutorial: Retirando o complemento da tag more no wordpress e aprenderá também a retirar o complemento no endereço da página quando o usuário clica em “continuar lendo” no resumo do post e que pode ser prejudicial ao SEO do seu blog.
Até a próxima.
Dermeval,
Gosto dessa função, no meu blog utilizo uma barra fixa no top, para facilitar a navegação, além de um link de voltar ao topo.
Abraços,
Digo Cabral