Suporte » Plugins » Página de rosto com duas imagens

  • Diego

    (@diegoguariz)


    Pessoal bom dia.
    Estou criando um site com wordpress para uma loja de roupas masculinas e femininas, onde eu preciso, ao abrir o site, exibir duas imagens (uma de homem e outra de mulher) utilizando a tela toda, ou seja do lado esquerdo a foto de uma mulher e do lado direito a foto de um homem. Sobre essas imagens terá um botão de acesso. Ao clicar, ele direciona aos site com os produtos para homem ou para mulher. Minhas dúvidas são:

    1 – Como faço para desenvolver essa página de rosto? Existe algum plugin que faça isso? Alguma sugestão?
    2 – A página de homem e de mulher serão iguais, mudando apenas cor do menu. Devo construir páginas separadas ou existe alguma forma de apenas atualizar o conteúdo e layout?

    Agradeço a ajuda.
    DIEGO

Visualizando 10 respostas - 1 até 10 (de um total de 10)
  • Everaldo Matias

    (@everaldomatias)

    1 – Diego, existem algumas formas de fazer isso, como perguntou por plugin, encontrei esse que pode ser um start para a sua necessidade: https://wordpress.org/plugins/very-simple-splash-page/

    Outra forma, se você tiver familiaridade com desenvolvimento WordPress, seria criar o template front-page.php de acordo com o que precisa, através de um plugin ou child-theme. Se esse for o seu caso, comenta ai que podemos auxiliar no caminho.

    2 – Diego você está fazendo a loja virtual com WooCommerce? Se for com o WooCommerce, você pode tratar cada parte como uma categoria e através do CSS apenas manipular as cores de acordo com as classes impressas no seu <body class="...">.

    Veja se isso lhe auxilia na sua necessidade e nos retorne aqui.

    • Esta resposta foi modificada 9 meses atrás por Everaldo Matias. Razão: Correções de digitação
    Thread Starter Diego

    (@diegoguariz)

    Everaldo boa tarde.

    1 – Eu tentei com esse plugin, porém ele permite apenas uma imagem de fundo. Eu precisaria criar duas, uma de cada lado. Eu não tenho muita familiaridade com desenvolvimento wordpress, mas conheço bem CSS e PHP. Tem alguma sugestão de como poderia? Eu até tentei fazer com Galeria, com duas imagens, mas ela não pega a tela inteira. Nesse caso, eu preciso de algo parecido com essa imagem, mas que pegue a tela como um todo: Exemplo de Imagens

    2 – Sim, estou utilizando WooCommerce. No caso então, você diz que eu posso tratar Homem e Mulher como uma categoria, sendo nivel mais alto de categorias? Tipo: Homem > Calcas > Tamanho G | Mulheres > Camisetas > Tamanho PP. Mais ou menos isso?

    Sobre o CSS vc tem ideia de como fazer isso na prática? Algum exemplo?

    Everaldo, muito, mas muito obrigado mesmo por sua ajuda.

    Att,
    DIEGO GUARIZ

    Diego, já que possui algum conhecimento, vou tentar indicar um caminho para que solucione o seu problema, respondendo os dois pontos (de forma inversa):

    2 – Exatamente isso, Homem e Mulher seriam categorias superiores e abaixo delas as respectivas categorias. Com isso você terá o link para direcionar a pessoa após escolher a categoria que pretende visualizar ao clicar na página inicial.

    1 – Vamos criar um (brevíssimo) plugin* para adicionar a sua funcionalidade, vamos chamá-lo de welcome-page.

    Na pasta de plugins, crie então uma pasta com esse nome (welcome-page) e dentro dela um arquivo chamado welcome-page.php.

    Nesse arquivo welcome-page.php você precisa adicionar um header padrão para que o WP entenda-o como um plugin:

    <?php
    /**
     * Plugin Name: Welcome Page
     */

    Agora vamos adicionar as funcionalidades que precisamos. O correto seria criar campos no painel administrativo para que as pessoas, ao usarem esse plugin, possam trocar as imagens e até mesmo os links pelo painel administrativo do WP. Mas para não deixar isso aqui (ainda) mais longo, vamos aplicar as imagens e os links de forma estática.

    Vamos criar uma função que vai imprimir na Home do site um HTML contendo as imagens e os links.

    No arquivo welcome-page.php, adicione a seguinte função:

    function wpdocs_print_welcome_page() {
    
        if ( is_front_page() ) {
            echo '<div class="welcome-page">Cole aqui seu HTML</div>';
        }
    }
    add_action( 'wp_footer', 'wpdocs_print_welcome_page' );

    Agora precisamos adicionar um arquivo CSS, para que possa personalizar e deixar esse HTML impresso na forma como precisa.

    No mesmo arquivo welcome-page.php, adicione a seguinte função:

    function wpdocs_enqueue_css() {
        if ( is_front_page() ) {
            wp_enqueue_style( 'welcome-page', esc_url( plugins_url( 'assets/css/style.css', __FILE__ ) ) );
        }
    }
    add_action( 'wp_enqueue_scripts', 'wpdocs_enqueue_css' );

    Diego, alí no “Cole aqui seu HTML”, adicione as imagens, com os respectivos links e dá-lhe CSS para deixar exatamente como precisa. Feito isso, teste em um ambiente de desenvolvimento (escrevi aqui mas confesso que não testei), ative o plugin e o personalize até deixar como precisa.

    *(Lembrando que isso é uma forma bem básica e primária de se criar plugins. Caso queira mais detalhes ou então descobrir mais possibilidades, faça uma pesquisa e até mesmo leia as documentações oficiais do WP sobre desenvolvimento de plugins).

    Thread Starter Diego

    (@diegoguariz)

    Everaldo, boa tarde.
    Consegui montar a página com plugin. Mas não consigo exibir ela corretamente no meu projeto.
    Selecionei uma página limpa, sem nada, para ser a página principal.

    Criei o plugin como você comentou. Segue o código PHP e CSS:

    PHP

    <?php
    /**
     * Plugin Name: Welcome Page
     * Description: Plugin de boas vindas, com duas imagens de categorias de produtos WooCommerce direcionando para páginas específicas
     * Author: Diego Guariz
     * Version: 1.0
     */
     
    function wpdocs_print_welcome_page() {
    
        if ( is_front_page() ) {
            echo '<body>
                    <div class="fundo">&nbsp;
                      <div class="barra_h">
                        <div class="logo_h">&nbsp;</div>
                        <div class="seta_h">&nbsp;</div>
                      </div>
    
                      <div class="barra_m">
                        <div class="seta_m">&nbsp;</div>
                        <div class="logo_m">&nbsp;</div>
                      </div>
                    </div>';
        }
    }
    add_action( 'the_content', 'wpdocs_print_welcome_page' );
    
    function wpdocs_enqueue_css() {
    
        if ( is_front_page() ) {
            wp_enqueue_style( 'welcome-style', esc_url( plugins_url( 'css/style.css', __FILE__ ) ) );		
        }
    }
    add_action( 'wp_enqueue_scripts', 'wpdocs_enqueue_css' );
    

    CSS

    /* Primeira opção - index1.php */
    body {
    	margin: 0;
    	background-color: #F00;
    }
    
    .fundo {
    	background-image: url(http://www.bystok.com.br/wp-content/uploads/2020/06/4210-scaled.jpg);
    	background-repeat: no-repeat;
    	background-size: cover;
    	background-position: center;
        position: relative;
        height: 100vh;
        width: 100vw;
    }
    
    .barra_h {
    	background-color: #FFF;
    	width: 25%;
    	height: 10%;
    	position: absolute;
    	bottom: 25px;
    	top: 12px;
    	float: left;
    	margin-left: 5px;
    	border: 2px solid #00816D;
    
    }
    
    .logo_h {
    	width: 80%;
    	float: left;
    	height: 100%;
    	background-image: url(http://www.bystok.com.br/wp-content/uploads/2020/06/logo_bystok_homem_branco_horiz.png);
    	background-repeat: no-repeat;
    	background-position: left;
    	background-size: contain;
    }
    
    .seta_h {
    	width: 20%;
    	float: right;
    	height: 100%;
    	color: #FFF;
    	background-image: url(http://www.bystok.com.br/wp-content/uploads/2020/06/acesso.png);
    	background-repeat: no-repeat;
    	background-size: contain;
    	text-align: center;
    	vertical-align: middle;
    	background-color: #00816D; 
    }
    
    .barra_m {
    	background-color: #FFF;
    	width: 25%;
    	height: 10%;
    	position: relative;
    	bottom: 25px;
    	top: 12px;
    	float: right;
    	margin-right: 5px;
    	border: 2px solid #ED008C;
    }
    
    .logo_m {
    	width: 80%;
    	float: left;
    	height: 100%;
    	background-image: url(http://www.bystok.com.br/wp-content/uploads/2020/06/logo_bystok_mulher_branco_horiz.png);
    	background-repeat: no-repeat;
    	background-position: left;
    	background-size: contain;
    }
    
    .seta_m {
    	width: 20%;
    	float: right;
    	height: 100%;
    	color: #FFF;
    	background-image: url(http://www.bystok.com.br/wp-content/uploads/2020/06/acesso.png);
    	background-repeat: no-repeat;
    	background-size: contain;
    	text-align: center;
    	vertical-align: middle;
    	background-color: #ED008C; 
    }

    Mas ele exibe a primeira página com os widgets do tema (menu, cabeçalho, rodapé, etc). Como devo fazer?

    Sobre o item 2, criei a categoria master como Home e Mulher. Devo definir uma cor primário para cada um? Com faço isso? A ideia é que ao acessa o menu Homem, a cor primária seja Verde e quando acessar o menu Mulher, a cor primária seja Lilás. Me ajuda com isso?

    Thread Starter Diego

    (@diegoguariz)

    Everaldo bom dia.
    Consegui fazer certinho o que precisava para a página inicial.
    Agora preciso resolver a situação da cor e logotipo para homem e mulher.

    A ideia é que ao selecionar qual dos dois vai acessar (homem por exemplo), irá abrir no topo o logotipo da loja masculino e a cor primária do site será verde. Ao clicar em mulher, abro o logotipo feminino e a cor primária é o rosa.

    Como você instruiu, crie a categoria Homem e Mulher como as de maior nível.

    Grato pela ajuda por enquanto.

    Diego, o logo que pretende alterar é o logo principal do site?

    Se sim, vou sugerir cria um local no painel administrativo com as duas logomarcas.
    Responde essa que te passo um caminho para aplicar isso.

    Outra pergunta, você está aplicando essas alterações com o plugin que criou, ou direto no tema, ou com um child-theme?

    Thread Starter Diego

    (@diegoguariz)

    Everaldo, sim, preciso do logo principal. Se for homem o logo tem o símbolo masculino em cor verde. Se for mulher, o logo tem o símbolo feminino em lilás.

    Então o que preciso é: ao selecionar Loja Homem, ele entra na loja, mas muda a cor padrão para verde e o logo para o masculino. Se entrar na Loja Mulher, ele entra na loja, porém a cor padrão será o lilás e o logotipo o feminino.

    Se quiser ver mais ou menos, o endereço é: http://www.bystok.com.br

    A tela inicial de divisão, fiz um plugin. A próxima parte, não consegui fazer nada. Viz uma sugestão de usar Child-Theme, mas não tenho ideia. Até criei o diretório Storefont-child, com o arquivo functions.php e style.css. Mas não sei o que fazer.

    Outro ponto, mas acredito que não interfira, é que no menu tem um botão Homem e outro Mulher, que vai acessar também, ou seja, ele pode entrar na loja feminina e mudar para a masculina.

    Pelo amor de Deus, me ajuda com isso Everaldo. Tá bem complicado viu?

    • Esta resposta foi modificada 8 meses, 1 semana atrás por Diego.
    Thread Starter Diego

    (@diegoguariz)

    @everaldomatias por favor, me ajuda nisso cara?

    Abs,
    DIEGO GUARIZ

    Everaldo Matias

    (@everaldomatias)

    Diego, minha proposta vai ser adicionar dois novos campos no painel /Aparência/Personalizar para os logos. Para isso indico o plugin https://br.wordpress.org/plugins/kirki/

    Depois disso, no seu plugin ou child-theme, fazemos a aplicação do logo verificando se a pessoa está na categoria MULHER ou HOMEM, e também poderemos adicionar o logo já utilizado no site para páginas que não estejam relacionadas a essas categorias.

    Dá uma olhada nesse plugin, leia a documentação e vamos seguir.

    Thread Starter Diego

    (@diegoguariz)

    @everaldomatias instalei e ativei o plugin. Dei uma olhada no que tinha de documentação porque o site lá estão fora do ar.
    Não consegui evoluir nada. Não sei como usar ele para criar os novos campos.

    Att,

Visualizando 10 respostas - 1 até 10 (de um total de 10)
  • O tópico ‘Página de rosto com duas imagens’ está fechado para novas respostas.