CoBlocks Child

Darf man alte Artikel wieder aufwärmen? Ich denke schon. Jedenfalls mache ich das jetzt hier und beschreibe aktuell die Änderungen an dem hier eingesetzten WordPress Theme CoBlocks.

CoBlocks ist für mich das Theme das am besten zu meinem Blog passt. Mir ist bewusst, dass ich mit diesem Theme gegen den Strom schwimme. Eine Webseite muss heute unbedingt eine Startseite im Grid- oder Masonry-Layout besitzen. Der eigentliche Blog sollte zwei Spalten bestehen. Das alles ist hier nicht zu finden. Hier gibt’s keine Startseite und der Blog ist einspaltig. Eben CoBlocks und sonst nix!

Änderungen an CoBlocks

  1. Child-Theme
  2. keine Google-Fonts
  3. feststehender Header
  4. Beitragsbilder auf Artikelseite
  5. kein Link zu empfohlenen Plugins
  6. Footer

Child-Theme

Ich nutze für all diese Änderungen ein Child-Theme. Das hat für mich den Vorteil, dass ich nach Änderung des Parent-Themes nicht immer wieder von vorne anfangen muss.

Das wichtigste an solchen Child-Themen ist das Einbinden der Stylesheets via functions.php. Gerade an dieser Stelle findet man im Web jede Menge unterschiedlicher Tutorials. Und auch WordPress zeigt eine Funktion um eben beide Styles (die des Parent- und Child-Themes) einzubinden. Doof nur dass dies bei diesem Theme nicht so ganz funktioniert. Nutzt man diesen Code, dann lädt die Seite das Child-Stylesheet zweimal. Das liegt wohl an der Tatsache, dass der Theme-Macher die Funktion get_stylesheet_uri nutzt, die den Pfad des aktuellen Themes zurück liefert. Ich nutze deshalb nachfolgende Einfach-Variante.

