Studie “Backboned”: AJAX-powered WordPress-Theme mit Backbone.js. Check out Backboned v2!!
Um mir gelegentlich etwas Zerstreuung vom Lernen zu geben, habe ich einen lange gehegten Plan in die Tat umgesetzt: Ein AJAX-betriebenes WordPress-Theme mit Backbone.js zu bauen. Und zwar keine auf “Graceful Degradation” setzende Kompromisslösung. Alle Inhalte werden asynchron geladen und sind per Hashbang URIs ansteuerbar. Ein Blick in den Quellcode offenbart, was ich meine: Ein JSON-Objekt mit allen grundlegenden Daten, eine Handvoll jQuery-Templates und das HTML-Grundgerüst. Das war es an statischem Content - die Darstellung des Inhalts geschieht über Backbone.js. Damit Suchmaschinen nicht außen vor bleiben und man sich nicht die Mühe machen muss, einen “Headless Browser” à la HtmlUnit auf seinem Server zum laufen bringen zu müssen, werden grundsätzlich alle Inhalte als GET-Anfrage mit dem Parameter “_escaped_fragment_” abgehandelt - die Ausgabe variiert dann je nachdem zwischen statischem HTML oder einem nackten JSON-Objekt.
DiW Theme Clubhouse - A WordPress site to showcase different themes created by the DIW crew. AJAX Tutorial. Pittsburgh Web Design & Development – Andrew M Peters. Overview & Preparation Making jQuery ajax calls in WordPress to return JSON data to your client-side Javascript is an invaluable application that is only going to become more popular in the next few years.
What’s the significance of using jQuery ajax to get JSON data from a WordPress site? Doing this (the right way) essentially allows you to request server-side information from your WordPress database, then have it returned to your client-side in one quick, extremely lightweight, and simple swoop. Ping the server, return the information you need. No page reload, no bulky parsing needed. Luckily, there are some built-in utilities within WordPress that can be leveraged for this purpose. Applications Say you want to… You get the point. The wrong (tempting) way You might be familiar with using the jQuery.ajax() or jQuery.load() functions to return HTML data from other pages in your WordPress theme. The right(er) way Requirements To follow along with this completely you’ll need: The data flow and.
Getting Loopy - Ajax Powered Loops with jQuery and WordPress. In this tutorial, we give you a starting point for creating AJAX interaction in your blog.
We follow a step by step process, showing you how to load posts based on the viewers page scroll. The tutorial covers enqueueing scripts, setting up an AJAX handler, how to get a file outside of WordPress to use WordPress functions and access the database, and logic for loading posts on user page scroll. What this tutorial will cover: Organizing folders.Adding jQuery to your site.Including a new script (js) file.Adding a loop handler php file (loop.php or loopHandler.php).Copying loop from main index file to our loop handler.Cleaning up the loop.Including wp-load.php (it’s what makes this whole thing work well)Storing GET data as variables in our handler. Using wp-query.Using jQuery, create our AJAX call function.Success! Assumptions: You are familiar with jQuery JavaScript libraryYou have some basic understanding of AJAXYou are comfortable with editing WordPress PHP files Why a Child Theme?
A Primer on Ajax in the WordPress Frontend: Actually Doing It. In this series, we're discussing how to implement Ajax in the WordPress frontend.
In the first post in the series, we reviewed how Ajax works at a high-level, reviewed how to introduce Ajax into the Dashboard of WordPress, and reviewed the two hooks available for incorporating Ajax into WordPress. At this point, it's time to actually build something that will demonstrate how we can use Ajax in the WordPress frontend. To do this, we'll be writing our own plugin making sure that we're following WordPress best practices along the way.
By the end of this article, we'll have a fully working plugin with source code publicly available on GitHub. With that said, let's get started. If you've read any of my previous articles, then you know that I always like to begin my projects with planning out what we're going to do. A Primer on Ajax in the WordPress Frontend: Understanding the Process. A few articles ago, I gave a primer on Ajax in the WordPress Dashboard, but the comments lead to a discussion for exactly how to do this on the WordPress frontend (and how to do it the right way).
I highly recommend reviewing the previous series to get a feel for where we're going, but in this article, we're going to give a very brief overview of what Ajax is, how it works, how to set it up on the front, and understanding the hooks that WordPress provides. In the next article, we'll actually build a small project that puts the theory into practice. We'll walk through the source code and we'll also make sure it's available on GitHub, as well.
In the meantime, let's get started reviewing Ajax and the facilities WordPress provides for us. An Ajax Refresher At this point in time, Ajax isn't new. Generally speaking, Ajax is what allows us to do partial page updates. This means that we can update a part (or parts) of a page without a user having to refresh the entire page.