Suporte » Desenvolvendo com WordPress » custom Back Image

  • samuelseixas

    (@samuelseixas)


    Boa Tarde, estou terminando um tema para WP e preciso colocar uma imgem de fundo dentro de uma div e permitir que o usuario possa troca-la no dashboard. Como faco para colocar um background image dinamico?
    Socorro!

    • Este tópico foi modificado 3 semanas atrás por samuelseixas.

    A página que eu preciso de ajuda: [fazer login para ver o link]

Visualizando 1 resposta (de um total de 1)
  • Existe algumas formas de implementar… segue uma:

    1. Faça a marcação no seu html

    <div class="SUA-DIV" style="background-image: url('<?php bloginfo('template_url'); ?>/static/images/SEU-BG.jpg');">
    ... conteúdo
    </div>

    2. Estilize com CSS

    .SUA-DIV {
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;     
    }

    OBS1: Onde está ‘SUA-DIV’ troque pela classe que vc está utilizando e acrescente estilizações adicionais para a seção, mas basicamente já está aparecendo o background.

    OBS2: Normalmente esse background é puxado pela classe CSS, mas como a ideia é deixar gerenciável puxamos ele na própria div com css inline.

    Agora… é implementar na administração do WordPress, tbm existe formas diferentes… uma delas bem comum é usando o plugin ACF.

    Já está usando em seu tema?

    Se não, instale:
    https://br.wordpress.org/plugins/advanced-custom-fields/

    Você precisa desse ‘Field Type’, no link segue como criar na seção gerenciável do plugin e como exibir o dado em seu front-end:
    https://www.advancedcustomfields.com/resources/image/

    No fim a sua div que estava estática terá esse código:

    Para você resgatar a imagem que o usuário fez o upload, se estiver usando um loop pegue com $SEU_BG = get_field( 'BG' );

    Caso não esteja utilizando um loop, passe por parâmetro o ID da página/post onde o usuário está fazendo o upload, nesse caso o dado que será retornado será no formato array, faça o tratamento e exiba o dado, a vantagem nesse caso é que você não precisa do loop, porque o id já está sendo passado.

    <div class="SUA-DIV" style="background-image: url('<?php echo $SEU_BG; ?>');">
    ... conteúdo
    </div>
Visualizando 1 resposta (de um total de 1)
  • Você deve estar conectado para responder a este tópico.