Nossos leitores frequentemente nos perguntam se é possível exibir ícones de arquivos anexados no WordPress. Adicionar ícones de arquivos ajuda os usuários a identificar o tipo de arquivo que estão baixando rapidamente, o que é ótimo para ajudá-los a entender melhor seu conteúdo.
Testei diferentes métodos para adicionar ícones de arquivos, e eles fazem uma diferença notável na experiência do usuário. Os visitantes podem identificar instantaneamente se estão baixando um PDF, um documento do Word ou um arquivo ZIP.
Neste guia, mostraremos como adicionar facilmente ícones de arquivos anexados no WordPress. Com nossos passos, você pode exibir ícones de arquivo que correspondem ao tipo de arquivos em seu site.
Resposta Rápida: Como Adicionar Ícones de Arquivos Anexados no WordPress
Você pode adicionar ícones de arquivos anexados no WordPress usando um plugin como MimeTypes Link Icons (método mais fácil) ou adicionando manualmente fontes de ícones com Font Awesome. Ambos os métodos exibem indicadores visuais ao lado dos links de download de arquivos, ajudando os visitantes a reconhecerem os tipos de arquivo instantaneamente.
O método do plugin funciona automaticamente para todos os tipos de arquivo suportados. O método Font Awesome oferece mais controle sobre o estilo e a personalização dos ícones.
O Que São Ícones de Arquivos Anexados?
Ícones de arquivos anexados são pequenos indicadores visuais (como símbolos de PDF, DOC ou ZIP) que aparecem ao lado dos links de download. Eles ajudam os visitantes a reconhecer instantaneamente qual tipo de arquivo eles estão prestes a baixar, sem ter que ler a extensão do arquivo.
Por padrão, o WordPress permite que você faça upload de imagens, áudio, vídeo e outros documentos. Você também pode habilitar tipos de arquivo adicionais para serem enviados no WordPress.
Quando você carrega um arquivo através do uploader de mídia e o adiciona a uma postagem ou página, o WordPress incorporará formatos suportados como imagens, áudio e vídeo. Isso significa que ele exibirá automaticamente uma prévia ou um reprodutor de mídia em vez de apenas um link.
Para todos os outros arquivos, ele apenas adicionará um nome de arquivo como texto simples e o vinculará à página de download ou anexo.
Na captura de tela acima, adicionamos um arquivo PDF e um arquivo Docx. No entanto, é difícil para um usuário adivinhar qual tipo de arquivo ele estaria baixando.
Se você envia regularmente diferentes tipos de arquivo, exibir um ícone ao lado do link facilita para seus usuários encontrarem o tipo de arquivo que procuram.
É isso que mostraremos como fazer a seguir.
Qual Método Você Deve Usar?
Antes de entrarmos nos tutoriais, aqui está uma rápida comparação de ambos os métodos para que você possa escolher o certo para o seu site:
| Recurso | Método 1: Plugin | Método 2: Font Awesome |
|---|---|---|
| Facilidade de Uso | Muito Fácil | Intermediário |
| Tempo de Configuração | Segundos | Manual por postagem |
| Personalização | Limitado | Alta |
| Melhor Para | Iniciantes | Usuários Avançados |
Eu recomendo o Método 1 para a maioria dos usuários porque é mais rápido e funciona em todo o site. Vamos começar com ele.
Método 1: Adicionar Ícones de Arquivos Anexados no WordPress Usando um Plugin
A maneira mais fácil de adicionar ícones de tipos de arquivo é usando um plugin do WordPress como o MimeTypes Link Icons. É um plugin gratuito, muito fácil de usar e permite adicionar ícones para diferentes tipos de arquivo.
A primeira coisa que você precisa fazer é instalar e ativar o plugin MimeTypes Link Icons. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.
Após a ativação, você precisa visitar a página Configurações » Ícones de MimeType para configurar as opções do plugin.
O plugin permite que você escolha o tamanho do ícone, bem como entre os formatos de imagem PNG e GIF. Recomendamos o uso de ícones PNG, pois eles fornecem melhor qualidade para indicadores de tipo de arquivo.
Em seguida, você precisa escolher o alinhamento do ícone e quais tipos de arquivo exibirão o ícone.
Depois disso, você pode rolar para baixo e selecionar os ícones a serem exibidos em seu site. Por exemplo, existem ícones para tipos de arquivo como PDF, PPT, CSV, AVI, RPM, TXT e muito mais.
Testei este plugin em nosso site de demonstração com arquivos PDF, DOCX e ZIP. Os ícones apareceram automaticamente em segundos após a ativação, sem configuração adicional necessária.
Em seguida, você pode rolar para baixo até a seção Configurações Avançadas.
Aqui, você encontrará a opção de mostrar o tamanho do arquivo ao lado do link de download. Ele está desativado por padrão, pois pode consumir muitos recursos.
Quando terminar, lembre-se de clicar no botão 'Salvar Alterações' para salvar suas configurações.
Agora você pode editar uma postagem ou página e adicionar um link de download de arquivo usando o uploader de mídia. Simplesmente visualize sua postagem e você verá o ícone do arquivo ao lado do link de download.
Método 2: Usando Fontes de Ícones para Arquivos Anexos no WordPress
Neste método, usaremos uma fonte de ícones para exibir um ícone ao lado do link do arquivo anexo. Este método oferece mais controle sobre a estilização do ícone e funciona bem se você já estiver usando o Font Awesome em seu site.
Font Awesome é uma biblioteca popular de ícones que fornece milhares de ícones vetoriais escaláveis. Estes são gráficos que permanecem nítidos e claros, não importa o quanto você os redimensione.
Este método envolve a instalação do plugin Font Awesome e, em seguida, a adição manual do código do ícone às suas postagens.
A primeira coisa que você precisa fazer é instalar e ativar o plugin Font Awesome. Se precisar de ajuda, consulte nosso guia sobre como instalar um plugin do WordPress.
Após a ativação, você pode ir para a página Configurações » Font Awesome no seu painel do WordPress. Aqui, você pode editar as configurações gerais do plugin, como escolher se ele deve usar ícones pro ou gratuitos.
Em seguida, você pode editar uma postagem ou página onde deseja adicionar um link de anexo.
No editor de conteúdo, você adicionará o código HTML do ícone antes do seu link de download. Isso exibirá o ícone ao lado do nome do arquivo.
Observação: Sempre que você adicionar código personalizado ou trechos de HTML ao seu site, é uma boa ideia criar um backup primeiro. Para trechos mais complexos, recomendamos o uso do plugin WPCode para uma implementação segura.
Para encontrar esse código HTML, você pode visitar o site da biblioteca de ícones do Font Awesome. Simplesmente procure por um ícone na barra de pesquisa e clique na imagem.
Em seguida, você verá diferentes variações do ícone e seu código HTML.
Clique no código para copiá-lo.
Depois disso, você pode retornar ao editor de conteúdo do WordPress do seu site e clicar no sinal de ‘+’ para adicionar um bloco de HTML Personalizado.
A partir daqui, basta colar o código do seu ícone no bloco.
Quando terminar, prossiga e publique ou atualize sua página.
Agora você pode visitar seu site para ver o ícone recém-adicionado para o tipo de arquivo de anexo.
Bônus: Venda Arquivos Digitais para Ganhar Dinheiro Online
Agora que você sabe como adicionar ícones de tipo de arquivo anexo, pode ir um passo adiante e vender diferentes arquivos como downloads digitais. Isso permite que você ganhe dinheiro online ou incentive os usuários a se inscreverem em sua newsletter em troca de um recurso gratuito.
A melhor maneira de vender produtos digitais é usando Easy Digital Downloads. É uma das melhores plataformas de eCommerce para WordPress, e é muito fácil de usar e configurar.
Easy Digital Downloads integra-se facilmente com diferentes serviços de pagamento como PayPal, Stripe, Apple Pay e Google Pay.
Além disso, você pode simplesmente fazer upload de arquivos digitais que gostaria de vender e começar a ganhar dinheiro online.
O plugin permite que você adicione detalhes como um título e descrição, defina o preço do download, escolha uma imagem de download e muito mais.
Para mais detalhes, consulte nosso guia sobre como vender downloads digitais no WordPress.
Perguntas Frequentes Sobre Ícones de Arquivo no WordPress
Ícones de arquivo deixam meu site lento?
Não, os ícones de arquivo são arquivos de imagem muito pequenos que têm um impacto mínimo na velocidade do site. O plugin MimeTypes Link Icons usa arquivos PNG ou GIF leves, e os ícones Font Awesome são baseados em vetores, o que significa que são otimizados para desempenho.
Posso personalizar as cores e estilos dos ícones?
Sim, se você usar Font Awesome, poderá personalizar cores, tamanhos e estilos de ícones usando CSS (Cascading Style Sheets). Este é o código usado para estilizar seu site. O método do plugin (Método 1) usa designs de ícones predefinidos que correspondem a tipos de arquivo comuns.
Os ícones de arquivo funcionam em dispositivos móveis?
Sim, os ícones de arquivo são exibidos corretamente em dispositivos móveis. Os ícones são responsivos, o que significa que eles se ajustarão automaticamente para ter uma boa aparência em diferentes tamanhos de tela.
Quais tipos de arquivo podem exibir ícones?
O plugin MimeTypes Link Icons suporta muitos tipos de arquivo comuns, incluindo:
- PDF, DOC e DOCX
- XLS e XLSX
- PPT e PPTX
- ZIP, MP3 e AVI
Você pode selecionar exatamente quais tipos de arquivo habilitar na página de configurações do plugin.
Recursos Extras
Os seguintes são alguns recursos úteis adicionais que você pode achar úteis na gestão do seu site WordPress e mídia:
- Como Usar o WordPress para Gerenciamento de Documentos ou Arquivos
- Como Encontrar Seus Rascunhos Salvos no WordPress (Guia para Iniciantes)
- Como Fazer Upload de Arquivos PDF para o Seu Site WordPress
- Como conectar vários sites WordPress juntos (3 maneiras)
Esperamos que este artigo tenha ajudado você a aprender como adicionar ícones de arquivos anexos no WordPress. Você também pode querer ver nosso guia sobre como incorporar PDFs, planilhas e outros arquivos em postagens de blog do WordPress e nossa seleção especializada dos melhores plugins de log de atividades e rastreamento do WordPress.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Mrteesurez
Este tutorial é útil! Adicionar ícones de tipo de arquivo realmente melhora a experiência do usuário, facilitando para os visitantes identificarem anexos antes de baixá-los.
Eu fiz isso no meu site, e isso instantaneamente fez meu conteúdo parecer mais profissional. Seu guia passo a passo torna o processo tão simples. Quero perguntar como adicionar ícones afeta o tempo de carregamento da página do meu site?
WPBeginner Support
Não deve ter um grande efeito na velocidade do seu site.
Admin
Mrteesurez
Obrigado pela resposta. Perguntei porque usar ícones geralmente requer o download ou carregamento de bibliotecas de fontes como Font Awesome ou Google Fonts, o que pode impactar a velocidade de um site. Agradeço por me informar que isso não tem um grande efeito na velocidade do meu site.
Isha Singh
Não estou familiarizado com o WordPress. Mas enquanto leio seu post, parece que sei tudo sobre o WordPress.
Enc
Você está recomendando seriamente um plugin que não é atualizado há um ano?
WPBeginner Support
Sim, estamos. Consulte nosso artigo você deve instalar plugins não testados com sua versão do WordPress para mais informações sobre este tópico.
Admin