German (Deutsch) translation by Valentina (you can also view the original English article)
Die WordPress REST API wurde erstmals mit Version 4.7 eingeführt und brachte fantastische Möglichkeiten und Funktionen in die WordPress-Entwicklung. Mit der WordPress-REST-API können Entwickler remote mit WordPress-Sites interagieren, indem sie JSON-Objekte (JavaScript Object Notation) senden und empfangen.
Dies bedeutet, dass Sie jetzt Websites, mobile Apps und Desktop-Apps erstellen können, die alle auf WordPress im Back-End basieren, jedoch „ohne“ WordPress im Front-End.
Unser WordPress REST API Beispiel
In diesem praktischen Tutorial zur WordPress-REST-API werde ich erklären, wie Sie mit der REST-API ein Portfolio mit mehreren Layouts mit einem AJAX-Filter erstellen können. In diesem Beispiel wird erklärt, wie Sie mit der REST-API arbeiten, wie Sie sie erweitern und warum die Verwendung der WordPress-REST-API mit AJAX Ihre Entwicklungsfähigkeiten auf die nächste Stufe hebt!
Hier ist die Demo-Site, die wir erstellen werden.
Die Schritte, die wir unternehmen werden
- Erstellen Sie benutzerdefinierte Post-Typ "Tutorials"
- Eine Einführung in die WordPress REST API mit Postman
- So erweitern Sie die WordPress REST API
- Erstellen Sie einen Tutorials-Shortcode mit einem AJAX-Filter und der WordPress-REST-API
- Abschluss und nächste Schritte
Hinweis: In diesem Tutorial wird ein gewisses Verständnis der WordPress-Entwicklung und von JavaScript vorausgesetzt.
Warten Sie, was ist eine REST-API?
Eine beliebte Methode zur Beschreibung einer API ist die Metapher des Verkäufers. Als Kunde stellen Sie eine Anfrage an den Verkäufer (die API), der sich dann pflichtbewusst in den Lagerraum begibt und auf der Grundlage der von Ihnen angegebenen Details zurückholt, was Sie angefordert haben.
REST-APIs sind die bevorzugte Form der API für die Internetnutzung, da sie zwar weniger robust als die Alternativen sind, jedoch aufgrund der Verwendung weniger Regeln / Richtlinien relativ einfach und flexibel sind.
REST-APIs verarbeiten nur diese vier HTTP-Anforderungen:
- GET
- PUT
- POST
- DELETE
1. Erstellen Sie einen benutzerdefinierten Beitragstyp "Tutorials".
Seit WordPress Version 2.9 (vor fast zehn Jahren!) Können benutzerdefinierte Beitragstypen erstellt werden, sodass Entwickler WordPress über Beiträge und Seiten hinaus erweitern können. Dies alles ist der Einführung von register_post_type() zu verdanken.
Ich werde hier nicht im Detail darauf eingehen, wie benutzerdefinierte Beitragstypen erstellt werden, da dies nur ein WordPress-REST-API-Lernprogramm ist. Die Tuts+-Tutorialserie Ein Leitfaden für benutzerdefinierte WordPress-Post-Typen hilft Ihnen jedoch beim Einstieg.
Die WordPress-REST-API funktioniert mit den Standardposttypen "Post" und "Page" sowie mit benutzerdefinierten Posttypen. Bei benutzerdefinierten Beitragstypen müssen Sie jedoch die REST-API erweitern.
Erstellen Sie ein WordPress-Plugin für unseren Code
Für die Zwecke dieses Tutorials wird unser gesamter Code in einem einfachen WordPress-Plugin abgelegt (die Erstellung von Plugins wird aus demselben Grund wie oben nicht im Detail beschrieben).
WordPressEinführung in die Entwicklung von WordPress-Plugins
WordPressWordPress Plugin Entwicklung Wesentliche Punkte
NachrichtenEin Crash-Kurs in der Entwicklung von WordPress-Plugins
In diesem Moment sollten Sie eine neue WordPress-Installation mit dem aktiven Standarddesign haben. Erstellen Sie ein einfaches WordPress-Plugin namens "Tutorials" und fügen Sie den folgenden Code ein:
1 |
/*
|
2 |
Plugin Name: Tutorials
|
3 |
Plugin URI: https://www.enovathemes.com
|
4 |
Description: Amazing Tutorials
|
5 |
Author: Enovathemes
|
6 |
Version: 1.0
|
7 |
Author URI: https://enovathemes.com
|
8 |
*/
|
9 |
if ( ! defined( 'ABSPATH' ) ) { |
10 |
exit; // Exit if accessed directly |
11 |
}
|
Standardmäßig unterstützen keine Beitragstypen die REST-API, daher müssen wir WordPress anweisen, sie zu aktivieren. Wir tun dies in der Funktion register_post_type(), also fügen Sie nach den Plugin-Intro-Daten Folgendes hinzu (großes Snippet):
Tipp: Um all dies auf einfache Weise für Sie zu generieren, verwenden Sie die von generatewp.com bereitgestellten Werkzeuge oder ein Plugin wie die Benutzeroberfläche für benutzerdefinierte Post-Typen.
1 |
function envato_tutorial() { |
2 |
|
3 |
$labels = array( |
4 |
'name' => esc_html__('Tutorials', 'envato'), |
5 |
'singular_name' => esc_html__('Tutorial', 'envato'), |
6 |
'add_new' => esc_html__('Add new', 'envato'), |
7 |
'add_new_item' => esc_html__('Add new tutorial', 'envato'), |
8 |
'edit_item' => esc_html__('Edit tutorial', 'envato'), |
9 |
'new_item' => esc_html__('New tutorial', 'envato'), |
10 |
'all_items' => esc_html__('All tutorials', 'envato'), |
11 |
'view_item' => esc_html__('View tutorial', 'envato'), |
12 |
'search_items' => esc_html__('Search tutorials', 'envato'), |
13 |
'not_found' => esc_html__('No tutorials found', 'envato'), |
14 |
'not_found_in_trash' => esc_html__('No tutorials found in trash', 'envato'), |
15 |
'parent_item_colon' => '', |
16 |
'menu_name' => esc_html__('Tutorials', 'envato') |
17 |
);
|
18 |
|
19 |
$args = array( |
20 |
'labels' => $labels, |
21 |
'public' => true, |
22 |
'publicly_queryable' => true, |
23 |
'show_ui' => true, |
24 |
'show_in_menu' => true, |
25 |
'query_var' => true, |
26 |
'rewrite' => array( 'slug' => 'tutorial','with_front' => false ), |
27 |
'capability_type' => 'post', |
28 |
'has_archive' => true, |
29 |
'hierarchical' => false, |
30 |
'menu_position' => 20, |
31 |
'menu_icon' => 'dashicons-portfolio', |
32 |
'supports' => array( 'title', 'editor', 'thumbnail', 'excerpt'), |
33 |
'show_in_rest' => true, |
34 |
'rest_controller_class' => 'WP_REST_Posts_Controller', |
35 |
'rest_base' => 'tutorial', |
36 |
);
|
37 |
|
38 |
register_post_type( 'tutorial', $args ); |
39 |
|
40 |
register_taxonomy('tutorial-category', 'tutorial', array( |
41 |
'hierarchical' => true, |
42 |
'labels' => array( |
43 |
'name' => esc_html__( 'Category', 'envato' ), |
44 |
'singular_name' => esc_html__( 'Category', 'envato' ), |
45 |
'search_items' => esc_html__( 'Search category', 'envato' ), |
46 |
'all_items' => esc_html__( 'All categories', 'envato' ), |
47 |
'parent_item' => esc_html__( 'Parent category', 'envato' ), |
48 |
'parent_item_colon' => esc_html__( 'Parent category', 'envato' ), |
49 |
'edit_item' => esc_html__( 'Edit category', 'envato' ), |
50 |
'update_item' => esc_html__( 'Update category', 'envato' ), |
51 |
'add_new_item' => esc_html__( 'Add new category', 'envato' ), |
52 |
'new_item_name' => esc_html__( 'New category', 'envato' ), |
53 |
'menu_name' => esc_html__( 'Categories', 'envato' ), |
54 |
),
|
55 |
'rewrite' => array( |
56 |
'slug' => 'tutorial-category', |
57 |
'with_front' => true, |
58 |
'hierarchical' => true |
59 |
),
|
60 |
'show_in_nav_menus' => true, |
61 |
'show_tagcloud' => true, |
62 |
'show_admin_column' => true, |
63 |
'show_in_rest' => true, |
64 |
'rest_controller_class' => 'WP_REST_Terms_Controller', |
65 |
'rest_base' => 'tutorial_category', |
66 |
));
|
67 |
|
68 |
register_taxonomy('tutorial-tag', 'tutorial', array( |
69 |
'hierarchical' => false, |
70 |
'labels' => array( |
71 |
'name' => esc_html__( 'Tutorials tags', 'envato' ), |
72 |
'singular_name' => esc_html__( 'Tutorials tag', 'envato' ), |
73 |
'search_items' => esc_html__( 'Search tutorial tags', 'envato' ), |
74 |
'all_items' => esc_html__( 'All tutorial tags', 'envato' ), |
75 |
'parent_item' => esc_html__( 'Parent tutorial tags', 'envato' ), |
76 |
'parent_item_colon' => esc_html__( 'Parent tutorial tag:', 'envato' ), |
77 |
'edit_item' => esc_html__( 'Edit tutorial tag', 'envato' ), |
78 |
'update_item' => esc_html__( 'Update tutorial tag', 'envato' ), |
79 |
'add_new_item' => esc_html__( 'Add new tutorial tag', 'envato' ), |
80 |
'new_item_name' => esc_html__( 'New tutorial tag', 'envato' ), |
81 |
'menu_name' => esc_html__( 'Tags', 'envato' ), |
82 |
),
|
83 |
'rewrite' => array( |
84 |
'slug' => 'tutorial-tag', |
85 |
'with_front' => true, |
86 |
'hierarchical' => false |
87 |
),
|
88 |
'show_in_rest' => true, |
89 |
'rest_controller_class' => 'WP_REST_Terms_Controller', |
90 |
'rest_base' => 'tutorial_tag', |
91 |
));
|
92 |
}
|
93 |
|
94 |
add_action( 'init', 'envato_tutorial' ); |
Hier haben wir den benutzerdefinierten Beitragstyp "Tutorial" mit zwei Taxonomien "Tutorial-Kategorie" und "Tutorial-Tag" erstellt. Schauen Sie sich diese beiden Parameter im Array $args genauer an:
'rest_controller_class' => 'WP_REST_Posts_Controller','rest_base' => 'tutorial',
Mit diesen weisen wir WordPress an, die REST-API-Unterstützung für den benutzerdefinierten Beitragstyp "Tutorial" zu aktivieren. Wir verwenden zwei ähnliche Parameter für unsere beiden Taxonomien:
'rest_controller_class' => 'WP_REST_Terms_Controller','rest_base' => 'tutorial_category','rest_controller_class' => 'WP_REST_Terms_Controller','rest_base' => 'tutorial_tag',
Hinweis: Ihre benutzerdefinierten Post- und Taxonomie-Slugs können einen Bindestrich enthalten. Für den Parameter rest_base wird jedoch dringend empfohlen, einen Unterstrich zu verwenden, da alle REST-API-Parameter Unterstriche verwenden.
Na, bitte! Sobald Sie das Plugin aktiviert haben, aktiviert WordPress die REST-API-Unterstützung für unseren benutzerdefinierten Beitragstyp und unsere benutzerdefinierten Taxonomien. Gehen Sie zum WordPress-Dashboard und laden Sie die Seite neu. Der benutzerdefinierte Beitragstyp Tutorials wird im WordPress-Menü angezeigt. Gehen Sie nun zu Einstellungen > Permalinks und legen Sie die folgende Permalink-Struktur fest /%category%/%postname%/. Mit der WordPress-REST-API ist es viel einfacher, mit einer benutzerdefinierten Permalink-Struktur zu arbeiten.
Fügen Sie einige Beispieldaten hinzu
Fügen wir einige Beispiel-Tutorials hinzu, mit denen Sie arbeiten können. Ich habe einige Tutorial-Inhalte von Tuts+ hinzugefügt, sodass die Archivseite des Tutorials jetzt so aussieht.
Da wir keine bestimmte Archivseite für Tutorials haben, verwendet WordPress das Standardlayout und die Seitenstruktur für Archivierungsseiten, um die Tutorials anzuzeigen. An diesem Punkt sind wir bereit, zur REST-API zu wechseln.
2. Eine Einführung in die WordPress REST API mit Postman
Postman ist ein sehr leistungsfähiges Werkzeug zum Verbinden, Testen und Arbeiten mit jeder API - laden Sie es herunter und installieren Sie es auf Ihrem System. Um mit der WordPress-REST-API arbeiten zu können, müssen Sie sich auf die ausführliche Dokumentation beziehen. Hier finden Sie alle Informationen, die für die Arbeit mit der REST-API erforderlich sind. Öffnen Sie zunächst Postman und senden Sie eine neue GET-Anfrage mit der folgenden URL (unserem Endpunkt): http://yoursite.com/wp-json/wp/v2/tutorial. Sie sollten ähnliche Ergebnisse erhalten.
Woher haben wir diese Endpunkt-URL speziell? Aus der Dokumentation:
„Wenn wir eine GET-Anfrage an stellen
http://yoursite.com/wp-json/ erhalten wir eine JSON-Antwort, die uns zeigt, welche Routen verfügbar sind und innerhalb jeder Route welche Endpunkte verfügbar sind. ”
Unser Endpunkt ruft Daten aus unserem benutzerdefinierten Beitragstyp für das Tutorial ab.
In WordPress habe ich sechs Tutorials hinzugefügt und Postman zeigt sie alle an, bis ich die Anzahl der Tutorials mit dem Parameter per_page wie folgt einschränke: http://yoursite.com/wp-json/wp/v2/tutorial?per_page=1. Jetzt bekommen wir nur noch ein Tutorial. Wenn Sie weitere Parameter hinzufügen möchten, verwenden Sie das Symbol & wie folgt: http://yoursite.com/wp-json/wp/v2/tutorial?per_page=1&status=publish
Untersuchen Sie die zurückgegebenen Daten. Wir erhalten viele sehr nützliche Informationen wie die Tutorial-ID, die Tutorial-Kategorie-ID, den Titel, den Auszug und den Tutorial-Link - alles, was wir für unsere AJAX-Funktion benötigen.
Möglicherweise haben Sie jedoch bemerkt, dass wir zwar über die Tutorial-Kategorie-/Tag-IDs und die Anhang-IDs verfügen, deren Links jedoch nicht vorhanden sind. In einer PHP-Umgebung ist es kein Problem, den Begriff / Anhang-Link von der Begriffs-ID abzurufen, da WordPress über integrierte Funktionen verfügt: get_term_link() und wp_get_attachment_image_src(). In JavaScript haben wir diesen Luxus jedoch nicht. Daher müssen wir die REST-API erweitern, um den Begriff "Links" und die absolute URL des Post-Images zurückzugeben.
3. So erweitern Sie die WordPress REST-API
Glücklicherweise ist das Erweitern der WordPress-REST-API so einfach wie das Hinzufügen eines benutzerdefinierten Felds. Begrüßen Sie register_rest_field(). Öffnen Sie die Plugin-Datei, an der wir gearbeitet haben, und fügen Sie nach dem bisherigen Inhalt ganz unten den folgenden Code hinzu:
1 |
function envato_register_rest_fields(){ |
2 |
|
3 |
register_rest_field('tutorial', |
4 |
'tutorial_category_attr', |
5 |
array( |
6 |
'get_callback' => 'envato_tutorial_categories', |
7 |
'update_callback' => null, |
8 |
'schema' => null |
9 |
)
|
10 |
);
|
11 |
|
12 |
register_rest_field('tutorial', |
13 |
'tutorial_tag_attr', |
14 |
array( |
15 |
'get_callback' => 'envato_tutorial_tags', |
16 |
'update_callback' => null, |
17 |
'schema' => null |
18 |
)
|
19 |
);
|
20 |
|
21 |
register_rest_field('tutorial', |
22 |
'tutorial_image_src', |
23 |
array( |
24 |
'get_callback' => 'envato_tutorial_image', |
25 |
'update_callback' => null, |
26 |
'schema' => null |
27 |
)
|
28 |
);
|
29 |
|
30 |
}
|
31 |
add_action('rest_api_init','envato_register_rest_fields'); |
Der erste Parameter von register_rest_field ist der Post-Typ. Als nächstes geben wir den Namen der neuen Ruhefelder tutorial_category_attr und tutorial_tag_attr an. Der Rest sind optionale Funktionsargumente:
-
get_callbackDie Rückruffunktion zum Abrufen des Feldwerts. Der Standardwert ist 'null'. Das Feld wird in der Antwort nicht zurückgegeben. -
update_callbackDie Rückruffunktion zum Festlegen und Aktualisieren des Feldwerts. Der Standardwert ist 'null', der Wert kann nicht festgelegt oder aktualisiert werden. -
schemaDie Rückruffunktion, mit der das Schema für dieses Feld erstellt wird. Der Standardwert ist 'null'. Es wird kein Schemaeintrag zurückgegeben.
Erstellen wir nun die Rückruffunktionen für beide Ruhefelder.
1 |
function envato_tutorial_categories($object,$field_name,$request){ |
2 |
$terms_result = array(); |
3 |
$terms = wp_get_post_terms( $object['id'], 'tutorial-category'); |
4 |
foreach ($terms as $term) { |
5 |
$terms_result[$term->term_id] = array($term->name,get_term_link($term->term_id)); |
6 |
}
|
7 |
return $terms_result; |
8 |
}
|
9 |
|
10 |
function envato_tutorial_tags($object,$field_name,$request){ |
11 |
$terms_result = array(); |
12 |
$terms = wp_get_post_terms( $object['id'], 'tutorial-tag'); |
13 |
foreach ($terms as $term) { |
14 |
$terms_result[$term->term_id] = array($term->name,get_term_link($term->term_id)); |
15 |
}
|
16 |
return $terms_result; |
17 |
}
|
18 |
|
19 |
function envato_tutorial_image($object,$field_name,$request){ |
20 |
|
21 |
$img = wp_get_attachment_image_src($object['featured_media'],'full'); |
22 |
|
23 |
return $img[0]; |
24 |
}
|
Jede Rückruffunktion erfordert drei Parameter (einer ist erforderlich, die anderen beiden sind optional): $object, $fieldname und $request. Hier erstellen wir ein assoziatives Array aus Begriffsnamen und Begriffsverknüpfungen für jede Tutorial-Kategorie und jedes Tutorial-Tag.
Wenn Sie zunächst zu Postman zurückkehren und die API-Ergebnisse erneut mit GET anfordern, werden neue REST-API-Felder hinzugefügt.
Jetzt sind wir wirklich bereit, AJAX zu machen.
4. Erstellen Sie einen Tutorials-Shortcode mit einem AJAX-Filter und der WordPress-REST-API
Für diesen Schritt erstellen wir einen einfachen Shortcode mit aktuellen Tutorials und einem AJAX-Kategoriefilter. Unser Shortcode verfügt über Layoutoptionen wie Liste und Raster. Wir beginnen mit der Funktion add_shortcode(). Fügen Sie daher den folgenden Code ganz unten in der Plugin-Datei hinzu:
1 |
function envato_tutorial_shortcode_callback($atts, $content = null) { |
2 |
extract(shortcode_atts( |
3 |
array( |
4 |
'layout' => 'grid', // grid / list |
5 |
'per_page' => '3', // int number |
6 |
'start_cat' => '', // starting category ID |
7 |
), $atts) |
8 |
);
|
9 |
|
10 |
global $post; |
11 |
|
12 |
$query_options = array( |
13 |
'post_type' => 'tutorial', |
14 |
'post_status' => 'publish', |
15 |
'ignore_sticky_posts' => 1, |
16 |
'orderby' => 'date', |
17 |
'order' => 'DESC', |
18 |
'posts_per_page' => absint($per_page) |
19 |
);
|
20 |
|
21 |
if (isset($start_cat) & !empty($start_cat)) { |
22 |
|
23 |
$tax_query_array = array( |
24 |
'tax_query' => array( |
25 |
array( |
26 |
'taxonomy' => 'tutorial-category', |
27 |
'field' => 'ID', |
28 |
'terms' => $start_cat, |
29 |
'operator' => 'IN' |
30 |
))
|
31 |
);
|
32 |
|
33 |
$query_options = array_merge($query_options,$tax_query_array); |
34 |
}
|
35 |
|
36 |
$tuts = new WP_Query($query_options); |
37 |
|
38 |
if($tuts->have_posts()){ |
39 |
|
40 |
wp_enqueue_script('tuts'); |
41 |
|
42 |
$output = ''; |
43 |
$class = array(); |
44 |
|
45 |
$class[] = 'recent-tuts'; |
46 |
$class[] = esc_attr($layout); |
47 |
|
48 |
$output .= '<div class="recent-tuts-wrapper">'; |
49 |
|
50 |
$args = array( |
51 |
'orderby' => 'name', |
52 |
'order' => 'ASC', |
53 |
'fields' => 'all', |
54 |
'child_of' => 0, |
55 |
'parent' => 0, |
56 |
'hide_empty' => true, |
57 |
'hierarchical' => false, |
58 |
'pad_counts' => false, |
59 |
);
|
60 |
|
61 |
$terms = get_terms('tutorial-category',$args); |
62 |
|
63 |
|
64 |
if (count($terms) != 0){ |
65 |
$output .= '<div class="term-filter" data-per-page="'.absint($per_page).'">'; |
66 |
|
67 |
if (empty($start_cat)) { |
68 |
$output .= '<a href="'.esc_url(get_post_type_archive_link('tutorial')).'" class="active">'.esc_html__('All','envato').'</a>'; |
69 |
}
|
70 |
|
71 |
foreach($terms as $term){ |
72 |
|
73 |
$term_class = (isset($start_cat) && !empty($start_cat) && $start_cat == $term->term_id) ? $term->slug.' active' : $term->slug; |
74 |
$term_data = array(); |
75 |
|
76 |
$term_data[] = 'data-filter="'.$term->slug.'"'; |
77 |
$term_data[] = 'data-filter-id="'.$term->term_id.'"'; |
78 |
|
79 |
$output .= '<a href="'.esc_url(get_term_link($term->term_id, 'tutorial-category')).'" class="'.esc_attr($term_class).'" '.implode(' ', $term_data).'>'.$term->name.'</a>'; |
80 |
}
|
81 |
|
82 |
$output .= '</div>'; |
83 |
}
|
84 |
|
85 |
$output .= '<ul class="'.implode(' ', $class).'">'; |
86 |
while ($tuts->have_posts() ) { |
87 |
$tuts->the_post(); |
88 |
|
89 |
$IMAGE = wp_get_attachment_image_src(get_post_thumbnail_id(get_the_ID()), 'full', false); |
90 |
|
91 |
$output .= '<li>'; |
92 |
|
93 |
$output .= '<img src="'.esc_url($IMAGE[0]).'" alt="'.esc_attr(get_the_title()).'" />'; |
94 |
|
95 |
$output .='<div class="tutorial-content">'; |
96 |
|
97 |
$output .='<div class="tutorial-category">'; |
98 |
$output .= get_the_term_list( get_the_ID(), 'tutorial-category', '', ', ', '' ); |
99 |
$output .='</div>'; |
100 |
|
101 |
if ( '' != get_the_title() ){ |
102 |
$output .='<h4 class="tutorial-title entry-title">'; |
103 |
$output .= '<a href="'.get_the_permalink().'" title="'.get_the_title().'" rel="bookmark">'; |
104 |
$output .= get_the_title(); |
105 |
$output .= '</a>'; |
106 |
$output .='</h4>'; |
107 |
}
|
108 |
|
109 |
if ( '' != get_the_excerpt() && $layout == 'grid'){ |
110 |
$output .='<div class="tutorial-excerpt">'; |
111 |
$output .= get_the_excerpt(); |
112 |
$output .='</div>'; |
113 |
}
|
114 |
|
115 |
$output .='<div class="tutorial-tag">'; |
116 |
$output .= get_the_term_list( get_the_ID(), 'tutorial-tag', '', ' ', '' ); |
117 |
$output .='</div>'; |
118 |
|
119 |
$output .='</div>'; |
120 |
|
121 |
$output .= '</li>'; |
122 |
|
123 |
}
|
124 |
wp_reset_postdata(); |
125 |
$output .= '</ul>'; |
126 |
|
127 |
$output .= '</div>'; |
128 |
|
129 |
return $output; |
130 |
}
|
131 |
}
|
132 |
add_shortcode('tuts', 'envato_tutorial_shortcode_callback'); |
Da es sich im Grunde genommen um ein WordPress-REST-API-Tutorial handelt, werde ich hier nicht erklären, wie Shortcodes erstellt werden, aber ich werde erklären, was dieser Shortcode bewirkt: Er gibt aktuelle Tutorials mit einer anderen Struktur zurück als auf der Archivseite. und erstellt einen Kategoriefilter, der mit der Funktion get_terms() erstellt wurde.
Die Shortcode-Ausgabe sieht folgendermaßen aus:
Es braucht etwas Styling! Fügen Sie vor der Shortcode-Funktion diesen Code hinzu, um ein Stylesheet in die Warteschlange zu stellen, in das wir unsere Styles schreiben:
1 |
function envato_styles_scripts(){ |
2 |
wp_enqueue_style( 'tuts', plugins_url('/css/tuts.css', __FILE__ )); |
3 |
}
|
4 |
add_action( 'wp_enqueue_scripts', 'envato_styles_scripts' ); |
Erstellen Sie dann in unserem Plugin-Ordner eine Datei: "css/tuts.css" und fügen Sie einige grundlegende Stile hinzu:
1 |
.recent-tuts-wrapper ul { |
2 |
list-style: none; |
3 |
margin:0; |
4 |
padding: 0; |
5 |
}
|
6 |
|
7 |
.term-filter { |
8 |
margin-bottom: 48px !important; |
9 |
}
|
10 |
|
11 |
.term-filter a { |
12 |
display: inline-block; |
13 |
margin-right: 4px !important; |
14 |
padding: 4px 12px; |
15 |
margin: 0; |
16 |
line-height: 1em; |
17 |
background-color: #f5f5f5; |
18 |
font-size: 0.7em; |
19 |
text-align: center; |
20 |
border:none !important; |
21 |
}
|
22 |
|
23 |
.term-filter a:last-child { |
24 |
margin-right: 0 !important; |
25 |
}
|
26 |
|
27 |
.term-filter a.active, |
28 |
.term-filter a:hover { |
29 |
background-color: #212121; |
30 |
color: #ffffff !important; |
31 |
opacity:1 !important; |
32 |
outline: none; |
33 |
}
|
34 |
|
35 |
.recent-tuts { |
36 |
display: grid; |
37 |
grid-template-columns: repeat(2, 2fr); |
38 |
grid-row-gap: 24px; |
39 |
grid-column-gap: 24px; |
40 |
justify-items: stretch; |
41 |
opacity: 1; |
42 |
transition: opacity 100ms 200ms ease-out; |
43 |
}
|
44 |
|
45 |
.recent-tuts.list { |
46 |
grid-template-columns: repeat(1, 1fr); |
47 |
}
|
48 |
|
49 |
.recent-tuts.loading { |
50 |
opacity: 0; |
51 |
transition: opacity 100ms ease-out; |
52 |
}
|
53 |
|
54 |
.recent-tuts.list li { |
55 |
display: table; |
56 |
width: 100%; |
57 |
}
|
58 |
|
59 |
.recent-tuts.list li > * { |
60 |
display: table-cell; |
61 |
vertical-align: middle; |
62 |
}
|
63 |
|
64 |
.recent-tuts.list li > .tutorial-content { |
65 |
width: 50%; |
66 |
padding-left: 24px; |
67 |
}
|
68 |
|
69 |
.recent-tuts li { |
70 |
padding: 24px; |
71 |
background-color: #ffffff; |
72 |
box-shadow: inset 0 0 0 1px #e0e0e0; |
73 |
}
|
74 |
|
75 |
.tutorial-category a { |
76 |
font-size: 0.7em; |
77 |
line-height: 1em; |
78 |
}
|
79 |
|
80 |
.tutorial-title { |
81 |
margin: 4px 0 16px 0 !important; |
82 |
}
|
83 |
|
84 |
.tutorial-title a {border:none !important;} |
85 |
|
86 |
.tutorial-tag a { |
87 |
display: inline-block; |
88 |
vertical-align: baseline; |
89 |
padding: 4px 12px; |
90 |
margin: 0; |
91 |
line-height: 1em; |
92 |
background-color: #f5f5f5; |
93 |
font-size: 0.7em; |
94 |
text-align: center; |
95 |
border:none !important; |
96 |
}
|
Jetzt sehen sowohl die Listen- als auch die Rasterlayouts viel besser aus!
AJAX-Filterfunktionalität
Es ist Zeit, die Filterfunktionen für AJAX und REST-API zu erstellen. Lassen Sie uns unsere Skriptdatei erstellen und in die Warteschlange stellen. Fügen Sie in der Funktion envato_styles_scripts() nach dem Stylesheet den folgenden Code hinzu
1 |
wp_register_script( 'tuts', plugins_url('/js/tuts.js', __FILE__ ), array('jquery'), '', true); |
Wir werden das Skript registrieren und mit der Shortcode-Ausgabe in die Warteschlange stellen. Fügen Sie in der Shortcode-Funktionsdatei direkt nach dem if($tuts->have_posts()){ den folgenden Code hinzu:
1 |
wp_enqueue_script('tuts'); |
Wie zuvor beim Stylesheet müssen Sie den Ordner js mit der Datei tuts.js haben. Bevor wir Code in die Datei tuts.js schreiben, müssen wir einige Parameter mit dieser Datei mit der Funktion wp_localize_script() lokalisieren. Fügen Sie nach wp_register_script() den folgenden Code hinzu:
1 |
wp_localize_script( |
2 |
'tuts', |
3 |
'tuts_opt', |
4 |
array('jsonUrl' => rest_url('wp/v2/tutorial')) |
5 |
);
|
Dies ist ein REST-API-Endpunkt für Tutorials und wird für unsere AJAX-Funktion benötigt. Fügen Sie der Datei tuts.js den folgenden jQuery-Code hinzu:
1 |
(function($){ |
2 |
|
3 |
"use strict"; |
4 |
|
5 |
function buildJsonURL(perPage){ |
6 |
|
7 |
var jsonUrl = tuts_opt.jsonUrl; |
8 |
if (typeof(perPage) != 'undefined' && perPage != null){ |
9 |
jsonUrl += '?per_page='+perPage; |
10 |
}
|
11 |
return jsonUrl; |
12 |
}
|
13 |
|
14 |
$('.recent-tuts-wrapper').each(function(){ |
15 |
|
16 |
// 1. Create all the required variables
|
17 |
|
18 |
var $this = $(this), |
19 |
termFilter = $this.find('.term-filter'), |
20 |
recentTuts = $this.find('.recent-tuts'), |
21 |
layout = (recentTuts.hasClass('grid')) ? 'grid' : 'list', |
22 |
perPage = termFilter.data('per-page'), |
23 |
requestRunning = false; |
24 |
|
25 |
// 2. Term filter click event
|
26 |
|
27 |
termFilter.find('a').on('click',function(e){ |
28 |
|
29 |
/*
|
30 |
3. Prevent link default
|
31 |
Make sure that the previous AJAX request is not ranning at the moment
|
32 |
Set a new requestRunning
|
33 |
|
34 |
*/
|
35 |
e.preventDefault(); |
36 |
|
37 |
if (requestRunning) {return;} |
38 |
|
39 |
requestRunning = true; |
40 |
|
41 |
// 4. Remove current tuts from the tuts list to append requested tuts later
|
42 |
|
43 |
recentTuts.addClass('loading'); |
44 |
recentTuts.find('li').remove(); |
45 |
|
46 |
// 5. Collect current filter data and toggle active class
|
47 |
|
48 |
var currentFilter = $(this), |
49 |
currentFilterLink = currentFilter.attr('href'), |
50 |
currentFilterID = currentFilter.data('filter-id'); |
51 |
|
52 |
currentFilter.addClass('active').siblings().removeClass('active'); |
53 |
|
54 |
// 6. Build the json AJAX call URL
|
55 |
|
56 |
var jsonUrl = buildJsonURL(perPage); |
57 |
|
58 |
if (typeof(currentFilterID) != 'undefined' && currentFilterID != null){ |
59 |
jsonUrl += '&tutorial_category='+currentFilterID; |
60 |
}
|
61 |
|
62 |
// 7. Send AJAX request
|
63 |
|
64 |
$.ajax({ |
65 |
dataType: 'json', |
66 |
url:jsonUrl |
67 |
})
|
68 |
.done(function(response){ |
69 |
|
70 |
// 8. If success loop with each responce object and create tuturial output
|
71 |
|
72 |
var output = ''; |
73 |
|
74 |
$.each(response,function(index,object){ |
75 |
|
76 |
output += '<li>'; |
77 |
|
78 |
output += '<img src="'+object.tutorial_image_src+'" alt="'+object.title.rendered+'" />'; |
79 |
|
80 |
output +='<div class="tutorial-content">'; |
81 |
|
82 |
output +='<div class="tutorial-category">'; |
83 |
var tutorialCategories = object.tutorial_category_attr; |
84 |
for (var key in tutorialCategories) { |
85 |
output += '<a href="'+tutorialCategories[key][1]+'" title="'+tutorialCategories[key][0]+'" rel="tag">'+tutorialCategories[key][0]+'</a> '; |
86 |
}
|
87 |
output +='</div>'; |
88 |
|
89 |
if ( '' != object.title.rendered ){ |
90 |
output +='<h4 class="tutorial-title entry-title">'; |
91 |
output += '<a href="'+object.link+'" title="'+object.title.rendered+'" rel="bookmark">'; |
92 |
output += object.title.rendered; |
93 |
output += '</a>'; |
94 |
output +='</h4>'; |
95 |
}
|
96 |
|
97 |
if ( '' != object.excerpt.rendered && layout == 'grid'){ |
98 |
output +='<div class="tutorial-excerpt">'+object.excerpt.rendered.replace(/(<([^>]+)>)/ig,"")+'</div>'; |
99 |
}
|
100 |
|
101 |
output +='<div class="tutorial-tag">'; |
102 |
var tutorialTags = object.tutorial_tag_attr; |
103 |
for (var key in tutorialTags) { |
104 |
output += '<a href="'+tutorialTags[key][1]+'" title="'+tutorialTags[key][0]+'" rel="tag">'+tutorialTags[key][0]+'</a> '; |
105 |
}
|
106 |
output +='</div>'; |
107 |
|
108 |
output +='</div>'; |
109 |
|
110 |
output += '</li>'; |
111 |
|
112 |
});
|
113 |
|
114 |
// 9. If output is ready append new tuts into the tuts list
|
115 |
|
116 |
if (output.length) { |
117 |
recentTuts.append(output); |
118 |
recentTuts.removeClass('loading'); |
119 |
}
|
120 |
|
121 |
})
|
122 |
.fail(function(response){ |
123 |
|
124 |
// 10. If fail alert error message
|
125 |
|
126 |
alert("Something went wront, can't fetch tutorials"); |
127 |
})
|
128 |
.always(function(response){ |
129 |
|
130 |
// 11. Always reset the requestRunning to keep sending new AJAX requests
|
131 |
|
132 |
requestRunning = false; |
133 |
});
|
134 |
|
135 |
return false; |
136 |
|
137 |
});
|
138 |
|
139 |
});
|
140 |
|
141 |
})(jQuery); |
Unser Code besteht aus elf Schritten, und ich werde jeden erklären:
- Erstellen Sie alle erforderlichen Variablen. Dieser Schritt ist selbsterklärend. Hier erstellen wir unsere erforderlichen Variablen.
- Termfilter-Klickereignis. Dadurch wird das Klickereignis für jeden Termlink im Filter festgelegt.
- Da Links das
href-Attribut haben, müssen wir das Standardverhalten des Links verhindern, um die Seite nicht zu verlassen. Danach müssen wir sicherstellen, dass momentan keine andere Filteranforderung ausgeführt wird. Wenn keine Anfrage läuft, setzen wir eine neue. - Entfernen Sie aktuelle Elemente aus der Tut-Liste, um Platz für Neulinge zu schaffen.
- Holen Sie sich den aktuellen angeklickten Filter
href,idund schalten Sie dieaktiveKlasse um. - Erstellen Sie die endgültige AJAX-URL, an die wir die Anfrage senden. Dies ist eine einfache Funktionsausgabe, die den mit der REST-API formatierten Link verwendet und das Attribut
per_pageanzeigt, wenn eines mit den Shortcode-Einstellungen angegeben ist. - Senden Sie die AJAX-Anforderung mit dem JSON-Datentyp und der von uns erstellten JSON-URL.
- Wenn die Anfrage erfolgreich ist, durchlaufen wir jedes Antwortobjekt. Erinnern Sie sich an die Postbotenausgabe unserer Beispiel-API-Anfragen? Jedes Post-Item, das wir erhalten, ist ein Antwortobjekt. Hier ist der Hauptunterschied zwischen einer einfachen AJAX-Abrufanforderung und einer AJAX-JSON-REST-API-Anforderung: Wir erhalten keine strukturierten HTML-Daten, wir erhalten ein OBJEKT, das Informationen enthält, und jetzt können wir diese Objektdaten mit jedem Layout verwenden wir wollen.
- Wenn die Ausgabe fertig ist, fügen Sie mit jQuery append neue Tuts in die Tuts-Liste ein.
- Wenn etwas schief geht, müssen wir dem Benutzer mitteilen, dass die Anforderung fehlgeschlagen ist.
- Unabhängig davon, ob wir erfolgreich waren oder nicht, müssen wir die aktuelle AJAX-Anforderung stoppen.
Abschluss
Gut gemacht! Sie haben JavaScript (mit jQuery) verwendet, um Daten aus unserem WordPress-Backend abzurufen. Wir haben die WordPress-REST-API verwendet und erweitert, um auf unseren benutzerdefinierten Beitragstyp zugreifen zu können.
Nächste Schritte
Nachdem Sie nun wissen, wie Sie mit der WordPress-REST-API arbeiten, können Sie noch weiter gehen und WordPress-Daten von außerhalb der WordPress-Umgebung abrufen. Hier ist eine Beispiel-HTML-Site mit den neuesten Tutorials von unserer WordPress-Website ohne WordPress.
Dies ist eine rudimentäre Seite, die jedoch zeigt, wie Sie WordPress-Daten außerhalb von WordPress verwenden können. Es kann eine mobile App oder eine Desktop-App oder (meine Lieblingssituation) eine progressive Web-App für alle Plattformen und Betriebssysteme sein, die mit WordPress als CMS und einer Web-App für das Front-End erstellt wurde.
Fühlen Sie sich frei, den Code aus dem GitHub-Repo zu ziehen und herumzuspielen! Wenn Sie Fragen oder Gedanken zu dem haben, was wir hier gebaut haben, lassen Sie diese bitte im Kommentarbereich.
Weitere WordPress REST API Tutorials und Kurse
By
