O Guia Completo da Biblioteca de Mídia WordPress (4 Hacks Práticos de Mídia Incluídos)

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:

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:

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:

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

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:

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:

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:

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

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:

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

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:

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

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:

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:

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:

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:

Isto irá abrir o editor de imagens:

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

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

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

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

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:

É 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:

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:

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:

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:

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:

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:

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.

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:

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:

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

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:

• get_post_mime_type recupera o tipo mime de um anexo com base no ID.
• get_attached_file recupera o caminho do arquivo anexado com base no ID.
• wp_read_image_metadata obtém metadados EXIF ou IPTC, se disponíveis.

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:

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):

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:

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!