KS Webdesign - Der Blog

WP 3 – Schriftgröße- und Art im HTML-Editor ändern

Klaus — Thu, 08 Sep 2011 15:13:04 +0000

Habt ihr euch schon mal gefragt, wie man die Schriftgröße- und Art im Editor ändern kann?

…Nein?… Macht nix, ich sag’s euch trotzdem.

Dazu erstellen wir uns rasch ein kleines Plugin. Wir d.h. nicht ich sondern in diesem Falle alchymyth aus dem WordPressforum. Ihm gilt in diesem Falle auch mein besonderer Dank für seine Hilfe.

Code des Plugins:


/*
Plugin Name: Html Editor Font Size
Plugin author: alchymyth aus dem WordPressforum
Description: Schriftgröße- u. Art in der HTML-Ansicht des Editors ändern.
License: GPL2
*/
function custom_font_size_html_editor() {
echo '';
}
add_action('admin_head', 'custom_font_size_html_editor')?>


Die Datei könnt ihr z.B. html-editor-font-size.php nennen. Achtet bitte darauf das da keine unnötigen Leerstellen sind, damit es keinen Fehler gibt.
Schiebt es per FTP in den Pluginordner eurer WP-Installation und aktiviert es im Backend. Das war’s schon.



WP 3.1 – TwentyTen killt Textzoom im IE
Klaus — Thu, 14 Apr 2011 09:37:08 +0000
Der normale Seitenzoom, wo alles mitwächst, sorgt dafür, das man beim Lesen ganz schnell horizontal scrollen muss, was den Lesekomfort beträchtlich einschränkt. Der reine Textzoom bietet die Möglichkeit sich auch abends nach einem anstrengenden Arbeitstag die Textgröße bequem anzupassen.
Im Firefox 4 könnt ihr den Textzoom in der Menüleiste unter Ansicht – Zoom – Nur Text zoomen einstellen. Der Internet Explorer 8 hat den Textzoom unter Seite – Textgröße. Beim IE 9 müsst ihr euch entweder die Menüleiste einblenden und dann unter Ansicht – Textgröße die entsprechende Einstellung vornehmen, oder ihr blendet die Befehlszeile ein und fügt durch Anpassen den gewünschten Befehl hinzu.
Seid ihr IE-Nutzer und geratet beim Surfen an einen Blog, der auf dem TwentyTen-Theme basiert werdet ihr feststellen das der Textzoom im IE seinen Dienst verweigert.
Falls ihr einen Blog betreibt, der auf TwentyTen basiert könnt ihr das mit meiner Hilfestellung schnell korrigieren:
Ladet euch diesen gezippten Ordner runter, entpackt ihn und kopiert die darin befindliche twentyten-textzoom-ie.css in den Ordner eures Themes.
Dann öffnet ihr die header.php eures Themes und sucht diese Zeile:





Direkt darunter fügt ihr einfach diese Zeile hinzu::





Beim Internet Explorer funktioniert der Textzoom nicht, wenn die Schriftgröße die Maßeinheit Pixel hat.
Ich habe mir in der style.css des TwentyTen-Themes alle Anweisungen herausgesucht, wo das der Fall ist, sie in eine twentyten-textzoom-ie.css kopiert und mittels des Pixel-in-em-Rechner Pixel in em umgerechnet und eingetragen.
Da diese Datei in der header.php nach der normalen style.css eingebunden wird, gelten die dortigen em-Werte für die Schriftgröße und der Textzoom des IE funktioniert problemlos.
Wenn euch em nicht gefällt könnt ihr auch Prozent als Maßeinheit nehmen, dann funktioniert der Textzoom des IE auch. Das ist aber nicht so bequem wie meine vorbereitete Datei herunterzuladen und einzubinden, da es eine ganze Menge Pixelwerte sind, die ihr heraussuchen und ändern müsst.  



WP 3 – comment_form() Gestaltung und Ausgabe
Klaus — Thu, 10 Mar 2011 13:04:55 +0000
Zwei Möglichkeiten der Textgestaltung des Kommentarformulars habe ich schon in dem Artikel erwähnt. In diesem Artikel möchte ich alle wichtigen Möglichkeiten der Gestaltung zusammenfassen.
 
Die Ausgabe des Kommentarformulars wird in der comments.php mit dieser dürren Zeile unmittelbar vor dem Ende vom div#comments gesteuert:





Link zum WP-Codex bezüglich comments_form()
Zusammenfassung der wichtigsten Änderungsmöglichkeiten:
In der comments.php ändern/ergänzen:


// Überschrift Formularcontainer ändern
'Sprich und fürchte dich nicht!')); ?>




// Text am Anfang des Formularcontainers ändern 
 ''
. __( 'Eine Muh, eine Mäh, eine Täterätätä *' ). '
' ));  ?>




// Überschrift der textarea ändern/ergänzen: 
 ''
. __('Kommentar zackzack')
. '
',));  ?>




// Text nach der textarea ändern
''
. __( 'Bitte maskiert < mit  &lt;
und  > mit  &gt; sonst verschwinden
sie im Nirgendwo!' ). '
'));  ?>




// Text des Abschicken-Buttons ändern  
 'Ab dafür!'));  ?>


Wenn ihr mehrere Änderungen durchführen wollt vergeßt nicht dazwischen jeweils ein Komma einzufügen. Nach der letzten Änderung bitte das Komma weglassen.
In die functions.php eintragen:


// Filter zum Verändern der Texte des Kommentarformulars
function my_fields($fields) {
// Text des Namensfeldes ändern
$fields['author'] = '' . '' . __( 'Name zackzack*' ) . ' ' . ( $req ? '*' : '' ) .
'
';
// Text des E-Mail-Feldes ändern
$fields['email'] = '' . __( 'E-Mail zackzack*' ) . ' ' . ( $req ? '*' : '' ) .
'
';
// Text des Webseitenfeldes ändern
$fields['url'] = '' . __( 'Website zackzack' ) . '' .
'
';
return $fields; }
add_filter('comment_form_default_fields','my_fields');


Dort könnt ihr dann bequem weitere Texte ändern. Ich hab mich mal im wesentlichen drauf beschränkt, jeweils ein knackiges zackzack an den Ursprungstext anzuhängen.
Die Anleitung wie ich den Filter einbaue habe ich in einem Blogartikel von Ellen Bauer vom Elmastudio entdeckt.
Hier könnt ihr euch einen  gezippten Ordner herunterladen, der die Argumente und Filter zum bequemen copy/paste in einer PHP-Datei zusammengefaßt hat.

Außerdem ist eine PDF-Datei mit dem Quelltext des Formularcontainers dabei. Einfach ausdrucken und vor die Tastatur legen, dann müßt ihr nicht mehr mit Firebug hin- und herswitchen, um herauszufinden, welche Klassen und id für welche Formularelemente gelten.
Ich hoffe der Artikel trägt dazu bei, das nicht 90% aller deutschsprachigen Blogs als Überschrift des Formularcontainers Hinterlasse einen Kommentar haben.  



WP 3.1 – Weitere Sicherheitslücke durch Ausgabe Loginname
Klaus — Tue, 08 Mar 2011 11:00:59 +0000
Gestern habe ich in einem Artikel etwas über eine kleine Sicherheitslücke geschrieben, bzw. über etwas, was geneigten Hackern den Zugang zu eurem Blog etwas erleichtern könnte. Durch Christians Hinweis bin ich drauf gekommen, dass der Loginname manchmal auch in der Adresszeile eures Browsers angezeigt wird.

Sehr oft stehen unterhalb des Titels eures Artikels ein paar Metadaten (Publiziert am…von….usw.)
Wenn ihr dort auf den Namen des Autors klickt, führt der Link zu einer Seite, wo alle Artikel des Autors angezeigt werden. Leider wird dort der Loginname in der Adresszeile des Browsers als Teil der Url mit angezeigt.
Das läßt sich verhindern indem man die Verlinkung des Autorennamens entfernt.
functions.php ziemlich weit unten innerhalb der Funktion twentyten_posted_on.
Diese Zeile:


