Folien zur Session "Plugin-Entwicklung mit eigenen Tabellen, Backend-Widgets und Query-Filters am Beispiel des GEO-Plugins der VCAT EDULABS"

1. Plugin-Entwicklung mit eigenen Tabellen,
Backend-Widgets und Query-Filters
am Beispiel des GEO-Plugins der VCAT EDULABS

2. Inhalt
• die VCAT EDULABS
– Wer, Was, Wieso, Weshalb, Warum?
• das GEO-Plugin
– Sinn & Zweck
– Anwendung
– Historie & Ausblick
• der Einsatz von
– Backend-Widgets
– Query-Filters
9. November 2013
WP Camp 2013 Berlin - Session "Plugin-Entwicklung mit eigenen Tabellen, BackendWidgets und Query-Filters"
2

3. Ausbildung am lebenden Objekt
DIE VCAT EDULABS
9. November 2013
WP Camp 2013 Berlin - Session "Plugin-Entwicklung mit eigenen Tabellen, BackendWidgets und Query-Filters"
Nico Danneberg
3

4. VCAT Consulting GmbH
• seit 1999 in der SoftwareEntwicklung tätig
• Leistungsspektrum
– Konzentration auf das
Kerngeschäft:
• Fokus Internet
• Kreativleistungen nur über
Partner
• seit 2006 eigenständige GmbH
mit Sitz in Potsdam-Babelsberg
• Durchschnittliches Wachstum
von 20%
• 15 Mitarbeiterinnen und
Mitarbeiter
• heterogene Kundenstruktur
9. November 2013
WP Camp 2013 Berlin - Session "Plugin-Entwicklung mit eigenen Tabellen, BackendWidgets und Query-Filters"
4

5. VCAT EDULABS
• Philosophie: Fachkräftesicherung durch
Aus- und Weiterbildung
– Seit 2007 Ausbildungsbetrieb für den Beruf des / der
Mathematisch-technischen Softwareentwicklers/in
– Praxis- & Projektorientierte Ausbildung
• Gründung der VCAT EDULABS mit Fokus auf OpenSource-Anwendungen (WordPress, Typo3, vTiger, u.a.)
– Reale Projekte mit „echtem“ Kundenkontakt
– Wissensrückfluss in die Community
– Öffentliche Referenzen  Erhöhung der Reichweite
9. November 2013
WP Camp 2013 Berlin - Session "Plugin-Entwicklung mit eigenen Tabellen, BackendWidgets und Query-Filters"
5

6. Unser erstes Projekt
DAS GEO-PLUGIN
9. November 2013
WP Camp 2013 Berlin - Session "Plugin-Entwicklung mit eigenen Tabellen, BackendWidgets und Query-Filters"
Daniel Dziamski
6

7. Sinn & Zweck
• Artikel und Seiten können mit Adressdaten versehen
werden, z.B.
– Ort einer Veranstaltung
– Ort, an dem ein Foto / Fotoserie entstanden ist
• Anzeige einer Mini-Map im Inhalt des Artikels / der
Seite
• Anzeige einer Übersichtskarte mit allen Artikeln und
Seiten, inkl. Verlinkung über „Sprechblase“
9. November 2013
WP Camp 2013 Berlin - Session "Plugin-Entwicklung mit eigenen Tabellen, BackendWidgets und Query-Filters"
7

8. Anwendung I
• Installation
– Plugin im WordPress Repository:
VCAT EDULABS Posts at Google Maps
– Suchen, finden & wie gewohnt installieren:
• Automatische Installation über WP Backend, Manuelle
Installation, Upload ohne FTP
• Einstellungen
– VCAT EDULABS Einstellungen im Backend
mit Unterseite für GEO-Plugin
9. November 2013
WP Camp 2013 Berlin - Session "Plugin-Entwicklung mit eigenen Tabellen, BackendWidgets und Query-Filters"
8

