Buenos Días!
Estoy creando un buscador avanzado en Wordpress y me gustaria cruzar el buscador normal y corriente del programa con unos campos que añadido como un campo desplegable y un selector de fechas en un calendario.
La idea es que tu primero pones la palabra o frase, eliges una opcion en el desplegable y despues dos fechas en los calendarios para que busque la frase, en esa categoria y ese rango de fechas.
Mi problema viene a que el buscador de wordpress no se exactamente como funciona. Si dejo el campo name="s", al hacer click sobre el input del send parece que va a una pagina ya predefinida por wordpress.
Tiene alguien alguna idea de como conseguir lo que busco? Os pego un poco de codigo para que intentais captar como va hasta ahora el formulario de la busqueda avanzada.
Código HTML:
<form name="formulario" onsubmit="return validarForm(this);" action="<?php bloginfo('url'); ?>/selector_fechas/" method="get">
<label for="s" class="assistive-text"><?php _e( 'Search', 'twentyeleven' ); ?></label>
<input type="text" class="field" name="s" id="s" placeholder="<?php esc_attr_e( 'Search', 'twentyeleven' ); ?>" /><br><br>
<div id="selector">
<select name="event-dropdown" onsubmit='document.location.href=this.options[this.selectedIndex].value;'>
<option value=""><?php echo esc_attr(__('Elija una categoria')); ?></option>
<?php
$categories= get_categories('category');
foreach ($categories as $category) {
$option = '<option value="'.$category->category_nicename.'">';
$option .= $category->cat_name;
$option .= ' ('.$category->category_count.')';
$option .= '</option>';
echo $option;
}
?>
</select>
</div>
<script type="text/javascript">
function validarForm(formulario) {
document.getElementById('hideShow_1').style.visibility = 'hidden';
document.getElementById('hideShow_2').style.visibility = 'hidden';
if(formulario.fecha_fin.value.length==0 && formulario.fecha.value.length==0) { //comprueba que no esté vacío
formulario.fecha_fin.focus();
document.getElementById('hideShow_1').style.visibility = 'visible';
document.getElementById('hideShow_2').style.visibility = 'visible';
return false; //devolvemos el foco
}
if(formulario.fecha.value.length==0) { //comprueba que no esté vacío
formulario.fecha.focus();
document.getElementById('hideShow_1').style.visibility = 'visible';
document.getElementById('form_calendario').className='form_calendario_rojo';
return false; //devolvemos el foco
}
if(formulario.fecha_fin.value.length==0) { //comprueba que no esté vacío
formulario.fecha_fin.focus();
document.getElementById('hideShow_2').style.visibility = 'visible';
return false; //devolvemos el foco
}
}
return true;
</script>
<div id="buscador_calendario">
<p>Desde <div class="alert_calendario" id="hideShow_1">* Este campo es obligatorio</div></p><input id="form_calendario" class="tcal" name="fecha" type="text" />
<p>Hasta <div class="alert_calendario" id="hideShow_2">* Este campo es obligatorio</div></p><input id="form_calendario" class="tcal" name="fecha_fin" type="text" />
<input id="buscar_calendario" type="submit" value="Buscar"/>
</form>
</div>
Un saludio y gracias de antemano!