buscador en la barra superior

Hola

El shortcode para que funcione lo debes insertar en algún widget o como parte del contenido, entiendo que en tu caso has editado algún archivo .php del theme y has insertado el shortcode, o indícanos cómo lo has realizado, es posible también que ese shortcode no exista y es por eso que no se interpreta.

Si quieres ejecutar el shortcode desde el theme, revisa:
https://css-tricks.com/snippets/wordpress/shortcode-in-a-template/

Saludos.

lo he colocado en el header.php pero no funciona

lo he hecho tal como indica la página que dices

pero se me rompe la pagina

no entiendo donde ponerlo exactamente para que quede al lado del logo

Hola Ricardo,

Veo que el buscador está arriba, justo debajo del logo ocupando todo el ancho del tema ¿es exactamente ahí donde tratas de colocarlo?

Saludos

Hola, al final he logrado colocarlo pero quiero conseguir que quede como en esta web

Contenido solo visible a usuarios registrados

que sale a la derecha si hay espacio y si no hay bastante espacio lo coloca debajo del logo

Hola Ricardo,

En la web que comentas veo que ha integrado el buscador en un contenedor div:

Buscar:





















Y luego han creado una clase CSS para que se adapte la vista dependiendo del dispositivo (responsive):
@media (min-width: 1200px)
#cabecera .col-buscador {
    width: 40%;
    max-width: 400px;
}
Pero al ser una web que no está hecha en WordPress, no te puedo sugerir una personalización a este nivel, porque entre otras razones, perderías los cambios a menos que te plantees crear un "Tema Hijo" (child theme) donde personalizar el header de la página para insertar el buscador de la forma que tu quieres.
Saludos

                                                                                                	
                                                

                                                        
 
                                                    
	                                        

he intentado reproducirlo pero no lo consigo, te paso el codigo a ver si ves en que me equivoco

            	

                
                	
            		
                   

                       
                       

                            1 ) ); } ?>
                           
                       
                    
                        
                    
                    
                    
                    
                
               
            

he creado 2 clases para poder aplicar por css lo que me indicas y lo aplique a una o a otra no se ve bien

.solobuscador {
    width: 40%;
    max-width: 400px;
}

Hola

Tal como esta tu sitio, elimina el código anterior CSS que has usado, deja la estructura que tienes en los archivo .php, luego usa este código CSS

.logoybuscador .logo,
.logoybuscador .solobuscador{
    width:100%;
    margin:auto;
    max-width:100%;
}

@media ( min-width:768px){
	.logoybuscador .logo {
	    width: 60%;
	    float: left;
	}

	.logoybuscador .solobuscador {
	    width: 40%;
	    float: right;
	    margin-top: 12px;
	}	
}

Puedes agregar este código al final del archivo .css de tu tema hijo.

Saludos.

Ahora mucho mejor, Gracias

Si la pantalla es grande se ve bien

Si la pantalla es pequeña también

pero entre medio hay una que se desconfigura
es posible arreglarlo?

Hola Ricardo,

Debes jugar con los valores dados para encontrar tu el punto de equilibro ya que nosotros te damos aproximaciones de lo que puedes hacer para que tu experimentes hasta encontrar algo que sea válido en diferentes anchos de visualización.

Existen miles de dispositivos con anchos diferentes ¿imagínate que tienes que generar un estilo para cada ancho que los usuarios usen en sus dispositivos? no es viable.

Prueba a bajar el porcentaje en este estilo CSS:

@media ( min-width:768px){
	.logoybuscador .logo {
	    width: 60%;
	    float: left;
	}

De 60% a 50%, limpia caché tras guardar los cambios y haz pruebas en dispositivos reales no reduciendo la pantalla de tu navegador, ya que eso no es 100% real.

Saludos

el problema es si alguien tiene (como yo hago normalmente) 2 ventanas abiertas ocupando la mitad de la pantalla, todo se desconfigura

he eliminado (para probar) el mobile-menu-trigger y todo funciona en cualquier medida, pero al volverlo a poner se rompe

como puedo hacer para que aparezca con la pantalla más pequeña de la medida en la que aparece ahora?

con un ipad en horizontal también se ve mal

Hola Ricardo.

prueba con lo siguiente:

@media (max-width: 767px) {
#cabecera .col-buscador {
    width: 50%;
}
}

Puedes modificar el valor de 50% hasta adaptarlo a lo que necesites.

Un saludo

/* logo y buscador */
.logoybuscador .logo,
.logoybuscador .solobuscador{
    width:100%;
    margin:auto;
    max-width:100%;
}
 
@media ( min-width: 768px){
	.logoybuscador .logo {
	    width: 50%;
	    float: left;
	}
 
	.logoybuscador .solobuscador {
	    width: 50%;
	    float: right;
	    margin-top: 12px;
	}	
}

@media (max-width: 768px) {
#cabecera .col-buscador {
    width: 50%;
}
}

he probado desde 20% hasta 80% y todos se ven mal en tablet vertical

he de modificar solo el último o los 3 y ponerles el mismo valor?

Hay manera de colocar el mobile-menu-trigger abajo flotando en la parte inferior izquierda para ver si asi no se rompe?

Hola Ricardo.

elimina el anterior código y prueba con el siguiente:

@media screen and (max-width: 750px) {
.logoybuscador .solobuscador {
width: 45%!important;
margin-top: -2.5em!important;
margin-right: -2em!important;
}

.mobile-menu-trigger-container {
margin-top: 15px!important;
margin-right:22em;

}

Un saludo

Hola, Pepe.

Con este nuevo código ya no se rompe en el ordenador y se ha arreglado en la tablet pero desaparece el logo y el desplegable en la version movil, te mando foto del movil en horizontal y en vertical