9. Anwendung II
• Shortcodes mit Attributen
Große Map
Mini-Map
[vcat-dpagm]
[vcat-dpagm-mini]
Breite
X
X
width=„250px“
width=„75%“
Höhe
X
X
height=„100px“
Zentrum
X
-
center=„August-Bebel-Str.
26-53 14482 Potsdam“
Zoom
X
X
zoom=„10“
Ziel
X
X
target=„blank“
Ausrichtung
X
X
align=„left“
Shortcode
9. November 2013
Beispiel
-
WP Camp 2013 Berlin - Session "Plugin-Entwicklung mit eigenen Tabellen, BackendWidgets und Query-Filters"
9

10. Einstellungsseite
Im WordPress Backend zur Festlegung der Standardweitere aller ShortcodeAttribute
9. November 2013
WP Camp 2013 Berlin - Session "Plugin-Entwicklung mit eigenen Tabellen, BackendWidgets und Query-Filters"
10

11. Backend-Widget
Im Bearbeitungsmodus von Artikeln und Seiten
9. November 2013
WP Camp 2013 Berlin - Session "Plugin-Entwicklung mit eigenen Tabellen, BackendWidgets und Query-Filters"
11

12. Bearbeitung der GEO-Daten
Im QuickEdit-Modus von Seiten & Artikeln
9. November 2013
WP Camp 2013 Berlin - Session "Plugin-Entwicklung mit eigenen Tabellen, BackendWidgets und Query-Filters"
12

13. Mini-Map
In der Anwendung in einem Artikel
9. November 2013
WP Camp 2013 Berlin - Session "Plugin-Entwicklung mit eigenen Tabellen, BackendWidgets und Query-Filters"
13

14. Große Karte
Mit allen Artikeln und Seiten
9. November 2013
WP Camp 2013 Berlin - Session "Plugin-Entwicklung mit eigenen Tabellen, BackendWidgets und Query-Filters"
14

15. Historie & Ausblick
Historie
Ausblick
• GEO-Daten für Artikel
• Frei wählbare Pins pro Artikel
und Seite
• Genaue Positionierung per
Drag‘n‘Drop im Backend
• Filter als Attribute für den
Shortcode
– Benutzer-definierte Variablen
• und Kategorien
– Meta-Daten für Kategorien nur mit
extra Plugin möglich
9. November 2013
WP Camp 2013 Berlin - Session "Plugin-Entwicklung mit eigenen Tabellen, BackendWidgets und Query-Filters"
15

16. Action-Hooks, Filter API und mehr
Robin Kramer
DER EINSATZ VON
BACKEND-WIDGETS UND QUERY-FILTERS
9. November 2013
WP Camp 2013 Berlin - Session "Plugin-Entwicklung mit eigenen Tabellen, BackendWidgets und Query-Filters"
16

17. Schritt 1: eigene Tabelle
register_activation_hook( __FILE__, 'vcat_db_install' );
function vcat_db_install() {
global $wpdb;
global $VCAT_GEO_PI_TABLE ;
global $vcat_db_version;
$vcat_db_version = "1.0";
$sql = "CREATE TABLE IF NOT EXISTS $VCAT_GEO_PI_TABLE
id INTEGER NOT NULL AUTO_INCREMENT,
post_id INTEGER NOT NULL,
lat FLOAT NOT NULL,
lng FLOAT NOT NULL,
str LONGTEXT,
plz INTEGER(5) ZEROFILL,
ort VARCHAR(20),
UNIQUE KEY id (id) );
";
9. November 2013
WP Camp 2013 Berlin - Session "Plugin-Entwicklung mit eigenen Tabellen, BackendWidgets und Query-Filters"
(
17

18. Schritt 2: Backend-Widget
add_action( 'add_meta_boxes', 'vcat_custom_fields_init' );
function vcat_custom_fields_init() {
wp_enqueue_style( 'meta_css', PLUGIN_PATH . '/styles/meta.css');
foreach( array( 'post', 'page' ) as $type ) {
add_meta_box( 'vcat_custom_fields_meta',
'VCAT Geo Daten',
'vcat_custom_fields_setup',
$type, 'normal', 'high' );
}
}
}
9. November 2013
WP Camp 2013 Berlin - Session "Plugin-Entwicklung mit eigenen Tabellen, BackendWidgets und Query-Filters"
18

