Imagens e outros arquivos de mídia são uma parte importante de qualquer site WordPress. Para usá-los eficazmente, ajuda a ter uma compreensão firme de como a biblioteca de mídia WordPress funciona.

Este prático recurso de WordPress permite que você armazene e gerencie suas imagens e outras mídias ao longo do tempo. Com algum conhecimento interno e alguns truques simples, há muito que você pode fazer para melhorar o seu site através da sua Biblioteca de Mídia.

Neste guia abrangente, nós o acompanharemos por tudo o que há para saber sobre a Biblioteca de Mídia WordPress, incluindo como importar e baixar conteúdo. Cobriremos também edição de imagens, gerenciamento de arquivos a longo prazo e quatro hacks para incorporação de funcionalidades avançadas.

Vamos começar!

Uma Introdução à Biblioteca de Mídia WordPress

Em sua essência, sua Biblioteca de Mídia WordPress é exatamente o que seu nome implica: um catálogo de todos os arquivos de mídia que você carregou no seu site:

Biblioteca de Mídia WordPress
Biblioteca de Mídia WordPress

O WordPress é capaz de hospedar uma variedade de tipos de mídia, inclusive:

  • Imagens (. jpg, . jpeg, . png, . gif, e . ico).
  • Arquivos de áudio (.mp3, .m4a, . ogg, e . wav).
  • Vídeos (.mp4, .m4v, . mov, . wmv, . avi, . mpg, . ogv, .3gp, e .3g2).
  • PDFs.
  • Documentos Word.
  • Planilhas Excel.
  • Apresentações em PowerPoint.
  • Documentos do Adobe Photoshop.

Ele também tem alguns recursos limitados de edição de fotos, para que você possa fazer os ajustes necessários diretamente do seu painel.

Infelizmente, o WordPress ainda não suporta imagens de webp fora da caixa.

Para acessar sua Biblioteca de Mídia, basta clicar em Mídia na barra lateral de sua administração a qualquer momento:

Acesso à Biblioteca de Mídia WordPress
Acesso à Biblioteca de Mídia WordPress

Há algumas opções básicas disponíveis aqui.

Primeiro, você pode determinar se deseja ver seus arquivos em uma visualização em lista ou grade, clicando nos ícones relevantes:

Opções de visualização da Biblioteca de Mídia WordPress
Opções de visualização da Biblioteca de Mídia WordPress

Você também pode filtrar seus arquivos usando os menus drop-down:

Filtragem de arquivos da Biblioteca de Mídia WordPress
Filtragem de arquivos da Biblioteca de Mídia WordPress

O primeiro menu permite que você veja sua mídia por tipo, enquanto o segundo irá filtrar o conteúdo de sua biblioteca pelas datas em que foram carregadas.

Você também pode usar a barra de busca para procurar por arquivos específicos pelo nome:

Barra de busca da Biblioteca de Mídia WordPress
Barra de busca da Biblioteca de Mídia WordPress

Finalmente, há também um botão Bulk Select. Este recurso permite apagar vários arquivos da sua instalação do WordPress de uma só vez:

Opção de seleção em massa na Biblioteca de Mídia WordPress
Opção de seleção em massa na Biblioteca de Mídia WordPress

Isto abrange todas as funcionalidades nativas disponíveis na tela da Biblioteca de Mídia WordPress.

Como você verá mais tarde, há muitas modificações que você pode fazer para melhorá-lo. Primeiro, porém, precisamos discutir como adicionar arquivos ao WordPress.

Como Adicionar Arquivos à sua Biblioteca de Mídia WordPress

Existem algumas maneiras diferentes de adicionar arquivos (por exemplo, o favicon do seu site) à sua Biblioteca de Mídia WordPress. A primeira é navegar para Mídia > Adicionar Novo:

Acesso ao Uploader do WordPress Media
Acesso ao Uploader do WordPress Media

