Definir imagem padrão no campo do tipo imagem do ACF
O ACF é um plugin muito poderoso, fácil de utilizar e de implementar. A partir do Advanced Custom Fields é possível criar e carregar campos de dados personalizados no backend do website e refleti-los no frontend.
Por exemplo, imagine um website sobre filmes que precisa de campos para apresentar o nome do filme, os atores e atrizes, o diretor/a, etc. O ACF permite criar campos numa página específica no painel de controle do WordPress e depois exibi-los no frontend do website. Assim, no exemplo do site sobre filmes, seria possível ter uma página ou um tipo de página específica (chamada de custom post type (tipo de post customizado)) onde seria possível exibir os dados dos campos.
De fato, o ACF é uma ferramenta que permite criar sistemas de dados dentro do WordPress. Os campos customizados podem ser adicionados em todo o WordPress e em qualquer parte do template em uso.
Lembro que a documentação do Advanced Custom Fields pode ser encontrada neste link, caso você não esteja familiarizado com o plugin ACF.
Para começar, observe na imagem a seguir, que ao criar um campo dto tipo “imagem”, o ACF não possui uma opção para adicionar uma imagem “padrão” ou default para ser utilizada sempre que um novo conteúdo é criado pelo utilizador. Confira isso na figura a seguir.
Campo ACF sem imagem padrão • Fonte: WP Junior PRO
Proponho adicionarmos algumas linhas de código no arquivo functions.php do tema para que o campo imagem do ACF disponibilize a funcionalidade que desejamos, ou seja, permitir que uma imagem padrão possa ser selecionada no campo ACF.
Atenção: evite editar o arquivo functions.php do WordPress diretamente.
Existem plugins que permitem adicionar linhas de código php no WordPress sem editar o arquivo functions.php. Os plugins mais comumente utilizados são:
- My Custom Functions: https://wordpress.org/plugins/my-custom-functions/
- Woody code snippets – Insert Header Footer Code, AdSense Ads: https://wordpress.org/plugins/insert-php/
- Code Snippets: https://wordpress.org/plugins/code-snippets/
- WPCode – Insert Headers and Footers + Custom Code Snippets – WordPress Code Manager: https://wordpress.org/plugins/insert-headers-and-footers/
Observação: nos meus testes, o plugin Code Snippets foi bem-sucedido. Entretanto, posteriormente, em outros testes, considerei o WPCode uma ótima solução, por ser mais completo em sua versão gratuita e apresentar um nível de usabilidade bastante interessante.
Procure pelo plugin Code Snippets no repositório do WordPress, conforme mostrado na imagem a seguir (passos 1 e 2).
Instalando o plugin Code Snippets para WordPress
Link do plugin “Code Snippets” do WordPress utilizado no tutorial.
Independentemente, da opção escolhida, utilize o código a seguir para adicionar o novo campo padrão de imagens do plugin Advanced Custom Fields.
No caso de utilizar o plugin Code Snippets para WordPress, siga para a opção “Snippets” na barra lateral esquerda.
Dica: o processo descrito a seguir é semelhante em outros plugins.
Na página principal do plugin “Snippets“ que lista todos os códigos já criados e disponíveis, escolha a opção: “Functions“, conforme indicado na imagem a seguir (passo 3).
Acionar a opção "Functions" no plugin Snippets para WordPress
Em seguida, para adicionar o código, clique no botão “Add New (Adicionar Novo)“, conforme indicado na imagem a seguir (passo 4).
Adicionar novo código no plugin Snippets para WordPress
Na página que se abrir, adicione o código a seguir, conforme indicado na próxima imagem (passo 5).
I'nserção do código no plugin Snippets para WordPress
Ao finalizar o processo, clique no botão azul “Save Changes and Activate” (Salvar Alterações e Ativar), conforme indicado na imagem anterior (passo 5).
function add_default_value_to_image_field($field) {
acf_render_field_setting( $field, array(
'label' => __('Default Image ID','acf'),
'instructions' => __('Appears when creating a new post','acf'),
'type' => 'image',
'name' => 'default_value',
));
}
add_action('acf/render_field_settings/type=image', 'add_default_value_to_image_field', 20);
Observações sobre o código:
- Definimos uma função e a chamamos de add_default_value_to_image_field. Esta função irá receber $fields como parâmetro.
- Dentro dessa função carregaremos o acf_render_field_setting, uma função ACF.
- A declaração acf_render_field_setting irá receber $fields e um array como argumentos.
- O array deve receber as seguintes chaves: ‘label’, ‘instructions’, ‘type’ e ‘name’.
- Após definirmos add_default_value_to_image_field, chamamos a função add_action do WordPress.
- No primeiro argumento para add_action, a função recebe uma string, no caso, ‘acf/render_field_settings/type=image’ que é uma ação ACF.
- O segundo argumento é a função que foi definida. Esta função assume a string, e por fim, o terceiro parâmetro é a prioridade, definida como 20.
Esse procedimento resolve a parte do backend do plugin ACF no WordPress, ou seja, adiciona a opção de imagem default para o campo do tipo imagem do plugin Advanced Custom Fields.
Entretanto, ainda é preciso adicionar a opção no frontend, ou seja, precisamos garantir que a imagem definida como padrão para o campo do tipo imagem do ACF será exibida corretamente quando o website carregar uma página que utilize um campo desse tipo.
Para tanto, adicione o código a seguir ao arquivo functions.php. Siga o mesmo procedimento descrito nas etapas anteriores para inserir o código do backend.
function reset_default_image($value, $post_id, $field) {
if (!$value) {
$value = $field['default_value'];
}
return $value;
}
add_filter('acf/load_value/type=image', 'reset_default_image', 10, 3);
Observações sobre o código:
- Definimos uma função novamente e a chamamos de reset_default_image.
- Foram definidos três parâmetros, $value, $post_id e $field.
- Na função, verificamos se não existe um valor gravado. Se não houver um valor, definiremos $value como $field[‘default_value’].
- Consideramos “Default_value” como a chave de nome na primeira matriz de funções.
- Após definir a variável $value, retornamos o seu valor $value.
- A partir da função add_filter do WordPress, conectamos a ação ‘acf/load_value/type=image‘ do ACF, ou seja, o primeiro argumento em add_filter.
- Definimos a segunda função, a qual é uma string.
- Definimos o terceiro argumento como a prioridade e determinamos o seu valor como 10.
- O último argumento que utilizamos foi o accept_agrs. Ele determina quantos argumentos a função deverá possuir, a mesma função que acabamos de definir. No caso, estabelecemos o valor como 3.
Para conseguir realizar o envio da imagem na nova opção definida para a imagem padrão do ACF do tipo imagem, é necessário, primeiramente, criar o grupo de campos e salvá-lo. Após isso, será possível realizar o envio.
Ao final do processo, teste para conferir o resultado, conforme indicado na imagem a seguir (passo 6).
Testando a inserção de imagens no campo do tipo Imagem do ACF
Qualquer questão ou dúvida, deixe nos comentários.
Se você gostou do tutorial e está interessando em aprender mais sobre o WordPress, ao nível iniciante ou intermediário, convido você a conhecer o meu Livro WordPress de Junior a .PRO. Uma obra com mais de 2000 páginas sobre esse poderoso gerenciador de conteúdo!
