Wie benutzt man es und macht das Beste daraus?

von

Ikonen faszinieren!

Sie haben die Kraft, schnell mit dem Publikum zu kommunizieren, indem sie eine starke visuelle Verbindung herstellen.

Aus diesem Grund werden Symbole überall ausgiebig verwendet, einschließlich WordPress-Websites.

Außerdem kann es langweilig sein, mehrere Monate lang dasselbe Thema auf Ihrer Website zu verwenden. Es ist normal.

Und dann werden Sie auf der Suche nach etwas Interessanterem sein und sich wieder langweilen,

Und der Kreislauf geht weiter und weiter…

Also, wie kannst du diesen Kreislauf der Langeweile überspringen?

Dashicons sind eine hervorragende Möglichkeit!

Es kann die Ästhetik Ihrer Website aufpeppen und Ihnen helfen, sich abzuheben. Es wird Sie auch davor bewahren, zusätzliche Anstrengungen zu unternehmen und Ihre Website mit unnötigen Bildern zu überladen, die die Seitengeschwindigkeit verlangsamen.

Sehen wir uns also Dashicons an und wie Sie sie effektiv auf Ihrer WordPress-Website einsetzen können.

Was sind WordPress Dashicons?

Dashicons sind die offiziellen Icon-Fonts von WordPress, die vor Jahren mit der Version 3.8 eingeführt wurden. Diese Schriftarten sind cool und toll anzusehen, wenn Sie sie auf Ihrer Website verwenden. Es handelt sich um hochwertige SVG-Dateien, die Sie ohne Pixelisierung problemlos auf jede beliebige Größe skalieren können.

Da sie native WordPress-Unterstützung besitzen, da sie von ihrem Team selbst erstellt wurden, können Sie sie direkt verwenden, ohne zusätzliche Skripte zu laden. Es sind rund 350 Symbolschriften enthalten, die Sie im offiziellen finden können Ressourcen für WordPress-Entwickler.

Sie haben diese Symbole basierend auf dem Thema kategorisiert, außerdem könnten Sie ein dynamisches Suchfeld sehen, mit dem Sie verfügbare Symbole filtern können.

Sie können diese Symbole verwenden für:

  • WordPress-Dashboard
  • Navigationsmenüs
  • Seiten und Beiträge
  • Metadaten
  • Editor-Elemente
  • Benutzerdefinierte Plugins und Designs
  • Admin-Panels
  • Frontend-Design

Ist Ihnen aufgefallen, dass ich wiederholt „Symbole“ sage?

  So fügen Sie der Apple ID Wallet Geld hinzu

Hier meine ich nur Symbolschriften.

Keine Bilder in Form von Icons.

Ja, es gibt einen Unterschied zwischen den beiden.

Lassen Sie uns das enträtseln.

Unterschied zwischen Bildsymbolen und Symbolschriften?

Icon-Fonts und Bild-Icons sind sich etwas ähnlich, aber anstelle von Alphabeten gibt es in Icon-Fonts Vektorsymbole.

Wurde das zu technisch?

Lassen Sie mich das klarstellen.

Grundsätzlich ähneln diese Symbolschriften Bildern, die Sie verwenden können, um Symbole auf Ihrer Website hinzuzufügen, aber nicht einem tatsächlichen Bild.

Sie bieten Ihnen viele Vorteile.

Wie?

Finde es im nächsten Abschnitt heraus.

Warum sollten Sie sie verwenden?

  • Skalierbar wie Texte, die auf Ihrer Website verwendet werden, da es sich um Schriftarten handelt
  • Geringes Gewicht, das die Ladegeschwindigkeit Ihrer Seite im Vergleich zu Bildern nicht beeinträchtigt
  • Kann die Symbolfarbe über CSS festlegen und zusätzliche Eigenschaften wie Verlaufsfarbe, Schatten usw. hinzufügen.
  • Hervorragend geeignet, um zu viele HTTP-Anforderungen zu sparen, indem Sie Schriftarten auf einmal laden können, die Sie auf Ihren Seiten verwenden können. Wenn Sie viele Bilder auf der Website verwenden, müssen Sie viele Anfragen stellen, um sie abzurufen, was die Ladezeit der Seite verlängert.
  • Einfach zu bedienen und anzupassen als Bilder. Sie können erkennbare und kreative Symbole hinzufügen, ohne sie jedes Mal neu erstellen zu müssen, wenn Sie ein Symbol für einen Videoplayer, eine E-Mail, Musik oder etwas anderes benötigen.
  • Bessere Zugänglichkeit, da sie direkt in WordPress integriert sind

Wie benutzt man sie?

Die Verwendung von Dashicons ist keine Raketentechnik.

Vertrau mir; Ich kenne beides :0

Befolgen Sie einfach die unten aufgeführten Schritte, um mit WordPress Dashicons zu beginnen.

Schritt 1: Aktivieren Sie Dashicons auf Ihrer WordPress-Seite

