Wir landen bei einem sehr einfachen Test, der einen Artikel aus dem Blog lädt, um ihn anzuzeigen, wenn Platz vorhanden ist.
// Load additional content if enough room
enquire
.register("(min-width: 700px)", {
match: function() {
$("#home-article").load("/blog/ #main-article");
}
})
.listen();jQuery macht Ajax super einfach, und mit der .load() Funktion sogar noch einfacher. Der einzige kleine Trick hier ist, dass wir #main-article am Ende der URL hinzugefügt haben, was die eingefügten Elemente auf der Seite auf diesen CSS-Selektor beschränkt. Es wäre perfekter, wenn wir eine Lösung entwickelt hätten, die nur den Inhalt zurückgibt, den wir hinzufügen müssen, aber das ist eine so schnelle und einfache Lösung, dass sie irgendwie schön ist.
Entschuldigung für die nicht so tolle Tonqualität bei diesem Beitrag =(.
Hallo Chris,
Tolles Video. Haben Sie Empfehlungen, wie man Inhalte abruft, die nicht anderweitig auf einer Website angezeigt werden? Zum Beispiel ein zusätzlicher Markup-Bereich oder eine Seitenleiste.
Vielen Dank,
Steve.
Inhalte müssen definitiv nicht auf der Website auf die „normale“ Weise angezeigt werden, um per Ajax geladen zu werden. Sie könnten eine .html-Datei im Stammverzeichnis der Website ablegen, diese URL aufrufen und sie einbinden. Da wir hier in WordPress sind, würde ich wahrscheinlich einen Seitentemplate namens Ajax erstellen und ihn unter /ajax/ veröffentlichen, der Query-Parameter entgegennimmt, eine DB-Abfrage damit ausführt und das gewünschte (ziemlich rohe) Ergebnis zurückgibt.
Danke für die schnelle Antwort, Chris, das klingt nach einer einfachen Methode, das werde ich ausprobieren!
Tolles Video, Chris, nur eine kurze Frage.
Mit Enquire verstehe ich, dass der Inhalt automatisch erscheint, wenn Sie das Browserfenster vergrößern. Aber wenn Sie das Browserfenster verkleinern, ist der Inhalt dann noch im DOM vorhanden? In Ihrem Beispiel verschwindet er, aber das liegt daran, dass Sie display: none verwenden. Ist er noch im DOM?
Zweitens, warum würden Sie diese Technik dieser hier vorziehen… https://css-tricks.de/examples/ConditionalCSS/ – Die Technik in dem Link scheint viel schneller und reaktionsfreudiger zu sein.
Im Video gehe ich auf verschiedene Möglichkeiten der Überprüfung ein. Conditional Content ist eine davon. Ich habe mich hier für Enquire entschieden, weil ich es für Leute, die ein etwas komplexeres Framework mit Rückruffunktionen für die Handhabung mehrerer Szenarien wünschen, für eine großartige Option halte.
Zum Beispiel verwenden wir in diesem Beispiel einfach display: none;, weil es ehrlich gesagt keine große Sache ist. Wenn wir uns Gedanken über das Gewicht des DOM machen würden, wie wir es auf einer größeren Website vielleicht tun würden, könnten wir dann die unmatch-Rückruffunktion von Enquire verwenden, um den Inhalt von der Seite zu entfernen ( .remove()).
Ist die Homepage nicht im WordPress-System? Ich versuche nur herauszufinden, warum Sie den neuesten Blogbeitrag nicht mit nativen WordPress-Abfragen und nicht mit Ajax einbinden. Ich bin etwas durch die Videos gesprungen und habe sie nicht nacheinander angesehen, also sorry, falls dies in einem anderen früheren Video behandelt wurde.