Das Pinterest Post Grid Viewing ist seit einiger Zeit ein beliebtes Design für WordPress-Blog-Indexseiten. Es ist nicht nur deshalb beliebt, weil es das Erscheinungsbild der beliebten Social-Media-Site nachahmt, sondern auch, weil es den Bildschirmbereich optimal nutzt. In einem WordPress-Blog-Index kann jede Vorschau des Beitrags die Größe haben, die sie natürlich haben sollte, ohne zusätzlichen Platz zu lassen.
In diesem Tutorial zeige ich Ihnen, wie Sie mit der beliebten Masonry JavaScript Library kaskadierende Rasterlayouts für den Index Ihres Blogs sowie Archivseiten für Ihr Thema erstellen. Ich werde einige Probleme ansprechen, die Sie für die mobile Optimierung kennen sollten, und wie Sie sie lösen können.
Hinweis: Dies ist ein Tutorial für Fortgeschrittene für diejenigen, die mit dem Bearbeiten von WordPress-Themen vertraut sind und über ausreichende Kenntnisse in HTML / CSS verfügen.
Schritt 1: Fügen Sie Ihrem Thema die erforderlichen Bibliotheken hinzu
Aktualisieren: WordPress 3.9 enthält jetzt die neueste Version von Masonry.
Sie müssen zuerst Masonry mit diesem Code in Ihr Thema laden:
if (! function_exists('slug_scripts_masonry') ) :
if ( ! is_admin() ) :
function slug_scripts_masonry() {
wp_enqueue_script('masonry');
wp_enqueue_style('masonry’, get_template_directory_uri().'/css/’);
}
add_action( 'wp_enqueue_scripts', 'slug_scripts_masonry' );
endif; //! is_admin()
endif; //! slug_scripts_masonry exists
Dieser Code lädt einfach Mauerwerk und stellt es den Vorlagendateien Ihres Themas zur Verfügung (siehe unsere Anleitung zum ordnungsgemäßen Hinzufügen von JavaScripts und Styles in WordPress). Beachten Sie auch, dass wir jQuery nicht als Abhängigkeit für eine hinzufügen. Einer der Vorteile von Masonry 3 besteht darin, dass es kein jQuery erfordert, aber damit verwendet werden kann. Nach meiner Erfahrung ist die Masonry-Initialisierung ohne jQuery zuverlässiger und bietet die Möglichkeit, das Laden von jQuery zu überspringen, was sowohl bei Ladezeiten von Seiten als auch bei Kompatibilitätsproblemen hilfreich sein kann.
Schritt 2: Initialisieren Sie Javascript
Die folgende Funktion konfiguriert Masonry, definiert die Container, die damit verwendet werden sollen, und stellt außerdem sicher, dass alles in der richtigen Reihenfolge abläuft. Das Mauerwerk muss die Größe jedes Elements auf der Seite berechnen, um sein Raster dynamisch zu gestalten. Ein Problem, auf das ich bei Masonry in vielen Browsern gestoßen bin, ist, dass Masonry die Höhe der Elemente mit langsam ladenden Bildern falsch berechnet, wodurch sich die Elemente überlappen. Die Lösung besteht darin, imagesLoaded zu verwenden, um zu verhindern, dass Masonry das Layout berechnet, bis alle Bilder geladen sind. Dies stellt die richtige Größe sicher.
Dies ist die Funktion und Aktion, die das Initialisierungsskript in der Fußzeile generiert:
if (! function_exists ('slug_masonry_init')):
función slug_masonry_init () {?>
php}
// agregar a wp_footer
add_action ('wp_footer', 'slug_masonry_init');
terminara si; //! slug_masonry_init existe
Die Funktion wird Schritt für Schritt mit Online-Kommentaren erklärt. Die Javascript-Funktion weist Masonry an, in einen Container mit der ID “masonry-loop” zu schauen, um nach Elementen mit der Klasse “masonry-entry” zu suchen und das Raster erst nach dem Laden der Bilder zu berechnen. Wir konfigurieren den externen Container mit querySelector und den internen mit itemSelector.
Schritt 2: Erstellen Sie eine Mauerschlaufe
Anstatt HTML-Markup für Masonry direkt zu einer Vorlage hinzuzufügen, erstellen wir einen separaten Vorlagenteil dafür. Erstellen Sie eine neue Datei mit dem Namen “content-masonry.php” und fügen Sie sie Ihrem Thema hinzu. Auf diese Weise können Sie die Mauerwerksschleife beliebig vielen Vorlagen hinzufügen.
In Ihrer neuen Datei fügen Sie den unten gezeigten Code hinzu. Markup ähnelt dem, was Sie normalerweise für eine Inhaltsvorschau sehen würden. Sie können es nach Belieben ändern. Stellen Sie lediglich sicher, dass das äußerste Element über die Klasse “Mauerwerkseintrag” verfügt, die wir im letzten Schritt als itemSelector festgelegt haben.
>
" title="">
Dieses Markup enthält Klassen für jeden seiner Teile, sodass Sie Markups hinzufügen können, die Ihrem Thema entsprechen. Ich möchte .masonry-entry einen schönen, leicht abgerundeten Rand hinzufügen. Eine weitere gute Option ist, dass es keinen Rand für den .masonry-Eintrag gibt, sondern nur einen leichten Schatten. Das sieht besonders gut aus, wenn sich das Post-Thumbnail bis zum Rand des Containers erstreckt. Dies kann erreicht werden, indem Miniaturränder für Mauerwerk und 0 Füllungen in alle Richtungen angegeben werden. Sie müssen alle diese Stile in einer Datei namens masonry.css im CSS-Verzeichnis Ihres Themas hinzufügen.
Schritt 3: Fügen Sie den Vorlagen die Mauerwerksschleife hinzu
Nachdem wir unseren Vorlagenteil haben, können Sie ihn in jeder gewünschten Vorlage Ihres Themas verwenden. Sie können es zu index.php hinzufügen, aber nicht zu category.php, wenn Sie nicht möchten, dass es für Kategoriedateien verwendet wird. Wenn Sie nur möchten, dass es auf der Homepage Ihres Themas verwendet wird und Blog-Beiträge angezeigt werden, verwenden Sie es in home.php. Wo immer Sie möchten, müssen Sie Ihre Schleife nur in einen Container mit der ID “masonry-loop” einwickeln und den Schablonenteil mit get_template_part () zur Schleife hinzufügen. Stellen Sie sicher, dass Sie den Wrapper für Mauerwerksschleifen vor while (have_posts ()) starten.
Hier ist zum Beispiel die Hauptschleife der index.php von dreiundzwanzig:
Und hier ist es modifiziert, um unsere Mauerschlaufe zu verwenden:
Schritt 4: Stellen Sie die Antwortbreiten der Mauerwerkselemente ein
Es gibt verschiedene Möglichkeiten, die Breite jedes Mauerwerks festzulegen. Sie können die Breite beim Initialisieren des Mauerwerks mit einer Anzahl von Pixeln einstellen. Ich bin kein Fan davon, da ich reaktionsschnelle Themen verwende und einige komplexe Medienabfragen erforderlich sind, um es auf kleinen Bildschirmen richtig zu machen. Für reaktionsschnelle Layouts habe ich festgestellt, dass es am besten ist, einen Breitenwert für .masonry-entry mit einem Prozentsatz festzulegen, der auf der Anzahl der gewünschten Elemente in einer Reihe basiert, und Masonry den Rest der Mathematik für Sie erledigen zu lassen.
Dazu müssen Sie lediglich die 100 durch die Anzahl der Elemente dividieren, für die Sie den Prozentsatz auf einen einfachen Eintrag in style.css Ihres Themas festlegen möchten. Wenn Sie beispielsweise vier Elemente in jeder Zeile möchten, können Sie dies in Ihrer masonry.css-Datei tun:
.Mauerwerk-Eintrag {Breite: 25%}
Schritt 5: Mobile Optimierung
Wir könnten hier aufhören, aber ich denke nicht, dass das Endergebnis auf kleinen Telefonbildschirmen unglaublich gut funktioniert. Wenn Sie mit dem Aussehen Ihres Themas mit dem neuen Mauerwerksgitter auf Ihrem Desktop zufrieden sind, können Sie es auf Ihrem Telefon überprüfen. Wenn Sie mit dem Aussehen Ihres Telefons nicht zufrieden sind, müssen Sie ein wenig arbeiten.
Ich glaube nicht, dass auf einem Telefonbildschirm genügend Platz für alles vorhanden ist, was wir zu unserem Teil der Inhaltsmauerwerkvorlage hinzufügen. Zwei gute Lösungen stehen Ihnen zur Verfügung, um die telefonische Abrechnung zu verkürzen oder ganz zu überspringen. Hier ist eine zusätzliche Funktion, die Sie zu den Funktionen Ihres theme.php hinzufügen können, um dies zu tun. Da ich nicht denke, dass diese Probleme auf Tablets ein Problem darstellen, verwende ich in allen Beispielen in diesem Abschnitt ein hervorragendes Mobble-Plugin, um Änderungen nur auf Telefonen und nicht auf Tablets vorzunehmen. Ich überprüfe auch, ob Mobble aktiv ist, bevor ich es verwende, und greife bei Bedarf auf die allgemeinere mobile Erkennungsfunktion wp_is_mobile zurück, die in WordPress integriert ist.
if (! function_exists('slug_custom_excerpt_length') ) :
function slug_custom_excerpt_length( $length ) {
//set the shorter length once
$short = 10;
//set long length once
$long = 55;
//if we can only set short excerpt for phones, else short for all mobile devices
if (function_exists( 'is_phone') {
if ( is_phone() ) {
return $short;
}
else {
return $long;
}
}
else {
if ( wp_is_mobile() ) {
return $short;
}
else {
return $long;
}
}
}
add_filter( 'excerpt_length', 'slug_custom_excerpt_length', 999 );
endif; // ! slug_custom_excerpt_length exists
Wie Sie sehen, speichern wir zunächst die Länge des langen Extrakts und die Länge des kurzen Extrakts in Variablen, da wir diese Werte zweimal verwenden und sie später bei Bedarf an einer Stelle ändern möchten. Von dort aus testen wir, ob wir Mobbles is_phone () verwenden können. In diesem Fall legen wir die kurze Anweisung für Telefone und die lange Anweisung fest, wenn dies nicht der Fall ist. Danach machen wir das Gleiche, verwenden jedoch wp_is_mobile, was sich auf alle Mobilgeräte auswirkt, wenn is_phone () nicht verwendet werden kann. Hoffentlich wird der andere Teil dieser Funktion nie verwendet, aber es ist schön, für alle Fälle ein Backup zu haben. Sobald die Extraktlängenlogik eingerichtet ist, läuft es darauf hinaus, die Funktion mit dem Filter excerpt_length zu verbinden.
Das Kürzen des Extrakts ist eine Option, aber wir können ihn auch mit einem einfachen Vorgang vollständig entfernen. Hier ist eine neue Version des Inhaltsmauerwerks, bei der der gesamte Teil des Auszugs auf den Telefonen weggelassen wurde:
>
" title="">
" title="">
';
$excerpt .= the_excerpt();
$excerpt .= '
';
//if we can only skip for phones, else skip for all mobile devices
if (function_exists( 'is_phone') {
if ( ! is_phone() ) {
echo $excerpt;
}
}
else {
if ( ! wp_is_mobile() ) {
echo $excerpt;
}
}
?>
