„Table of Content“ Inhaltsverzeichnis mit Rank-Math Modul erstellen

Das in Rank Math integrierte Inhaltsverzeichnis für Blogbeiträge ist sehr praktisch. Wenn das SEO Plugin sowieso installiert ist, brauchst man kein extra Plugin für das Inhaltsverzeichnis. Allerdings kann es vorkommen, das je nach gewähltem Theme, einige Funktionen zur Anpassung des Designs nicht zur Verfügung stehen.

Wenn du Divi verwendest, ist es möglich das Modul über Divi direkt anzupassen. Das hat in meinem Fall den Nachteil, dass ich das Modul extra im Themebuilder setzen muss und ich sehe es dann nicht im Gutenberg Editor.

Ich bin daher wie folgt vorgegangen:

1. Im Gutenberg-Editor das Inhaltsverzeichnis-Modul auswählen und auf die Blockeinstellungen gehen
2. Auf die Registerkarte „Erweiter“ klicken und einen Namen für die CSS-Kalsse in das Feld „CSS-Klasse“ eingeben (Einen Namen verwenden, der beschreibt, was diese Klasse bewirkt – in meinem Beispiel heißt die CSS-Klasse „mein-inhaltsverzeichnis1“)
3. Beitrag aktualisieren bzw. speichern
4. Das Stylesheet der Website öffen (in meinem Fall kann man das in den Divi Optionen machen) und die entsprechenden CSS-Regeln hinzufügen, die die erstellte CSS-Klasse anwählen. Natürlich den Namen verwenden, den man im vorherigen Schritt festgelegt hat.
5. Die CSS-Regeln anpassen, um das Aussehen des Inhaltsverzeichnisses zu ändern. Bsp.: Schriftgröße, Schriftart, Farben, Ausrichtung etc. anpassen

Ich wollte den „Inhalt“ des Inhaltsverzeichnisses mit einer kursiven Schrift haben und die Überschrift, also die „Titel-Verpackung“ in normaler Schrift.

Durch die Einstellungen im Theme in dem Fall mit Divi, sind bereits Farben und Schriftarten, sowie auch die Titels entsprechend eingestellt. Ändere ich jetzt die CSS-Regeln für das Modul, so ändert sich zum Beispiel auch die Titel-Verpackung in kursiv (Schriftart und Farbe bleibt, und zwar deshalb, da im den Einstellungen des Moduls im Gutenberg-Editor die „Titel-Verpackung“ z.B. auf H5 eingestellt wurde, so bleibt der Titel zwar in den Farben und Schriftarten wie voreingestellt im gesamten, aber die CSS-Regel für z.B. „kursiv“ wird auf das komplette Modul angewandt.

Lösung: die Titel-Verpackung auf „div“ einstellen, dann kann dieser Titel in den gewünschten CSS-Regeln extra angewandt werden.

Bemerkung: Alle Versuche die CSS-Regeln über die Rank-Math-Selektoren anzuwählen, funktionieren nicht, wahrscheinlich deshalb, da die Selektoren sich oft ändern und ggf. durch das Theme wiederum überschrieben werden.

Beispiel für die Änderungen:

Ob eine Liste mit Markern oder Zahlen erstellt wird, wird in den Grundeinstellungen von Rank-Math selbst eingestellt.

WICHTIG!! Mit dieser Arbeitsweise muß natürlich in jedem Beitrag das Inhaltsverzeichnis Modul eingegeben werden und jeweils immer dazu die CSS-Klasse.

Wenn man alles immer gleich haben möchten, dann wäre es wohl einfacher das Modul im Divi-Theme-Builder zu setzen, so daß immer das Inhaltsverzeichnis generiert wird, ohne dass man es extra eingibt. Will man das Inhaltsverzeichnis nicht haben, dann könnte man verschiedene Templates einrichten und diese dann entsprechend den Beiträgen oder Kategorien zuweisen, das ist der nächste Schritt, den ich dann ausprobieren werden.

Mein Beispiel der geänderten CSS-Regeln im Stylesheet bzw. in den Divi-Optionen:

Nochmal zum rauskopieren, alles kann natürlich weiter angepasst werden.

/* Anpassung Inhaltsverzeichnis rank-math*/
.mein-inhaltsverzeichnis1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  font-style: italic;
  font-weight: 300;
  color: #bf677c;
  background-color: #f7f5f6;
  padding: 10px;
  border-radius: 5px;  
}

.mein-inhaltsverzeichnis1 > div {
  font-style: normal;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1.5rem;
  color: #605957;
  line-height: 1.5;
  margin-bottom: 10px;
}

.mein-inhaltsverzeichnis1 a {
  color: #bf677c;
}

.mein-inhaltsverzeichnis1 a:hover {
  color: black;
}

@media (max-width: 768px) {
  .mein-inhaltsverzeichnis1 {
    font-size: 0.9rem;
  }
  
  .mein-inhaltsverzeichnis1 > div {
    font-size: 1.1rem;
  }
}