sprintf( '%3$s',


einfach durch diese Zeile ersetzen:


sprintf( '%3$s',


Damit ist der Link weg, wo in der Adresszeile eurer Loginname angezeigt wird. Zusätzlich habe ich dem span noch eine weitere Klasse (.namensgestaltung) zur Gestaltung des Autorennamens mit auf den Weg gegeben.
Wenn ihr noch etwas sinnvolles für die Sicherheit eures Blogs tun wollt, dann installiert euch das Plugin Login LockDown. Damit könnt ihr die Anzahl der Loginversuche begrenzen, einen Timeout in beliebiger Länge festlegen, Loginerrors maskieren, Lockout schon bei falschem Loginnamen und IP’s manuell ausschließen.
Ralf hat in seinem Blog auch noch etwas lesenswertes dazu geschrieben.  



WP 3.1 – Sicherheitslücke durch Gestaltungsmöglichkeit
Klaus — Mon, 07 Mar 2011 13:50:40 +0000
Beim technischen und optischen Neugestalten meines Blogs fiel mir zufällig auf, das meinen Kommentaren automatisch eine Klasse hinzugefügt wird, die es mir ermöglicht, meine Antworten besonders zu gestalten.
Super! Weniger super ist allerdings, das der hintere Teil dieses Klassennamens aus meinem Login-Namen besteht.

Umpf! Das hieße ja, das sich Hacker nur noch ums Passwort kümmern müßten, den Benutzernamen haben sie dann ja schon mal!
Diese Panne zu beheben und trotzdem die Möglichkeit zu haben die Autorenkommentare besonders zu gestalten ist nicht so schwierig.
Die Lösung hat Falk in einem Artikel seines NetzBlogR gepostet.
Perun hatte laut dem Artikel bei der Lösung auch seine Finger im Spiel.
Hier nochmal in aller Kürze:
Ich gehe davon aus, das ihr entweder TwentyTen oder eine Abwandlung davon für euer Theme nutzt.
Öffnet die functions.php eures Themes und scrollt bis ungefähr Zeile 326 runter. Dort steht Folgendes:





Das ersetzt ihr einfach durch Folgendes:


class="commentcomment_author_email == get_the_author_email()) && ($comment->user_id != 0) ) {echo " bypostauthor";} ?>"


Danach werden dort nur noch die Klassen .comment und .bypostauthor ausgegeben. Das reicht aus, um die Kommentare des Autors besonders zu gestalten.
Wenn ihr noch etwas sinnvolles für die Sicherheit eures Blogs tun wollt, dann installiert euch das Plugin Login LockDown. Damit könnt ihr die Anzahl der Loginversuche begrenzen, einen Timeout in beliebiger Länge festlegen, Loginerrors maskieren, Lockout schon bei falschem Loginnamen und IP’s manuell ausschließen.  



Mein Blog in neuem Gewand
Klaus — Mon, 07 Mar 2011 11:05:10 +0000
Es war Zeit meinem Blog eine optische und technische Frischzellenkur zu verpassen.

Gesagt, getan! Der TwentyTen-Ordner wurde kopiert, umbenannt und wieder eingefügt. Die Templates habe ich nach meinen Wünschen angepaßt.
Es ist also kein Child-Theme von TwentyTen, weil mir die Bearbeitung von Child-Themes entschieden zu frontenderunfreundlich ist.
Wenn etwas nicht funktionieren sollte, könnt ihr das gerne hier posten. auch Kommentare zum neuen Erscheinungsbild, ob positiv oder negativ, sind gerne gesehen.  



WP 3 – comment_form() und wp_list_comments
Klaus — Fri, 04 Mar 2011 13:42:48 +0000
Seit WP 3 haben sich die Generierung der Kommentare und des Kommentarformulars ja drastisch geändert. Beim guten alten Kubrick konnte man noch selbst in der comments.php rumwurschteln, um die Ausgabe der Elemente zu beeinflußen.

Öffnet man die comments.php von TwentyTen grinst einem statt der vorher herrschenden prallen Codefülle nur noch erschreckende Kargheit entgegen.
Die Ausgabe der Kommentare:


wp_list_comments( array( 'callback' => 'twentyten_comment' ) );


Das Kommentarformular:





Umpf! Ist das alles? :shock
Okay, in der functions.php findet man die Funktion zur Regelung der Kommentarausgabe. Da läßt sich dann schon einiges anpassen.
Schaut man allerdings mal im WP-Codex nach comment_form(), frage ich mich spontan, ob die mich veräppeln wollen.
Die Seite ist unvollständig…(schön das wir drüber sprechen konnten), auch weiter unten findet man nicht eben viel.
Zwei Möglichkeiten der Änderung habe ich hier mal dokumentiert, einmal das Ändern der des Titels vom Kommentarblock und zum Anderen eine Textänderung des Kommentar abschicken-Buttons
Ergänzung:


'Sprich und fürchte dich nicht!', 'label_submit' => 'Ab dafür!')); ?>


