Dies sind meine Linktipps aus der Woche vom 19. – 25. Juli 2010.

Inhalt: 3 Seite, 16 Artikel, 1 Video, 2 Listen

Viele Links, wenig Worte – los geht’s!

---

HTML & CSS

Multiple File Upload Input.

HTML5 Canvas-Tag.

Webseiten beschleunigen (Teil 4): Die gzip-Kompression.

Multiple Background Images.

JavaScript

Objektorientiertes JavaScript.

Das “Module Pattern” (Teil 1).

jQuery Plugin schreiben (Colortip Tooltip Plugin).

Building a JavaScript-Based Game Engine (for the Web)

PHP

Magische Methoden in PHP.

Anfang einer Serie zu Modifiers in PHP: Der public-Modifier (Teil 1).

Turbine – Stylesheet PHP-Framework.

WordPress

Improve your WordPress Navigation Menu Output.

Taxonomie Guide für WordPress 3.0.

Schnell und einfach: Feed-Links in ein Theme integrieren.

Creating Custom Fields for Attachments.

Mobile Webentwicklung

iWebKit – iPhone Websites oder WebApps erstellen.

Mobiles WordPress-Theme erstellen mit jQTouch (Teil 1).

WKTouch – Multi-touch JavaScript Plugin für Apple iOS.

Sonstiges

Interne Kampagnen via Google Analytics und PHP tracken.

Internet Explorer auf dem Mac.

Listen

• 8 Tools und Plugins, um eine mobile Version deiner WordPress-Seite zu erstellen
• 19 Important Features to Look for in a Web Host

Kategorie: Linkhubs | Tags: Apple, Attachments, Canvas, Custom Fields, Feed-Links, Game Engine, Google Analytics, Guide, gzip-Kompression, HTML5, Input, iOS, iWebKit, jQTouch, jQuery, Mac, mobil, Module Pattern, Multiple Background Images, Multiple File Upload, objektorientiert, Performance, Plugin, Taxonomie, Theme, Turbine, Webhosting, WKTouch, Wordpress 3.0

zum Artikel | keine Kommentare

Nach dieser Überschrift sehe ich schon das große Fragezeichen in den Gesichtern der Leser. Dabei ist das Problem, um das ich mich in diesem Artikel kümmern möchte, recht trivial. Auf manchen Websites werden wertvolle Votes, Hypes, Diggs, Likes, oder Wasweißichs verschenkt, weil der Button falsch eingebaut wird.

Beispiel: t3n Social News

Ich möchte die Situation am Beispiel der Social News von t3n verdeutlichen, da es mir selbst so ergangen ist.

Um den t3n Social News Button einzubauen, hat man genau zwei Möglichkeiten:

1. ohne Angabe der URL

1

<script type="text/javascript" src="http://t3n.de/socialnews/ebutton/"></script>

2. mit Angabe der URL

1

<script type="text/javascript" src="http://t3n.de/socialnews/ebutton/http%253A%252F%252Fwww.yeebase.com%252Fblog%252F"></script>

Das Counting-Problem

Bei Variante 1 wird die URL also automatisch ausgelesen. Das würde bedeuten, dass beispielsweise Besucher von Feedburner für eine andere URL Voten, als Besucher, die direkt auf die “echte” URL gegangen sind, da Feedburner ein paar Parameter an die URL hängt:

http://example.org/

gegen:

http://example.org/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+XYZBlog+(XYZBlog)&utm_content=Google+Reader

Außerdem werden die Votes, die man bereits für die Orginal-URL bekommen hat, gar nicht erst angezeigt.

Aufruf: Immer URL übermitteln

Deshalb meine logische Schlussfolgerung: Man sollte immer, wenn es möglich ist, die gewünschte URL der Seite übermitteln, da man es sonst – übertrieben gesagt – dem Zufall überlässt, wo die ersehnten Votes landen.

t3n Social News Button für WordPress

Zum Schluss gibt es noch einen kleinen Code-Schnipsel. So könnt ihr den t3n Social News Button in euer WordPress-Theme integrieren:

1

<script type="text/javascript" src="http://t3n.de/socialnews/ebutton/<?php echo urlencode(urlencode(get_permalink())); ?>"></script>

Ein Plugin wäre hier mehr als überflüssig.

Kategorie: JavaScript | Tags: Button, Code-Schnipsel, Digg, Feedburner, get_permalink, Hype, Like, Parameter, Plugin, Social News, t3n, Theme, URL, urlencode, Vote, WordPress

zum Artikel | keine Kommentare

Seitdem das automatische Update im WordPress Core vorhanden ist, besteht die Möglichkeit FTP-Daten im Backend anzugeben. Danach kann man sowohl Plugins als auch den Core per Klick auf den neusten Stand bringen. Hinterlegt man jedoch die Daten im Backend, so speichert WordPress die Zugangsdaten in der Datenbank. Zu dieser risikoreichen Methode gibt es eine Alternative.

