VCAT EDULABS @ WP Camp 2013: Plugin-Entwicklung mit eigenen Tabellen, Backend-Widgets & Query-Filters

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

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

Ausbildung am lebenden Objekt

DIE VCAT EDULABS

9. November 2013


Nico Danneberg

3

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


4

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


5

Unser erstes Projekt

DAS GEO-PLUGIN

9. November 2013


Daniel Dziamski

6

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


7

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


8

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
-


9

Einstellungsseite
Im WordPress Backend zur Festlegung der Standardweitere aller ShortcodeAttribute

9. November 2013


10

Backend-Widget
Im Bearbeitungsmodus von Artikeln und Seiten

9. November 2013


11

Bearbeitung der GEO-Daten
Im QuickEdit-Modus von Seiten & Artikeln

9. November 2013


12

Mini-Map
In der Anwendung in einem Artikel

9. November 2013


13

Große Karte
Mit allen Artikeln und Seiten

9. November 2013


14

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


15

Action-Hooks, Filter API und mehr
Robin Kramer

DER EINSATZ VON
BACKEND-WIDGETS UND QUERY-FILTERS
9. November 2013


16

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


(

17

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


18

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


19

• Speichern
add_action( 'save_post', 'vcat_custom_fields_save' );

• Löschen
add_action( 'delete_post', 'vcat_delete_data' );

9. November 2013


20

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


21

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


22

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 . ",
" . $zoom . ");
" . vcatSetMarkers( $target ) . "
</script>
"; }

vcatAddMarker( " . $center_lat . ",
'" . $post_address ."',
/*…*/
</script>
";
}

9. November 2013


23

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


24

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


25

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


26

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 Edit' ) . '</a>';
return $actions;
}

9. November 2013


27

Q/A – Fragen & Antworten
Dem QR-Code folgen und diese Präsentation online sehen…

9. November 2013


28

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


29

VCAT EDULABS @ WP Camp 2013: Plugin-Entwicklung mit eigenen Tabellen, Backend-Widgets & Query-Filters

Weitere ähnliche Inhalte

Andere mochten auch (14)

Mehr von VCAT Consulting GmbH (20)

VCAT EDULABS @ WP Camp 2013: Plugin-Entwicklung mit eigenen Tabellen, Backend-Widgets & Query-Filters