Aqui, você pode carregar arquivos que são salvos no seu computador ou em outro dispositivo:

Carregador de Mídia WordPress
Carregador de Mídia WordPress

Você também pode adicionar mídia diretamente do editor do WordPress. No Block Editor, comece adicionando o bloco correspondente para o tipo de mídia que você deseja incorporar:

Blocos de mídia WordPress
Blocos de mídia WordPress

No local resultante, selecione Upload e escolha um arquivo do seu computador:

Upload de mídia do Block Editor
Upload de mídia do Block Editor

Alternativamente, você pode simplesmente arrastar e soltar o arquivo do seu desktop para o bloco relevante.

No Editor Clássico, você precisará clicar no botão Adicionar Mídia:

Classic Editor Botão Adicionar Mídia
Classic Editor Botão Adicionar Mídia

Depois navegue até a aba Upload e selecione um arquivo do seu computador:

Upload de mídia do Classic Editor
Upload de mídia do Classic Editor

Você também pode arrastar e soltar arquivos do seu desktop diretamente para o editor, a qualquer momento.

Em alguns casos, você pode achar que você precisa fazer upload manual arquivos de mídia para o seu site WordPress via FTP. Você pode fazer isso usando um cliente como o FileZilla.

Uma vez conectado ao seu servidor, navegue até wp-content > uploads:

Upload de arquivos para o diretório da Biblioteca de Mídia WordPress via FileZilla
Upload de arquivos para o diretório da Biblioteca de Mídia WordPress via FileZilla

Carregue arquivos neste diretório para adicioná-los à sua Biblioteca de Mídia.

Download de Conteúdo da Biblioteca de Mídia WordPress

Em algumas circunstâncias, você pode precisar baixar arquivos da sua Biblioteca de Mídia para o seu computador. O WordPress permite que você faça isso nativamente, navegando para Ferramentas > Exportar:

Ferramenta de exportação WordPress
Ferramenta de exportação WordPress

Em seguida, selecione a opção Mídia. Se você só precisa de arquivos que foram carregados dentro de um período de tempo específico, você pode usar os menus suspensos para especificar o seu pedido:

Exportando mídias WordPress
Exportando mídias WordPress

Finalmente, clique no botão Download Export File. Isto irá baixar os arquivos de mídia relevantes para o seu computador.

Como editar imagens na Biblioteca de Mídia WordPress

Como mencionamos anteriormente, o WordPress tem alguns recursos de edição de imagens nativas. Para acessá-las, navegue até sua Biblioteca de Mídia WordPress e selecione o arquivo que você deseja editar. Em seguida, clique no botão Editar imagem:

Botão Editar Imagem no WordPress
Botão Editar Imagem no WordPress

Isto irá abrir o editor de imagens:

Editor de imagens WordPress
Editor de imagens WordPress

Há cinco edições básicas que você pode fazer:

O corte permite o corte de seções da imagem:

Cultura de imagem em WordPress
Cultura de imagem em WordPress

Girando a imagem no sentido anti-horário ou no sentido horário em 90 graus:

Girar imagem à esquerda no WordPress
Girar imagem à esquerda no WordPress

Ao girar a imagem, ela será refletida vertical ou horizontalmente:

Imagem horizontal flip no WordPress
Imagem horizontal flip no WordPress

As outras três configurações estão na barra lateral. A primeira permite que você altere o tamanho da imagem através da escala da mesma. Basta digitar a altura ou largura desejada, e o outro campo irá se auto-popular. Em seguida, clique no botão Escala:

Dimensionando uma imagem no WordPress
Dimensionando uma imagem no WordPress

É importante notar que o redimensionamento de imagens no WordPress pode, às vezes, afetar negativamente sua qualidade.

Além disso, você só pode tirar imagens grandes e escalá-las para baixo. Você não pode escalar as imagens para um tamanho maior!

Para recortar sua imagem para que ela tenha uma relação de aspecto ou dimensões específicas, você pode usar os campos Aspect Ratio e Selection em Image Crop:

