Porque Usar Shortlinks?

Como o número de caracteres nas redes é bem limitado – 140 caracteres no Twitter por exemplo – algumas URLs ultrapassam esse limite, perdendo a utilidade em redes sociais para compartilhamento. Isto acaba sendo um ponto negativo quando se tem um post ótimo, que deve ser compartilhado.

Até pouco tempo atrás a solução era usar um encurtador de urls para compartilhar o link, era – e ainda é – um pouco cansativo ter de abrir o site do encurtador, colar o link original, pegar o novo link e sair distribuindo. Esta era a solução!!!!

Além disso, faltaram alguns pontos que quase ninguém parou para pensar, sim estou falando sobre SEO e os encurtadores…faltaram questões como:

• O redirecionamento é 301, 302…?
• O site vai receber o link juice da URL encurtada?
• O Page Rank vai para o encurtador ou para o site?
• etc…

Com os shortlinks providos pelo WordPress, você não vai precisar fazer responder a estas perguntas ou até mesmo ter de refazer sempre o mesmo processo em um encurtador. Outro ponto é que o WordPress 3.0 também gera automaticamente um link no cabeçalho (antes de fechar a tag </head>) com o shortlink, seria algo +/- assim:

<link rel="shortlink" href="http://www.seusite.com/?p=717" />

O segredo por trás desta funcionalidade é justamente o ID do post, como você pode ver – /?p=717.

O Shortlink

Há duas formas de usar o shortlink, diretamente pelo editor de posts no administrador clicando em pegar link permanente ou através de funções especiais para este fim. O modo “gráfico” você pode ver na imagem abaixo:

Funções Para Shortlink

A função nativa do WordPress para shortlink é wp_get_shortlink(), mas não existe nenhuma documentação ou coisa do tipo para esta função, então vamos considerar que é uma função interna e não distribuida do WordPress . É bem útil quando você precisa somente do link para ser usado em alguma outra funcionalidade do site.

$shortlink = wp_get_shortlink();
echo $shortlink;

Uma dica é usar a função acima juntamente com a função the_title(); para criar um link de compartilhamento no Twitter por exemplo. De modo bem simples seria algo mais ou menos assim:

<a href="http://twitter.com/home?status=<?php the_title(); ?> <?php echo wp_get_shortlink(); ?>">Twittar</a>

Agora se você quer uma função que crie um link para o post é so utilizar a função the_shortlink(), que também é nativa do WordPress:

the_shortlink();

Customizando a função:

the_shortlink('Mini-link', 'Link resumido para este post');

Removendo o Link de Cabeçalho Shortlink

WordPress gera automaticamente o link no cabeçalho que citei no inicio do post. Se você não deseja que o WordPress gere este link, é só usar a função remove_action. Copie e cole o código a seguir no arquivo functions.php ou onde você quiser – só se você souber o que está fazendo – para remover a meta-tag.

remove_action('wp_head','wp_shortlink_wp_head', 10, 0);
//Se quiser adicionar é so alterar "remove_action" por "add_action", mais isso não tem funcionalidade nenhuma oO

Era isso o que tinha para falar, mais antes de terminar o post vou deixar alguns links para maiores detalhes sobre as funções, os parâmetros que elas aceitam e etc…ai você vai ficar fera em shortlink:

Códigos de redirecionamento
Referência da função the_shortlink();
Referência da função the_title();
Referência da função remove_action();
Referência da função add_action();

Agora é so compartilhar que aqui no site já esta sendo usado os shortlinks . Até a próxima.

A seguir vou listar os post anteriores a este:
Novas funções(functions) do WordPress 2.8
Novas funções(functions) do WordPress 2.8 – Parte 2

automatic_feed_links()

Função adicionada na versão 2.8. Consiste básicamente em gerar ou não o Feed RSS no template, ou seja, se ao usar este template vai ter o não o feed RSS:

automatic_feed_links(false);//sem saida rss
automatic_feed_links();//com saida rss...o mesmo que true

Por padrão ela está ativada. Caso você deseje desativar a geração automática do feed RSS edite o arquivo functions.php e adicione esta função ou edite se ela já estiver presente.

comments_open()

Função usada para checar se os comentários para o post estão abertos ou não. Retorna true ou false:

if(comments_open()){
//Faz isso
}else{
//Faz outro isso 
}

Obviamente esta função é usada no arquivo single.php e/ou comments.php

pings_open()

Esta é bem parecida com a função commenst_open()…esta função checa se os pings estão abilitados no post em questão. Retorna true ou false:

if(pings_open()){
//Faz isso
}else{
//Faz outro isso 
}

