Uso de la búsqueda personalizada de Google con un elemento de formulario existente

2 minutos de lectura

En mi tema de wordpress, tengo una página de búsqueda diseñada correctamente para la búsqueda nativa de wordpress y este es mi diseño de formulario para searchform.php.

<form method="get" id="searchform" action="<?php echo esc_url( home_url( "https://stackoverflow.com/" ) ); ?>" role="search">
        <label for="s" class="assistive-text"><?php _e( 'Search', 'checkout' ); ?></label>
        <input type="text" class="field" name="s" placeholder="<?php _e( 'Search here...', 'checkout' ); ?>" value="<?php echo esc_attr( get_search_query() ); ?>" id="s" />
        <input type="submit" class="submit" name="submit" id="searchsubmit" value="<?php esc_attr_e( 'Search', 'checkout' ); ?>" />
    </form>

Ahora, durante meses, he intentado usar la función de búsqueda personalizada de Google manteniendo el mismo diseño de formulario. Pero realmente no encontré una manera de usar la búsqueda de Google con el elemento de formulario existente.

Ejemplo de código CSE de Google que estoy usando:

<script>
  (function() {
    var cx = 'partner-pub-123456:78990125';
    var gcse = document.createElement('script');
    gcse.type="text/javascript";
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

Pero el <gcse:search></gcse:search> está rompiendo todo. De hecho, estoy tratando de usar el diseño de superposición de la búsqueda personalizada. ¿Alguien puede ayudarme sobre cómo puedo mantener el diseño de mi formulario de búsqueda existente mientras uso la búsqueda personalizada de Google?

  • Cuando abre su navegador con el segundo código (Script CSE) puede verificar el html generado, lo más importante son las entradas ocultas (contiene su ID de socio y la configuración de CSE). ¿Por qué no intenta copiar estas entradas dentro de su formulario original? No olvide cambiar el valor del atributo “acción”.

    – JSLirola

    11 oct.


  • entonces puedo quitar el <gcse:search></gcse:search> sección de mi código para que el formulario no se genere automáticamente?

    – iSaumya

    12 oct.

  • Exactamente, si quieres personalizar tu formulario, no conozco otra forma.

    – JSLirola

    13 oct.

.

¿Ha sido útil esta solución?