Configurando as dimensões de seleção de corte de imagem no WordPress
Configurando as dimensões de seleção de corte de imagem no WordPress

Finalmente, se você deseja preservar a miniatura da imagem existente, você pode fazer isso usando as Configurações de miniaturas. Basta selecionar o botão de rádio para qualquer versão da sua imagem que você deseja aplicar as alterações:

Configurações de miniaturas no editor de imagens do WordPress
Configurações de miniaturas no editor de imagens do WordPress

A edição de imagem padrão do WordPress é útil, mas limitada. Ele não substituirá nenhum software que você possa usar para modificações mais extensas, especialmente se você estiver rodando um site de fotografia ou photoblog.

Entendendo os erros da Biblioteca de Mídia WordPress

Infelizmente, ocorrem erros no WordPress. E a Biblioteca de Mídia do WordPress não é exceção.

Um problema que normalmente aparece é um “erro HTTP” não especificado que pode aparecer quando você está carregando um novo arquivo de dentro do editor:

Erro HTTP no upload de mídia
Erro HTTP no upload de mídia

Normalmente, você pode simplesmente esperar que esse erro desapareça e tentar o upload novamente após alguns minutos. Se o erro HTTP ocorrer novamente, pode ser que sua sessão do WordPress tenha expirado. Você precisará fazer o login novamente e depois tentar novamente o upload.

Outro problema que alguns usuários enfrentam é a falha de carregamento da Biblioteca de Mídia. Isto é muitas vezes devido a um conflito com seus plugins e/ou tema. Para solucionar este erro, tente desativar todos os seus plugins e mudar para um tema padrão do WordPress.

Se a sua Biblioteca de Mídia carregar corretamente novamente, você precisará solucionar o conflito de plugins para resolver o problema permanentemente.

Às vezes você pode encontrar o “Upload”: Failed to Write File to Disk” quando você começa a fazer o upload de seus arquivos através da biblioteca de mídia. Normalmente, este problema ocorre quando seu diretório de upload está definido como Not Writable (Não Gravável). Você pode verificar as permissões do seu sistema de arquivos através da ferramenta Site Health do WordPress.

Gerenciamento de Mídia de Longo Prazo

Até o momento, focamos exclusivamente na funcionalidade nativa do WordPress quando se trata da Biblioteca de Mídia. No entanto, como você usa este recurso ao longo do tempo, você provavelmente terá alguns problemas que requerem ajuda de soluções externas.

Por exemplo, quanto mais arquivos você adicionar, mais desorganizada será a sua Biblioteca de Mídia WordPress. Além das opções de busca e filtragem discutidas para o início deste post, o WordPress não oferece muita ajuda para lidar com volumes desordenados de mídia.

Existem, no entanto, alguns plugins que permitem que você organize seus arquivos de mídia em pastas.

O plugin WordPress Media Library Folders é a opção mais popular:

WordPress Media Library Folders WordPress plugin
WordPress Media Library Folders WordPress plugin

Além de permitir que você crie pastas de arquivos de mídia, este plugin também se integra ao MaxGalleria para permitir que você crie galerias de imagens diretamente da Biblioteca de Mídia:

WordPress Gallery MaxGalleria WordPress plugin
WordPress Gallery MaxGalleria WordPress plugin

A atualização para o WordPress Media Library Folders Pro oferece integração adicional com o plugin NextGEN Gallery e os Advanced Custom Fields. Ele também permite que você crie categorias e tags para organizar ainda mais seus arquivos.

Outra funcionalidade que falta no WordPress é a capacidade de substituir arquivos de mídia por novas versões. Como estes tipos de arquivos podem ser bastante grandes, você não quer simplesmente continuar adicionando novos arquivos sempre que precisar atualizar seu conteúdo.