é usada no arquivo single.php.

the_modified_author()

Algumas vezes um autor desenvolve um post mais ele precisa de muitas alterações…devido a essas alteração pode ser interressante atribuir a autoria do post ao administrador que realizou estas alterações (sacanagem ein, rsrs). Pois bem esta função faz exatamente isto. Geralmente você usaria a seguinte função para exibir o nome do autor:

Este post foi escrito por <?php the_author(); ?>

Agora com esta nova função para fazer a “sacanagem” citada acima, rsrs você irá usar:

Este post foi escrito por <?php the_modified_author(); ?>

Se ninguém alterou o post o autor exibido será o autor original do post

Existem muitas funções novas que ainda não falei aqui, mas, para o post não ficar grande e cansativo veja as principais alterações nesta página.

WordPress 2.9

Como vocês já devem ter percebido neste post e nos posts anteriores eu só falei de funções que se aplicam ao tema/template. Agora não será diferente. Para não ficar só no tema recomendo que vejam este video do inexorável tratando das novidades do wordpress 2.9.

Miniaturas do post

Até as versões anteriores para se conseguir uma miniatura do post era necessário usar um campo personalizado, o que para um usuário leigo torna difícil e complicado. A partir da versão 2.9 dos desenvolvedores tiveram a “brilhante” idéia de criar miniaturas para o post. Agora não temos mais que usar campos personalizados! Conversa fiada a parte vamos ver como funciona esta novidade:

Localizado na parte direita da página editar posts do wordpress há uma área com a miniatura do post. Se você provalvelmente não esta localizando esta área não se preocupe, vou dizer o porque.

Esta funcionalidade só está dispónivel em algum temas. Isso porque ela é ativada ou não através do template. Para ativar esta função é necessário editar o arquivo functions.php e adicionar o seguinte código:

add_theme_support( 'post-thumbnails' );

Pronto! Agora se você voltar ao admin já deverá ver esta nova área ao adicionar ou editar um post. O processo para adicionar a miniatura é o mesmo usado para adicionar imagens, a não se que em vez de clicar em inserir no post, você irar clicar no botão ao lado – Usar como miniatura :

Esquecendo um pouco a parte do admin vamos para o principal mesmo que a programação do template, nosso foco. Para exibr a miniatura usamos a seguinte função.

the_post_thumbnail()

As configurações básicas desta função são:

<?php the_post_thumbnail( $size, $attr ); ?>
//$size = Tamanho da imagem
//$attr = atributos para a imagem

Para o tamanho da imagem existem alguns valores ‘pré-definidos’ (você pode defini-los através do admin, no caminho Configurações » Media). Os valores são thumbnail, medium e large. Para valores personalizados utiliza um array. Exemplos:

the_post_thumbnail();            //Padrão / Original
the_post_thumbnail('thumbnail');       // Miniatura tamanho pequeno
the_post_thumbnail('medium');          // Miniatura tamanho médio
the_post_thumbnail('large');           // Miniatura tamanho grande?

the_post_thumbnail( array(100,100) );  // 100px por 100px
the_post_thumbnail( array(150,200) );  // 150px por 200px

Os atributos são definidos em uma array, são atributos padrões do HTML:

//Imagem com 60x60 pixels e classe borda-azul
the_post_thumbnail(array(60,60), array('class' => 'borda-azul'));

//Imagem com o titulo(alt) personalizado
the_post_thumbnail(array(60,60), array('alt' => 'Minha imagem'));

//Imagem com a classe borda-azul e titulo(alt) personalizado
the_post_thumbnail(array(60,60), array('alt' => 'Minha imagem', 'class' => 'borda-azul'));

O seu uso não se limita a um arquivo em si. a única dependência é que tenha o loop de um post:

//Exemplo de loop para um post
<?php while( have_posts() ) : the_post(); ?>
      <div class="entry">
            <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
            <?php the_post_thumbnail('large'); ?>
            <?php the_content(); ?>
      </div>
<?php endif; ?>

Espero que tenham gostado! Até a próxima e não deixem de comentar!

Depois leia também

WordPress Versão 2.8
WordPress Versão 2.9
Most Notable Features in WordPress 2.9
Template Tags/the post thumbnail
Everything you need to know about WordPress 2.9’s post image feature,
The Ultimative Guide For the_post_thumbnail In WordPress 2.9

Já postei este tutorial uma vez (aqui) mais este estava com alguns “bugs” e era restrito somente ao wordpress, então hoje decidi fazer este post sobre favicons, beneficios e como inserir favicons que funcione no IE(Internet Explorer) e em todos ou outros navegadores vai ser bem completinho:

O que é favicon?

Favicon nada mais é do que aquelas pequenas imagens que aparecem no navegador ao lado do endereço do site. Mais para maiores e melhores detalhes veja a descrição do Winkipédia:

Favicons (palavra derivada de favorite (favorito) e icon (ícone)) são pequenas imagens no formato *.ico com de cerca de 16×16 pixels que ficam guardados em um site para visualização pelo navegador. Em alguns navegadores como Internet Explorer até a versão 6, só exibem os favicons quando um site é adicionado aos favoritos. Neste caso, apenas no menu correspondente aos favoritos pode-se encontrar a imagem. Em outros navegadores como Firefox, Opera e Internet Explorer 7⁽⁺⁾, os favicons podem ser encontrados também nas abas e na barra de endereço.

Os favicons também tem teor de acessibilidade pois ajudam um usuário comum a identificar uma página quando ela está exibida em uma lista ou em uma barra de abas. Visando isto, muitos favicons são imagens simplificadas do logotipo da marca que representam.

Na ausência de um favicon, os navegadores exibem seu próprio ícone ou um ícone padrão como uma folha em branco.

Beneficios

Alguns beneficios que podemos conquistar com o uso de uma favicon são os listados abaixo:

• É otimo para marcar seu site tornando a localização deste mais fácil e de brinde tem até um destaque a mais ;
• Seu site vai ganhar uma aparência mais profissional e exclusiva que pode levar a mais links para seu site melhorando a parte do SEO (aqui já entra PR).

Preparando o terreno

Como tudo o que vamos fazer tem um requisito este não deixa de ser diferente. Para este processo precisamo de uma imagem no formato .ico com 16×16 pixels que pode ser feita usando o photoshop ou fireworks ou o seu programa de preferência. Para o processo que explicarei agora recomendo que faça a imagem em um formato grande uns 100×100 pixels deve ser o suficiente.

Com a imagem em mãos acesse este link e faça o upload de sua imagem, não precisa mudar nada, mais se quiser se aventurar fique a vontade…. Observe que logo abaixo você terá um preview de sua logo, algo parecido com isso:

Observe que há ainda algumas partes que ficaram imperfeitas…para isso temos um pouco acima deste preview um editor de favicons. Ajuste certinho sua favicon e faça o download.

Se você não quer fazer uma favicon, no mesmo site da www.favicon.cc há varias favicons grátis para download.

Agora começa a brincadeira…

Com a favicon definida vamos partir pra o upload e a programação que tambem é bem fácil. Upe sua imagem no local que deseja, recomendo que seja na pasta raiz de seu site ou se você usa o WordPress, Joomla ou Magento veremos o processo logo mais.

Como inserir uma favicon que funcione no Internet Explorer

Um do maiores problemas não só com favicon mais com tudo o que vamos fazer é bendito IE. Graças a Deus até para o IE temos uma solução…o principal problema é que  o IE “não consegue entender” que uma favicon no formato png ou gif é realmente um favicon,  por isso que mais acima ja fizemos o processo para deixa no formato .icon

Para o código temos que ter 2 linhas:

<link rel="shortcut icon" href="http://www.mateussouza.com/favicon.ico" />
<link rel="icon" href="http://www.mateussouza.com/favicon.ico" type="image/x-icon" />

Porque 2 linhas? elas fazem exatamente a mesma coisa mais como dizem uma é para o Internet Explorer e a outra é para o Firefox(firefox aqui se refere aos demais navegadores).  Copie e cole este código antes de fechar a tag <head>(</head), altere o caminho (href) para o caminho correto de sua favicon, salve o arquivo, teste e veja funcionando.

Como inserir favicon no WordPress

Não tem segredo:

Primeiramente Salve a favicon na pasta do seu tema.ex:
../wp-content/themes/seutema/

Agora temos que editar o arquivo header.php do tema que está em uso :

<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />
<link rel="icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" type="image/x-icon" />

Este código em php pegara o caminho do template e incluira no href, produzirá algo semelhante a isto:

<link rel="shortcut icon" href="http://www.mateussouza.com/wp-content/themes/mateussouza/favicon.ico" />
<link rel="icon" href="http://www.mateussouza.com/wp-content/themes/mateussouza/favicon.ico" type="image/x-icon" />

Agora salve, e faça o upload novamente para o seu servidor se você não editou diretamente. Pronto.

Como Inserir ou alterar a favicon do Joomla