<?php
/* Stylesheets -----------------------------------------------------------------*/
function theme_enqueue_styles() {
/* -----------------------------------------------------------------------------*/ 
  $coblocks_theme_version = wp_get_theme('coblocks')->get( 'Version' );
  wp_enqueue_style( 'coblocks-parent-style', get_template_directory_uri() . '/style.css', '', $coblocks_theme_version );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
?>

Update: Stylesheet einbinden

In der Zwischenzeit habe ich die Funktion geändert. Das Einbinden aller Styles in der functions.php des Child-Themes geht doch. Das nachfolgende Funktion ist so im Internet nicht zu finden. Ich habe einige Versuche gebraucht, bis es passte. Hinzu kommt hier noch eine dritte Datei, die die Schriften lokal einbindet.

<?php

/* Stylesheets -----------------------------------------------------------------*/
function theme_enqueue_styles() {
/* -----------------------------------------------------------------------------*/
  $coblocks_theme_version = wp_get_theme('coblocks')->get( 'Version' );	
  $coblocks_child_theme_version = wp_get_theme('coblocks-child')->get( 'Version' );	
  
  $parent_style = 'coblocks-style';  
  wp_deregister_style( $parent_style );
	
  wp_enqueue_style( 'coblocks-local-fonts', get_stylesheet_directory_uri() . '/fonts.css',false, $coblocks_child_theme_version );	
  wp_enqueue_style( 'coblocks-style', get_template_directory_uri() . '/style.css', false, $coblocks_theme_version );
  wp_enqueue_style( 'coblocks-child-style', get_stylesheet_directory_uri() . '/style.css', false, $coblocks_child_theme_version );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
/* -----------------------------------------------------------------------------*/
?>

keine Google-Fonts

Das Theme CoBlocks nutzt die Schriften Heebo und Lora. Heebo für Überschriften und Lora als serife Schrift für den Text. Beide Schriften nutzt das Theme als Google-Fonts. Es ist so dass seit der DSGVO solche Google-Fonts etwas in Verruf geraten sind. Deshalb hoste ich beide Schriften selbst. Wie man das anstellt hat Martina Honecker in einem Artikel sehr gut beschrieben.

<?php
/* Google Fonts aus CoBlocks entfernen -----------------------------------------*/
function mh_dequeue_google_fonts_style() {
/* -----------------------------------------------------------------------------*/ 
  wp_dequeue_style( 'coblocks-fonts' );
}
add_action( 'wp_print_styles', 'mh_dequeue_google_fonts_style' );
/* https://martinahonecker.com/google-fonts-lokal-einbinden --------------------*/
?>

Coblocks selbst nutzt Heebo 400, 500 und 800. Lora wird als regular, italic und 700 benötigt. Alle Schriften und auch den nachstehenden Code bekommt man bei Google Webfonts Helper

/* Typography ------------------------------------------------------------------*/
/* Heebo -----------------------------------------------------------------------*/
/* heebo-regular - latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  src: url('/wp-content/themes/coblocks-child/fonts/heebo-v4-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Heebo'), local('Heebo-Regular'),
       url('/wp-content/themes/coblocks-child/fonts/heebo-v4-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/wp-content/themes/coblocks-child/fonts/heebo-v4-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/wp-content/themes/coblocks-child/fonts/heebo-v4-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/wp-content/themes/coblocks-child/fonts/heebo-v4-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/wp-content/themes/coblocks-child/fonts/heebo-v4-latin-regular.svg#Heebo') format('svg'); /* Legacy iOS */
}
/* heebo-500 - latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  src: url('/wp-content/themes/coblocks-child/fonts/heebo-v4-latin-500.eot'); /* IE9 Compat Modes */
  src: local('Heebo Medium'), local('Heebo-Medium'),
       url('/wp-content/themes/coblocks-child/fonts/heebo-v4-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/wp-content/themes/coblocks-child/fonts/heebo-v4-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('/wp-content/themes/coblocks-child/fonts/heebo-v4-latin-500.woff') format('woff'), /* Modern Browsers */
       url('/wp-content/themes/coblocks-child/fonts/heebo-v4-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/wp-content/themes/coblocks-child/fonts/heebo-v4-latin-500.svg#Heebo') format('svg'); /* Legacy iOS */
}
/* heebo-800 - latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 800;
  src: url('/wp-content/themes/coblocks-child/fonts/heebo-v4-latin-800.eot'); /* IE9 Compat Modes */
  src: local('Heebo ExtraBold'), local('Heebo-ExtraBold'),
       url('/wp-content/themes/coblocks-child/fonts/heebo-v4-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/wp-content/themes/coblocks-child/fonts/heebo-v4-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('/wp-content/themes/coblocks-child/fonts/heebo-v4-latin-800.woff') format('woff'), /* Modern Browsers */
       url('/wp-content/themes/coblocks-child/fonts/heebo-v4-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/wp-content/themes/coblocks-child/fonts/heebo-v4-latin-800.svg#Heebo') format('svg'); /* Legacy iOS */
}

/* Lora ------------------------------------------------------------------------*/
/* lora-regular - latin */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  src: url('/wp-content/themes/coblocks-child/fonts/lora-v13-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Lora Regular'), local('Lora-Regular'),
       url('/wp-content/themes/coblocks-child/fonts/lora-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/wp-content/themes/coblocks-child/fonts/lora-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/wp-content/themes/coblocks-child/fonts/lora-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/wp-content/themes/coblocks-child/fonts/lora-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/wp-content/themes/coblocks-child/fonts/lora-v13-latin-regular.svg#Lora') format('svg'); /* Legacy iOS */
}
/* lora-italic - latin */
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  src: url('/wp-content/themes/coblocks-child/fonts/lora-v13-latin-italic.eot'); /* IE9 Compat Modes */
  src: local('Lora Italic'), local('Lora-Italic'),
       url('/wp-content/themes/coblocks-child/fonts/lora-v13-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/wp-content/themes/coblocks-child/fonts/lora-v13-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/wp-content/themes/coblocks-child/fonts/lora-v13-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('/wp-content/themes/coblocks-child/fonts/lora-v13-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/wp-content/themes/coblocks-child/fonts/lora-v13-latin-italic.svg#Lora') format('svg'); /* Legacy iOS */
}
/* lora-700 - latin */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 700;
  src: url('/wp-content/themes/coblocks-child/fonts/lora-v13-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Lora Bold'), local('Lora-Bold'),
       url('/wp-content/themes/coblocks-child/fonts/lora-v13-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/wp-content/themes/coblocks-child/fonts/lora-v13-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('/wp-content/themes/coblocks-child/fonts/lora-v13-latin-700.woff') format('woff'), /* Modern Browsers */
       url('/wp-content/themes/coblocks-child/fonts/lora-v13-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/wp-content/themes/coblocks-child/fonts/lora-v13-latin-700.svg#Lora') format('svg'); /* Legacy iOS */
}

