HTML Mudar o texto dentro do input do search

DesenvolvedorWeb · 28 de abril de 2018

Boa tarde pessoal, ja fiz de tudo para encontrar o texto que fica dentro do input do search http://prntscr.com/jaxzep o template é esse http://demo.sparklewpthemes.com/sparklestore/shop/

Queria encontrar para poder alterar porque esta em inglês, se alguem tiver alguma ideia de onde fica ficarei muito grato.

Ja procurei em todo lugar esse codgo e nao Achei o conteudo dentro da pagina search.php é esse

<?php
/**
 * The template for displaying search results pages.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#search-result
 *
 * @package Sparkle_Store
 */
get_header(); ?>
<?php do_action( 'sparklestore-breadcrumbs' ); ?>
<div class="inner_page">
    <div class="container">
        <div class="row">
        
              <div id="primary" class="content-area">
                <main id="main" class="site-main" role="main">
                    <?php
                    if ( have_posts() ) : 
                        
                        /* Start the Loop */
                        while ( have_posts() ) : the_post();
                            /**
                             * Run the loop for the search to output the results.
                             * If you want to overload this in a child theme then include a file
                             * called content-search.php and that will be used instead.
                             */
                            get_template_part( 'template-parts/content', 'search' );
                        endwhile;
                        the_posts_pagination( 
                            array(
                                'prev_text' => esc_html__( 'Prev', 'sparklestore' ),
                                'next_text' => esc_html__( 'Next', 'sparklestore' ),
                            )
                        );
                        
                    else :
                        get_template_part( 'template-parts/content', 'none' );
                    endif; ?>
                </main>
            </div>
                
            <?php get_sidebar(); ?>
        
          </div>
    </div>
</div>
<?php get_footer();

Dentro da pasta "template-parts/content" tem esse codgo, ja procurei em tudo e nao Achei

<?php
/**
 * Template part for displaying posts.
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package Sparkle_Store
 */

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?> itemtype="http://schema.org/BlogPosting" itemtype="http://schema.org/BlogPosting">

	<div class="post-container">
		<?php 
			if ( has_post_thumbnail() ) { 
		?>
			<div class="post-img  has-img ">

				<a title="<?php the_title(); ?>" href="<?php the_permalink(); ?>">
					 <figure>
					 	<?php the_post_thumbnail() ?>					
					</figure>
				</a>
				<div class="blogdate">
					<time class="entry-date updated">
						<?php the_time( 'F d Y' ) ?>
					</time>
				</div>
			   									   
			</div>
		<?php } ?>
		<div class="post-detail-container">
			<div class="title">	
					<h2 class="entry-title">
						<a href="<?php the_permalink(); ?>">
							<?php the_title(); ?>
						</a>
					</h2>										
			</div>
			<ul class="list-info">
				<li><i class="fa fa-user"></i> <?php the_author(); ?></li>
				<li><i class="fa fa-folder-open"></i> <?php the_category(', '); ?></li>
				<li><i class="fa fa-comment"></i> <?php comments_popup_link( esc_html__( '0 Comment', 'sparklestore' ),  esc_html__( '1 Comment', 'sparklestore' ), esc_html__( '% Comments', 'sparklestore' ), esc_html__( 'Comments are Closed', 'sparklestore' ) ); ?></li>
				<li><i class="fa fa-tag"></i> <?php the_tags( ' ' ); ?></li>							
			</ul>

		  	<div class="blogdesc">								
	   			<?php the_excerpt(); ?> 
		  	</div>
		  	<div class="blog-readmore">
				<a href="<?php the_permalink(); ?>">
                	<?php esc_html_e('Read More','sparklestore'); ?>
            	</a>
            </div>
				
  		</div>
		
	</div>

</article><!-- #post-## -->

DiF · 28 de abril de 2018

@DesenvolvedorWeb O texto ali é um placeholder. Você tem que procurar o lugar exato onde fica o elemento do form.

Provável que fica onde está o cabeçalho do template.

Fica difícil de ajudar com precisão, pois não temos acesso ao arquivos... Mas praticamente é isso. Procure o arquivo ou a parte no wordpress que monta o cabeçalho do site. Lá dentro tens que procurar o form, onde tem este elemento search e alterar o placeholder.

