Soporte » Diseño – Temas y plantillas » Ayuda para incluir botones de redes sociales en la cabecera

  • Resuelto naxo_3103

    (@naxo_3103)


    Hola a todos.
    Llevo unos días intentando colocar botones de redes sociales en la cabecera de mi plantilla.
    Estoy utilizando la plantilla Twenty eleven y me gustaría poder insertar esos botones encima del cuadro de búsqueda que tiene esta plantilla a la derecha del título.
    Conocéis la manera de hacerlo o el código o plugin que insertar???
    Muchas gracias y un saludo
    Naxo

Viendo 15 respuestas - de la 1 a la 15 (de un total de 20)
  • Hola.
    ¿Lograste insertar tus links o todavía no? Si no lo lograste, te pido que compartas un link a tu sitio (si lo estás desarrollando localmente, no hay pb).
    Gracias.

    Iniciador del debate naxo_3103

    (@naxo_3103)

    Buenas:

    Todavía no lo he conseguido, los tengo puestos en el sidebar pero ahí no quiero tenerlos preferiría tenerlos encima del buscador. Te paso el enlace del sitio en el que tengo este problema. http://www.laguiaparaexporta.com

    Gracias

    Ok. Es relativamente fácil de hacer. Como el plugin que estás usando para tus íconos sociales sólo funciona mediante un widget, lo que tendríamos que hacer es crear un subtema (child theme) de la plantilla de tu elección y agregar una sidebar justo antes del buscador.
    Respecto del tema para usar, estás seguro que querés usar TwentyEleven? Porque WP sacó un tema oficial nuevo, TwentyTwelve, hace poco y quizá te convenga ese.
    Si me confirmás qué tema querés usar, te digo cómo hacer.
    Saludos.

    Iniciador del debate naxo_3103

    (@naxo_3103)

    Me interesa más utilizar twenty-eleven porque no me termina de gustar el nuevo tema que ha sacado wordpress.
    Si me explicaras como poder hacerlo con twnty-eleven te lo agradecería.

    Un saulo

    Sí, no hay problema. Te quería consultar por cualquier cosa. Bueno, acá va un instructivo paso a paso.

    Paso 1. Crear un subtema de TwentyEleven
    Los subtemas o Child_Themes son una herramienra muy práctica de WP para realizar cambios en el tema principal sin modificar sus archivos, cosa de que, si se llega a actualizar, no se pierdan todos los cambios realizados. Para hacer uno, tenés que:
    a. Crear una carpeta con el nombre de tu elección dentro de de wp-content/themes, por ejemplo, twentyeleven-child.
    b. Crear un archivo style.css dentro de esa carpeta, y pegá este código adentro:

    /*
    Theme Name:     TwentyEleven Child
    Description:    Child theme for the TwentyEleven theme
    Author:         Marventus
    Template:       twentyeleven
    Version:        0.1
    */

    Ese código sirve le suminisstra a WP la información necesaria para crear un subtema. Para comprobar que el subtema funciona, podés subir tu nuevo subtema a tu servidor y ver si aparece listado en el Panel de control(Apariencia –> Temas).

    Paso 2: Registrar una sidebar adicional
    Como nuestra idea es agregar una nueva sidebar arriba del buscador para poner el widget social, primero hay que registrarla. Para eso:
    a. Creá un archivo functions.php en lel directorio raíz de tu subtema. Como estas haciendo un subtema, todas las funciones que programes dentro de este archivo se van a agregar a las del tema principal (sin sobrescribirlas).
    El código para pegar en este archivo es:

    <?php
    function gpe_widget_init() {
    	register_sidebar( array(
    		'name' => __( 'Header Sidebar', 'twentyeleven-child' ),
    		'id' => 'header-sidebar',
    		'before_widget' => '<div id="%1$s" class="widget %2$s">',
    		'after_widget' => "</div>",
    		'before_title' => '<h3 class="widget-title">',
    		'after_title' => '</h3>',
    	) );
    }
    add_action( 'widgets_init', 'gpe_widget_init' );

    Paso 3. Incorporar la sidebar al subtema
    Por ahora, todo lo que hiciste fue registrar nuestra nueva sidebar. Ahora hay que insertarla dentro del subtema. Con la excepción del archivo functions.php (que, como vimos, se combina con el del tema principal), cualquier archivo que coloques dentro de la carpeta del subtema y de nombre y ubicación idénticos al del tema principal se va a imponer sobre el de la plantilla principal.
    Por ese motivo, y por el lugar en el que querés colocar la sidebar, tenés que:
    a. Colocar una copia del archivo header.php del tema principal en el directorio raíz de tu subtema.
    b. Abrir la copia y buscar el código siguiente:

    <?php
    	else :
    ?>
    	<?php get_search_form(); ?>
    <?php endif; ?>
    <nav id="access" role="navigation">

    c. Reemplazar ese código por este:

    <?php
    	else :
    		if ( is_active_sidebar( 'header-sidebar' ) )
    			dynamic_sidebar( 'header-sidebar' );
    		 get_search_form(); ?>
    	<?php endif; ?>
    <nav id="access" role="navigation">

    Esas dos líneas van a insertar la sidebar que registrste si está activa. Por el lugar en el que la querés, sólo aparece si la opción
    de tema Texto de cabecera está tildada.

    Paso 4. Agregar el widget social a la nueva sidebar
    Para eso, tenés que ir a Apariencia –> Widgets, colocar el widget social en la nueva sidebar que registraste y guardar los cambios,
    Una vez hecho eso, chequeá tu sitio a ver si aparecen. Si todo salió bien, los vas a ver en el home pero van a estar horribles y enormes. Eso es porque hay que personalizarlos un poco con CSS, lo que va a ser nuestro último paso.

    Paso 5. Personalizar la apariencia de los links
    Para eso, tenés que abrir el archivo style.css de tu subtema, y colocar estos estilos allí dentro, después de la línea siguiente:

    @import url("../twentyeleven/style.css");

    Hago enfasis en lo de «después» porque no puede haber absolutamente ningún estilo antes de un @import, ya que si no éste no funciona. Va el código:

    #branding #searchform {
    	top: 6.5em!important;
    }
    #branding #searchform input {
    	width:116px!important;
    }
    #branding .widget {
    	display: inline-block!important;
    	position:absolute;
    	top: 2.5em;
    	right: 6.5%;
    }
    #branding .widget h3{
    	line-height:1.6em;
    }
    #branding .socialmedia-buttons img {
    	display: inline;
    	width: auto!important;
    }

    Una vez agregados esos estilos, los íconos van a aparecer donde deberían, justo arriba del buscador. Por supuesto, podés cambiar los estilos, tamaños y posición a voluntad. Yo lo calculé para que el buscador tenga el mismo ancho que los íconos que vos tenías en tu sitio (o sea, cuatro), pero si necesitás hacerlo más ancho o más estrecho, basta con modificar este estilo:

    #branding #searchform input {
    	width:116px!important;
    }

    Espero que este tutorial te sirva. Cualquier consulta avisame.
    ¡Saludos!

    Ah. Me di cuenta que el efecto del buscador cuando hacés click adentro (se agranda) se pierde con mi código CSS. Para mantenerlo, cambiá esta parte de mi código:

    #branding #searchform input {
    	width:116px!important;
    }

    por esta:

    #branding #s {
    	width:116px;
    }

    Iniciador del debate naxo_3103

    (@naxo_3103)

    Buenas Marventus. Muchísimas gracias por este tutorial.

    Hago todos los pasos como tu dices, pero cuando voy a insertar el widget en la nueva sidebar y voy a Apariencia/widgets el nuevo sidebar no aparece.
    He revisado absolutamente todos los pasos y hago todo como me dices, pero no me aparece la sidebar.

    Hola, naxo.
    ¡Qué raro que no te ande! Acabo de seguir mi propio tutorial desde cero y me anduvo perfectamente. ¿Activaste el subtema luego de crearlo?
    Igual, por las dudas, hagamos una cosa: te comparto el subtema por Google Drive, así te lo descargás directamente.
    Si no te anda, fijate de desactivar todos los plugins (menos tu anti-spam) y ver si funciona.
    Saludos.

    Iniciador del debate naxo_3103

    (@naxo_3103)

    Active el subtema, pero cuando lo activo pierdo absolutamente todo el orden y diseño del blog.

    Sí, tenés que volver a configurar las opciones del tema, y respecto de los menús, tenés que simplemente agregarlos de vuelta (no es necesario que los crees desde cero).
    Esto pasa siempre que agregás un nuevo tema, sea principal o subtema.
    Más allá de eso, ¿funcionó el sidebar o no?

    Iniciador del debate naxo_3103

    (@naxo_3103)

    Voy a activar el tema hijo para que veas como queda y me dices si está bien.

    Lo acabo de ver. Te salteaste un paso, el de los estilos CSS: tu hoja de esitlos está vacía.
    Acordate de copiar esto adentro:

    @import url("../twentyeleven/style.css");
    
    #branding #searchform {
        top: 6.5em!important;
    }
    #branding #s {
        width:116px;
    }
    #branding .widget {
        display: inline-block!important;
        position:absolute;
        top: 2.5em;
        right: 6.5%;
    }
    #branding .widget h3{
        line-height:1.6em;
    }
    #branding .socialmedia-buttons img {
        display: inline;
        width: auto!important;
    }

    El contenido completo de style.css tendría que ser:

    /*
    Theme Name:     TwentyEleven Child
    Description:    Child theme for the TwentyEleven theme
    Author:         Marventus
    Template:       twentyeleven
    Version:        0.1
    */
    
    @import url("../twentyeleven/style.css");
    
    #branding #searchform {
        top: 6.5em!important;
    }
    #branding #s {
    	width:116px;
    }
    #branding .widget {
        display: inline-block!important;
        position:absolute;
        top: 2.5em;
        right: 6.5%;
    }
    #branding .widget h3{
        line-height:1.6em;
    }
    #branding .socialmedia-buttons img {
        display: inline;
        width: auto!important;
    }

    Ahí debería andar bien.

    Iniciador del debate naxo_3103

    (@naxo_3103)

    Ahora si, muchísimas gracias.

    Lo único que el buscador se cuela en la barra de menú. Como puedo hacer que esa zona sea más grande para que no se superponga el buscador con el menú??

    Buenísimo.
    Para subir un poco los botones y el buscador, cambiá estas líneas:

    #branding #searchform {
        top: 6.5em!important;
    }
    /* etc. */
    #branding .widget {
    /* etc. */
        top: 2.5em;
    /* etc. */
    }

    Por estas:

    #branding #searchform {
        top: 4em!important;
    }
    /* etc. */
    #branding .widget {
    /* etc. */
        top: 1em;
    /* etc. */
    }

    Iniciador del debate naxo_3103

    (@naxo_3103)

    Perfecto. Muchísimas gracias.

    Por mi parte doy el tema por solucionado.

Viendo 15 respuestas - de la 1 a la 15 (de un total de 20)
  • El debate ‘Ayuda para incluir botones de redes sociales en la cabecera’ está cerrado a nuevas respuestas.