Para o Joomla o processo é bem parecido. Faça o upload na pasta de seu tema ../templates/seutema/ e cole o código a seguir no arquivo index.php:

<link rel="shortcut icon" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/favicon.ico" />
<link rel="icon" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/favicon.ico" type="image/x-icon" />

Observe se já não existe um código parecido, se tiver apenas teste, se já estiver com a favicon certa nem é necessário editar o arquivo.

Obs. Alguns site falam que é necessário fazer o upload da favicon na pasta imagens também…creio que este processo seja necessário para a versão 1.0 do Joomla. Por via das dúvidas recomendo que upe sua favicon lá também.

Como Inserir ou alterar a favicon de sua loja Magento

E pra acabar mais não menos importante vamos para o processo em um loja Magento. Aqui o processo é bem mais simples apenas faça o upload para a pasta raiz de sua loja e também para a pasta de seu template. Observe os caminhos:

Se você usa o template default, sua favicon está localizada em:
/skin/frontend/default/default/favicon.ico

Se você usa um template personalizado sua favicon está localizada emt:
/skin/frontend/default/SEU_ TEMA/favicon.ico

Teste e confira se não deu nada de errado.

Considerações Finais

É possivel que já tenha uma favicon nos diretorios listados neste tutorial, se houver apenas substitua por sua nova favicon.

Pode acontecer de sua favicon não ser alterada no mesmo momento da alteração devido ao cache de seu website. Limpe-o ou espere algum tempo e teste novamente. Uns F5 também ajuda(na verdade é Ctrl+F5 ).

Até a próxima.

Se você ainda não leu o primeiro post desta série, eis ai o link:

Parte 1

is_page ou is_page_or_sub(); function

Vamos iventar uma situação, talvez eu acerte na mosca o que você precisa ou então passe raspando, rsrs. Em alguns projetos é necessário um estilo diferenciado ou uma função especial para uma determinada página. Peguemos como exemplo uma página de portfólio. Até o wordpress 2.7 você declararia o seguinte código em php para criar esta função especial ou seja lá o que for:

<?php if(is_page('portfolio')) : ?>
//Se for apareça, ou faça isto...
<?php else  >
//E se caso eu usar o else...Se não(else), apareça ou faça isto...
<?php endif; ?>

Para aqueles que ainda nem conhecem a função is_page(). recomendo que dêem uma lida na documentação do wordpress, mais eu vou explicar rapidamente. Esta função irá retornar valores booleanos (verdadeiro ou falso / true ou false). se for verdadeiro será executado a sua função que você estabelecer, caso seja falso não executará ou executará uma função diferente. Alem de usar o nome de página podemos usar o ID, o slug da página ou todos de uma vez. Observe:

<?php is_page(42);
// Usando o ID.

is_page('Contato');
// Usando o nome ou titulo da página.

is_page('about-me');
// usando o slug da página.

is_page(array(42,'about-me','Contact'));
// Ou usando todos....é útil para uma função que vai em mais de uma página.
 ?>

Agora voltando a situação anterior:
-Rá, tem um probleminha…se esta página for uma sub_pagina da página Portfólio?. Até então você teria que fazer uma gambiarra, ou um monte de if, mais fique feliz, seus problemas acabaram . em vez de usar somente is_page use is_page_or_sub.

<?php if(is_page_or_sub('portfolio')) : ?>
//Se for apareça, ou faça isto...
<?php else  >
//E se caso eu usar o else...Se não(else), apareça ou faça isto...
<?php endif; ?>

Para uma explicação mais “técnica”, a função irá checar se a página tal ou uma sub_pagina (child ) da pagina tal existe, se existir ele executa o código.
Espero que tenham entendido, qualquer dúvida pode perguntar, só fazer um comentário no post.

Depois leia também:

Documentação do WordPress – Função Is_page
Documentação do WordPress – Lista de Funções

Até a próxima.

Voltando para as novas função do wordpress 2.8 mais especificamente para o desenvolvimento de templates, existem algumas functions bacanas e que vem a calhar, dentre as que eu conheço vou falar sobre:

1. body_class(); Function
2. is_page ou is_page_or_sub(); Function
3. is_category_or_sub Function
   
4. Talvez mais…

Vai ser muita coisa então vou dividir em partes pra não ficar cansativo. Hoje vamos falar sobre a function body_class();.

Function body_class();.

Funciona basicamente assim, cada pagina tera uma classe que a identifica, exemplo:

<body class="single postid-64">