Ou você pode tentar usar o javascript, para pegar o elemento id="search" ou class="searchbox" e fazer a substituição do conteúdo do atributo "placeholder"

DesenvolvedorWeb · 28 de abril de 2018

a header.php ta com esse codgo

<?php
/**
 * The header for our theme.
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package Sparkle_Store
 */
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?> <?php sparklestore_html_tag_schema(); ?> >
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
    <?php wp_head(); ?>
    
</head>

<body <?php body_class(); ?>>

    <div id="page" class="site">

        <?php
            /**
             * @see  sparklestore_skip_links() - 5
             */
            do_action('sparklestore_header_before');

            /**
             * @see  sparklestore_top_header() - 15
             * @see  sparklestore_main_header() - 20
             */
            do_action('sparklestore_header');

            do_action('sparklestore_header_after');

        ?>
        
        <nav class="main_menu_category_menu sp-clearfix">
            <div class="container">
                <div class="category-menu-main">
                    <div class="category-menu-title">
                       <i class="fa fa-navicon"></i>
                       <?php esc_html_e('All Categories', 'sparklestore'); ?>
                    </div>
                    <div class="menu-category">
                        <?php wp_nav_menu(array('theme_location' => 'sparklecategory')); ?>
                    </div>
                </div>
                <div class="main-menu sp-clearfix">
                    <div class="toggle-wrap">
                        <div class="toggle">
                            <i class="fa fa-align-justify"></i>
                            <span class="label"><?php esc_html_e('Menu', 'sparklestore'); ?></span> 
                        </div>
                    </div>
                    <div class="main-menu-links">
                        <?php wp_nav_menu( array( 'theme_location' => 'sparkleprimary' ) ); ?>
                    </div>
                </div>
            </div>
        </nav>

        <?php    
        if( is_front_page() ){ 
            $slider_options = esc_attr( get_theme_mod( 'sparklestore_slider_options', 'enable' ) );
            if( $slider_options == 'enable' ){ 
                do_action('sparklestore-slider');
            }
        }

DiF · 28 de abril de 2018

@DesenvolvedorWeb Como mencionei, não temos como dizer com precisão.. sem ver o código, dentro do wordpress mesmo...

O que vejo é que a função: wp_head() é que monta o seu cabeçalho.

SE você inspecionar o elemento no tema, verá que campo que você quer alterar está entro do elemento que monta toda a estrutura do "header"

DesenvolvedorWeb · 28 de abril de 2018

o duro e que ja procurei em tudo fui vendo pagina por pagina no editor e nao Achei, nao tem como voce instalar o template em um servidor local para dar uma olhada?

DiF · 29 de abril de 2018

@DesenvolvedorWeb

3 horas atrás, DesenvolvedorWeb disse:

nao tem como voce instalar o template em um servidor local para dar uma olhada?

Não tenho como instalar.

Pode ser que nem exista ali a parte em questão. Onde ela é gerada pelo próprio php do tema do wordpress.

Nesse caso, acho que você pode resolver o problema fazendo o que eu sugeri a cima.

Inspecione o elemento e pegue o valor ID ou class dele. Por meio de javascript, seja puro ou jquery.. você faz a substituição do valor do atributo placeholder.

exemplo:

Vamos supor que o seu tema está gerando um campo search com o placeholder em inglês desta forma:

<input type="search" id="search" placeholder="Search entire store here..."/>

Para "traduzir", quando não tiver acesso a ele, você substitui o valor do placeholder via javascript. Eu recomendo usar o jQuery que é mais fácil, com apenas uma linha.

$("#search").attr("placeholder", "Pesquise a loja toda aqui...");

Repare, que estou pegando o elemento com o id="search", e chamando a função attr(), onde nele é informado qual o atributo, no caso o placeholder, e qual o novo valor dele, no caso "Pesquise a loja toda aqui..."

Exemplo Online: https://jsfiddle.net/yjoxfsyv/

DesenvolvedorWeb · 29 de abril de 2018

Atah entendi, mas não tem como fazer com javascript puro?

E tenho que colocar no head o codgo?

DiF · 29 de abril de 2018

@DesenvolvedorWeb Ter até tem..

Desta forma:

var search = document.querySelector("#search"); 
search.setAttribute("placeholder", "Pesquise a loja toda aqui...");

Mas com jQuery, tem a vantagem de você ter a biblioteca para utilizar com outros plugins. além de precisar somente de uma linha para fazer o desejado.

Ademais, por natureza, o wordpress já possui o jquery, poupando menos um script para carregar.

Você pode importar da seguinte forma:

Abra o arquivo header.php e coloque:

<?php wp_enqueue_script(‘jquery’); ?>

Dentro do elemento <head>.

Eu recomendo usar o jQuery, por ser mais fácil de usar. Utilizando apenas uma função. attr()

DesenvolvedorWeb · 29 de abril de 2018

E coloco esse codgo aqui dentro do head, e nao preciso baixar o jquery?

<?php wp_enqueue_script(‘jquery’); ?>

Esse codgo aqui coloco onde?

$(document).ready(function(){
  
    /*Insere o atributo placeholder no elemento desejado que não.
      Se o elemento já possuir um valor, o valor do placeholder
      será substituído pelo novo valor definido pelo jQuery.
    */ 
		$("#search").attr("placeholder", "Pesquise a loja toda aqui...");


});

DiF · 29 de abril de 2018

@DesenvolvedorWeb

1 hora atrás, DesenvolvedorWeb disse:
E coloco esse codgo aqui dentro do head, e nao preciso baixar o jquery?
<?php wp_enqueue_script(‘jquery’); ?>

Resposta Mais acima no post anterior...

8 horas atrás, DiF disse:
Abra o arquivo header.php e coloque:
<?php wp_enqueue_script(‘jquery’); ?>
Dentro do elemento <head>.

O segundo código, você pode colocar no arquivo footer.php e posicionar entre a tag <body>

Se achar muito difícil, tente com javascript puro..

DesenvolvedorWeb · 29 de abril de 2018

Coloquei na pagina footer.php

<?php
/**
 * The template for displaying the footer.
 *
 * Contains the closing of the #content div and all content after.
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package Sparkle_Store
 */
 

	do_action( 'sparklestore_footer_before');	

		/**
		 * @see  sparklestore_footer_widget_area() - 10
		*/
		do_action( 'sparklestore_footer_widget');

    	/**
    	 * Top Footer Area
    	 * Two different filters
    	 * @see  sparklestore_social_links() - 5
    	 * @see  sparklestore_payment_logo() - 10
    	*/
    	do_action( 'sparklestore_top_footer');

    	/**
    	 * Bottom Footer Area
    	 * @social icon filters : sparklestore_footer_menu() - 5
    	*/
    	do_action( 'sparklestore_bottom_footer');  
    
     do_action( 'sparklestore_footer_after');	 
?>	    

</div><!-- #page -->

<a href="#" class="scrollup">
	<i class="fa fa-angle-up" aria-hidden="true"></i>
</a>

<?php wp_footer(); ?>

$(document).ready(function(){
  
		$("#search").attr("placeholder", "Pesquise a loja toda aqui...");

});

</body>
 
</html>

E coloquei tambem esse daqui dentro de head

<?php wp_enqueue_script(‘jquery’); ?>

nao aconteceu nada e o codgo fico aparecendo em baixo do footer do site.

com javascript puro eu consegui, mas ele carrega o inglês primeiro ai so depois ele troca

DiF · 29 de abril de 2018

1 hora atrás, DesenvolvedorWeb disse:

com javascript puro eu consegui, mas ele carrega o inglês primeiro ai so depois ele troca

Sim, é de se esperar este resultado... pois antes de carregar o código que "traduz", ele carrega os outros elementos primeiro.

Esta é a melhor solução que você pode fazer, se e somente se você não debugar linha a linha do arquivo php que contém a estrutura do cabeçalho onde o formulário de busca está.

Sobre a importação do jquery, tem vários métodos de importar.. eu apresentei apenas um deles.. se desta forma não funcionou, experimenta de outras formas..

Este link pode clarear as ideias!

PS: verifique o arquivo functions.php, provável lá você pode fazer as dicas do link acima.

DesenvolvedorWeb · 29 de abril de 2018

mas se eu conseguir com jquery vai carregar primeiro em inglês igual com javascript puro?

