Share
Der Einheimische [Galerie] Shortcode ist schön, aber nicht großartig. In diesem kurzen Tipp werden wir es mit jQuery verschönern.
Das [Galerie] Shortcode ist nicht so toll. Sie können das Standard-CSS nicht deaktivieren, Sie können die CSS-Klassen nicht hinzufügen oder bearbeiten, Sie können die Standardattribute nicht bearbeiten (was eigentlich ein allgemeines Shortcode-Problem ist)… Auch wenn dies die Mehrheit der WordPress-Entwickler nicht stört , Weirdos wie ich könnten sich beschweren! :)
In diesem kurzen Tipp werden wir die Seiten für das Anhängen von Bildern loswerden und die Besucher unserer Websites durch die Bilder in einer jQuery-Modalbox navigieren lassen.
Mit weniger als 5 KB (gzipped) und einer breiten Palette an Browser-Unterstützung (die sogar IE6 umfasst) ist Colorbox mein Lieblings-Plugin für jQuery lightbox.
Wie Sie auf der Seite des Plugins sehen können, gibt es viele Einstellungen, Methoden und Hooks, sodass Sie es nach Belieben anpassen können. Es hat auch 5 nette CSS-basierte Themen.
Laden Sie das Paket herunter und extrahieren Sie es colorbox.min.js und eines der 5 themen (das colorbox.css Datei und den Ordner "Bilder") in einen Ordner namens "Colorbox" und laden Sie diesen Ordner in Ihr WordPress-Design hoch. Fügen Sie den folgenden Code am Ende des hinzu colorbox.min.js Datei vor dem Hochladen:
Accentsconagua
jQuery (document) .ready (Funktion ($) $ (". gallery-icon a"). colorbox (rel: "gallery");); Ich weiß, dass dies ein bisschen komisch sein wird, aber es scheint der sauberste Weg zu sein. Wir werden die erstellen [jgallery] Kurzcode.
Tipp innerhalb des Schnelltipps: Wenn Sie vor dem Erstellen der Kurzwahltaste alle Kurzwahlnummern in Ihren Posts ändern möchten
[jgallery]Kurzcode, ich empfehle das Search Regex Plugin zum Suchen / Ersetzen[Galerie]mit[jgallery].
Wie immer beginnen wir mit der Erstellung der Basis-Shortcode-Funktion:
Funktion jgallery_sc () // Keine Parameter? Das ist Wahnsinn! add_shortcode ('jgallery', 'jgallery_sc'); Als nächstes werden wir Enqueue die CSS- und JS-Dateien. Vergessen Sie nicht, dass jQuery automatisch in die Warteschlange gestellt wird (sofern noch nicht geschehen), indem Sie das Colorbox-Skript angeben hängt davon ab darauf.
function jgallery_sc () // Enqueue colorbox.min.js (und jQuery, falls noch nicht geladen) wp_enqueue_script ('colorbox-js', get_template_directory_uri (). '/ colorbox / colorbox.min.js', array ('jquery') ')); // Enqueue colorbox.css wp_enqueue_style ('colorbox-css', get_template_directory_uri (). '/ Colorbox / colorbox.css'); add_shortcode ('jgallery', 'jgallery_sc'); Alles ist fertig, außer wir müssen das benutzen [Galerie] Kurzcode in dieser Funktion. Wir werden die verwenden do_shortcode () Funktion und zurücksenden [Galerie Link = "Datei"] Kurzcode:
Funktion jgallery_sc () wp_enqueue_script ('colorbox-js', get_template_directory_uri (). '/ colorbox / colorbox.min.js', array ('jquery')); wp_enqueue_style ('colorbox-css', get_template_directory_uri (). '/ colorbox / colorbox.css'); return do_shortcode ('[gallery link = "file"]'); add_shortcode ('jgallery', 'jgallery_sc'); Alles erledigt! Nach dem Hinzufügen dieser Funktion in die Functions.php Datei Ihres Themes können Sie die [jgallery] Kurzcode sofort. Teilen Sie uns mit, was Sie in den Kommentaren unten denken. Genießen! :)
