So erstellen Sie News-Ticker in WordPress

Veröffentlicht: 2021-04-26

Wenn Sie bereits eine WordPress-Website für Zeitschriften, Zeitungen oder Leseblogs haben, haben Sie möglicherweise Schwierigkeiten, die Aufmerksamkeit der Besucher auf herausragende Beiträge zu lenken, da Ihre Website mit zu vielen Informationen vollgestopft ist. Um dies zu lösen, sind Newsticker definitiv eine perfekte Funktion, um Ihre Leseseite lesbarer, informativer und herausragender zu machen!

Inhaltsverzeichnis ausblenden
  1. 1. Was sind News-Ticker?
  2. 2. Warum sollten wir News-Ticker verwenden?
  3. 3. Wie füge ich News-Ticker in WordPress hinzu?
    1. 3.1. Schritt 1: Neuen News-Ticker hinzufügen
    2. 3.2. Schritt 2: News-Ticker konfigurieren
    3. 3.3. Schritt 3: Nachrichtenticker anzeigen
  4. 4. Letzte Worte

In diesem Beitrag zeigen wir Ihnen, was Newsticker sind, warum wir sie verwenden sollten und wie Sie mit wenigen einfachen Schritten einen beeindruckenden Newsticker erstellen .

Lass uns anfangen!

Was sind News-Ticker?

Auf einigen Arten von Websites wie Online-Magazinen, Online-Zeitungen werden möglicherweise einige Nachrichtenfolien am unteren Rand oder in der Kopf-, Fuß- oder Seitenleiste angezeigt. Diese Nachrichtenfolien sehen aus wie die in Fernsehnachrichtensendungen.

Durch einen Blick auf den Newsticker einer Fernsehnachrichtensendung oder einer Zeitschriftenwebsite können die Zuschauer die heißesten und auffälligsten Informationen erhalten. In einem Newsticker befinden sich normalerweise viele Informationen, die als Ticks bezeichnet werden.

Sehen Sie die Schlagzeilen wie in der folgenden GIF-Datei? So funktioniert ein Newsticker.

Der Newsticker läuft in der Rubrik WordPress-Website.

Ein Beispiel für einen Newsticker in WordPress

Warum sollten wir News-Ticker verwenden?

Newsticker haben verschiedene Vorteile für verschiedene Arten von Websites:

  • Bei Zeitschriften helfen Ihnen Newsticker dabei, hervorzuheben, welche Informationen und Beiträge beachtet werden müssen.
  • Bei Portfolios lenken sie die Aufmerksamkeit von Personalvermittlern auf spürbare Arbeitserfahrung und Belohnungen von Ihnen.
  • Für andere Arten von Websites werden Newsticker selbst zu einem Highlight der Websites, um beispielsweise Ihre Blogs attraktiver und professioneller zu gestalten.

Daher sind Newsticker eindeutig ein nützliches Werkzeug für Website-Besitzer. Darüber hinaus ist es sehr einfach, Ihrer WordPress-Website Newsticker hinzuzufügen. Kommen wir zum nächsten Teil und besorgen Sie sich selbst einen!

Wie füge ich News-Ticker in WordPress hinzu?

Es gibt viele Möglichkeiten, einen Newsticker hinzuzufügen.

Sie können zu Beginn ein mit Newstickern vorgefertigtes Thema verwenden ; das wäre am einfachsten. Lesen Sie einfach die Dokumentation des Themas sorgfältig durch.

Allerdings hat nicht jedes Thema einen solchen vorgefertigten Newsticker. In diesen Fällen können Sie also darüber nachdenken, Page Builder oder Plugins zu verwenden.

In diesem Beitrag verwenden wir ein kostenloses Plugin namens Ditty News Ticker Plugin . Es ist kostenlos, sehr einfach zu bedienen und hochgradig anpassbar . Sie müssen es nur herunterladen und im Dashboard aktivieren.

Weitere Informationen zur Installation eines Plugins finden Sie hier.

Ditty News Ticker ist ein kostenloses Plugin, mit dem Sie Newsticker erstellen können.

Zögern wir nicht länger und befolgen Sie unsere 3 Schritte, um einen fantastischen Newsticker auf Ihrer Website zu haben:

Schritt 1: Neuen News-Ticker hinzufügen

Gehen Sie zunächst zu News-Ticker > Neu hinzufügen .

Neuen Newsticker hinzufügen

Auf dem nächsten Bildschirm sehen Sie unten 5 Registerkarten: Titel hinzufügen, Shortcode, Ticker-Modus, Ticker-Typ und Globale Einstellungen . Diese Registerkarten werden verwendet, um Ihre Newsticker zu konfigurieren und anzuzeigen.

Diese Registerkarten werden verwendet, um Ihre Newsticker auf Ihrer WordPress-Website zu konfigurieren und anzuzeigen.

Glaubst du, es gibt zu viele Dinge zu beachten? Keine Sorge, wir machen es kurz und verständlich für Sie:

Geben Sie Ihrem Ticker zunächst einen Namen. Geben Sie den Namen auf der Registerkarte Titel hinzufügen ein. Der Titel wird normalerweise oben im Ticker angezeigt. Versuchen Sie also, einen attraktiven Namen zu finden, um die Aufmerksamkeit der Besucher auf sich zu ziehen.

Benennen Sie Ihre Newsticker

Klicken Sie anschließend auf Tickertyp , und fügen Sie den Inhalt, der im Newsticker angezeigt werden soll (ggf. mit einem Link), im Abschnitt Tickertext hinzu .

Wie oben erwähnt, kann Ihr Newsticker viele Ticks enthalten. Klicken Sie einfach auf die Schaltfläche ( + ), um eine hinzuzufügen, und klicken Sie auf die Schaltfläche ( x ), um sie zu löschen.

