Benjamin Vötterle » Webentwicklung

WordPress: Felder dem Kommentar-Formular hinzufügen

Benjamin Vötterle — Thu, 04 Mar 2010 14:48:21 +0000

Beim Basteln eines WordPress Themes, bin ich auf das Problem gestoßen, dass ich meinen Kommentaren gerne ein Feld für die Twitter-ID hinzufügen wollte. Zuerst bin ich auf das Plugin Extra Comment Fields gestoßen. Das Plugin hat mir aber die Kommentar-Seite im Backend zerschossen und war für mich deshalb nicht brauchbar. Zum Glück bin ich auf eine viel bessere Lösung gestoßen. WordPress bietet seit der Version 2.9 die Möglichkeit, Meta-Felder den Kommentaren hinzuzufügen.

Zuerst muss dafür der functions.php dieser Code hinzugefügt werden:

1
2
3
4
5

add_action ('comment_post', 'add_meta_settings', 1);

function add_meta_settings($post_id) {
add_comment_meta($post_id, 'twitterid', $_POST['twitterid'], true);
}

Dann muss das Kommentar-Formular in der comments.php um das Twitter-Feld erweitert werden.

1 2	<label for="twitterid">Twitter Name:</label><br /> <input type="text" class="ipt-name" name="twitterid" id="twitterid" >

Jetzt wird beim Abschicken eines Kommentars die Twitter-ID gespeichert und man muss sich nur noch um die Ausgabe kümmern. Dies geht wieder in der comments.php in der Schleife der Kommentar-Ausgabe.

1
2
3

$twitterid_array= get_comment_meta(get_comment_ID(),"twitterid");
$twitterid = $twitterid_array[0];
if (isset($twitterid)) echo $twitterid;

Was haltet Ihr von der neuen Funktion? Welche Felder fehlen Euch?

WordPress: Anzahl der angezeigten Posts pro Seite ändern

Benjamin Vötterle — Fri, 13 Nov 2009 22:38:49 +0000

Bei den Arbeiten an meinem Fotoblog bin ich auf ein Problem gestoßen. Ich wollte, dass für eine Kategorie und deren Unterkategorie nur ein Post pro Archivseite dargestellt wird. Dies kann man laut Dokumentation mit folgendem Code vor der Loop machen:

1
2
3
4
5
6
7
8
9
10
11
12
13

// Das Query
global $query_string;
query_posts($query_string . "&posts_per_page=5");

// Die Loop
if ( have_posts() ) : while ( have_posts() ) : the_post();
..
endwhile; else:
..
endif;

// Query zurücksetzen
wp_reset_query();

Also habe ich den Code in der archive.php verpackt und vorher je nach Kategorie posts_per_page verändert. Leider hat das in den Unterkategorien nicht funktioniert. Ich bin immer wieder auf 404 Seiten gelandet. Ich habe schon einen WordPress-Bug vermutet und auf anraten anderer Entwickler ein Ticket eröffnet. Das Ticket wurde mit dem Hinweis, dass dies ein normales WordPress-Verhalten sei, geschlossen. Grund hierfür ist, dass WordPress das Paging errechnet bevor das Query abgeschickt wird, d.h. Query und errechnetes Paging stimmen nicht überein. Zum Glück hat der Entwickler, der das Ticket bearbeitet hat, mir einen Workaround aufgezeigt.
Das Problem lässt sich mit Hilfe eines Filters beheben. Dieser wird in der functions.php mit diesem Code gesetzt.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

// Filter hinzufügen
add_filter('request', 'set_post_per_page_for_cat');

