Code in der footer.php

<ul>
    <?php wp_list_bookmarks('categorize=0&title_li=&orderby=rand&limit=8'); ?>
<ul>

Vielleicht zur weiteren Erklärung: before gibt an was mittelbar vor dem Link steht und categorize=0 gibt an, ob die Links in Kategorien gegliedert werden sollen oder nicht. In meinem Fall hat der Parameter den Wert 0, also werden sie nicht berücksichtigt. Über Tweets und Kommentare freue ich mich natürlich ;)

Dann ändert ihr in Zeile 29 den Ausdruck '&source=' in '&source='. Das Gleiche (Maskieren) macht ihr dann noch mit den “& – Zeichen” in folgenden Zeilen: 33, 35, 39, 43. Dann spuckt der w3c Validator auch das erhoffte”successfully checked” aus..

update: Für alle die das Plugin noch nicht haben, können das auf Elmastudio per Anleitung nacholen!

Da Viele immernoch nicht wissen, dass man die Schriftgröße im Browser auch ganz bequem per Tastur einstellen kann, hier mal eine kleine und simple Lösung, wie man dem Benutzer eine kleine Schriftgrößeneinstellung direkt af der Webseite anbieten kann. Also erst einmal erstellen wir 3 Links auf der Seite auf der wir den Fontsizer einbauen wollen und versehen diese Links mit 3 verschiedenen Klassen, in diesem Falle .standard, .middle und .big

<a class="standard">a</a>
<a class="middle">a</a>
<a class="big">a</a>

Das werden unsere Links, die die Größe ändern. Nun kommen wir zum jQuery Teil.

jQuery einbinden

In den Kopf der HTML Datei wie gewohnt das Framework einbinden, siehe jQuery

<script type="text/javascript" src="pfadzu/jquery.js"></script>

Nächster Schritt wird sein, den JS Teil zu schreiben, der die Größe mit Klicks auf die eben erstellten Links ändert. Für den Bereich, den die Links einschliessen sollen, legen wir am Anfang die Variable container fest. Also meistens body für die komplette Seite.

var container = "body";

Die Klickfunktionen

der 3 Links, mit den enstprechenden 3 Größen:

$(document).ready(function(){

  // Schriftgröße Normal
  $(".standard").click(function() { $(container).css('font-size', 12); });

  // Schriftgröße Mittel
  $(".middle").click(function() { $(container).css('font-size', 16); });

  // Schriftgröße Groß
  $(".big").click(function() { $(container).css('font-size', 20); });
});

Damit man auch sieht welcher Link für welche Größe zuständig ist, noch ein wenig CSS für die Darstellung:

.standard { font-size: 12px;}
.middle { font-size: 16px;}
.big { font-size: 20px;}

Demo

Ein Beispiel findet ihr hier: Demo

Das wars…

..auch schon. Natürlich kann man jetzt noch ein Cookie setzen, damit man beim nächsten Besuch der Seite die selbe Einstellung hat, oder den aktiven Link noch markieren. Aber sollte ja auch eigentlich nur ein kleiner Denkanstoss werden. Aber wenn Interesse besteht, wird das natürlich gerne nachgereicht ;)

Wie löst ihr solche Probleme, wenn der Kunde einstellbare Schriftgrößenveränderung haben möchte? würde mich mal interessieren…

Der jQuery Code

$("a#print").click(function() {
    $('head').append('<link rel="stylesheet" href="print.css" type="text/css" />');
});

Das wars dann auch schon. Das Einbinden passiert in meinem Beispiel durch ein Klick auf den Link mit der id="print".

Jetzt noch ein wenig HTML & CSS

Den Link wie folgt auf der Seite (z.B. im Footer) platzieren:

<a id="print">Drucken</a>

Im Stylesheet print.css blenden wir nun Elemente wie z.B. Header, Sidebar, Footer und Bilder aus, da diese ja bei der Druckansicht nicht benötigt werden. z.B. so:

/* Unser Druckstylesheet */

body { background:none;}
#header, #sidebar, #footer {display:none;}

