Runde Gravatars in WordPress anzeigen: Ein umfassender Leitfaden für Deutschland

Gravatars, kurz für Globally Recognized Avatars, sind kleine, visuelle Darstellungen, die Benutzer im Internet identifizieren. In WordPress-Websites spielen sie eine wichtige Rolle bei der Personalisierung von Kommentaren, Benutzerprofilen und anderen interaktiven Elementen. Standardmäßig werden Gravatars oft in quadratischer Form angezeigt. In diesem Artikel zeigen wir, wie Sie runde Gravatars in Ihrer WordPress-Installation anzeigen können, speziell zugeschnitten auf die Bedürfnisse deutscher Benutzer und Webentwickler.

Warum runde Gravatars?

Die Entscheidung, runde Gravatars anstelle der standardmäßigen quadratischen Form zu verwenden, ist oft ästhetischer Natur. Runde Gravatars können ein weicheres, moderneres und benutzerfreundlicheres Aussehen erzeugen. Sie passen gut zu minimalistischen Designs und verleihen der Website ein professionelleres Erscheinungsbild. Darüber hinaus können sie dazu beitragen, eine konsistente visuelle Identität zu schaffen, insbesondere wenn das restliche Design der Website abgerundete Elemente enthält.

Methoden zur Anzeige runder Gravatars

Es gibt verschiedene Möglichkeiten, runde Gravatars in WordPress anzuzeigen. Wir werden uns auf die gängigsten und einfachsten Methoden konzentrieren, die sowohl für Anfänger als auch für fortgeschrittene Benutzer geeignet sind. Diese beinhalten die Verwendung von CSS, Plugins und benutzerdefinierten Funktionen.

CSS-Methode

Die CSS-Methode ist die einfachste und schnellste Möglichkeit, Gravatars abzurunden. Sie erfordert keine Änderungen an den WordPress-Kerndateien und ist daher relativ sicher und einfach zu implementieren.

1. Zugriff auf den Customizer oder das Theme’s CSS: Gehen Sie im WordPress-Dashboard zu “Design” -> “Customizer” oder “Design” -> “Theme Editor”.
2. Hinzufügen des CSS-Codes: Fügen Sie den folgenden CSS-Code in den Customizer unter “Zusätzliches CSS” oder in die style.css-Datei Ihres Themes ein:

  .avatar {
    border-radius: 50%;
    overflow: hidden;
  }
  

Dieser Code wendet einen `border-radius` von 50% auf alle Elemente mit der Klasse `avatar` an. Die Eigenschaft `overflow: hidden` stellt sicher, dass der Gravatar nicht über den runden Rahmen hinausragt. Es ist wichtig zu beachten, dass diese Methode nur funktioniert, wenn die Gravatars bereits mit der Klasse `avatar` ausgezeichnet sind. Dies ist in den meisten WordPress-Themes der Fall.

Verwendung von Plugins

Für Benutzer, die sich nicht mit CSS auskennen oder eine umfassendere Lösung suchen, gibt es verschiedene WordPress-Plugins, die die Anzeige runder Gravatars vereinfachen.

Beispiele für Plugins:

• WP User Avatar: Dieses Plugin ermöglicht es Benutzern, eigene Avatare hochzuladen und zu verwalten, falls sie keine Gravatar-Konten haben. Es bietet auch Optionen zur Anpassung der Avatar-Form.
• Simple Custom CSS: Obwohl es kein reines Gravatar-Plugin ist, ermöglicht Simple Custom CSS das einfache Hinzufügen von benutzerdefiniertem CSS-Code, ohne die Theme-Dateien direkt bearbeiten zu müssen.
• Avatar Manager: Dieses Plugin ist ein weiteres Tool, um die Avatare auf Ihrer Website zu verwalten und Optionen zur Anpassung der Avatar-Form anzubieten.

Die Installation und Aktivierung dieser Plugins ist in der Regel unkompliziert. Suchen Sie im WordPress-Dashboard unter “Plugins” -> “Installieren” nach dem gewünschten Plugin, installieren Sie es und aktivieren Sie es anschließend.

Nach der Aktivierung des Plugins sollten Sie die Einstellungen überprüfen, um die Avatar-Form anzupassen. Die genauen Schritte hängen vom jeweiligen Plugin ab, aber in der Regel finden Sie die Optionen im Einstellungsbereich des Plugins.

Benutzerdefinierte Funktion (functions.php)

Für fortgeschrittene Benutzer, die eine präzisere Kontrolle über die Gravatar-Darstellung wünschen, kann eine benutzerdefinierte Funktion in der `functions.php`-Datei des Themes erstellt werden. Diese Methode erfordert ein gewisses Maß an Programmierkenntnissen in PHP.

Warnung: Die direkte Bearbeitung der `functions.php`-Datei kann zu Fehlern führen, wenn sie nicht korrekt durchgeführt wird. Es wird empfohlen, vor der Bearbeitung ein Backup der Datei zu erstellen oder ein Child-Theme zu verwenden.

1. Erstellen eines Child-Themes (empfohlen): Ein Child-Theme ermöglicht es Ihnen, Änderungen am Theme vorzunehmen, ohne die Originaldateien zu verändern.
2. Zugriff auf die `functions.php`-Datei: Gehen Sie im WordPress-Dashboard zu “Design” -> “Theme Editor” und wählen Sie die `functions.php`-Datei Ihres Child-Themes aus.
3. Hinzufügen des Codes: Fügen Sie den folgenden Code in die `functions.php`-Datei ein:

  function round_gravatar($avatar_defaults) {
    $myavatar = get_bloginfo('template_directory') . '/images/default-avatar.png'; //Optional: Pfad zu einem Standard-Avatar
    $avatar_defaults[$myavatar] = 'Runder Standard-Avatar'; //Optional: Beschreibung des Standard-Avatars
    return $avatar_defaults;
  }
  add_filter( 'avatar_defaults', 'round_gravatar' );

  function get_round_avatar( $avatar ) {
    $avatar = str_replace("class='avatar", "class='avatar round-avatar", $avatar);
    return $avatar;
  }
  add_filter( 'get_avatar', 'get_round_avatar' );

  function add_round_avatar_style() {
      echo '';
  }
  add_action('wp_head', 'add_round_avatar_style');
  

Dieser Code besteht aus drei Funktionen:

• `round_gravatar($avatar_defaults)`: (Optional) Diese Funktion ermöglicht es, einen benutzerdefinierten Standard-Avatar festzulegen, falls ein Benutzer keinen Gravatar hat.
• `get_round_avatar( $avatar )`:** Diese Funktion fügt die Klasse `round-avatar` zu den Avataren hinzu.
• `add_round_avatar_style()`:** Diese Funktion fügt den CSS-Code für die runde Form hinzu.