Automatisches WordPress-Upgrade bei lokalen Installationen nutzen

Möchte man bei lokalen WordPress-Installationen beim Upgrade die Abfrage der FTP-Zugangsdaten umgehen, genügt es folgende Zeile in die wp-config.php einzufügen:

define( 'FS_METHOD', 'direct' );

Hintergrund

Beim Upgrade überprüft WordPress, ob es Dateien schreiben/ verändern kann, ohne den Owner zu verändern. Falls dies nicht möglich ist, fragt WordPress nach den FTP-Daten, um die Dateien als Nutzer zu verändern. WordPress führt also indirekt Änderungen durch. Wenn es gezwungen wird, die direkte Methode zu verwenden, darf WordPress die Dateien selbst ändern/ überschreiben.

Gut zu wissen

Natürlich funktioniert die direkte Methode nicht nur lokal, sondern auch auf Live-Webservern und kann bei Upgrade-Problemen aktiviert werden.

Links

Editing wp-config.php: WordPress Upgrade Constants
Tutorial: Using the WP_Filesystem

Cache-Dauer für bestimmte Dateitypen in der .htaccess-Datei festlegen

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 week"

ExpiresByType image/jpg "access plus 1 week"
ExpiresByType image/jpeg "access plus 1 week"
ExpiresByType image/png "access plus 1 week"
ExpiresByType application/x-shockwave-flash "access plus 1 week"
</IfModule>

Mit pwgen Passwörter erzeugen

… Ich sehne den Tag herbei, an dem ich mir die ganzen Parameter merken kann.

pwgen -c -n -y -s -B 12 3

Parameter

-c = Fügt mindestens einen Großbuchstaben in das Passwort ein
-n = Fügt mindestens eine Nummer in das Passwort ein
-y = Fügt mindestens ein Symbol in das Passwort ein
-s = Das Passwort wird komplett zufällig generiert
-B = Vermeidet das Einfügen von ähnlichen Buchstaben wie 0 und O
12 = Anzahl der Zeichen, die das Passwort haben soll
3 = Anzahl der Passwörter, die generiert werden

Compass und das WordPress-eigene style.css

In WordPress-Themes muss innerhalb des Theme-Root-Verzeichnis‘ ein Stylesheet namens style.css liegen, ansonsten wird das entsprechende Theme nicht erkannt. Dies ist innerhalb meines normalen Compass-Setups nicht ganz unproblematisch, da ich normalerweise alle Stylesheets im Ordner css/ lagere, also auch das normale style.css. Meine bisherige Lösung sah so aus, dass ich im Theme-Root ein Stylesheet hatte dass das von Compass kompilierte Css importiert. Wirklich schön war das allerdings nicht, da so für die Einbindung zwei Requests von Nöten waren.

Umso erfreuter war ich, als ich bei Chris Coyier ein äußerst hilfreiches Snippet fand.

require 'fileutils'
on_stylesheet_saved do |file|
  if File.exists?(file) && File.basename(file) == "style.css"
    puts "Moving: #{file}"
    FileUtils.mv(file, File.dirname(file) + "/../" + File.basename(file))
  end
end

Das Snippet sucht nach dem Kompilieren die Datei style.css und schiebt sie innerhalb der Verzeichnisstruktur eine Ebene höher, in meinem Fall also ins Root-Verzeichnis des Themes.

Links

Compass Compiling and WordPress Themes

Mit Mediaqueries auf verschiedene Pixeldichten reagieren

Um Websites für Endgeräte mit unterschiedlicher Pixeldichte bzw. device pixel ratio zu optimieren, eignet sich der resolution–Mediaquery sehr gut:

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {}

Während -webkit-min-device-pixel-ratio das Verhältnis von Gerätepixeln zu geräteunabhängigen Pixeln abfragt, checkt min-resolution ob eine Punktdichte von mindestens 192dpi erreicht ist. In einer hoffentlich nicht allzu fernen Zukunft soll sogar nur noch die device pixel ratio mit der Maßeinheit dots per pixel relevant sein- dann wird der Mediaquery so aussehen:

@media only screen and (min-resolution: 2dppx) {}

(Lies: Wenn 2 oder mehr Gerätepixel auf ein geräteunabhängiges Pixel kommen, dann…)

Links

Resolution in Media Queries
Media Queries

Übersicht über verschiedene Fachbegriffe aus dem Bereich Retina-Display-Optimierung

Hier eine kurze Übersicht über die verschiedenen Fachbegriffe, ihre deutsche Übersetzung (so vorhanden) sowie eine kurze Erklärung.