ou seja, uma pagina com 2 classe para maior manipulação. Mais pra que isso você pode me perguntar…é mais para personalização com css, neste exemplo podemos criar um fundo(background) diferente para as paginas de posts (single) ou então somente para o post de numero 64.
outro exemplo desta função seria para usuarios registrados, ficaria algo mais ou menos assim:

<body class="single postid-64 logged-in">

confira a lista completa de possibilidades:

• rtl
• home
• blog
• archive
• date
• search
• paged
• attachment
• error404
• single postid-(id)
• attachmentid-(id)
• attachment-(mime-type)
• author
• author-(user_nicename)
• category
• category-(slug)
• tag
• tag-(slug)
• page
• page-parent
• page-child parent-pageid-(id)
• page-template page-template-(template file name)
• search-results
• search-no-results
• logged-in
• paged-(page number)
• single-paged-(page number)
• page-paged-(page number)
• category-paged-(page number)
• tag-paged-(page number)
• date-paged-(page number)
• author-paged-(page number)
• search-paged-(page number)

Como usar esta função?

Antes de mais nada, precisamos localizar a tag body em nosso template, geralmente fica no arquivo header.php, feito isso subistitua <body> por:

<body <?php body_class(); ?>>

salve o arquivo e pronto, nossa função ja está funcionando.

Usando estilos dinâmicos – CSS

Geralmente quando vamos fazer o css de um website fazemos assim:

body{
background: #dddddd;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
color: #1c1d21;}

Agora considere o seguinte, supondo que o a classe gerada seja uma página de post, logo será .single. O que temos que fazer:

body.single{
background: #aaaaaa;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
color: #1c1d21;
}

Neste exemplo eu somente mudei o fundo de #dddddd para #aaaaaa…lembrando que o backgroud com a cor #aaaaaa aparecerá somente nas paginas de post. Pegou o espírito da coisa? fácil não?

Espero que tenham entendido, qualquer dúvida é só perguntar, até a próxima.

Tem de tudo…HTML/XHTML, CSS, JavaScript (incluindo MooTools e jQuery), e mais alguns.Espero que ajude a todos:

HTML/XHTML

1. HTML Help Sheet

• PDF

2. HTML Cheat Sheet

• PDF
• PNG

3. HTML Character Entities Cheat Sheet

• PDF
• PNG

4. XHTML Cheat Sheet v. 1.03 – PDF

CSS

5. CSS Cheat Sheet (V2)

• PDF
• PNG

6. CSS Cheat Sheet

• PDF
• HTML

7. CSS Shorthand Cheat Sheet

• PDF

8. CSS Level 1 Quick Reference – PDF

9. CSS Level 2 Quick Reference – PDF

10. CSS2.1 Quick Reference Card – PDF

11. CSS2 Reference Guide – PDF

JavaScript

12. JavaScript Cheat Sheet

• PDF
• PNG

13. Addison-Wesley’s JavaScript Reference Card – PDF

14. JavaScript and Browser Objects Quick Reference

• PDF

15. The most common DOM methods at a glance – PDF

16. JavaScript Quick Reference Card/Cheatsheet

• PDF

17. mootools 1.2 cheat sheet

• PDF

18. jQuery Cheatsheet

• PNG

19. jQuery 1.2 Cheat Sheet

• PDF

20. jQuery Visual Map – PNG

Variados

21. RGB Hex Colour Chart

• PDF
• PNG

22. The Web Developer’s SEO Cheat Sheet

• PDF

23. The WordPress Help Sheet

• PDF

Alias vamos ao creditos:
Six Revision – Excelente site, apesar de ser em inglês…recomendo a todos

Até a próxima.

A respostas para o suas dúvidas esta na imagem abaixo:

até a proxima e FELIZ ANO NOVO A TODOS

Primeiramente vamos ao requisitos para este processo:

1. Teremos que ter uma imagem no formato .ico com 16×16 pixels.
2. Pelo Amor de Deus, faça uma favicon relacionada ao site, se o site é de games não vá fazer uma favicon de um site de vídeos né;
3. Salvar esta imagem com o nome “favicon.ico”.

Se você não quer fazer uma favicon no site www.favicon.cc há varias favicons grátis para download.

Feito isto vamos a instalação :

Salve a favicon na pasta do seu tema.ex: ../wp-content/themes/seutema/

Agora teremos que editar nosso arquivo header.php adicionando esta linha de código antes de </head>:

<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />;

Agora salve, e faça o upload novamente para o seu servidor se você não o editou diretamente.Pronto é só isso, até a próxima.

Atualização 20/04/2010

Este assunto foi abordado mais uma vez um em post mais detalhado…recomendo que visite o link a seguir:

Como colocar favicon em seu website