Isso significa que após carregar um novo arquivo, você precisará localizar a versão antiga e excluí-la. Você pode economizar algum tempo substituindo diretamente imagens antigas por Enable Media Replace:

Enable Media Replace WordPress plugin
Enable Media Replace WordPress plugin

Com este plugin, você também pode substituir todos os links que apontam para o arquivo antigo. Isto é útil para evitar mídia quebrada em todo o seu site.

A Real Media Library é outro gerenciador de pastas e arquivos que vale a pena conferir para tornar o gerenciamento de seus arquivos mais fácil.

Plugin Real Media Library WordPress
Plugin Real Media Library WordPress

Graças a ele, você é capaz de cuidar de muitos arquivos como fotos, vídeos e documentos diretamente no WordPress. É bom saber disso: A Real Media Library está disponível em 12 idiomas. Se a versão gratuita não for suficiente para suas necessidades, eles também fornecem uma versão PRO com mais recursos.

4 Práticos Hacks para Biblioteca de Mídia WordPress

A Biblioteca de Mídia WordPress pode lidar com a maioria dos requisitos comuns de um administrador do site. No entanto, o WordPress fornece uma série de funções e hooks que permitem aos usuários aprimorar características específicas da Biblioteca de Mídia, sem o uso de plugins de terceiros. Vamos mergulhar nestas funções e hooks com quatro exemplos práticos.

1. Adicionar Metadados Personalizados aos Tipos de Post de Anexos

Sempre que você faz upload de um arquivo de mídia, o WordPress gera um tipo de post anexo.

Como qualquer outro tipo de post, os anexos são registrados na tabela wp_postmeta, e seus respectivos metadados podem ser encontrados na tabela wp_postmeta do seu banco de dados:

Painel de detalhes de fixação por defeito
Painel de detalhes de fixação por defeito

A tabela wp_posts armazena dados que incluem post_content (descrição do anexo), post_excerpt (legenda do anexo), post_author, post_title, post_status, e post_mime_type.

A tabela wp_postmeta armazena qualquer tipo de metadados, como a URL do arquivo anexado, dimensões da imagem e tipos de mímica, e metadados do formato Exchangeable Image File (EXIF) e do International Press Telecommunications Council (IPTC).

Você pode ocasionalmente precisar adicionar metadados personalizados aos anexos, tais como o nome do autor de um documento, uma URL associada ou o local onde uma foto foi tirada. Adicionar meta campos a anexos é um pouco diferente de adicionar meta campos a postagens, e requer ganchos e funções específicas.

Primeiro, você precisará adicionar todos os campos personalizados necessários à tela Edit Media. Você pode realizar esta tarefa filtrando os campos de anexo disponíveis através do filtro attachment_fields_to_edit em wp-admin/includes/media.php:

function media_hacks_field_to_edit( $form_fields, $post ){

	// https://codex.wordpress.org/Function_Reference/wp_get_metadata
	$media_author = get_post_meta( $post->ID, 'media_author', true );
    
	$form_fields['media_author'] = array(
		'value' => $media_author ? $media_author : '',
		'label' => __( 'Author' )
	); 
	return $form_fields;
}
add_filter( 'fields_to_edit', 'media_hacks_field_to_edit', 10, 2 );

A função tem dois argumentos: o array $form_fields de campos de formulário e o objeto $post. Primeiro, get_post_meta recupera o valor ‘media_author’ existente, depois um elemento ‘media_author’ é adicionado ao array $form_fields.

Finalmente, a callback retorna $form_fields (veja o código em Gist).

Isto irá exibir um novo campo na página Editar Mídia, que você pode acessar selecionando a imagem relevante na sua Biblioteca de Mídia e clicando no link Editar mais detalhes:

Edit more details
Acessando a página da WordPress Edit Media

Na tela resultante, você verá seu novo campo de metadados personalizado na parte inferior:

Novo campo de metadados do "autor"
Novo campo de metadados do “autor”