Bearbeiten der wp-config.php

Zugangsdaten

In der wp-config.php lassen sich bestimmte Konstanten definieren, sodass die Abfrage der Zugangsdaten und somit auch die Speicherung nicht mehr nötig ist. Sie lauten wie folgt:

1
2
3

define('FTP_HOST', 'ftp.example.org');
define('FTP_USER', 'username');
define('FTP_PASS', 'password');

Sichere Verbindung

Für eine sichere Verbindung sorgt folgende Zeile (Standard: false):

1

define('FTP_SSL', true);

Verzeichnisse

Wenn die WordPress-Installation nicht im Stammverzeichnis des FTP-Servers liegt, lässt sich der Ort wie folgt definieren:

1

define(FTP_BASE', '...');

Habt ihr das Plugin-Verzeichnis oder den gesamten Content-Ordner verschoben, könnt ihr die kompletten Pfade mit diesen beiden Konstanten angeben:

1
2

define('FTP_CONTENT_DIR', '...');
define('FTP_PLUGIN_DIR', '...');

Methode

Zu guter Letzt lässt sich noch die Methode einstellen, die von WordPress für das Dateisystem verwenden soll. Hier steckt auch häufig der Fehler, falls etwas nicht mit den Dateirechten klappt. Bei Fehlern sollte man also erst einmal hier die Methode ändern.

1

define('FS_METHOD', 'direct');

Folgende Methoden sind möglich:

• direct (default) – PHP Dateisystem Funktionen
• ssh – SSH PHP Erweiterung
• ftpext – FTP PHP Erweiterung
• ftpsockets – PHP Socket Erweiterung

Über die Konstanten FTP_PUBKEY, FTP_PRIKEY lassen sich die Pfade zum SSH public key und SSH private key angeben.

Vorhandene Daten löschen

Wenn ihr euch nicht sicher seid, ob bereits Zugangsdaten von WordPress gespeichert wurden, könnt ihr im Admin-Bereich folgende Adresse eingeben:

http://example.org/wp-admin/options.php

Dort sucht ihr dann nach dem Eintrag: ftp_credentials

Wenn dieser vorhanden ist, sind bereits Daten gespeichert worden.

Falls ihr also FTP-Daten in der Datenbank gespeichert habt, könnt ihr diese wieder löschen, in dem ihr über phpMyAdmin eure Datenbank aufruft und in der Tabelle *_options das Feld ftp_credentials löscht.

Weitere Informationen

Weitere Informationen findet ihr im WordPress Codex:

Editing wp-config.php (WordPress Upgrade Constants)

Kategorie: Tipps | Tags: Alternative, Backend, Content, Dateirechte, Dateisystem, Datenbank, Definition, direct, Erweiterung, Fehler, FTP, ftp_credentials, Key, Konstante, Methode, options, Ordner, Plugins, Risiko, Server, Sicherheit, Socket, SSL, Update, Verzeichnis, WordPress Core, WordPress-Codex, wp-config.php, Zugangsdaten

zum Artikel | ein Kommentar

Dies sind meine Linktipps aus der Woche vom 12. – 18. Juli 2010.

Inhalt: 1 Seite, 2 Artikel, 3 Listen

Hinweis: Dieser Linkhub fällt extrem mau aus, da ich (wie bereits erwähnt) im Urlaub war und meinen Feed-Reader nur kurz überflogen habe.

WordPress Security Lockdown

CSS3-Spaltenlayouts: Das Grid Positioning-Modul.

DevCheatSheet.com – Cheat-Sheets für Webentwickler. (via)

Listen

• CSS3 Online-Tools
• gCons: 100 freie Icons + PSD
• Seven Must-See Videos and Presentations for Web App Developers.

Kategorie: Linkhubs | Tags: Cheat-Sheets, CSS3, DevCheatSheets, gCons, Grid, Icons, Modul, Presentation, Spaltenlayout, Tools, WordPress

zum Artikel | keine Kommentare

Dies sind meine Linktipps aus der Woche vom 5. – 11. Juli 2010.

Inhalt: 1 Seite, 9 Artikel, 1 Video, 6 Listen

Hinweis: Nicht wundern, dass der Artikel erst jetzt im Feed-Reader erscheint. Ich war eine Woche im Urlaub und habe es nicht geschafft den Artikel vorzubereiten.

Webentwicklung

David Walsh: Ausführliche Artikel zu Google Font API & Link Prefetching.

Drag & Drop für Dateien im Browser.

PHP: @-Operator deaktivieren, GET & POST nicht mehr verwenden.

Firefox 4: Was gibt es Neues für Webentwickler?

Screencast: Working with MySQL and INNER JOIN

Mobile Webentwicklung

Eigenes Logo auf einem iPhone, iPad oder iPod Touch.

Media Queries: Mobile Versionen von Websites mit CSS3 erstellen.

Sencha Touch: The HTML5 Mobile App Framework

Listen

• Typo-Tipps für Webdesigner (1): Styling der Überschriften
• Increase Productivity: PHP Helper Functions
• 25 Completely Free Fonts Perfect for @font-face
• 10 Merkmale erfolgreicher Blogs
• 25 nützliche Tools für Webdesigner
• 77 Offline-Tipps um deine Website bekannt zu machen

Kategorie: Linkhubs | Tags: @-Operator, @font-face, App, Browser, CSS3, David Walsh, Drag and Drop, Firefox 4, Framework, Get, Google Font API, HTML5, iPad, iPhone, iPod Touch, Link-Prefetching, Logo, Media Queries, Post, Produktivität, Screencast, Sencha Touch, Tools, Typography

zum Artikel | keine Kommentare

Seit gestern ist es so weit: Die erste offizielle Beta von Firefox 4.0 ist da (Download) und ich musste natürlich sofort umsteigen. Jedoch gab es ein Problem: Circa 90% meiner Plugins waren inkompatibel mit der neuesten Version des Browsers. Normalerweise umgehe ich das Problem mit den Nightly Tester Tools, doch die waren leider auch nicht kompatibel… verkehrte Welt?

Nach kurzer Suche hatte sich das Problem auch erledigt, da es eine einfache Alternative zu den Nightly Tester Tools gibt: Mit extensions.checkCompatibility.<version> kann man die Prüfung in der Config (about:config) ganz leicht deaktivieren. Für die aktuelle Firefox Version 4.0b1 lautet der String wie folgt:

extensions.checkCompatibility.4.0b

Dieser Wert muss als Boolean-Eintrag erstellt und auf false gesetzt werden!

Kategorie: Software | Tags: Beta, Erweiterungen, Firefox 4.0, Kompatibilität, Nightly Tester Tools

zum Artikel | 2 Kommentare

Erneut eine Woche rum… und ich habe es endlich wieder geschafft ein paar Artikel zu schreiben. Unter meinen Linktipps befinden sich dieses Mal elf Artikel und vier Listen. Viel Spaß damit.

Webentwicklung

Tutorial: HTML5 Web Storage.

Erklärt: Facebook Anwendungen schreiben.

Man mag es nicht glauben: Wendet sich das Blatt beim neuen IE9?
CSS3 selectors fully supported, JS & DOM changes in IE9 preview 3.

Cheat Sheet: HTML5 Canvas.

Das 80 Millionen Blau: #0044cc.

Refactoring für absolute Anfänger.

Yahoo: Style Guide für Webinhalte.

Mobile Entwicklung

Nun also auch Google: Killswitch für erste Android Apps.

iPhone 4 Retina Display ansprechen: CSS3 Media Queries.

Blogging

Anleitung: Optimierung deines Feedburner Feeds.

Listen

• 50 Powerful Time-Savers For Web Designers
• 5 Ways To Include WordPress Template Files
• Jede Menge Tipps & Tricks, um die WordPress-Suche zu verbessern
• 10 Useful WordPress Security Tweaks

Kategorie: Linkhubs | Tags: #0044cc, Android, Anwendung, App, Canvas, CSS3, Design, DOM, Facebook, Feed, Feedburner, File, HTML5, IE9, iPhone 4, Killswitch, Optimierung, Refactoring, Retina Display, Security, Selektoren, Style Guide, Suche, Template, Time-Saver, Tipps, Tricks, Web Storage, Yahoo

zum Artikel | keine Kommentare

Ich schrieb bereits einen ausführlichen Artikel über Thumbnails in WordPress 2.9. Seit ein paar Tagen benutze ich diese auch hier im Blog. Heute habe ich mir zur Aufgabe gemacht, dass die Thumbnails auch in meinem Feed angezeigt werden. Dazu ist mal wieder ein simpler Content-Filter notwendig.

Der Filter

Zunächst der Filter:

1
2
3
4
5
6
7

function my_feed_thumbnail($content) {
    if (is_feed() && has_post_thumbnail()) {
        return the_post_thumbnail() . $content;
    }
    return $content;
}
add_filter('the_content', 'my_feed_thumbnail');

Hier wird überprüft, ob wir uns im RSS-Feed befinden. Falls dies der Fall ist und zusätzlich noch ein Thumbnail gesetzt wurde, wird der Thumbnail an den Anfang des Contents gehängt. Fertig.

Design anpassen

Letztens kam eine Frage in den Kommentaren auf, wie man denn den Thumbnail links neben dem Text positionieren kann. Ganz einfach: mit CSS. Jeder Thumbnail hat die CSS-Klasse attachment-post-thumbnail.

Im Blog lässt sich das also ganz einfach über die style.css-Datei eures Themes anpassen. Im Feed müssen CSS-Regeln jedoch in jeden Artikel eingepflegt werden. Man könnte diese jetzt noch zum letzten Filter hinzufügen. Ich habe mir jedoch einen eigenen Filter für CSS-Regeln im Feed erstellt. So habe ich die Möglichkeit, in Zukunft alles an einem Platz einzufügen, wenn ich noch weitere Dinge im Feed anpassen möchte.

Hier nochmal mein derzeitiger CSS-Filter für den Feed:

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

function my_feed_css($content) {
    if (is_feed()) {
        $css  = '<style>';
        $css .= '.attachment-post-thumbnail { float: left; padding: 6px; margin: 0 6px 6px 0; border: 6px solid #eee; }';
        $css .= '.more { clear: both; }';
        $css .= '</style>';
 
        return $css . $content;
    }
    return $content;
}
add_filter('the_content', 'my_feed_css');

Wie man sieht, habe ich noch eine zweite Regel für meinen ersetzten more-Tag (horizontale Linie), den ich so anpassen musste, dass die Linie nicht neben meinem Thumbnail beginnt, sondern erst darunter.

Das Ergebnis könnt ihr euch anschauen, wenn ihr meinen Feed abonniert.

Kategorie: Tipps | Tags: CSS, Design, Filter, Funktion, RSS-Feed, Thumbnails

zum Artikel | keine Kommentare

Wenn man den sogenannten More-Tag verwendet um Blog-Artikel zu kürzen, fügt WordPress auf der eigentlichen Artikel-Seite einen HTML-Anker ein, auf den “beim weiterlesen” verlinkt wird. Oft besteht das Bedürfnis genau an dieser Stelle etwas einzufügen – sei es Werbung oder einfach nur eine dezente Trennlinie.

Status Quo

Von Haus aus fügt WordPress ein span-Element mit dem schon erwähnten Anker ein. Dieses lässt sich jedoch kaum an die eigenen Bedürfnisse anpassen, da es nur eine eindeutige ID besitzt und nicht etwa eine CSS-Klasse, die für alle “more-spans” gilt.

1

<span id="more-1234"></span>

Beim ersetzen des More-Tags wird oft ein häufiger Fehler gemacht: Er wird so ersetzt, das die Anker-Funktionalität verloren geht, indem man ihn einfach mit Werbung oder was auch immer ersetzt.

Dabei müsste man an der Stelle des span-Elements ein anderes Element beibehalten, dass die Anker-Funktion erfüllt, indem es die more-ID übernimmt.

Natürlich könnte man auch einfach den gewünschten Inhalt hinter das span-Element einfügen Dann hat man jedoch immer noch ein überflüssiges Element, dass man sich genauso gut sparen könnte.

Die Lösung

Meine Lösung sieht daher so aus, dass ich das span-Element entferne und danach eine horizontale Linie, also ein hr-Element, einfüge. Diese Linie übernimmt die Anker-Funktion. Dazu ist folgender Filter nötig, der in die functions.php eures Themes übernommen werden kann:

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

function my_more_tag($content) {
    if (!is_single())
        return $content;
   
    $replacement = '<hr id="$1" class="more" />';
   
    return preg_replace(
        '/<span id\=\"(more\-\d+)"><\/span>/',
        $replacement,
        $content
    );
}
 
add_filter('the_content', 'my_more_tag');

Natürlich könnt ihr die fünfte Zeile auf eure Bedürfnisse anpassen und beispielweise noch einen Werbebanner einfügen. Durch das hinzufügen der Klasse “more” lässt sich das hr-Element mit CSS anpassen.

Kategorie: Tipps | Tags: Anker, Artikel, CSS-Klasse, Element, ersetzen, Filter, Funktion, hr, ID, more-Tag, span, Trennlinie, Werbung

zum Artikel | keine Kommentare

Bereits im April habe ich mich darüber geärgert, dass WordPress keine hauseigenen Funktionen bereitstellt um Kategorien und Tags zu zählen (“Artikel, Kommentare, Kategorien und Tags zählen”). Nun muss ich eingestehen, dass ich mich geirrt habe.

Ein gewisser Horst hat mich über das Kontaktformular benachrichtigt und mir die Funktion wp_count_terms() nähergelegt.

Somit sind meine damals veröffentlichten Funktionen für das Zählen der Kategorien und Tags hinfällig und müssen wie folgt geändert werden:

Kategorien zählen

1
2
3

function my_category_count() {
    return wp_count_terms('category');
}

Tags zählen

1
2
3

function my_tag_count() {
    return wp_count_terms('post_tag');
}

Kategorie: Tipps | Tags: Funktion, Kategorien, Tags, zählen

zum Artikel | keine Kommentare