function set_post_per_page_for_cat($vars) {

// ID der Kategorie, bei der und deren Unterkategorien posts_per_page geändert werden sollen
$cat = 7;

// Anzahl der Posts
$post_count = 1;

// Aktuelle Kategorie
$cur_category_slug = get_term_by( 'slug', $vars['category_name'], 'category' );
$cur_category = $cur_category_slug->term_id;
if ( $cat == $cur_category ) {
// Wenn die Kategorie die zu Ändernde ist
$vars['posts_per_archive_page'] = $post_count;
return $vars;
} else {
$subcats=explode('/',get_category_children($cat));
if( in_array($cur_category, $subcats) ){
// Wenn die Kategorie eine Unterkategorie der zu Ändernden ist
$vars['posts_per_archive_page'] = $post_count;
return $vars;
}
}

$vars['posts_per_archive_page']=get_option('posts_per_page');
return $vars;
}

Ich hoffe dieser Codeschnipsel hilft Euch weiter. Freue mich über Fragen und Anregungen.

Fotoblog mit YAPB in WordPress integrieren

Benjamin Vötterle — Wed, 14 Oct 2009 20:48:56 +0000

Wie einige von Euch sicherlich schon gesehen haben, gibt es seit einiger Zeit ein Fotoblog Widget auf meiner Seite. Dies war aber nur der erste Schritt der Fotoblogintegration in WordPress, die ich jetzt fürs Erste abgeschlossen habe.

Klar nun fragen sich bestimmt einige, warum hat er seine Bilder nicht bei Flickr oder Picasa? Zum Einen wollte ich die Bilder nicht aus der Hand geben und zum Anderen mag ich es, wenn alles aus einem Guss ist. Deshalb habe ich nach einer Lösung mit und für WordPress gesucht. Mit dem YAPB Plugin habe ich eine für mich ideale Lösung gefunden.

YAPB steht für Yet Another PhotoBlog und erweitert WordPress um Fotoblog-Funktionen. Für die Standardfunktionen muss nicht einmal ein Theme verändert werden, denn der Fotoblog integriert sich sehr gut in WordPress.

Für die Anzeige der Bilder in der Sidebar, muss noch das YAPB Sidebar Widget installiert werden.

Da ich aber YAPB mehr mit meinem Theme verzahnen wollte, habe ich einige Änderungen vornehmen müssen, die ich Euch nach dem Aufräumen im Code gerne in Form eines YAPB fähigen WordPress Themes zur Verfügung stellen will. Mein Ziel war es den Fotoblog anders als den Hauptblog aussehen zu lassen und trotzdem eine enge Verzahnung zu schaffen. Am Besten schaut Ihr Euch das Ergebnis einfach an.

Vierter Webmontag in Augsburg

Benjamin Vötterle — Tue, 28 Jul 2009 08:41:23 +0000

Nachdem ich den vierten Webmontag in Augsburg schon angekündigt habe, war ich gestern natürlich auch vor Ort. Mit mir trotzten ungefähr 15 Webmontagler der Versuchung in den Biergarten oder an den See zu gehen. Der Sponsor des Begrüßungsgetränks war gestern: Meistertipp. de – News und Tipps für Unternehmer im Bauhandwerk.

Leider gab es auch diesmal nur ein Standup, das von Marc Frey gehalten wurde. Thema des Standups war: My-MIKI.com – Neue Medien für das neue Web: Wie Print und Online wirklich zusammenpassen. Bei My-Miki handelt es sich um eine Plattform, auf der jeder auf einfachem Weg ein Online Magazin – wie man es aus dem Zeitschriftenhandel kennt – erstellen kann. Diese so genannten Mikis können Bilder, Texte, Grafiken, Videos, Verlinkungen, Votings und Kommentarfunktionen beinhalten und lassen sich ähnlich wie YouTube Videos auf anderen Seiten einbinden.

Hier könnt ihr ein Miki zum Thema Outdoor bewundern (mit den Pfeiltasten <- -> könnt ihr Blättern):

Ich denke, ein Miki ist eine interessante Möglichkeit sich kreativ auszutoben, für welche man auf Grund der niedrigen Einstiegshürde sicherlich auch Schüler begeistern kann.

Ich freu mich schon auf den nächsten Webmontag.

Vorbericht zum vierten Augsburger Webmontag