O próximo passo é salvar a entrada do usuário. Você pode fazer isso através da conexão de uma nova função à ação edit_attachment:

function media_hacks_edit_attachment( $attachment_id ){
	if ( isset( $_REQUEST['attachments'][$attachment_id]['media_author'] ) ) {
    
		$media_author = $_REQUEST['attachments'][$attachment_id]['media_author'];
    
		update_post_meta( $attachment_id, 'media_author', $media_author );
	}
}
add_action( 'edit_attachment', 'media_hacks_edit_attachment' );

Esta função mantém apenas um argumento: o $attachment_id do arquivo de mídia atual. Primeiro, a função verifica se um valor válido para o meta-campo personalizado foi enviado. Depois ele registra o valor graças à função update_post_meta (veja o código no Gist).

Agora, você pode recuperar o valor ‘media_author’ graças à função get_post_meta:

$media_author = get_post_meta( $post->ID, 'media_author', true );

Depois disso, você pode exibi-la em qualquer lugar do frontend.

2. Exibir Metadados EXIF e IPTC na tela Edit Media

O WordPress armazena automaticamente metadados estendidos para os tipos de mime JPEG e TIFF. Agora que você sabe como adicionar campos à tela Edit Media via media.php, você pode exibir esses dados.

Para realizar esta tarefa, você tem que mudar a primeira função de callback da seguinte forma:

function media_hacks_attachment_fields_to_edit( $form_fields, $post ){

	// get post mime type
	$type = get_post_mime_type( $post->ID );

	// get the attachment path
	$attachment_path = get_attached_file( $post->ID );

	// get image metadata
	$metadata = wp_read_image_metadata( $attachment_path );

	if( 'image/jpeg' == $type ){

		if( $metadata ) {

			$exif_data = array(
				'aperture'          => 'Aperture', 
				'camera'            => 'Camera', 
				'created_timestamp' => 'Timestamp',
				'focal_length'      => 'Focal Length', 
				'iso'               => 'ISO', 
				'shutter_speed'     => 'Exposure Time', 
				'orientation'       => 'Orientation' );

			foreach ( $exif_data as $key => $value ) {

				$exif = $metadata[$key];
				$form_fields[$key] = array(
					'value' => $exif ? $exif : '',
					'label' => __( $value ),
					'input' => 'html',
					'html'  => "ID][$exif]' value='" . $exif . "' />
				);
			}
		}
	}
	return $form_fields;
}
add_filter( 'attachment_fields_to_edit', 'media_hacks_attachment_fields_to_edit', 10, 2 );

Este trecho utiliza as seguintes funções do WordPress:

Se o tipo mime da imagem é “image/jpeg”, e se metadados existem, então um array de metadados necessários é declarado, e um campo de formulário para cada elemento do array é criado:

metadados EXIF e IPTC
Campos de metadados EXIF e IPTC nos detalhes dos anexos do WordPress

Os campos de formulário deste exemplo são um pouco mais complexos, pois estamos definindo um valor para o elemento de formulário ‘html’ (veja o código em Gist). Você não precisa salvar os metadados EXIF e IPCT, pois o WordPress os armazena automaticamente na tabela wp_postmeta ao fazer upload de imagens.

3. Mostrar Metadados Estendidos no Frontend

Ter todas essas informações para você mesmo na parte de trás é útil. No entanto, se você também quiser mostrar metadados estendidos para seus arquivos de mídia no frontend, você precisará fazer um pouco mais de ajustes.

Para fazer isso, você pode anexar essas informações à descrição do anexo usando um filtro the_content em wp-admin/includes/post.php, dessa forma:

