Ein neuer Widget-Bereich für meine Seite

Mir gefällt das Theme Harrison noch immer sehr gut. Lediglich ein nutzbarer Widget-Bereich fehlt mir. Dabei setze ich nicht auf zwei Spalten, sondern auf das untere Ende der Webseite. Harrison bringt schon einen Widget.Bereich mit, der nennt sich „Footer Copyright“. Die Widgets erscheinen dann dort wo auch meine Links „Datenschutz“ und „Impressum“ zu finden sind. Das ist nicht so schön. Harrison Pro bringt wohl jede Menge Widget-Bereiche mit. Allerdings gefällt es mir gar nicht. Also muss was Eigenes her!

Es ist jetzt so dass ich das Rad nicht neu erfinden muss. Im Internet gibt es jede Menge Anleitungen die erklären wie man einen Widget-Bereich in ein Child-Theme einbindet. Eine sehr gute Anleitung bietet Thomas Weichselbaumer. Er ist auch der Macher von Harrison. Thomas erklärt das Einbinden anhand des Themes Twenty Seventeen. Ich habe die Zeilen für Harrison angepasst. Die erste Funktion registriert das Widget. Die zweite Funktion stellt den Code zum Einbau in das Theme zur Verfügung.

<?php
function harrison_child_widgets_init() {
  register_sidebar( array(
    'name'          => esc_html__( 'Footer Widgets', 'harrison-child' ),
    'id'            => 'footer-widgets',
    'description'   => esc_html__( 'Erscheint auf der Blogstartseite unterhalb der Seitennummerierung', 'harrison-child' ),
    'before_widget' => '<section id="%1$s" class="widget %2$s">',
    'after_widget'  => '</section>',
    'before_title'  => '<h4 class="widget-title">',
    'after_title'   => '</h4>',
  ) );
}
add_action( 'widgets_init', 'harrison_child_widgets_init' );

<?php
function harrison_child_footer_widgets() {
  if ( is_active_sidebar( 'footer-widgets' ) ) : ?>
  
    <div class="footer-widgets widget-area">
      <?php dynamic_sidebar( 'footer-widgets' ); ?>
    </div>
  
  <?php endif;
}

Der Widget-Bereich sollte nur auf der Blogstartseite erscheinen. Ich habe deshalb die Funktion harrison_child_footer_widgets() in das Template home.php eingebaut.

Fehlt noch die Anpassung via Stylesheet. Dafür nutze ich folgenden Code. Er sorgt für die richtige Breite, den Abstand und färbt den Bereich grau ein.

.footer-widgets {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  padding: 1.5rem;
}

.widget-area {
  border-top: 1px solid;
  border-top-color: currentcolor;
  border-color: rgba(0, 0, 0, 0.1);
  border-color: var(--page-border-color);
  background-color: var(--page-light-bg-color);
  background-color: rgba(0, 0, 0, 0.05);
}

.widget {
  margin: 1.5rem auto;
  max-width: 880px;
  width: 100%;
}

@media only screen and (min-width: 480px) {
  .footer-widgets {
    margin-left: -2rem;
    margin-right: -2rem;
    padding: 2rem;
  }
	
  .widget {
    margin-bottom: 2rem;
    margin-top: 2rem;
  }
}

@media only screen and (min-width: 640px) {
  .footer-widgets {
    margin-left: -3rem;
    margin-right: -3rem;
    padding: 3rem;
  }
	
  .widget {
    margin-bottom: 3rem;
    margin-top: 3rem;
  }
}

@media only screen and (min-width: 960px) {
  .footer-widgets {
    margin-left: -4rem;
    margin-right: -4rem;
    padding: 4rem;
  }
	
  .widget {
    margin-bottom: 4rem;
    margin-top: 4rem;
  }
}

@media only screen and (min-width: 1280px) {
  .footer-widgets {
    margin-left: -5rem;
    margin-right: -5rem;
    padding: 5rem;
  }
	
  .widget {
    margin-bottom: 5rem;
    margin-top: 5rem;
  }
}