eu ja tentei achar em tudo onde ta o placeholder e nao consegui

DiF · 29 de abril de 2018

40 minutos atrás, DesenvolvedorWeb disse:

mas se eu conseguir com jquery vai carregar primeiro em inglês igual com javascript puro?

Sim é bastante provável. Pois há elementos que ele carrega antes. Então pela lógica ele carrega primeiros os elementos e depois os scripts.

O único jeito de resolver, é alterando o placeholder direto no elemento...

Analisando melhor o código do header.php.

Tem a seguinte linha:

 <?php wp_head(); ?>

Esta função é responsável por montar o seu cabeçalho.

Procure no arquivo functions.php a linha que tem esta função e ali dentro é provável que pode estar a parte.

Não vou garantir, mas é por aí. Caso não ache...

Bem, de duas: Ou você muda o tema e tenta achar um em português direto ou usa a solução em javascript apresentada.

Por questões de facilidade, eu manteria o javascript ali.

adicionado 0 minutos depois

PS: Use o botão "mencionar " para me chamar. Pois senão, pode ser que nem veja as respostas.

@DesenvolvedorWeb

DesenvolvedorWeb · 30 de abril de 2018

@DiF em functions.php nao tem essa funçao <?php wp_head(); ?>

$Dea\n$ · 30 de abril de 2018

Para colocar um texto dentro do search use a tag: placeholder

Exemplo:

<input type="search" placeholder="Procurar..." />

DiF · 30 de abril de 2018

@Dea Esta é a solução que sugeri no post #02 .. kkkkkk

O lance é que ele não consegue achar o trecho onde o elemento do tipo search está, para alterar o texto do inglês para o português.

Por isso, recomendei usar o javascript para alterar.

@DesenvolvedorWeb Pode ser que não fique em functions, eu falei por ser um nome de arquivo com finalidades de juntar as funções do sistema... No caso, você vai ter que procurar onde exatamente fica a tal função e ver como ela monta o header.

Normalmente, o sistema de arquivos no wordpress, tem nomes sugestivos e fáceis de saber o que são. Sem dúvidas o elemento search está ali em algum lugar. Seja dentro de uma função ou em uma estrutura html incorporada em algum arquivo php.

Você pode consultar a hierarquia de arquivos e pastas aqui no codex do suporte do wordpress:

https://codex.wordpress.org/pt-br:Hierarquia_de_Modelos_Wordpress

DesenvolvedorWeb · 30 de abril de 2018

@DiF pior que ja procurei em tudo, fui em pagina por pagina, nunca tinha encontrado um arquivo tão difícil de axar assim kk

DiF · 30 de abril de 2018

@DesenvolvedorWeb Depois de tanto debugar o tema... ACHO que consegui ver onde ele monta o search:

woocommerce.php contido na pasta hooks

Linha 170.

Trecho:

$form = '<form role="search" method="get" id="search_mini_form"  action="' . esc_url(home_url('/')) . '">
                        <select id="cat" class="cate-dropdown hidden-sm hidden-md" name="term">' . $categories_show . '</select>
                        <input id="search" type="text" value="' . get_search_query() . '" name="s" id="s" placeholder="' . esc_html__('Search entire store here...', 'sparklestore') . '" class="searchbox" maxlength="128" />
                         <button type="submit" title="Search" class="search-btn-bg" id="submit-button">
                            <span>' . esc_html__('Search', 'sparklestore') . '</span>
                         </button>
                        <input type="hidden" name="post_type" value="product" />
                        <input type="hidden" name="taxonomy" value="product_cat" />
                    </form>';
            echo $form;

A linha mais precisa está aqui:

placeholder="' . esc_html__('Search entire store here...', 'sparklestore') . '"

Se caso não funcione..

tente o último recurso:

Entra na pasta language do tema, e procure o arquivo sparklestore.pot

Abra-o com o notepad++ e faça uma localização da frase "Search entire store here..." Traduza e salve.

Se isso tudo não funcionar.. aí o problema é no tema.

Por curiosidade, quando se instala o wordpress, você pode escolher a lingua dele. sempre coloco português brasil... e os temas ficam em português. Não sei se isso vale para todos os temas...