Benjamin Vötterle — Thu, 23 Jul 2009 18:00:35 +0000

Am Montag den 27. Juli um 19:00 Uhr findet der vierte Augsburger Webmontag im Capitol am Moritzplatz statt. Wer Lust hat zu kommen, kann sich auf der Wiki Seite des Webmontags eintragen. Leider steht noch kein Standup und kein Begrüßungsdrink-Sponsor fest, also meldet Euch fleißig.

Für alle die nicht wissen, was es mit dem Webmontag auf sich hat, hier die Beschreibung aus dem Wiki:

Web Montag ist ein informelles, nicht-kommerzielles, dezentral organisiertes Treffen, das zum Ziel hat, all diejenigen miteinander zu verbinden, die die Zukunft des Internet gestalten. Inspiriert von der Kultur Silicon Valleys startete der Web Montag gegen Ende 2005 in Köln als Versuch, ein bisschen “kalifornischen Sonnenschein” nach Deutschland zu bringen.

Seitdem hat sich der Web Montag schnell weiterverbreitet: Treffen finden mittlerweile in mehr als 40 Städten überall in Deutschland und Österreich, in Schweden, Silicon Valley sowie auf Second Life statt. Als Treffpunkt und Anlaufstelle der verschiedenen lokalen Web 2.0- und Startup-Szenen hat der Web Montag mit seinen bisher 100+ Veranstaltungen bereits 1.000+ Teilnehmer angezogen, mit teils sehr erfreulichen Auswirkungen.

Alle, die mit Web 2.0 und benachbarten Themen zu tun haben und interessiert daran sind, ihr Wissen zu teilen und sich miteinander auszutauschen, sind herzlich willkommen. Ob Erfinder, Ingenieur, Designer, Gründer oder Finanzier – Web Montag ist die Gelegenheit, sein neues Produkt, Service, Startup, oder die nächste große Idee einem stetig wachsenden Publikum von Webbegeisterten vorzustellen.

Außerdem gibt es von mir noch Berichte vom Zweiten und Dritten Webmontag.

Würde mich freuen den ein oder anderen von Euch am Webmontag zu treffen.

Pagination in WordPress Theme einbauen

Benjamin Vötterle — Tue, 16 Jun 2009 20:52:32 +0000

Da WordPress standardmäßig kein vernünftiges Paging – Blättern durch die Artikel beinhaltet – lässt es sich, wie schonmal von mir beschrieben mit einem Plugin um ein solches erweitern. Dies macht das Blättern im Blog für den Besucher viel angenehmer.
Nun wollte ich das Paging nicht mehr mit Hilfe eines Plugins lösen, sondern fest in das Theme einbauen. Bevor ich Euch erkläre, wie ich das gelöst habe, möchte ich Euch zeigen, wie das fertige Paging aussieht.

Nun zum Programm-Code. Zuerst habe ich folgende Funktion geschrieben, die das Paging berechnet und es herausschreibt:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

function wp_pagination_navi($num_page_links = 5, $min_max_offset = 2){

global $wp_query;

// Do not show paging on single pages
if( !is_single() ){

$current_page = intval(get_query_var('paged'));
$total_pages = $wp_query->max_num_pages;
$left_offset = floor(($num_page_links - 1) / 2);
$right_offset = ceil(($num_page_links -1) / 2);
if( empty($current_page) || $current_page == 0 ) {
$current_page = 1;
}
// More than one page -> render pagination
if ( $total_pages > 1 ) {

echo '

';

if ( $current_page > 1 ) {
echo '.get_pagenum_link($current_page-1) .'" title="vorherige Seite">«';
}
for ( $i = 1; $i <= $total_pages; $i++) {
if ( $i == $current_page ){
// Current page
echo '.get_pagenum_link($current_page).'" class="current-page" title="Seite '.$i.'" >'.($current_page).'';
} else {
// Pages before and after the current page
if ( ($i >= ($current_page - $left_offset)) && ($i <= ($current_page + $right_offset)) ){
echo '.get_pagenum_link($i).'" title="Seite '.$i.'" >'.$i.'';
} elseif ( ($i <= $min_max_offset) || ($i > ($total_pages - $min_max_offset)) ) {
// Start and end pages with min_max_offset
echo '.get_pagenum_link($i).'" title="Seite '.$i.'" >'.$i.'';
} elseif ( (($i == ($min_max_offset + 1)) && ($i < ($current_page - $left_offset + 1))) ||
(($i == ($total_pages - $min_max_offset)) && ($i > ($current_page + $right_offset ))) ) {
// Dots after/before min_max_offset
echo '...';
}
}
}
if ( $current_page != $total_pages ) {
echo '.get_pagenum_link($current_page+1).'" title="nächste Seite">»';
}
echo '

'; //Close pagination
}
}
}

