Creare footer tre colonne

  • Asakasan

    (@asakasan)


    7 anni, 5 mesi fa

    Buongiorno a tutti,

    utilizzo un tema (Founder) non predisposto per utilizzare widget nel footer.

    Poiché avrei invece necessità di avere un footer predisposto su 3 colonne in cui inserire dei widget, ho provato ad utilizzare questa guida per apportare le modifiche:
    https://codex.wordpress.org/Widgetizing_Themes

    In sostanza ho applicato questo codice nel functions.php del tema child:

    <?php
/**
 * Register our sidebars and widgetized areas.
 *
 */
function arphabet_widgets_init() {

	register_sidebar( array(
		'name'          => 'Home right sidebar',
		'id'            => 'home_right_1',
		'before_widget' => '<div>',
		'after_widget'  => '</div>',
		'before_title'  => '<h2 class="rounded">',
		'after_title'   => '</h2>',
	) );

}
add_action( 'widgets_init', 'arphabet_widgets_init' );
?>

    Dopodiché ho applicato nel footer.php questo codice:

    <?php if ( is_active_sidebar( 'home_right_1' ) ) : ?>
	<div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
		<?php dynamic_sidebar( 'home_right_1' ); ?>
	</div><!-- #primary-sidebar -->
<?php endif; ?>

    Adesso mi appare la possibilità di inserire nel footer dei widget che però sono disposti orizzontalmente, uno sotto l’altro, per l’intera lunghezza del footer.
    Come realizzare tre colonne?
    Da sola non so adattare il codice per ottenere tale risultato, spero di avere una mano!

    Questo è il sito, per capire meglio cosa intendo:

    asakaltrove dot com

    GRAZIE!

Stai visualizzando 1 risposte (di 1 totali)
  • Moderatore Gloria Liuni

    (@glorialchemica)

    7 anni, 5 mesi fa

    Ciao @asakasan,
    come indicato dallo sviluppatore del tema la larghezza delle colonne del footer viene gestita dai CSS e dal nome della classe che metti al div del tuo widget

    function arphabet_widgets_init() {

	register_sidebar( array(
		'name'          => 'Home right sidebar',
		'id'            => 'home_right_1',
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h2 class="rounded">',
		'after_title'   => '</h2>',
	) );

}

    Se noti nella voce before_widget è indicata la classe widget (nel tuo codice non c’è). A questo punto sotto Aspetto > Personalizza > Custom CSS (o CSS personalizzato) provi ad aggiungere la regola che è stata indicata:

    @media all and (min-width: 800px) {

  .sidebar-footer .widget {
    display: inline-block;
    width: 33%;
  }
}

    Se sei poco pratico/a di CSS ti consiglio di leggere qui
    Facci sapere 🙂

    • Questa risposta è stata modificata 7 anni, 5 mesi fa da Gloria Liuni.
Stai visualizzando 1 risposte (di 1 totali)
  • Il topic ‘Creare footer tre colonne’ è chiuso a nuove risposte.