Für alle die es noch schöner machen wollen, können für den Fließtext noch eine Serifenschriftart, für bessere Zeilenbildung nehmen und die Breite des Textcontainers verbreitern (100%). So, viel Spass damit :)

Ich bin in den letzten Tagen auf eine nette Idee bei der Umsetzung einer Javascript Library gestoßen. Das Ganze nennt sich MoreCSS und bietet Javascript Deklaration in CSS Syntax. Das ist natürlich gerade für Einsteiger eine feine Sache. Mit insgesamt nur 8 KB Größe ist es sogar relativ schlank, wenn man es mal mit den großen Brüdern vergleicht. Zusätzliche Funktionen kann man sich auch leicht via Plugin dazu holen. Im Grunde ist es ganz einfach. Man hat eine MoreCSS Datei, die Javascript Library Datei und eventuell noch Plugin Dateien, die man wie folgt in den <head> – Bereich einbindet (siehe offiziellen Doku) .

<link rel="MoreCSS" href="MoreCSS.css" />
<script type="text/javascript" src="MoreCSS.js"></script>
<script type="text/javascript" src="MoreCSS.plugin.js"></script>

Nebenbei bemerkt ist MoreCSS meiner Meinung nach sehr gut dokumentiert und man findet eine übersichtliche Ansicht der ünterstützten Selektoren und Eigenschaften. Mit dem folgenden Quellcode möchte ich euch mal 3 Beispiele zeigen:

1. More CSS List-Style-Color

#meineliste {
list-style-color: #90B329;
color:#666;}

2. More CSS Tooltip

#example-link a {
	tooltip: '<div class="ttcontainer">%title</div>';
	tooltip-class: example-tooltip;
	tooltip-opacity: 0.75;}

2. More CSS AddClass

a#gruen:active => #werdetgruen strong { add-class: gruen;}
a#normal:active => #werdetgruen strong { remove-class: gruen;}

Demo

Ich denke für kleine Projekte ist es durchaus sinnvoll zu MoreCSS zurückzugreifen, denn man kann schnell Sachen wie opacity (Deckkraft) browserübergreifend definieren. So und abschließend würde es mich natürlich interessieren, ob ihr davon schon gehört habt und wie ihr die MoreCSS Library findet?

Eine individuelle WordPress Archivseite hat den Vorteil, dass der Besucher alle Artikel, die man verfasst hat, nochmal auf einer schönen Übersichtsseite chronologisch aufgelistet bekommt und so schneller Beiträge findet, die ihn ebenfalls noch interessieren könnten. Dies setzt man am besten mit einer eigenen Templatedatei um. Wie ich dabei vorgegangen bin um mein “Archiv” zu erstellen, könnt ihr hier nachlesen.

Ein eigenes Archiv-Template

Als Erstes legt ihr eine neue php-Datei im entsprechenden Templateverzeichnis an. Meine heisst z.B. archiv.php, und beinhaltet am Anfang einen kleinen PHP-Schnipsel, der auf den Templatenamen verweist, damit WordPress die neue Datei als individuelles Seitentemplate erkennt:

<?php /* Template Name: Archiv */ ?>

Der folgende Loop für ein Archiv, welches lediglich Datum, Beitragsname und Kommentaranzahl in einer Liste anzeigt, sieht bei mir wie folgt aus:

<h1>Archiv</h1>
   <?php if (have_posts()) : ?>
     <ul class="archiv">
      <?php query_posts('cat=1,26&showposts=-1'); ?>
      <?php while (have_posts()) : the_post(); ?>
      <li>
            <?php the_time('d.m.Y'); ?> -
            <a href="<?php the_permalink(); ?>">
                  <?php the_title(); ?>
            </a>
            (<?php comments_number('0','1','%');?>)
      </li>
      <?php endwhile; ?>
     </ul>
   <?php else: ?>
   <?php endif; ?>

Die Anzahl der anzuzeigenden Beiträge (in diesem Fall ja alle) mithilfe von

<?php query_posts('showposts=-1'); >