Der erste Parameter gibt die Zahl der Seitenlinks an, die angezeigt werden sollen. Eine ungerade Zahl ist hier am Besten. Der zweite Parameter legt fest, wie viele Seitenlinks am Anfang und am Ende dargestellt werden sollen.
Diese Funktion muss in die functions.php im Theme Ordner.

Nun kann man diese Funktion in die Theme Dateien, welche mehrere Artikel auflisten und diese über mehrere Seiten verteilen, mit diesem Code aufrufen und das Paging somit in diese Seiten einfügen:

1
2
3
4
5

if( function_exists('wp_pagination_navi') ) {
wp_pagination_navi();
}
?>

Bei den Dateien handelt es sich um die index.php, die archive.php und die search.php. Am Besten ersetzt man darin folgende Code Zeilen:

1
2
3
4

<div class="navigation">
<div class="alignleft">(__('« Older Entries'), 'kubrick'); ?></div>
<div class="alignright">(__('Newer Entries »', 'kubrick')); ?></div>
</div>

Wie Ihr sehen könnt, habe ich die Funktion ohne Parameter aufgerufen, da mir die Standardeinstellungen genügen.

Damit das Paging jetzt auch noch gut aussieht, muss man folgende Zeilen in die style.css einfügen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.pagination_navi{
text-align: center;
}

.pagination_navi a {
border:1px solid #6EA1CE;
font-size: 0.7em;
font-weight:normal;
padding: 2px 6px;
margin: 2px 4px;
}
.pagination_navi a.current-page{
border:1px solid #fff;
color: #fff;
}

.pagination_navi a:hover{
border:1px solid #46C;
color: #46C;
}

Den Code könnt Ihr nach belieben anpassen und ändern. Über Verbesserungsvorschläge und Ideen würde ich mich freuen.

WordPress Geschwindigkeit: Google Analytics mit jQuery einbinden

Benjamin Vötterle — Wed, 03 Jun 2009 17:59:04 +0000

Ich habe vorgestern bei Sergej Müller gelesen, wie man die Webseiten-Performance beim Einsatz von Google Analytics mit jQuery verbessern kann. Dies lässt sich natürlich auch mit WordPress basierten Webseiten machen. Dazu sollte man auf die Verwendung eines Google Analytics Plugin verzichten und den benötigten Javascript Code von Hand in das Theme schreiben.
Der Javascript Code für Google Analytics muss noch ein bisschen verändert werden, so dass die benötigten externen Javascript Dateien mit Hilfe von jQuery geladen werden. Dazu bindet man am Besten folgenden Code in die footer.php ein:

1
2
3
4
5
6
7
8

UA-XXXXXX-X ist hierbei mit dem eigenen Tracking-Code zu ersetzen.

Was macht nun der jQuery Programm Code?

Dieser Code wird erst ausgeführt, wenn das wenn das Grundgerüst der Webseite komplett geladen wurde. Das Laden der Tracking Scripte läuft quasi im Hintergrund und behindert nicht den Aufbau der Webseite – sie lädt also fühlbar schneller. Sind die Google Analytics Server nicht erreichbar, so wird das Script auch nicht ausgeführt und es gibt keine Javascript Fehler.