Bevor Sie beginnen, aktivieren Sie Dashicons dort, wo Sie sie benötigen, z. B. ein Design. Dazu müssen Sie der Datei function.php einige Codes hinzufügen.

  Python enumerate() Funktion, erklärt mit Beispielen

Es zu tun:

  • Gehen Sie zunächst in Ihrem WordPress-Dashboard zum Theme/Appearance Editor.
  • Öffnen Sie die Datei function.php.
  • Scrollen Sie bis zum Ende der Datei und fügen Sie ein paar Codezeilen hinzu, um Skripte in die Warteschlange einzureihen
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}

Das obige Beispiel dient dazu, Dashicons im Frontend zu aktivieren.

Stellen Sie sicher, dass Sie ein untergeordnetes Thema erstellen, bevor Sie die Datei functions.php bearbeiten. Denn wenn Sie die Designdatei direkt bearbeiten und dann ein Update für dieses Design kommt, werden alle Änderungen, die Sie an der Datei vornehmen, überschrieben.

Schritt 2: Finden Sie Dashicon HTML- und CSS-Codes

WordPress.org bietet eine Bibliothek von Dashicons, die Ihnen hilft, CSS- und HTML-Codes zu finden, die zu jedem Symbol gehören. Gehen Sie hier zu den Entwicklerressourcen, um die Dashicons zu finden, die Sie verwenden möchten, und dann:

  • Klicken Sie auf das Symbol Ihres Wunsches.
  • Wählen Sie zwischen „CSS kopieren“ oder „HTML kopieren“, indem Sie darauf klicken.
  • Jetzt sehen Sie ein Popup-Fenster. Kopieren Sie einfach den Code in die Zwischenablage.
  • Entscheiden Sie, wo Sie das Symbol verwenden möchten, z. B. Themen, Metadaten, Navigationsmenü usw.
  • Fügen Sie den kopierten Code in das Text-Widget oder den Texteditor des ausgewählten Ortes ein.
  • Ändern Sie das Aussehen von Symbolen mit benutzerdefiniertem CSS

Das ist es.

Außerdem haben alle Symbole standardmäßig eine Größe von 20 Pixel. Sie können es mit den CSS-Elementen von Optionen wie Google Chromes Inspect Element oder Firefox’s FireBug ändern.

Wie macht man das Beste aus WordPress Dashicons?

Sie haben gesehen, wie Sie Dashicons auf Ihrer Website verwenden können, und jetzt werden wir die Verwendung für bestimmte Zwecke sehen.

  So verhindern Sie, dass eine PowerPoint-Präsentation bearbeitet wird

1. Über das Navigationsmenü

Führen Sie die folgenden Schritte aus, um dem Menü Symbole hinzuzufügen:

  • Gehen Sie im Dashboard zu Menüs/Darstellung
  • Kopieren Sie HTML-Codes, die für das Menüsymbol von WordPress.org entwickelt wurden
  • Fügen Sie es auf dem „Navigation Label“ auf dem Dashboard ein
  • Klicken Sie auf die Schaltfläche „Speichern“ und laden Sie dann die Startseite. Es sollte das kühle und klare Symbol anzeigen.

2. Verwenden von Post-Meta

Sie können Dashicons direkt vor einem Datum, dem Namen des Autors, einem Tag oder einer Kategorie verwenden, basierend auf dem Thema und den angezeigten Daten.

Da Sie Dashicons bereits in die Warteschlange gestellt haben, öffnen Sie die Datei style.css. Andernfalls können Sie sich auch für einen benutzerdefinierten CSS-Editor entscheiden, mit dem Sie Ihre Änderungen nach Themenaktualisierungen nicht verlieren. Fügen Sie als Nächstes Ihren CSS-Code hinzu, nachdem Sie einen passenden Selektor gefunden haben.

3. Im WordPress-Backend

Wenn Sie verschiedene Symbole für verschiedene benutzerdefinierte Beitragstitel, Beitragstypen oder Widgets enthalten möchten, ist dies ganz einfach.

Ein kurzer Tipp: Erstellen Sie einen Shortcode

Um Dashicons einfach zu verwenden, können Sie einen Shortcode dafür erstellen. Es ist nützlich, besonders wenn Sie eine Website für Ihre Kunden erstellen, die es einfach finden würden, Dashicons einzufügen, ohne mit den Codes herumzuspielen.

Fazit

Ich hoffe, die Dinge sind auf Ihrer Seite in Bezug auf WordPress Dashicons ziemlich klar. Sie decken nicht nur die Ästhetik Ihrer Website ab, sondern sind auch einfach zu bedienen und verbessern die Ladegeschwindigkeit der Seite.

Und wissen Sie, „Schönheit und Köpfchen“ ist eine seltene Kombination.

Also, beeilen Sie sich, verwenden Sie diese auffälligen Dashicons auf Ihrer WordPress-Seite!