habe ich deshalb mit eingebracht, da sonst die Anzahl der in WordPress voreingestellten Beitragsanzahl angezeigt wird und wir ja wollen das alle zum Vorschein kommen.

Anmerkung: Die mit query_posts könnt ihr auch benutzen um die Ausgabe an eure Bedürfnisse anzupassen. Zum Beispiel habe ich an dieser Stelle noch den Parameter cat mit den werten 1 & 26 gefüllt (cat=1,26), um bei mir nur die Kategorien Neuigkeiten und Tutorials ausgeben zulassen.

Die fertige Ausgabe laut oben definiertem Loop sieht dann wie folgt aus:
Datum – Titellink (Anzahl der Kommentare)

Die Archivliste hübsch machen

Damit das nich so langweilig aussieht fügen wir für die Liste mit der ID “archiv” noch ein paar CSS Anweisungen in unser Stylesheet:

ul.archiv {
margin:20px 0px;
padding:0px;}

ul.archiv li {
padding:5px 0px 5px 0px;
border-top:1px dotted #ddd;}

ul.archiv li:first-child {
border:none;}

ul.archiv li:hover {
background:#f4f4f4;}

Auswählen des Templates

Um die nun erstellte Archiv-Seite zu unserer WordPress-Installation hinzuzufügen, erstellt man im Adminbereich unter “Seiten” eine neue Seite und wählt die gerade erstellte archiv.php rechts unter Template aus. So, das wars es dann auch schon. Das fertige Ergebnis : Demo

Anregungen und Fragen könnt ihr wie immer in die Kommentare schreiben!

Neulich bin ich auf die überaus schlanke (3.7kb) Version eines JS Frameworks für Animationen gelangt. Das Ganze nennt sich fx() und ist nicht ganz so einfach zu bedienen wie z.B. jQuery, aber wer lediglich einfache Animationen machen will ohne gleich immer das “tonnenschwere” jQuery einzubinden ist hiermit bestens bedient. Genug Theorie, nun will ich euch das Framework ein wenig genauer vorstelllen. Als Beispiel nehm ich einfach mal eine simple vertikale Hintergrundanimation, also die Veränderung des CSS-Wertes background-position-y.
Als erstes muss man natürlich die FramworkDatei einbinden, welche ihr hier bekommt: fx.inetcat.com

Definieren der Animation

var Down = {type: 'backgroundy', to: -190, step: -1, delay: 10}

• type: das CSS Attribut, welches geändert werden soll
• to: der neue CSS Wert (alternativ lässt sich sogar noch ein from festlegen)
• step: Größe eines Animations-Schrittes und “Abspielrichtung” (+ oder -)
• delay: Verzögerung zwischen den Schritten (step)
• step und delay bilden praktisch die Geschwindikeit

Animation auf ein Element übertragen

$fx('#bg').fxAdd(Down).fxRun();

• $fx(‘#bg’): Auswählen des HTML Elementes mit der id="bg"
• .fxAdd(Down): fügt nun die oben definierte Bewegung namens “Down” hinzu!
• .fxRun(): startet die Animation

Starten wenn die Seite fertig geladen ist

Damit die Animation automatisch startet, wenn man die Seite aufruft packen wir die letzte Zeile in eine Funktion (ich nenn sie mal LosGehts):

function LosGehts () {
      $fx('#bg').fxAdd(Down).fxRun();
}

und laden diese nun mit der bekannten JS-Anweisung onload in den bodytag hinein:

<body onload="LosGehts();">

Zusammenfassung

Das war es eigentlich schon. Das sieht jetzt alles viel aus, ist es aber gar nicht. Hier nocheinmal den vollständigen JS-Quellcode:

var Down = {type: 'backgroundy', to: -190, step: -1, delay: 10}
function LosGehts () {
      $fx('#bg').fxAdd(Down).fxRun();
}

Fertig

Das haben wir gerade gemacht: $fx() Framework Demo

Wenn man noch ein wenig weiterspielt und die callbacks der fxRun(); nutzt, kann man einfache Kettenanimationen erstellen, denn die Callback Animation wird automatisch gestartet, wenn die Erste durchgelaufen ist. Der callback wird wie folgt aufgrufen:

$fx('#bg').fxAdd(Down).fxRun(function() {    // 1. Animation
     $fx('#bg').fxAdd(Up).fxRun();           // 2. Animation
});

Verzögerung

Um eine Verzögerung in die Animation(en) rein zubringen benutzt man beim Aufrufen einfach noch fxHold(); . In die Klammer kommt die Länge der Verzögerung/Pause in Millisekunden. Zum Beispiel wär 1 Sekunde: fxHold(1000); . Nun wird eine Sekunde gewartet, bevor die Aktion/Animation gestartet wird, in der das Hold drin steht.

Erweitern der Animationen

Nun habe ich das Ganze mit den oben genannten Methoden erweitert, noch andere CSS Attribute benutzt, um so der Animation noch ein wenig mehr Schliff und Tiefe zu geben:

$fx() Framework Demo Erweitert

Hoffe euch hat das Tutorial gefallen. Eure Meinung lese ich gerne in den Kommentaren nach;)

Auch wenn HTML-Tabellen stetig an Bedeutung verloren haben, da sie nur noch für den eigentlichen Zweck, Daten geordnet darzustellen, benutzt werden bzw. benutzt werden sollten, kann man trotzdem eine Menge mit ihnen machen. Wie jeder weiss sehen Tabellen ziemlich öde aus, wenn man ihnen nicht ein wenig mit CSS auf die Sprünge hilft.

jQuery

Wenn man dann sogar noch mit jQuery ansetzt, kann man die Gestaltung sogar noch ein wenig routinieren. Hierfür binden wir erstmal die aktuellste jQuery Version ein:

<script src=”pfad/jquery.js” type=”text/javascript”></script>

Dann hier der Schnipsel, der auch in den HTML Kopf kommt, welcher uns hilft die CSS Gestaltung der Tabellen zu routinieren:

<script type="text/javascript"> 
   $(document).ready(function(){
   $("table tr:first").addClass("head");
   $("table tr:even:not(.head)").addClass("odd");
   });
</script>

Dieser Code-Schnipsel vergibt lediglich die Klasse head an die erste Zeile einer Tabelle (table tr:first) und die Klasse odd an alle weiteren geraden Tabellenzeilen (table tr:even) ausgenommen der ersten Zeile (:not(.head)).

CSS

Damit wir jetzt auch sehen, was wir gerade gemacht haben, vergeben wir nun ein paar CSS-Eigenschaften. Da wir CSS Eigenschaften nicht direkt auf die Zeilen (tr) anwenden können benutzen wir nun für unsere alternierede Darstellung einfach einen Selektor, welcher auf die Spalten innerhalb der Zeilen zugreift.

tr.odd td {
background:#e4e4e4;}

Nun sollte jede zweite Zeile automtisch mit der Hintergrundfarbe #e4e4e4 gekennzeichnet werden. Nun kommen wir noch zur Head-Zeile der Tabelle:

tr.head td {
background:#666;
color:#fff;}

Die erste Zeile jeder Tabelle sollte nun einen dunklen Hintergrund haben und weiße Schrift als Kontrast.

Demo

Hier findet ihr als Beispieltabelle eine kleine Liste meiner Vinylschätze: Demo

Ich hoffe das war jetzt verständlich geschrieben. Wenn ihr Fragen habt, steht euch die Kommentarfunktion natürlich gerne zur Verfügung!

Das HTML Gerüst

<div id="gesamt">
     <div id="header">Inhalt</div>
     <div id="inhalt">Inhalt</div>
     <div id="sidebar">Inhalt</div>
     <div id="footer">Inhalt</div>
</div>

Wie ihr seht besteht das Layout aus insgesamt 5 div-Containern. Der Container #gesamt umschliesst die anderen 4 div‘s und ist für das Zentrieren der Seite im Browserfenster (CSS: margin: 0px auto;) und die Gesamtbreite (CSS: width: 800px;) zuständig.

Die anderen 4 Bereiche (#header, #inhalt, #sidebar, #footer) sind die eigentlichen Inhaltsbereiche und sind eigentlich schon nach der entsprechenden Funktion mit einer id benannt. Das wichtigste hierbei ist das #header und #footer 100% Breite des Layouts nutzen, #inhalt und #sidebar sich jedoch die Breite “teilen” und somit 2 Spalten erzeugen.

Der CSS Teil

#gesamt {
margin:0px auto;
width:800px;
padding:5px;
border:1px solid #ddd;}

#header {
padding:10px 5px;
margin-bottom:5px;
background:#f5f5f5;}

#inhalt {
width:550px;
padding:5px;
float:left;
margin-bottom:5px;
background:#f5f5f5;}

#sidebar {
width:220px;
float:right;
padding:5px;
margin-bottom:5px;
background:#f5f5f5;}

#footer {
clear:both;
padding:5px;
background:#f5f5f5;}

Um die Spalten zu erzeugen, habe ich die CSS-Eigenschaft float:left; beim Inhaltscontainer bzw. float:right; für die Sidebar benutzt. Damit das reibungslos funktioniert habe ich im Footer die Eigenschaft clear:both; benutzt, was sozuagen das “Umfließen” auf beiden Seiten wieder beendet.

Ich habe die Bereich schon mit ein bisschen Hellgrau voneinander abgegrenzt, damit man besser versteht, wie der vorrangestellte Quelltext im Browser erscheint.

Das Resultat

Demo Erklärende Grafik

Wer sich das ganze dennoch genauer anschauen will, hier noch mal der Downloadlink:
Note: There is a file embedded within this post, please visit this post to download the file.

Hoffe ich konnte dem ein oder anderen noch was zeigen. Fragen, Anregungen & Diskussion könnt ihr direkt in die Kommentare schreiben. Vielen Dank für das Interesse.

Nun gibt es wieder Nachschlag im Tutorialbereich. Diesmal erkläre ich an einem simplen Beispiel wie einfach man mit jQuery einfache Effekte zaubern kann, ohne vorher wirklich mit Javascript gearbeitet zu haben.

Vorrausetzungen

1. Das Grundgerüst, welches wir im ersten Tutorial erstellt haben, dient nun wieder als Grundlage (Demo).

2. Weitere Vorrausetzung ist die aktuellste Version von jQuery, die in den html-Header eingebunden wird, z.b. so:

<script src="jquery.js" type="text/javascript"></script>

Los gehts…

Unter jedem Artikel wollen wir also nun ein Link einfügen, der uns die Details mittels einem kleinen jQuery-Effekt anzeigt. Dazu schreiben wir unter jeden Artikel noch ergänzenden HTML-Queltext:

<div class="details">
     <p>Details des Artikels wie Datum, Autor etc...</p>
</div>
<a class="toggle" href="#">» Details</a>

Der div-Container mit der Klasse .details ist das Element was sozusagen raus und rein “geslidet” wird, während der Link darunter mit der Klasse .toggle das ausführende Element ist, welches das vorherige dazu bewegt! Deswegen tauchen diese beiden Elemente nun ebenfalls in unserem Javascript Quelltext auf, welchen wir im head-Bereich des Dokumentes oder in einer externen .js Datei abspeichern und ebenfalls einbinden:

jQuery Code

$(document).ready(function(){
	$("div.details").hide();

	$("a.toggle").click(function(){
		$(this).prev("div.details").slideToggle("slow")
	});
});

Das ist einfacher als es aussieht. Bloss nicht erschrecken.
$("div.details").hide(); gibt lediglich an, das die Elemente, welche die Details enthalten beim Starten der Seite nicht angezeigt werden. Diese wollen wir ja schliesslich erst mit einem Klick sichtbar machen. $("a.toggle").click gibt an welches Element als Button agiert, in diesem Falle alle Links mit der Klasse .toggle. und die letzte Zeile gibt an welches Element “geslidet” wird, in diesem Falle alle div‘s der Klasse .details.

Das Ergebnis

Dazu kommt noch ein wenig CSS, damit es nicht ganz so kahl aussieht: Demo

Hoffe euch hat das Tutorial gefallen. Wenn Fragen auftreten sollten, könnt ihr diese natürlich gerne in den Kommentaren loswerden. Vielen Dank für’s Lesen.

Nehmen wir mal an, wir haben eine Seite, auf der eine Reihe von Artikeln in gleicher HTML-Struktur ausgegeben werden! Nun wollen wir aber den ersten Eintrag ein wenig hervorheben, ohne aber die HTML Struktur noch erweitern zu müssen.

Hierfür eignet eignet sich CSS, durch verschiedene Pseudo Klassen & Elemente besonders gut. Mit z.b. :before und :first-child kann man da einiges erreichen! Im Folgenden werde ich das an einem Beispiel präsentieren!

Definieren der Artikel

<div id="gesamt">
    <div class="eintrag">
        <h1>Lorem ipsum dolor</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
        sed diam voluptua.</p>
    </div>
    <div class="eintrag">
        <h1>Lorem ipsum dolor</h1>

        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
        sed diam voluptua.</p>
    </div>
</div>

Wie man sieht besteht das Markup eines Artikels also aus einem div – Container mit der Klasse “Eintrag” (class="eintrag"), der eine Überschrift (h1) und einen Fließtext bzw. Absatz (p) beinhaltet. Diese Elemente werden wir nun in der CSS für die Gestaltung gebrauchen!

Der CSS Teil

/* CSS Abstands Reset*/

* { margin:0px;}

/* Allgemein */

body {
font-family:Arial;
font-size:0.8em;
background:#444;
color:#666;}

/* Gesamter Container */

#gesamt {
padding:10px;
background:#fff;
margin:50px auto;
width:750px;	}

/* Container für ein Artikel */

.eintrag {
padding:10px;}

Das wäre also nun unser Grundgerüst (HTML+CSS), das wie folgt aussieht:

Grundgerüst

Nun sehen beide Artikel jedoch noch identisch aus. Genau das wollen wir aber bei gleichem HTML-Markup nun verändern und versuchen den obersten Artikel anders zu stylen, da dieser hervorstechen soll! Das lässt sich mit CSS sehr einfach realisieren, indem wir, wie bereits erwähnt, die Pseudo Klasse :first-child benutzen!

Hier der zusätzlich nötige CSS Code:

/* Selektor für den ersten Artikel */

.eintrag:first-child {
background:#f0f0f0;
font-size:1.3em;} 

/* Selektor für die erste Artikel-Überschrift */

.eintrag:first-child h1 {
color:#679fbf;
font-family:Georgia;
padding-bottom:5px;
margin-bottom:5px;
border-bottom:1px dotted #679fbf; }

/* Selektor für den ersten Fließtext */

.eintrag:first-child p {
font-weight:bold; }

Jetzt kommt :before ins Spiel

Um nicht nur das Styling zu ändern, sondern sogar noch einen Hinweis zur Überschrift (z.b. Aktuell:) per CSS hinzuzufügen, können wir noch zusätzlich das Element :before nutzen. Es bestimmt den Inhalt vor einem Element! Der folgende CSS-Selektor bestimmt sozusagen den Inhalt vor (:before) der Überschrift (h1) im ersten Kind (first-child) der Klasse .eintrag

.eintrag:first-child h1:before {
content:"Aktuell: ";}

Beides im Stylesheet ergänzt, sieht meine kleine Artikelseite wie folgt aus:

Demo

Hinweis:
Leider unterstützt IE6 “before” und “first-child” nicht, aber das sollte nicht weiter schlimm sein! Des weiteren ist das lediglich ein Beispiel, um zu verdeutlichen was man alleine mit CSS alles entwickeln kann, ohne das HTML-Markup anzufassen! Wenn man zusätzlich noch ein wenig mit :first-line und :first-letter rumexperimentiert sind der Phantasie fast keine Grenzen gesetzt, außer vielleicht ein paar Gestaltungsgrundsätze ;)

Hoffe euch hat das Tutorial gefallen. Wenn Fragen auftreten sollten, könnt ihr diese natürlich in die Kommentare schreiben! Vielen Dank für das Interesse!