Ohne die tatkräftige Hilfe von Daniel aus dem aus dem WordPressforum hätte ich das nicht hinbekommen. Danke dafür!  
Frontenderfreundlich ist die Ausgabe des Kommentarformulars meiner Meinung nach nicht. Will man weitere Felder im Formular, oder weniger, oder die Beschriftung derselben ändern, müssen gleich Filter hinzugefügt werden, und/oder sonstige Backenderklimmzüge gemacht werden, die meine mehr als bescheidenen PHP-Kenntnisse übersteigen.
Es spricht allerdings nichts dagegen, comment_form gegen die Formularausgabe vom Kubrick-Theme auszutauschen, dann wird vielen Frontendern Änderungen am Formular leichter fallen.



WP 3 – Startseite statt Home
Klaus — Fri, 04 Mar 2011 12:44:50 +0000
Bei sehr vielen Blogs, die mit WP in Szene gesetzt wurden findet man die Bezeichnung Home statt Startseite für die Startseite. Das zu ändern ist bei Twentyten sehr einfach, agiert ihr mit einem Child-Theme gestaltet es sich etwas umständlicher.

In der header.php von TwentyTen steht ungefähr folgendes:



........................................
........................................
........................................
 'menu-header', 'theme_location' => 'primary' ) ); ?>



Die functions.php von TT enthält ab ca. Zeile 220 folgendes:


function twentyten_page_menu_args( $args ) {
$args['show_home'] = true;
return $args;
}
add_filter( 'wp_page_menu_args', 'twentyten_page_menu_args' );


Einfach die zweite Zeile wie folgt ändern:


$args['show_home'] = 'Startseite';


Danke dafür an alchymyth aus dem WordPressforum, ohne seine Hilfe wäre ich nicht darauf gekommen.
Arbeitet ihr mit einem Child-Theme muss in der function.php des Child-Ordners etwas anderes hinzugefügt werden.
Die Lösung dafür hat mir kaiser aus dem WordPressforum freundlicherweise per Mail geschickt:


function kaiser_remove_the_filter() {
remove_filter( 'wp_page_menu_args', 'twentyten_page_menu_args', 10 ); }
add_action( 'init', 'kaiser_remove_the_filter', 10 );
function kaiser_add_the_new_filter( $args ) {
$args['show_home'] = 'Startseite';
return $args;
}
/* wobei hier die 11 eine spätere Priorität ist als der usprüngliche Filter und 1 die Anzahl der Argumente */
add_filter( 'wp_page_menu_args', 'kaiser_add_the_new_filter', 11, 1 );
/* Falls das nicht funktioniert, kannst Du den filter auch über einen hook abfeuern: */
function kaiser_fire_my_new_filter_at_hook() {
/* den Aufruf dann oben nicht mehr nach der function machen, weil er erst hier passiert */
add_filter( 'wp_page_menu_args', 'kaiser_add_the_new_filter', 11, 1 ); }
/* Hier wieder eine Priorität von 11, weil Du bei 10 den filter entfernst
und dann erst nacher etwas neues anhängen willst */
add_action( 'init', 'kaiser_fire_my_new_filter_at_hook', 11 );


Den oberen Teil habe ich mal probehalber erfolgreich getestet, den unteren nicht.  



Collapsing Margins
Klaus — Sat, 15 Jan 2011 11:20:34 +0000
….sind ein wichtiges CSS-Prinzip!
Collapsing Margins oder Zusammenfallende Ränder treten bei Elementen mit vertikal angrenzenden Margins auf. Der größere Abstand bleibt stehen, der Kleinere verschwindet.
Das ist oft ganz sinnvoll, damit sich z.B. bei mehreren Textabsätzen untereinander die Margins nicht zu unschönen Abständen aufaddieren.
Soweit ganz einfach. Leider ist es etwas komplizierter, was dazu führt, das der geneigte Webdesigner manchmal mit überraschenden Auswirkungen dieses Prinzips konfrontiert wird.
Margins erscheinen nicht da wo wir sie erwarten. Sie büxen aus und lassen sich ganz woanders nieder, oder sie fallen durch und sind scheinbar im Nirwana verschwunden.
Fangen wir aber mit dem einfachen Fall an und arbeiten uns dann langsam weiter vor
Hier findest du die collapsing-margins-anfang.htm zum Quelltext rauskopieren.
Im Browser schaut es momentan so aus:

Bitte CSS ergänzen:


p.erster-satz  {
margin-bottom:16px;
}
p.zweiter-satz
margin-top:32px;
}


Ergebnis im Browser:

Das Ergebnis entspricht den Erwartungen. Der vertikale Abstand zwischen den Textabsätzen beträgt 32px.
Das könnt ihr ganz prima mit dem nützlichen Firefox-Addon MeasureIt nachmessen.  
Die Hauptüberschrift benötigt ein bißchen Abstand nach oben.
Bitte die margins der Textabsätze entfernen und CSS ergänzen:


h1  {
margin-top:32px;
}


Ergebnis im Browser:

So hatten wir uns das aber nicht vorgestellt! Das Margin büxt aus (manche sprechen auch von einem durchfallenden Margin) und läßt sich zwischen der Bildschirmoberkante und dem oberen Anfang von #umhang nieder.
Wir könnten padding statt margin nehmen, um das zu verhindern. Da das aber nicht immer wünschenswert oder möglich ist, versuchen wir das Margin mit einem Zaun (border!!) einzusperren.
Bitte CSS ergänzen:


#umhang  {
border:1px solid maroon;
}


Ergebnis im Browser:

Mmmh, der Zaun ist an der falschen Stelle. Den Hintergrund von #umhang wollten wir nicht sehen.
Bitte den Rahmen von #umhang entfernen und CSS ergänzen:


#kopf  {
border:1px solid navy;
}


Ergebnis im Browser:

So ist es richtig!
Jetzt wollen wir noch dem zweiten Textabsatz ein margin gönnen, damit es ringsum eine fett, grüne Umrandung bekommt.
Bitte CSS ergänzen:


p.zweiter-satz  {
margin:32px;
}


Ergebnis im Browser:

Fast! An drei Seiten ist es okay, aber das untere Margin ist durchgeplumst.
padding ist nicht wünschenswert, weil wir ja die fette, grüne Umrandung des Inhaltscontainers brauchen. Deshalb setzen wir wieder einen Zaun, um das Durchplumsen des unteren margins zu verhindern
Bitte CSS ergänzen:


#inhalt  {
border:1px solid green;
}


Ergebnis im Browser:

So soll es aussehen!
Das war noch nicht alles. Margins kann z.B. auch mit sich selbst kollabieren, oder durchfallen und kollabieren…und…und.
Neben padding und border ist auch ein Clearing geeignet, um Collapsing Margins zu verhindern.
Die Margins von Elementen mit overflow:auto/scroll/hidden kollabieren nicht mit ihren Nachfahren.
Die Margins von Elementen mit float:left/right; oder position:absolute/fixed; oder display:inline-block; kollabieren nicht mit ihren Nachfahren und auch nicht mit ihren Nachbarn.
Wenn ihr es ganz genau wissen wollt empfehle ich euch entweder das Studium des entsprechenden Absatzes der Spezifikation, oder ihr lest, was das Buch Fortgeschrittene CSS-Techniken dazu sagt.



Transparenz von Containern im IE
Klaus — Thu, 06 Jan 2011 13:25:02 +0000
In dem Artikel geht es um die Transparenz von Containern nicht von Grafiken oder Bildern. Überraschenderweise zeigt hier der IE 8 gewisse Ausfallerscheinungen.
Hier findest du die transparenz-container-anfang.htm zum Quelltext rauskopieren.
Die benötigte Grafik kannst du dir hier holen: transparenz-container-grafik.htm
Die ul hat opacity:0.8; bekommen und wir haben im FF eine schöne Transparenz der Navigation. Den verschiedenen Versionen des IE helfen wir mit diversen Filtern auf die Sprünge.
Bitte den Conditional Comment ergänzen:


/* Transparenz für den IE 6 */
* html ul  {
filter:alpha(opacity=80);
}
/* Transparenz für den IE 7 */
*+html ul  {
filter:alpha(opacity=80);
}
/* Transparenz für den IE 8 */
ul  {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"
}


Klappt ja soweit im IE 6 und IE 7.
Der IE 8 zeigt auch die Transparenz aber überraschenderweise keinerlei Hovereffekt mehr. Damit hätte ich jetzt nicht gerechnet.
Das zu beheben erfordert ein paar Umbauarbeiten:
Der background für die ul wird gestrichen und a zugewiesen. Den Filter für den IE 8 bekommen a und strong und nicht die ul.
Bitte streichen:


ul  {
background:#444;
}


Bitte CSS ergänzen:


a  {
background:#444;
}


Bitte im Conditional Comment beim IE 8-Filter ul gegen a, strong austauschen:


/* Transparenz für den IE 8 */
a, strong  {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"
}


So schaut es besser aus!
Mein besonderer Dank gilt Andreas ohne dessen Kommentar der Artikel so nicht möglich geworden wäre!