function media_hacks_the_content( $content ){
	global $post;

	if( is_attachment() && 'image/jpeg' == get_post_mime_type( $post->ID ) ) {

		$fields = wp_get_attachment_metadata( $post->ID );
		$meta = $fields['image_meta'];

		if( ! empty( $meta['camera'] ) ){
			$custom_content = "
			<ul>
				<li>Camera: {$meta['camera']}</li>
				<li>Created timestamp: {$meta['created_timestamp']}</li>
				<li>Aperture: {$meta['aperture']}</li>
				<li>Focal length: {$meta['focal_length']}</li>
				<li>ISO: {$meta['iso']}</li>
				<li>Shutter speed: {$meta['shutter_speed']}</li>
				<li>Orientation: {$meta['orientation']}</li>
			</ul>";
			$content .= $custom_content; 
		}
	}
	return $content;
}
add_filter( 'the_content', 'media_hacks_the_content' );

Aqui, a função wp_get_attachment_metadata é chamada. Se o tipo de post atual é “attachment”, e se o tipo de mímica atual é “image/jpeg”, então os metadados de imagem disponíveis são recuperados e usados para construir uma lista não ordenada de campos, que é anexada ao conteúdo do post.

A função chamada de retorno retorna $content (veja este código em Gist):

Metadados EXIF e IPTC exibidos em uma página de anexo
Metadados EXIF e IPTC exibidos em uma página de anexo

Acima você pode ver o novo post anexo com os metadados anexados à descrição.

4. Publicar um Arquivo de Fotos

Fora da caixa, o WordPress não exibe arquivos de anexos. Isto acontece porque a opção has_archive do tipo post anexo está definida como falsa.

Além disso, enquanto o parâmetro padrão post_status do objeto $query é definido para “publish”, o parâmetro padrão do anexo post_status é definido para “inherit”. Isto significa que nenhum anexo será mostrado nos arquivos a menos que nós explicitamente definamos a consulta post_status como “inherit” ou “any” (veja WP_Query Type Parameters para maiores informações).

Dito isto, para mostrar arquivos de imagens, você tem que definir duas funções. A primeira função filtra os argumentos de um tipo de post especificado, e define a propriedade has_archive do anexo como verdadeira:

function media_hacks_register_post_type_args( $args, $post_type ){
	if( $post_type == 'attachment' ){
		$args['has_archive'] = true;
	}
	return $args;
}
add_filter( 'register_post_type_args', 'media_hacks_register_post_type_args', 10, 2 );

A segunda função define valores personalizados para as variáveis de consulta post_mime_type e post_status:

function media_hacks_pre_get_posts( $query ){
	if ( !is_admin() && $query->is_main_query() ) {

		if( is_post_type_archive('attachment') ){
			$query->set('post_mime_type', 'image/jpeg');
			$query->set( 'post_status', 'inherit' );
		}
	}
}
add_action( 'pre_get_posts', 'media_hacks_pre_get_posts' );

A função é ligada ao gancho de ação pre_get_posts, que é disparada após a consulta ter sido criada, mas antes de ser executada. O objeto $query é passado por referência, não por valor, o que significa que qualquer alteração na instância atual do $query afetará o objeto $query original.

Por este motivo, é importante verificar qual consulta você vai mudar (veja este código no Gist). Então se você entrar em https://yourdomain.com/?post_type=attachment no seu navegador, você deve ver um arquivo de imagens JPEG:

Arquivo de Mídia WordPress
Arquivo de Mídia WordPress

O código completo de todos estes hacks está disponível como um plugin em um Gist público, ao qual nós ligamos através desta seção. Você pode baixá-lo como um arquivo .zip e enviá-lo para o seu site WordPress para implementar todos esses quatro hacks, sem ter que editar seus arquivos manualmente.

Resumo

Imagens, vídeos, arquivos de áudio e documentos podem ser extremamente valiosos para os usuários do seu site. A Biblioteca de Mídia WordPress é essencial para carregar, publicar e até mesmo modificar esses arquivos para atender às necessidades do seu conteúdo.

Você tem alguma outra pergunta sobre a Biblioteca de Mídia WordPress? Informe-nos na seção de comentários abaixo!

Carlo Daniele Kinsta

Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.