feststehender Header

Ich habe den Header der Seite mit dem Bild, den Social-Links und der Navigation für Viewports größer 700 Pixels fixiert. Dazu genügen einige Zeilen CSS

/* Header ----------------------------------------------------------------------*/
@media only screen and (min-width: 700px) { /* Position Fixed bei großen Viewports => immer sichtbar */
  .site-header { 
    position: fixed !important;
    opacity: 0.9 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 999 !important;
    background-color: #ffffff !important;
  }

  .site-content { /* Inhalt braucht jetzt mehr Abstand zum Seitenanfang */
    margin-top: 4em;
  }  
}

Beitragsbilder auf Artikelseite

Normalerweise zeigt das Theme keine Beitragsbilder auf der Artikelseite an. Verantwortlich dafür ist die Funktion function coblocks_post_thumbnail() in der Datei inc/template-tags.php. Dort findet man folgenden Codezeilen.

<?php
if ( post_password_required() || is_attachment() || is_single() ) {
  return;
}
?>

In dieser If-Abfrage ist das Conditional-Tag is_single() zu finden. Entfernt man dies werden die Beitragsbilder auch auf der Einzelseite angezeigt. Ich habe ganz einfach die komplette, abgeänderte Funktion inklusive der Abfrage if ( ! function_exists( 'coblocks_post_thumbnail' ) ) in meiner functions.php gespeichert. Klappt wunderbar!

Kein Link zu empfohlene Plugins

Das Theme erzeugt im Backend unter Design ein Link zu empfohlenen Plugins. Der Author preist dort seine Gutenberg-Blocks an. Das brauche ich nicht und habe es mit nachfolgender Funktion entfernt.

<?php
/* Werbung für empfohlene Plugins entfernen ------------------------------------*/
function unhook_tgpma() {
/* -----------------------------------------------------------------------------*/
  remove_action( 'tgmpa_register', 'coblocks_register_required_plugins' );
}
add_action('init', 'unhook_tgpma');
/* -----------------------------------------------------------------------------*/
?>

Footer

Auch den Footer habe ich geändert. Normalerweise hat dieses Theme grundsätzlich ein Widget- und auch ein Navigationsbereich am unteren Ende der Seite. Das habe ich mit nachfolgender Abfrage für einige Teile der Webseite deaktiviert. Die Widgets und die Navigation ist jetzt nur noch auf der Startseite, der Artikelseite, im Archiv und bei der Suche zu sehen. Auf allen anderen Seiten nicht.

<?php if ( is_home() || is_single() || is_archive() || is_search() ) { ?>
.site-footer { /* Abstand zum Seitenende bei kleinen Bildschirmen */
  padding: 4em 0 1em 0;
}

@media only screen and (min-width: 700px) { /* Abstand zum Seitenende bei großen Bildschirmen */
  .site-footer {
    padding: 7em 0 1em 0;
  }
}

Wichtig: Ich habe dieses Snippets, hier in diesem Blog, getestet. Bei mir läuft es fehlerfrei. Ihr solltet, falls ihr meinen Code nutzt, trotzdem vorsichtig sein. Ich empfehle eine Sicherung der Datei, die ihr ändert und auch der gesamten Installation, bevor ihr den Code-Schnipsel bei euch einbaut.