buscador en la barra superior  

Página 1 / 2
 
Ricardo
 Ricardo
Reputable Member

Estoy intentando colocar el buscador en el header
a la derecha del logo para PC y debajo de este para movil

he editado el archivo header.php y he insertado este código

[aws_search_form id="1"]

que es el shortcode que ya uso en la web más abajo

pero en vez de aparecer el buscador aparece solo este código (ahora lo he quitado)

alguna forma de colocar ahí el buscador?

gracias

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 02/02/2019 4:34 pm
Jhon Marreros Guzman
 Jhon Marreros Guzman
Soporte CMS Webempresa Moderator

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.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 02/02/2019 5:24 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Ricardo
 Ricardo
Reputable Member

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

ResponderCitar
Respondido : 02/02/2019 6:08 pm
Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Admin

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

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.

ResponderCitar
Respondido : 02/02/2019 6:46 pm

Cursos Gratuitos WordPress

Ricardo
 Ricardo
Reputable Member

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

ResponderCitar
Respondido : 02/02/2019 6:51 pm
Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Admin

Hola Ricardo,

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

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

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.

ResponderCitar
Respondido : 03/02/2019 1:25 am

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Ricardo
 Ricardo
Reputable Member

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

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;
}
ResponderCitar
Respondido : 03/02/2019 10:52 am
Jhon Marreros Guzman
 Jhon Marreros Guzman
Soporte CMS Webempresa Moderator

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.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 03/02/2019 3:05 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Ricardo
 Ricardo
Reputable Member

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?

ResponderCitar
Respondido : 03/02/2019 7:22 pm
Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Admin

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

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.

ResponderCitar
Respondido : 03/02/2019 7:58 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Ricardo
 Ricardo
Reputable Member

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

ResponderCitar
Respondido : 03/02/2019 8:47 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

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

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¿Has probado WpCenter?, es nuestro nuevo manager de WordPress desde el propio cPanel sin necesidad de acceder a tu administración, te permitirá configurar actualizaciones automáticas y mucho más.
Pruébalo accediendo a tu cPanel > Aplicaciones Webempresa > WpCenter
¡Gracias!.

ResponderCitar
Respondido : 04/02/2019 10:58 am

Cursos Gratuitos WordPress

Ricardo
 Ricardo
Reputable Member
/* 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?

ResponderCitar
Respondido : 04/02/2019 11:24 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

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

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¿Has probado WpCenter?, es nuestro nuevo manager de WordPress desde el propio cPanel sin necesidad de acceder a tu administración, te permitirá configurar actualizaciones automáticas y mucho más.
Pruébalo accediendo a tu cPanel > Aplicaciones Webempresa > WpCenter
¡Gracias!.

ResponderCitar
Respondido : 04/02/2019 12:03 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Ricardo
 Ricardo
Reputable Member

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

ResponderCitar
Respondido : 04/02/2019 1:17 pm
Página 1 / 2

Por favor Iniciar Sesión o Registro