{"id":25165,"date":"2021-06-02T17:32:00","date_gmt":"2021-06-02T14:32:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25165"},"modified":"2021-10-18T02:34:53","modified_gmt":"2021-10-17T23:34:53","slug":"so-fugen-sie-ein-mauergitter-layout-in-wordpress-hinzu","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/so-fugen-sie-ein-mauergitter-layout-in-wordpress-hinzu\/","title":{"rendered":"So f\u00fcgen Sie ein Mauergitter-Layout in WordPress hinzu"},"content":{"rendered":"

M\u00f6chten Sie ein Mauerwerksraster-Layout auf der WordPress-Website hinzuf\u00fcgen? Sie haben wahrscheinlich das Mauerwerksgitter auf den meisten Websites \u00fcber das Internet gesehen. Ein Beispiel f\u00fcr diese Art von Rasterlayout ist Pinterest. In diesem Artikel zeige ich Ihnen, wie Sie Ihrer WordPress-Website ein Mauerwerksraster-Layout hinzuf\u00fcgen.<\/p>\n

Mit Mauerwerk werden unsere HTML-Elemente basierend auf dem verf\u00fcgbaren vertikalen Raum platziert. Dies ist n\u00fctzlich, da die HTML-Elemente den Bildschirm optimal nutzen w\u00fcrden. Au\u00dferdem bietet es eine bessere Benutzererfahrung auf Ihren Webseiten.<\/p>\n

WordPress kommt mit wenigen jQuery-Plugins im Kern. Einige von ihnen sind jQuery, jQuery UI, imgareaselect, Thickbox usw. Es wird auch mit diesem integrierten Mauerwerk-Plugin<\/a> geliefert. Um dieses Mauerwerk zu verwenden, k\u00f6nnen Sie seine JS-Datei vom WordPress-Kern in das Thema einreihen.<\/p>\n

Wenn Sie neugierig auf den Pfad dieses Mauerwerks JS sind, finden Sie es unter ‚\/wp-include\/js\/masonry.min.js‘.<\/p>\n

Werfen wir also ohne weitere Diskussion einen Blick darauf, wie man ein Mauergitter-Layout in WordPress hinzuf\u00fcgt.<\/p>\n

JS-Datei f\u00fcr Mauerwerk in Warteschlange stellen<\/h3>\n

Wenn es um WordPress geht, sollte man die JS-Datei nicht script<\/code>direkt mit dem Tag einschlie\u00dfen. Es ist eine schlechte Praxis f\u00fcr WordPress. WordPress bietet eine eigene M\u00f6glichkeit, JS- und CSS-Dateien<\/a> in die Website einzubinden. Sie m\u00fcssen die JS- und CSS-Dateien auf die gleiche Weise einschlie\u00dfen.<\/p>\n

\u00d6ffnen Sie die functions.php<\/code>Datei und f\u00fcgen Sie den folgenden Code ein, der die JS-Dateien zu Ihrer Website hinzuf\u00fcgt.<\/p>\n

add_action( 'wp_enqueue_scripts', 'site_scripts' );\n\u00a0\nfunction site_scripts() {\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_script('masonry');\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_script( 'site-js', get_stylesheet_directory_uri(). '\/js\/script.js', array(), false, true );\n}<\/code><\/pre>\n
Hier habe ich ein masonry js aus dem WordPress-Core mit der Anweisung eingebunden wp_enqueue_script('masonry');<\/code>. Diese Anweisung enth\u00e4lt eine JS-Datei von Mauerwerk direkt in Ihre WordPress-Umgebung. Ich habe auch eine script.js<\/code>Datei eingef\u00fcgt, in die ich den Code zum Aufrufen und Initialisieren des Mauerwerksrasterlayouts schreibe.<\/p>\n
Mauerwerksraster-Layout in WordPress<\/h3>\n
In diesem Stadium sind wir mit der Grundeinstellung f\u00fcr die Integration von Mauerwerksnetzen fertig. Als n\u00e4chstes m\u00fcssen wir Markup f\u00fcr unsere HTML-Elemente im Grid-Container hinzuf\u00fcgen. Verwenden Sie daf\u00fcr den folgenden HTML-Code.<\/p>\n
<div class=\"grid\">\n\u00a0\u00a0\u00a0\u00a0<div class=\"grid-item\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<img src=\"<?php echo get_stylesheet_directory_uri().'\/images\/image-1.jpg'; ?>\">\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<div class=\"grid-item\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<img src=\"<?php echo get_stylesheet_directory_uri().'\/images\/image-2.jpg'; ?>\">\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<div class=\"grid-item\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<img src=\"<?php echo get_stylesheet_directory_uri().'\/images\/image-3.jpg'; ?>\">\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<div class=\"grid-item\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<img src=\"<?php echo get_stylesheet_directory_uri().'\/images\/image-4.jpg'; ?>\">\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<div class=\"grid-item\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<img src=\"<?php echo get_stylesheet_directory_uri().'\/images\/image-5.jpg'; ?>\">\n\u00a0\u00a0\u00a0\u00a0<\/div>\n<\/div><\/code><\/pre>\n
Im obigen Code habe ich einen Hauptrastercontainer hinzugef\u00fcgt und die Bilder darin eingeschlossen. Ich f\u00fcge jedem Grid-Item-Container ein Bild hinzu.<\/p>\n
Legen Sie anschlie\u00dfend die Breite f\u00fcr Rasterelemente mithilfe der folgenden CSS-Regel fest. Sie k\u00f6nnen diese Breite passend zu Ihrer Anforderung \u00e4ndern.<\/p>\n
.grid-item { width: 400px; }<\/code><\/pre>\n
Schlie\u00dflich m\u00fcssen wir das Mauerwerk mit den Methoden eines Mauerwerk-Plugins initialisieren. \u00d6ffnen Sie die script.js<\/code>Datei und f\u00fcgen Sie den folgenden Code ein.<\/p>\n
jQuery(function($) {\n\u00a0\u00a0\u00a0\u00a0\/\/ init Masonry\n\u00a0\u00a0\u00a0\u00a0var $grid = $('.grid').masonry({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ options\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0itemSelector: '.grid-item',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0columnWidth: 400\n\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0\/\/ layout Masonry after each image loads\n\u00a0\u00a0\u00a0\u00a0$grid.imagesLoaded().progress( function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$grid.masonry('layout');\n\u00a0\u00a0\u00a0\u00a0});\n});<\/code><\/pre>\n
Die endg\u00fcltige Ausgabe sieht in etwa wie der folgende Screenshot aus:<\/p>\n
\"So<\/a><\/p>\n
Das ist es! Es geht darum, Ihrer WordPress-Website ein Mauerwerksraster-Layout hinzuzuf\u00fcgen. Probieren Sie es in Ihrem WordPress-Projekt aus und teilen Sie Ihre Gedanken und Vorschl\u00e4ge im Kommentarbereich unten mit.<\/p>\n
Zum Thema passende Artikel<\/h4>\n