WordPress SelbstVersion 6.5Seitdem müssen Sie sich nicht mehr auf Plugins von Drittanbietern verlassen, um Lightbox-Effekte zu erstellen. Diese Funktion wurde in den WordPress-Kern integriert, insbesondere für diejenigen, die den WordPress-Blockeditor (Gutenberg) verwenden. Das Hinzufügen von Bildern und das Aktivieren von Lightbox-Effekten für diese ist jetzt einfacher und effizienter.

In diesem Tutorial zeigen wir Ihnen, wie Sie ein WordPress-Leuchtpult für Ihre Website ohne ein Plugin erstellen können.

Was ist ein WordPress-Leuchtpult?

Ein Lichtkasten ist einPop-up-BildanzeigemethodeWenn der Benutzer auf ein Bild auf der Seite klickt, wird das Bild in einem größeren Format auf dem Bildschirm angezeigt, während der Hintergrund der Seite abgedunkelt wird, um das Bild hervorzuheben. Dieser Effekt wird häufig für die Anzeige von Bildern oder Produkten verwendet und sorgt für ein besseres Benutzererlebnis.

Umfang der Anwendung

Diese Anleitung ist nur für diejenigen gedacht, die den WordPress-Blockeditor verwenden. Wenn Sie den klassischen Editor verwenden, empfehlen wir Ihnen, zunächst zum Block-Editor zu wechseln, um die neuesten Funktionen von WordPress zu nutzen.

Schritt 1: Erstellen oder bearbeiten Sie einen Beitrag/eine Seite

Nachdem Sie sich erfolgreich bei WordPress angemeldet haben, gehen Sie zum WordPress-Dashboard. Als Nächstes können Sie wählen, ob Sie eine neueSchriftstückeoder einen bestehenden Artikel bearbeiten. Je nach Ihren Bedürfnissen können Sie einen der folgenden Wege wählen:

• Um einen neuen Artikel zu erstellen, navigieren Sie zuSchriftstücke > Neuen Artikel hinzufügen.

• Um einen bestehenden Beitrag oder eine Seite zu bearbeiten, navigieren Sie zum FensterSchriftstücke > Alle ArtikelSuchen Sie den Artikel, den Sie bearbeiten möchten, und klicken Sie auf die Schaltfläche "Bearbeiten".
• Wenn Sie erstellen oder bearbeiten möchtenWeb-SeiteBitte wählen SieWeb-SeiteMenü, das ähnlich funktioniert wie das Erstellen oder Bearbeiten eines Artikels.

Warum sollten Sie einem Beitrag oder einer Seite ein Leuchtpult hinzufügen?

Der Leuchtkasten-Effekt eignet sich besonders für die Anzeige von Bildern, Produktbildern oder Galerien. Mit Leuchtkästen können Benutzer auf eine Miniaturansicht klicken, um ein größeres Bild zu sehen, ohne zu einer anderen Seite springen zu müssen, was das Surfen angenehmer macht.

Schritt 3: Bilder mit dem Block-Editor hinzufügen

Als nächstes fügen Sie der Seite Bilder hinzu. Der Block-Editor bietet dafür eine sehr einfache Lösung.

1. Wählen Sie die Stelle im Editor, an der Sie das Bild einfügen möchten.
2. eintippen/BildDer Block "Bild" wird sofort eingeblendet.

3. Wählen Sie "Bildmaterial" blockieren, werden Sie vom System aufgefordert, ein Bild auszuwählen.

Vorhandene Bilder können aus der Mediathek ausgewählt oder neue Bilder können hochgeladen werden.

Die Wahl des richtigen Bildes

Stellen Sie sicher, dass Sie die Bildgröße wählenGeeignet für LeuchtkästenAnzeige. Zu große Bilder können die Ladegeschwindigkeit der Seite beeinträchtigen, während zu kleine Bilder bei der Vergrößerung in der Lightbox an Klarheit verlieren können.

Schritt 4: Fügen Sie dem Bild einen Leuchtkasten-Effekt hinzu

Dieser Schritt ist der Kern der Erstellung eines WordPress-Leuchtkastens und kann ohne ein Plugin durchgeführt werden.