19. Schritt 2: Backend-Widget
function vcat_custom_fields_setup() {
global $post;
$args = array( 'post_type' => array( 'page', 'post' ),
'posts_per_page' => 1, 'p'=>$post->ID );
$current = new WP_Query( $args );
$post = $current->post;
// notwendiges HTML laden
include( PLUGIN_FOLDER . '/custom/meta.php' );
echo '<input type="hidden" name="vcat_custom_fields_nonce"
value="' . wp_create_nonce( __FILE__ ) . '" />';
}
9. November 2013
WP Camp 2013 Berlin - Session "Plugin-Entwicklung mit eigenen Tabellen, BackendWidgets und Query-Filters"
19

20. Schritt 2: Backend-Widget
• Speichern
add_action( 'save_post', 'vcat_custom_fields_save' );
• Löschen
add_action( 'delete_post', 'vcat_delete_data' );
9. November 2013
WP Camp 2013 Berlin - Session "Plugin-Entwicklung mit eigenen Tabellen, BackendWidgets und Query-Filters"
20

21. Schritt 3: Query-Filters
• Filter-Hooks für die WP_Query
– posts_where_paged
– posts_groupby
– posts_join_paged
– posts_orderby
– posts_distinct
– post_limits
– posts_fields
• posts_clauses – Filter für alle Query-Elemente
9. November 2013
WP Camp 2013 Berlin - Session "Plugin-Entwicklung mit eigenen Tabellen, BackendWidgets und Query-Filters"
21

22. Schritt 3: Query-Filters
add_filter( 'posts_clauses', 'vcat_geo_filter', 10, 2 );
function vcat_geo_filter( $clauses ){
global $wpdb, $VCAT_GEO_PI_TABLE, $post;
$join = &$clauses[ 'join' ];
$join .= " LEFT JOIN $VCAT_GEO_PI_TABLE ON
$VCAT_GEO_PI_TABLE.post_id = $wpdb->posts.ID";
$fields = &$clauses[ 'fields' ];
$fields .= ", $VCAT_GEO_PI_TABLE.post_id, $VCAT_GEO_PI_TABLE.lat,
$VCAT_GEO_PI_TABLE.lng, $VCAT_GEO_PI_TABLE.str,
$VCAT_GEO_PI_TABLE.plz, $VCAT_GEO_PI_TABLE.ort";
return $clauses;
}
9. November 2013
WP Camp 2013 Berlin - Session "Plugin-Entwicklung mit eigenen Tabellen, BackendWidgets und Query-Filters"
22