Wie Sergej in den Kommentaren schreibt, macht das Ganze nur Sinn, wenn jQuery sowieso im Theme oder von einem Plugin verwendet wird. Danke für den Hinweis.

Dritter Augsburger Webmontag

Benjamin Vötterle — Tue, 26 May 2009 14:21:04 +0000

Gestern war der dritte Augsburger Webmontag. Vermutlich auf Grund des schönen Wetters war nicht so viel los wie beim Mal, jedoch hatten sich, den sommerlichen Temperaturen zum Trotz, ca. 14 Interessierte im Capitol am Moritzplatz eingefunden.

Tobias von Klipstein war der Einzige, der ein Standup hielt. Der Vortrag war jedoch sehr interessant und handelte vom Javascript Frameworks Dojo und wie sich damit wunderbare Webapplikationen erstellen lassen.

Dank geht auch dieses Mal wieder an WEKA Service, die allen Teilnehmern ein Begrüßungsgetränk spendierte.

Der nächste Webmontag findet voraussichtlich Ende Juli statt.

Spitze WordPress Plugins für Vereins-Webseiten

Benjamin Vötterle — Wed, 06 May 2009 20:31:17 +0000

Beim Erstellen der Vereins-Webseite der Skater Union Augsburg, die wie schon berichtet auf WordPress basiert, bin ich auf zwei hervorragende Plugins gestoßen, die einem jede Menge Arbeit abnehmen können.

Listen/Tabellen Administration mit WP-Table Reloaded

Bei WP-Table Reloaded handelt es sich um eine Weiterentwicklung des WP-Table Plugins. Zu dieser Weiterentwicklung hat sich Tobias Bäthge entschlossen, da Wp-Table von Alex Rabe nicht mehr weiterentwickelt wird. Dieses Plugin bringt folgende Vorteile:

- Verwaltung von Tabellen im WordPress-Admin-Bereich
- Anzeige der Tabelle in Beiträgen, Seiten und Text-Widgets mittels Shortcode
- Import von Tabellen als CSV Datei, die man z.B. mit Excel oder aus Datenbanken erstellen kann

Dieses Plugin hat mir sehr viel Arbeit in Bezug auf Spieler bzw. Scorer Listen abgenommen, da ich diese nicht mühsam mit dem Editor eingeben musste.

Ligen-Verwaltung mit LeagueManager

Der LeagueManager ist ein von Kolja Schleich entwickeltes Plugin, mit Hilfe dessen man sehr gut komplette Ligen verwalten und darstellen kann. Dabei sind folgende Features besonders hervorzuheben:

- Einfaches Erstellen und Pflegen von Ligen, Mannschaften und Spielen
- Widgets zum Anzeigen der letzten und nächsten Spiele
- Automatische Berechnung der Tabellen
- Einbinden der Tabellen in Artikel und Seiten

Sehr schön an diesem Plugin finde ich, dass sich die Tabellen automatisch nach Eingabe der Spielergebnisse aktualisieren und die nächsten und letzen Spieltermine mitsamt Ergebnissen dargestellt werden.

Ich hoffe, dass Euch der Überblick beim Erstellen Eurer Homepage eine Hilfe sind.

Neues Projekt online: Skater Union Homepage

Benjamin Vötterle — Sat, 02 May 2009 19:36:43 +0000

Mein neues Projekt, die Homepage der Skater Union Augsburg ist nun online gegangen. Dabei handelt es sich um den Webauftritt des ältesten bayerischen Inlinehockey Vereins, in dem ich selber aktives Mitglied und Junioren-Trainer bin.
Bei der Umsetzung wollte ich WordPress als CMS verwenden, da ich mich mit diesem gut auskenne und die Vielzahl an Plugins einem sehr hilfreich ist. Weiterhin war es mir wichtig eine moderne und gut aussehende Vereinswebseite zu kreieren.