1. Klicken (mit einer Maus oder einem anderen Zeigegerät)Gerade hinzugefügtzu dem Artikel oder der Seite in derFoto.
2. In der Symbolleiste oberhalb des Bildes sehen Sie ein Link-Symbol.

3. Wenn Sie auf dieses Link-Symbol klicken, wird ein Dropdown-Menü angezeigt.
4. Wählen Sie "Erweitern beim Anklicken"Optionen.

An diesem Punkt wird Ihr Bild so konfiguriert, dass es sich vergrößert, wenn es durch den Leuchtkasten-Effekt angeklickt wird. Der Leuchtkasten bietet automatisch eine vergrößerte Ansicht des Bildes auf dem Frontend, so dass Benutzer ein größeres Bild sehen können, ohne beim Anklicken des Bildes auf eine andere Seite springen zu müssen.

Tipp: Wenn Sie die Option "Erweitern bei Klick" nicht finden können

Stellen Sie sicher, dass Sie WordPress 6.5 oder höher verwenden. Wenn Sieniedrigere VersionEs kann notwendig sein, diePlug-in (Softwarekomponente)um die Leuchtkasten-Funktion zu implementieren, oder aktualisieren Sie Ihre WordPress-Version, um die Vorteile dieser neuen Funktion zu nutzen.

Schritt 5: Vorschau und Veröffentlichung der Seite

Nachdem Sie den Leuchtkasten-Effekt für das Bild konfiguriert haben, sehen Sie sich die Seite in der Vorschau an, um sicherzustellen, dass alles richtig angezeigt wird.

1. Klicken Sie auf die Schaltfläche "Vorschau" in der oberen rechten Ecke der Seite und wählen Sie "Vorschau Neue Registerkarte".

2. Klicken Sie auf der Vorschauseite auf das von Ihnen hinzugefügte Bild, um zu überprüfen, ob der Leuchtkasten-Effekt richtig funktioniert.

Wenn alles in Ordnung ist, gibt es die Möglichkeit derBeitragSeite oder Artikel. Wenn eine weitere Bearbeitung erforderlich ist, können Sie wählenSpeichern von Entwürfen, später weiter bearbeiten.

Optimierung und Vorsichtsmaßnahmen

1. Bild-Optimierung

Die Lightbox-Funktion ist zwar praktisch, aber achten Sie darauf, dass die Bilder, die Sie hochladen, so optimiert sind, dass sie die Leistung Ihrer Website nicht beeinträchtigen. Übermäßig große Bilddateien können zu langsam ladenden Seiten führen, was sich auf die Benutzerfreundlichkeit und die SEO-Leistung auswirken kann. Dies können Sie mit Tools wieSmushzum Komprimieren und Optimieren der Bildgröße.

2. reaktionsfähiges Design

Die Lightbox-Funktionalität ist auch auf mobilen Geräten wichtig, und die Standardeinstellungen für Lightboxen in WordPress sind responsiv, um sicherzustellen, dass die Bilder auf verschiedenen Bildschirmgrößen gut angezeigt werden. Es wird empfohlen, vor der Veröffentlichung auf mobilen Geräten zu testen, um sicherzustellen, dass der Leuchtkasten-Effekt auch auf mobilen Geräten reibungslos funktioniert.

3. die Kompatibilitätsprüfung

Die integrierte Lightbox-Funktion von WordPress ist zwar leistungsstark, kann aber bei Verwendung eines benutzerdefinierten Themes oder Plugins mit einigen benutzerdefinierten Funktionen in Konflikt geraten. Es wird empfohlen, vor der Veröffentlichung die Kompatibilität mit verschiedenen Geräten und Browsern zu prüfen.

Zusammenfassungen

Bei Verwendung von WordPress 6.5 und höher, durchWP autodidaktischer Website-BaukastenDer Leuchtkasten-Effekt kann ganz einfach ohne Plug-ins erstellt werden und bietet eine bessere Benutzererfahrung für Bilder. Dies vereinfacht nicht nur die Bedienung, sondern verringert auch die Abhängigkeit von Plug-ins von Drittanbietern und reduziert die Komplexität der Website-Pflege.