Englisch Deutsch Erklärung
device pixels/ physcial pixels/ hardware pixels Gerätepixel/ physikalische Pixel Kleinste Darstellungseinheit auf dem Screen des Endgerätes und somit die Art von Pixel, die gemeint ist wenn es um die Auflösung (also z.B. 640 x 1136px beim iPhone 5) geht.
device independend pixels (dips)/ CSS pixels/ virtual pixels/ logical pixels geräteunabhängiges Pixel/ Referenzpixel/ CSS-Pixel/ virtuelle Pixel Abstrakte optische Referenzeinheit, die zum Angeben von Maßen im CSS (width, height…) benutzt wird.
device pixel ratio (mir ist keine deutsche Übersetzung bekannt) Gibt das Verhältnis von Gerätepixeln zu geräteunabhängigen Pixeln wieder. Beim iPhone 5 beträgt sie beispielsweise 2 (640 Gerätepixel / 320 dips).
pixel density Pixeldichte/ Punktdichte Errechnet sich aus Wurzel(Breite² + Höhe²) / Bildschirmdiagonale in Zoll; Beispiel am iPad mini Wurzel(1024² + 768²) / 7.9″ = 162.025316456 dpi (dpi-Rechner).

Links

Pixel density
A Pixel Identity Crisis
A pixel is not a pixel is not a pixel
devicePixelRatio
More about devicePixelRatio

Lesetipp: Über die richtige Einbindung von Webfonts

Im Smashing Magazine gibt es zwei sehr gute Artikel zum Thema @font-face. In Avoiding Faux Weights And Styles With Google Web Fonts wird erklärt, wie Schriften über das Google Font Directory richtig eingebunden werden können. Ganz so trivial ist das nämlich nicht, denn die Einbindung á la Google Webfonts funktioniert nicht richtig im IE 7 und 8. Dies führt dazu, dass diese beiden Versionen des Internet Explorer einzelne Schriftschnitte „faken“ und so die Lesbarkeit und Darstellung von Textabschnitten verschlechtern. Und obwohl der Fehler seit Juni 2010 bekannt ist, wurde er scheinbar immer noch nicht gefixt, so dass der verlinkte Artikel nach wie vor aktuell ist.

Der zweite Artikel, Setting Weights And Styles With The @font-face Declaration , beschäftigt sich- unabhängig von Google Webfonts- mit der richtigen Einbindung von verschiedenen Schriftschnitten, geht dabei über bold und italic hinaus und behandelt auch so verrückte Sachen wie einen eventuellen light- oder semibold-Schriftschnitt samt Fallack-Lösungen für Geräte, die mit @font-face nichts anfangen können (hallo Windows Phone 7.5).

@font-face, SVG-Schriften und Fragmentbezeichner

Um SVG-Schriften mittels der @font-face-Syntax einzubetten, wird bekanntlich folgendes Css benötigt:

@font-face {
	font-family: "Open Sans Regular";
	src: url("../fonts/open-sans-regular/OpenSans-Regular-webfont.svg#OpenSansRegular") format("svg");
}

Spannend ist der Fragmentbezeichner hinter dem Dateinamen, von mir fett hervorgehoben. Normalerweise sollte dieser nämlich in der Schriftdatei noch einmal auftauchen, nämlich als Attributwert für id innerhalb dieses XML-Snippets:

<font id="OpenSansRegular" horiz-adv-x="1171">

Tja. Normalerweise.

Unterscheiden sich der Attributwert und der Fragmentbezeichner, wird die Schrift nämlich nicht geladen und der davorsitzende Frontend-Entwickler kann eine ziemlich lange Zeit damit verbringen, diesen Fehler zu finden…

Links

Quick Tip: SVG Fonts & @font-face

Responsive iframe- und video-Elemente

Beim Einbetten von Videos innerhalb von iframe– oder video-Elementen in responsiven Websites gibt es in der Regel Probleme bei einer Größenveränderung ihres Containerelements. Obwohl die Breite des iframe’s mittels der Css-Eigenschaft max-width auf 100% gesetzt werden kann, ist davon nicht dessen Höhe betroffen.

Um dieses Problem zu beheben, gibt es einen einfachen Trick: Um das betreffende iframe oder video wird ein Wrapper-Element eingefügt.

<div class="video-wrapper">
	<iframe width="560" height="315" src="http://www.youtube.com/embed/T0ezIRTeIUY" frameborder="0" allowfullscreen></iframe>
</div>

Das allein reicht natürlich noch nicht aus. Um das gewünschte Verhalten zu erreichen, wird noch ein wenig Css benötigt.

.video-wrapper {
	position: relative;
	/* padding-top je nach Video-Format */
	padding-top: 56.25%; /* entspricht 16:9 */
}

	.video-wrapper iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

Erklärung

Es wird eine Box erstellt, die je nach padding-top ein bestimmtes Format besitzt. In dieser Box wird das iframe– oder video-Element positioniert. Durch die width– und height-Eigenschaften füllt es das Elternelement aus und passt sich dessen Größenveränderungen an.

Links

Creating Intrinsic Ratios for Video
FitVid.js