Passen Sie die Anzahl der Ticks in Ihren Newstickern an.

Schritt 2: News-Ticker konfigurieren

Nachdem Sie einen neuen Newsticker erstellt haben, müssen Sie ihn durch Konfiguration auffälliger machen.

Wählen Sie zunächst aus, wie Ihre Newsticker angezeigt werden sollen. Klicken Sie auf Ticker-Modus , Sie sehen 3 Optionen: Scrollen, Rotieren und Liste . Tatsächlich ist Scrollen die gebräuchlichste Option, aber Sie können entscheiden, welche für Ihre Website am besten geeignet ist.

Wählen Sie aus, wie Ihre Newsticker angezeigt werden sollen

Nachdem Sie eine der drei obigen Optionen ausgewählt haben, können Sie das Verhalten der Ticker durch verschiedene Registerkarten unten anpassen.

Persönlich habe ich den Scroll- Modus gewählt, also werde ich die Scroll-Aktion anpassen. Es gibt zwei wichtige Dinge zu beachten: Scroll-Geschwindigkeit und Tick ​​Space . Tatsächlich muss man viele Male versuchen, die am besten geeigneten Parameter herauszufinden. Für mich bevorzuge ich die Scrollgeschwindigkeit von 8 und den Tickspace von 10 Pixeln.

Außerdem aktiviere ich die Option Pause bei Mouse-Over , damit sich der Newsticker nicht mehr bewegt, wenn ich auf ein Häkchen klicken möchte.

Der Ticker stoppt beim Klicken.

Wenn Sie auf Globale Einstellungen klicken, sehen Sie außerdem einige andere Optionen zum Anpassen der Ticker. Wenn Sie beispielsweise möchten, dass der Titel der Ticker oben angezeigt wird, aktivieren Sie Titel anzeigen . Oder wenn Sie die Ticker ausblenden möchten, wenn keine Häkchen vorhanden sind, aktivieren Sie die Option wie im Bild unten.

Wenn Sie auf Globale Einstellungen klicken, sehen Sie einige andere Optionen zum Anpassen der Ticker

Jetzt kann Ihr Newsticker angezeigt werden!

Schritt 3: Nachrichtenticker anzeigen

Kommen wir zurück zum Shortcode- Tab oben auf dem Bildschirm:

Die Registerkarte Shortcode befindet sich oben auf dem Bildschirm

Der Newsticker wird dort angezeigt, wo Sie diesen Shortcode eingeben. Sie können es an jeder Position hinzufügen: Fußzeile der Startseite, Beitrag, Seitenleisten-Widget,…

Normalerweise verwenden wir keine Newsticker für den Inhalt eines Beitrags. Besser wäre es, wenn Sie Newsticker in der Kopf-, Fuß- oder Seitenleiste platzieren. Ich kann Ihnen ein Beispiel für den Newsticker einer Seitenleiste geben. Zuerst wähle ich eine zufällige Seite aus, gehe zu deren Vorschau > Anpassen > Widget .

Gehe zu Widget

Gehen Sie dann zu Seitenleiste > Widget hinzufügen . Sie sehen viele Optionen für zusätzliche Seitenleisten wie Audio, Kalender,… Wählen Sie Text, dann sehen Sie ein kleines Feld, um den Namen der Seitenleiste hinzuzufügen und Ihren Shortcode einzufügen:

Fügen Sie Ihren Funktionscode in das Textfeld ein.

Sie haben viele Schritte gemacht, oder? Aber wenn Sie Ihre Newsticker mit benutzerdefinierten Farben, Schriftgröße, Deckkraft usw. schöner gestalten möchten, müssen Sie noch ein wenig arbeiten. Die kostenlose Version dieses Plugins unterstützt Benutzer nicht dabei, diese Parameter anzupassen. Wir haben also nur ein Ergebnis wie das folgende Gif:

Hier ist die Anzeige der Newsticker.

Die Newsticker sehen nicht so schön aus, also habe ich sie ein bisschen mit CSS gestylt. Gehen Sie zu Anpassen > Zusätzliches CSS .

Newsticker mit CSS stylen

Dort sehen Sie ein kleines Kästchen zum Hinzufügen von Code. Diese Codes ändern das Aussehen Ihrer Newsticker.

Ich verwende das Memory-Design mit der Hauptpalette von Blau und Weiß. Daher habe ich dieses CSS hinzugefügt, um einen Newsticker in blauer Farbe zu haben:

 .mtphr-dnt-tick-contents a {
	Farbe: var(--main-color);
}

.mtphr-dnt-tick-contents a:hover {
	Farbe: #000;
}

Klicken Sie auf Veröffentlichen und sehen Sie, was wir haben:

Ergebnis des Stylings.

Hier ist nur ein einfaches Beispiel für Sie. Ich bin sicher, dass Sie selbst einen viel beeindruckenderen Newsticker erstellen können. Lass es uns versuchen!

Letzte Worte

Das ist also alles über das Hinzufügen eines Newstickers zu Ihrer WordPress-Website mit dem Ditty News Ticker-Plugin . Wir haben unser Bestes gegeben, um es kurz und klar zu machen, daher hoffen wir, dass dieser Beitrag für Sie nützlich ist.

Vielleicht haben Sie ein paar Wunder oder Fragen zu unserem Tutorial, also teilen Sie uns dies gerne im Kommentarbereich mit. Wir zeigen Ihnen gerne ein ausführlicheres Tutorial über erweiterte Optionen in diesem Plugin oder andere Methoden zum Hinzufügen von Newstickern ohne Plugins zu verwenden. Vergessen Sie also nicht, uns zu verbinden!