23. Schritt 4: Shortcodes
Große Map
Mini-Map
function vcatDisplayPostsAtGoogleMaps( $atts ){
function vcatDisplayPostsAtGoogleMaps_mini( $atts ){
/*…*/
extract( shortcode_atts( array(
/*…*/
'center_lat' => $options['center_lat'],
'center_lng' => $options['center_lng'],
/*…*/
), $atts ) );
/*…*/
$center_lat = $post->lat;
$center_lng = $post->lng;
return "
/*…*/
<script type='text/javascript'>
/*…*/
vcatInitialize( " . $center_lat . ",
" . $center_lng . ",
" . $zoom . ");
return "
/*…*/
<script type='text/javascript'>
/*…*/
vcatInitialize( " . $center_lat . ",
" . $center_lng . ",
" . $zoom . ");
" . vcatSetMarkers( $target ) . "
</script>
"; }
vcatAddMarker( " . $center_lat . ",
" . $center_lng . ",
'" . $post_address ."',
/*…*/
</script>
";
}
9. November 2013
WP Camp 2013 Berlin - Session "Plugin-Entwicklung mit eigenen Tabellen, BackendWidgets und Query-Filters"
23

24. Schritt 4: Shortcodes
function vcatSetMarkers( $target ) {
$args = array( 'post_type' => array( 'page','post' ),
'posts_per_page' => -1 );
$map_posts = new WP_Query( $args );
$out = "";
if( ! empty( $map_posts->posts ) ) {
foreach( $map_posts->posts as $post ) {
/*…*/
if( $post_lat != "" && $post_lng != "" ) {
$out .= "vcatAddMarker( " . $post_lat . ",
" . $post_lng . ",
'" . $post_address . “'
/*…*/
9. November 2013
WP Camp 2013 Berlin - Session "Plugin-Entwicklung mit eigenen Tabellen, BackendWidgets und Query-Filters"
24

25. Schritt 5: Backend-Listen
• Spalten
add_filter('manage_post_posts_columns', 'vcat_add_post_column');
add_filter('manage_page_posts_columns', 'vcat_add_post_column');
add_action('manage_posts_custom_column', 'vcat_render_post_columns', 10, 2);
add_action('manage_pages_custom_column', 'vcat_render_post_columns', 10, 2);
function vcat_render_post_columns($column_name) {
switch ($column_name) {
case 'post_address':
global $post;
/*…*/
break;
}
}
• Quick-Edit
add_action('quick_edit_custom_box', 'vcat_add_quick_edit', 10, 2);
add_action('save_post', 'vcat_quick_edit_save');
9. November 2013
WP Camp 2013 Berlin - Session "Plugin-Entwicklung mit eigenen Tabellen, BackendWidgets und Query-Filters"
25

26. Schritt 5: Backend-Listen
function vcat_quick_edit_javascript() {
global $current_screen;
if ((($current_screen->id != 'edit-post')
&&($current_screen->id != 'edit-page'))
|| (($current_screen->post_type != 'post')
&&($current_screen->post_type != 'page'))) return;
?>
<script type="text/javascript">
function insert_data(str, plz, ort, nonce) {
inlineEditPost.revert();
var strInput = document.getElementById('quick_edit_str');
/*…*/
strInput.value = str;
/*…*/
}
</script>
<?php
}
9. November 2013
WP Camp 2013 Berlin - Session "Plugin-Entwicklung mit eigenen Tabellen, BackendWidgets und Query-Filters"
26

27. Schritt 5: Backend-Listen
function vcat_expand_quick_edit_link($actions, $post) {
global $current_screen;
$nonce
$str =
$plz =
$ort =
= wp_create_nonce( /*…*/ );
$post->str;
$post->plz;
$post->ort;
$actions['inline hide-if-no-js'] =
'<a href="#" class="editinline" title="'
. esc_attr( __( 'Edit this item inline' ) ) . '" ‚
. " onclick="insert_data('{$str}',/*…*/')">„
. __( 'Quick&nbsp;Edit' ) . '</a>';
return $actions;
}
9. November 2013
WP Camp 2013 Berlin - Session "Plugin-Entwicklung mit eigenen Tabellen, BackendWidgets und Query-Filters"
27

28. Q/A – Fragen & Antworten
Dem QR-Code folgen und diese Präsentation online sehen…
9. November 2013
WP Camp 2013 Berlin - Session "Plugin-Entwicklung mit eigenen Tabellen, BackendWidgets und Query-Filters"
28

29. Kontakt
• EDULABS – ein Projekt der
VCAT Consulting GmbH
• August-Bebel-Straße 26-53
MedienHaus
14482 Potsdam
• T: +49 (331) 721339 - 0
F: +49 (331) 721339 - 2
W: vcat.de/edulabs
M: edulabs@vcat.de
9. November 2013
Lassen Sie uns in Kontakt bleiben:
F
G
S
T
W
X
facebook.com/VCATconsulting
gplus.to/VCATconsulting
slideshare.net/VCATconsulting
twitter.com/VCATconsulting ( #edulabs )
http://profiles.wordpress.org/VCATconsulting
xing.com/companies/vcatconsultinggmbh
WP Camp 2013 Berlin - Session "Plugin-Entwicklung mit eigenen Tabellen, BackendWidgets und Query-Filters"
29