David Hellmann — Grafikdesign & Entwicklung » Tutorials http://www.davidhellmann.com David Hellmann erstellt und realisiert Grafik- und Webdesign Projekte. Auf davidhellmann.com erfahren Sie mehr über Kompetenzen und Leistungen, Projekte und Referenzen. Wed, 01 Feb 2012 22:04:35 +0000 en hourly 1 http://wordpress.org/?v=3.3 ★ Simpler Hover Effekt für Fotoshttp://www.davidhellmann.com/tutorials/simpler-hover-effekt-fuer-fotos/1633/ http://www.davidhellmann.com/tutorials/simpler-hover-effekt-fuer-fotos/1633/#comments Mon, 23 Jan 2012 12:40:15 +0000 David Hellmann http://www.davidhellmann.com/?p=1633 Gestern hab ich das gemacht, was ich schon länger mal machen wollte. Eine Kategorie für Fotos angelegt um hin und wieder mal ein Foto zu posten. Das soll auch als Motivation dienen öfters mal Fotos zu machen. Dahingehend bin ich ja leider immer etwas faul. Jetzt hab ich mir für die Fotokategorie ein paar eigene Templates angelegt. Zum einen für die Single Darstellung der Posts und zum anderen für die Archivdarstellung. Genau dort werden die Fotos als kleines Preview gezeigt und per Mouseover dunkeln diese sich bei mir etwas ab.

Diesen kleinen netten Effekt kann man ganz einfach mit CSS machen. Und zwar legt man das Bild einfach in einen DIV, dieser bekommt eine Hintergrundfarbe (bei mir schwarz, #000) und per Mausover wird das Bild einfach leicht auf Transparent gesetzt (das schwarz scheint durch) und dunkelt somit ab. Das kann man natürlich auch mit anderen Farben machen womit sich auch eine andere Wirkung erzielen lässt. Auch mit der Stärke der Transparenz kann man noch spielen. Das ganze wird dann noch mittels Transitions schön smooth animiert um der Sache den letzten Glanz zu verleihen. Welche Browser das aktuell unterstützen? Mir egal. Danach hab ich nicht geschaut da es nichts lebensnotwendiges ist.

An schauen kann man sich das ganze bei mir im Archiv für Fotos.

Hier der Code

1
2
3

<div class="fotoBox">
	<img src="bilderordner/bild.jpg" alt="bild" />
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13

.fotoBox {
	background: #000;
}
 
	.fotoBox img {
		-moz-transition:  opacity .3s linear;
		-webkit-transition:  opacity .3s linear;
		transition:  opacity .3s linear;
	}
 
	.fotoBox img:hover {
		opacity: 0.5;
	}
]]> http://www.davidhellmann.com/tutorials/simpler-hover-effekt-fuer-fotos/1633/feed/ 7 ★ Tutorial: Filter auf Make Better Websiteshttp://www.davidhellmann.com/tutorials/tutorial-filter-auf-make-better-websites/1411/ http://www.davidhellmann.com/tutorials/tutorial-filter-auf-make-better-websites/1411/#comments Wed, 12 Oct 2011 08:30:41 +0000 David Hellmann http://www.davidhellmann.com/?p=1411 Vor ein paar Wochen hatte ich MakeBetterWebsites ein neues Design verpasst. Ich hatte eine Seite für Filter eingerichtet. Gleich gab es ein zwei Stimmen Kritik das man auf einer extra Seite landet und somit das ganze etwas umständlich ist. Ganz recht hatten Sie damit ja nicht. Es war also an der Zeit das ganze neu zu machen, so das es leicht erreichbar ist und ohne die Seite neu laden zu müssen. Seit dem Wochenende ist nun eine neue Version online wo mittels jQuery ein DIV unter der Navi eingeblendet wird wenn man auf Filter klickt. Das ganze funktioniert recht gut bin ich der Meinung und ist auch bis auf iPhone runter nutzbar.

Vielleicht interessiert es ja den ein oder anderen wie ich das gemacht habe. Deswegen ein paar Worte und ein paar Zeilen Code dazu. Grundsätzlich muss man sagen, ist es in WordPress nicht möglich Mehrfachfilter zu setzen. Das wäre richtig schick gewesen. Vielleicht geht es auch irgendwie aber mir war keine Möglichkeit bekannt. Aber auch so ist es schon recht nett bin ich der Meinung. Fangen wir an.

Der HTML/PHP Code (WordPress)
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

<div id="filterBox">
	<div id="filterContent">
		<div class="filterSubBox">
			<h3 style="width:100%; margin:20px 0 10px 0;">by Color</h3>
			<ul class="wp-tag-cloud">
				<li><a style="background:#b6ae94; border: 1px solid #b6ae94; color:#fff;text-shadow:none;" class="beige" href="<?php bloginfo('home'); ?>/tag/beige">Beige</a></li>
				<li><a style="background:#000; border: 1px solid #000; color:#fff;text-shadow:none;" class="black" href="<?php bloginfo('home'); ?>/tag/black">Black</a></li>
				<li><a style="background:#333; border: 1px solid #333; color:#fff;text-shadow:none;" class="blackwhite" href="<?php bloginfo('home'); ?>/tag/black-and-white">Black and white</a></li>
				<li><a style="background:#1f53b6; border: 1px solid #1f53b6; color:#fff;text-shadow:none;" class="blue" href="<?php bloginfo('home'); ?>/tag/blue">Blue</a></li>
				<li><a style="background:#583d21; border: 1px solid #583d21; color:#fff;text-shadow:none;" class="brown" href="<?php bloginfo('home'); ?>/tag/brown">Brown</a></li>
				<li><a style="background:#333; border: 1px solid #333; color:#fff;text-shadow:none;" class="colorful" href="<?php bloginfo('home'); ?>/tag/colorful">Colorful</a></li>
				<li><a style="background:#777; border: 1px solid #777; color:#fff;text-shadow:none;" class="gray" href="<?php bloginfo('home'); ?>/tag/gray">Gray</a></li>
				<li><a style="background:#569f2a; border: 1px solid #569f2a; color:#fff;text-shadow:none;" class="green" href="<?php bloginfo('home'); ?>/tag/green">Green</a></li>
				<li><a style="background:#cf7907; border: 1px solid #cf7907; color:#fff;text-shadow:none;" class="orange" href="<?php bloginfo('home'); ?>/tag/orange">Orange</a></li>
				<li><a style="background:#d5036e; border: 1px solid #d5036e; color:#fff;text-shadow:none;" class="pink" href="<?php bloginfo('home'); ?>/tag/pink">Pink</a></li>
				<li><a style="background:#7b29a8; border: 1px solid #7b29a8; color:#fff;text-shadow:none;" class="purple" href="<?php bloginfo('home'); ?>/tag/purple">Purple</a></li>
				<li><a style="background:#b21d0f; border: 1px solid #b21d0f; color:#fff;text-shadow:none;" class="red" href="<?php bloginfo('home'); ?>/tag/red">Red</a></li>
				<li><a style="background:#18c5c4; border: 1px solid #18c5c4; color:#fff;text-shadow:none;" class="turquoise" href="<?php bloginfo('home'); ?>/tag/turquoise">Turquoise</a></li>
				<li><a style="background:#c8a500; border: 1px solid #c8a500; color:#fff;text-shadow:none;" class="yellow" href="<?php bloginfo('home'); ?>/tag/yellow">Yellow</a></li>
				<li><a style="background:#fff; border: 1px solid #d4d4d4; color:#777;text-shadow:none;" class="white" href="<?php bloginfo('home'); ?>/tag/white">White</a></li>
			</ul>
		</div>
		<div class="filterSubBox">
			<h3 style="width:100%; margin:20px 0 10px 0;">by Tag</h3>
			<?php $dh_tags = array(
			    'smallest'                  => 11,
			    'largest'                   => 11,
			    'unit'                      => 'px',
			    'number'                    => 0,
			    'format'                    => 'list',
			    'orderby'                   => 'name',
			    'order'                     => 'ASC',
			    'exclude'                   => '4,5,12,14,15,19,22,24,30,36,38,40,52,55,82',
			    'taxonomy'                  => 'post_tag',
			    'echo'                      => true );
			?>
			<?php wp_tag_cloud( $dh_tags ); ?>
		</div>
		<div class="filterSubBox">
			<h3 style="width:100%; margin:20px 0 10px 0;">by Month</h3>
			<?php $dh_month = array(
			    'type'            => 'monthly',
			    'format'          => 'html',
			    'show_post_count' => false,
			    'echo'            => 1
			); ?>
			<ul class="wp-tag-cloud">
				<?php wp_get_archives( $dh_month ); ?>
			</ul>
		</div>
		<div class="filterSubBox">
			<h3 style="width:100%; margin:20px 0 10px 0;">by Year</h3>
			<?php $dh_year = array(
			    'type'            => 'yearly',
			    'format'          => 'html',
			    'show_post_count' => false,
			    'echo'            => 1
			); ?>
			<ul class="wp-tag-cloud">
				<?php wp_get_archives( $dh_year ); ?>
			</ul>
		</div>
	</div>
</div>

Der erste block ist für die Farben da. Die sind von Hand angelegt da die Button auch farbig angezeigt werden sollen. Etwas von WordPress generiertes wäre hier schwierig gewesen. Im zweiten Blog wird im Grunde nur eine TagCloud ausgegeben wo die Farben von oben extrahiert sind. Im dritten Block wird nach Monaten gefiltert und im letzten schließlich nach Jahren. Das sind so die Sachen die wohl interessant sein könnten. Wie gesagt, ein Mehrfachfilter wäre richtig schick aber ich wüsste nicht wie das mit WordPress gehen soll. Aber vielleicht hat ja später jemand eine Idee in den Kommentaren. Das ist im Grunde der HTML/PHP Code und der ganze DIV wird via: display:none; versteckt.

Der CSS Code
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

#filterBox {
	display: none;
	width: 100%;
	background:#ccc url(images/smooth_wall.png) 0 0 repeat;
	box-shadow: inset 0 0 10px rgba(0,0,0,0.4);
	-moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.4);
	-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.4);
	float: left;
	padding: 5px 0 20px 0;
	overflow: hidden;
	border-bottom: 1px solid #999;
	border-top: 1px solid #999;
}
 
	#filterBox #filterContent {
		width: 1000px;
		margin: 0 auto;
	}
 
	#filterBox #filterContent .filterSubBox {
		width: 958px;
		float: left;
		margin: 15px 0 0 0;
		padding:0 20px 20px 20px;
		border-radius: 5px;
		border: 1px solid #bbb;
		box-shadow: 0 1px 0 #bbb, inset 0 0 0 1px #fff;
		-moz-box-shadow: 0 1px 0 #bbb, inset 0 0 0 1px #fff;
		-webkit-box-shadow: 0 1px 0 #bbb, inset 0 0 0 1px #fff;
		background-image: linear-gradient(bottom, rgb(244,244,244) 80%, rgb(228,228,228) 100%);
		background-image: -o-linear-gradient(bottom, rgb(244,244,244) 80%, rgb(228,228,228) 100%);
		background-image: -moz-linear-gradient(bottom, rgb(244,244,244) 80%, rgb(228,228,228) 100%);
		background-image: -webkit-linear-gradient(bottom, rgb(244,244,244) 80%, rgb(228,228,228) 100%);
		background-image: -ms-linear-gradient(bottom, rgb(244,244,244) 80%, rgb(228,228,228) 100%);
		background-image: -webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0.8, rgb(244,244,244)),
			color-stop(1, rgb(228,228,228))
		);
	}
 
	#filterBox #filterContent h3 {
		color: #555;
		border-bottom: 1px solid #e0e0e0;
		font: bold 13px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
		text-transform: uppercase;
	}
 
	#filterBox #filterContent ul.wp-tag-cloud li a {
		float: left;
		width: 131px;
		background: #e8e8e8;
		padding:0 10px;
		-moz-border-radius: 15px;
		-webkit-border-radius: 15px;
		border-radius: 15px;
		border: 1px solid #d4d4d4;
		font: normal 11px/25px "Trebuchet MS", Arial, Helvetica, sans-serif;
		margin:3px;
		color: #555;
	}
 
	#filterBox #filterContent ul.wp-tag-cloud li a:hover {
		background: #333;
		color: #eee;
		border: 1px solid #333;
	}
 
#filterBox #filterContent {
	width: 460px;
	margin: 0 auto;
}
 
	#filterBox #filterContent .filterSubBox {
		width: 418px;
	}
 
	#filterBox #filterContent ul.wp-tag-cloud li a {
		width: 111px;
		margin:3px;
	}

Das ganze was wir oben gesehen haben wird natürlich auch noch mittels CSS gestylt. Alles kein Hexenwerk. Etwas rumspielen mit Box-Shadow und Background-Gradients.

jQuery Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// Show Filter
 jQuery(".showfilters").toggle(function () {
	jQuery(".showfilters").css("color", "#111");
	jQuery("#filterBox").animate({
		opacity: 1,
		height: 'toggle'
	}, 500);
	return false;
}, function() {
	jQuery(".showfilters").css("color", "#107c73");
	jQuery("#filterBox").animate({
		opacity: 1,
		height: 'toggle'
	}, 500);
	return false;
});

Der jQuery Part ist auch relativ kurz. Mit dem Toggle Befehl wird per klick der DIV eingeblendet. Das ganze wird mit Animate animiert. Man glaubt es kaum was? :) Mittels opacity und height Befehl wird der Div gleichzeitig eingeblendet sowie aufgeschoben. Beim erneuten klick auf Filter geht das ganze wieder in die entgegengesetzte Richtung.

So sieht der Filter dann aus

Das war es auch schon, vielleicht hilft es ja wem :)

]]> http://www.davidhellmann.com/tutorials/tutorial-filter-auf-make-better-websites/1411/feed/ 4 ★ CSS3 Text Shadow – Ein Paar Beispielehttp://www.davidhellmann.com/tutorials/css3-text-shadow-ein-paar-beispiele/1236/ http://www.davidhellmann.com/tutorials/css3-text-shadow-ein-paar-beispiele/1236/#comments Sat, 12 Mar 2011 13:06:49 +0000 David Hellmann http://www.davidhellmann.com/?p=1236 CSS3 ist ja bekanntermaßen in aller Munde und das ist auch gut so. Lassen sich damit doch schöne Sachen machen. Hier möchte ich mal ein paar Beispiele zeigen, was man alles mit Text Shadow machen kann. Das ist reines CSS und keinerlei Grafiken werden dafür benötigt. Es gibt also Möglichkeiten mehr mit Text zu machen als einfach eine Farbe zu vergeben. Der Fantasie sind keine Grenzen gesetzt. Hier lassen sich Möglichkeiten umsetzen die in manch Grafikprogramm gar nicht so einfach zu machen wären :) Aber man sollte hier eher dem Motto folgen "weniger ist mehr" und nicht alles und jedem mit Text Shadow bombardieren. Der Reiz wäre dann sofort verloren. Am tauglichsten halte ich es bei Headlines oder besonderen Textauszeichnungen etc. Letztendlich muss man es aber selber wissen wo und wie oft man es einsetzt.

Demo anschauen
CSS3 Text Shadow Beispiele

Wie immer ist es aktuell glaube ich so, dass der Internet Explorer es bis jetzt noch nicht unterstützt. In Version 9 könnte es vielleicht klappen? Also sollte man seine Sachen so anlegen, dass auch Browser die das ganze nicht unterstützen die Texte dennoch lesbar darstellen. Chrome, Firefox und Safari sollten jedoch keine Probleme mit der Darstellung haben.

HTML Code

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

<!DOCTYPE html>
<html lang="de">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 
	<title>CSS 3 Text Shadow</title>
 
	<!-- CSS -->
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
 
</head>
<body>
 
	<div class="wrapper">
		<h2 class="shadow_01">we &hearts; the wonderful css</h2>
		<h2 class="shadow_02">we &hearts; the wonderful css</h2>
		<h2 class="shadow_03">we &hearts; the wonderful css</h2>
		<h2 class="shadow_04">we &hearts; the wonderful css</h2>
		<h2 class="shadow_05">we &hearts; the wonderful css</h2>
		<h2 class="shadow_06">we &hearts; the wonderful css</h2>
		<h2 class="shadow_07">we &hearts; the wonderful css</h2>
		<h2 class="shadow_08">we &hearts; the wonderful css</h2>
		<h2 class="shadow_09">we &hearts; the wonderful css</h2>
		<h2 class="shadow_10">we &hearts; the wonderful css</h2>
	</div>
 
</body>
</html>

CSS Code

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

h2 {
	font:bold 50px/80px Arial, Helvetica, sans-serif;
}
 
.shadow_01 {
	text-shadow: 5px 5px 0px #ddd;
}
 
.shadow_02 {
	text-shadow:
		1px 1px 0px #ddd,
		2px 2px 0px #ddd,
		3px 3px 0px #ddd,
		4px 4px 50px #000;
}
 
.shadow_03 {
	text-shadow:
		2px 2px 0px #fff,
		-2px -2px 0px #fff,
		-2px 2px 0px #fff,
		2px -2px 0px #fff,
		0px 0px 50px #000;
}
 
.shadow_04 {
	text-shadow:
		2px 2px 0px #ff0,
		-2px -2px 0px #f0f,
		-2px 2px 0px #0ff,
		2px -2px 0px #0f0,
		0px 0px 50px #000;
}
 
.shadow_05 {
	text-shadow:
		1px 1px 0px #777,
		2px 2px 0px #777,
		3px 3px 0px #777,
		4px 4px 0px #888,
		5px 5px 0px #888,
		6px 6px 0px #888,
		7px 7px 0px #999,
		8px 8px 0px #999,
		9px 9px 0px #999,
		10px 10px 0px #aaa,
		11px 11px 0px #aaa,
		12px 12px 0px #aaa,
		13px 13px 0px #bbb,
		14px 14px 0px #bbb,
		15px 15px 0px #bbb,
		16px 16px 0px #ccc,
		17px 17px 0px #ccc,
		18px 18px 0px #ccc,
		19px 19px 0px #ddd,
		20px 20px 0px #ddd,
		21px 21px 0px #ddd;
}
 
.shadow_06 {
	text-shadow:
		1px 1px 0px #888,
		2px 2px 0px #888,
		3px 3px 0px #888,
		4px 4px 0px #888,
		5px 5px 0px #888,
		6px 6px 0px #888,
		7px 7px 0px #888,
		8px 8px 0px #ddd,
		9px 9px 0px #ddd,
		10px 10px 0px #ddd,
		11px 11px 0px #ddd,
		12px 12px 0px #ddd,
		13px 13px 0px #ddd,
		14px 14px 0px #ddd,
		15px 15px 0px #888,
		16px 16px 0px #888,
		17px 17px 0px #888,
		18px 18px 0px #888,
		19px 19px 0px #888,
		20px 20px 0px #888,
		21px 21px 0px #888;
}
 
.shadow_07 {
	text-shadow:
		1px 0px 5px #888,
		2px 0px 5px #888,
		3px 0px 5px #888,
		4px 0px 5px #888,
		5px 0px 5px #888,
		6px 0px 5px #888,
		7px 0px 5px #888,
		8px 0px 5px #ddd,
		9px 0px 5px #ddd,
		10px 0px 5px #ddd,
		11px 0px 5px #ddd,
		12px 0px 5px #ddd,
		13px 0px 5px #ddd,
		14px 0px 5px #ddd,
		15px 0px 5px #888,
		16px 0px 5px #888,
		17px 0px 5px #888,
		18px 0px 5px #888,
		19px 0px 5px #888,
		20px 0px 5px #888,
		21px 0px 5px #888;
}
 
.shadow_08 {
	text-shadow:
		2px 2px 0px #fff,
		-2px -2px 0px #fff,
		-2px 2px 0px #fff,
		2px -2px 0px #fff,
		3px 3px 0px #555,
		-3px -3px 0px #555,
		-3px 3px 0px #555,
		3px -3px 0px #555,
		4px 4px 0px #555,
		-4px -4px 0px #555,
		-4px 4px 0px #555,
		4px -4px 0px #555;
}
 
.shadow_09 {
	background: #333;
	text-shadow: 1px 1px 0px #555;
	padding: 10px;
}
 
.shadow_10 {
	background: #777;
	color: #ddd;
	text-shadow: 1px 1px 0px #000;
	padding: 10px;
}

Die Werte sind folgendermaßen: 1px 2px 3px #000
1px nach rechts
2px nach unten
3px weichzeichnung
Farbe: schwarz.

Der erste Wert gibt also die horizontale Position des Schattens an, der zweite Werte die vertikale Position, der dritte Wert die stärke der Weichzeichnung und der letzte Wert ist die Farbe des Schattens.

Demo anschauen
CSS3 Text Shadow Beispiele]]> http://www.davidhellmann.com/tutorials/css3-text-shadow-ein-paar-beispiele/1236/feed/ 12 ★ Make Better Shirts, wieso schon wieder was neues???http://www.davidhellmann.com/tutorials/make-better-shirts-wieso-schon-wieder-was-neues/1185/ http://www.davidhellmann.com/tutorials/make-better-shirts-wieso-schon-wieder-was-neues/1185/#comments Sun, 19 Dec 2010 10:00:09 +0000 David Hellmann http://www.davidhellmann.com/?p=1185

Gute Frage wenn ich ehrlich bin. Es kam eher Zufällig zu der Entscheidung Make Better Shirts ins Leben zu rufen. Aber mittlerweile muss ich sagen, dass es eine gute Entscheidung war. Warum? Darum! Nein im Ernst, ich bin ein T-Shirt Fan und habe gerne viele davon in meinem Regal. Warum also nicht eine Seite machen, die sich mit T-Shirts beschäftigt. Natürlich erhoffe ich mir auch was davon. Was genau das ist kann sich jeder denken... Die Weltherrschaft!!! Nein, ehrlich gesagt erhoffe ich mir davon den ein oder anderen Geheimtip für super tolle schicke T-Shirts zu bekommen.

Warum also nicht eine Seite machen, die sich mit T-Shirts beschäftigt.

Ein paar Sätze möchte ich auch mal zum Design los werden. Mir war schnell klar wie sich das ganze letztendlich anfühlen soll und auch wird. Die Idee war, eine Website zu entwickeln, die man auf allen Geräten nutzen kann, ohne auf irgendetwas verzichten zu müssen. Sowohl der Benutzer am iPhone als auch der am 27" Monitor soll gleichermaßen Freude beim Besuch der Website haben. Ob das so ist kann jeder selber testen. Ich bin der Meinung, das es ganz gut geklappt hat.

Gelb ist doch einfach mal nur geil!

Gelb! Genau, das war auch etwas das sofort fest stand. Das verlangen danach eine Website zu machen wo Gelb zur primären Farbe gehört musste endlich gestillt werden. Oft angefangen aber nie zu Ende gebracht. Das hat nun ein Ende! Gelb ist doch einfach mal nur geil! Dazu noch etwas weiß und grau/schwarz und man bekommt ganz sicher ein tolles Ergebnis mit dem alle zufrieden sind.

Das Design ist im großen und ganzen sehr einfach gehalten. Das ganze wurde in ein Grid gepresst und ist somit recht skalierbar. Genau diese Skalierbarkeit macht den Reiz der Website aus. Highlight ist für mich eine Art Device-Detection. Unterm Logo befindet sich ein Icon welches das Gerät anzeigt mit dem man surft bzw. besser gesagt zeigt es das Gerät an, zu welchem die aktuell genutzte Auflösung passt. Das wird schlicht und einfach mit CSS Media Queries umgesetzt. Damit kann man wunderbar Auflösungen und viele andere Dinge abfragen und in Abhängigkeit darauf reagieren.

Ansicht am Computer

Ansicht auf dem iPhone

Mit diesen CSS Media Queries wurden auch die verschiedenen Ansichten der Website umgesetzt. Ein sehr mächtiges Feature womit man viele nette Sachen machen kann.

Device Detection Code Beispiel

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146

#sidebar h1 .widescreen,
#sidebar h1 .screen,
#sidebar h1 .laptop,
#sidebar h1 .ipad,
#sidebar h1 .iphone {
	width: 46px;
	height: 40px;
	text-indent: -99999px;
	background:url(images/screenIcons.png) 0 -160px no-repeat;
	position: absolute;
	left:50%;
	bottom:20px;
	margin: 0 0 0 -23px;
}
 
#sidebar h1 .screen {
	display: none;
	background:url(images/screenIcons.png) 0 -120px no-repeat;
}
 
#sidebar h1 .laptop {
	display: none;
	background:url(images/screenIcons.png) 0 -80px no-repeat;
}
 
#sidebar h1 .ipad {
	display: none;
	background:url(images/screenIcons.png) 0 -40px no-repeat;
}
 
#sidebar h1 .iphone {
	display: none;
	background:url(images/screenIcons.png) 0 0 no-repeat;
}
/* < 1880 */
@media screen and (max-width:1879px) {
	#sidebar h1 .screen,
	#sidebar h1 .laptop,
	#sidebar h1 .ipad,
	#sidebar h1 .iphone {
		display: none;
	}
 
	#sidebar h1 .widescreen {
		display: block;
	}
}
 
/* < 1600 */
@media screen and (max-width:1599px) {
	#sidebar h1 .widescreen,
	#sidebar h1 .laptop,
	#sidebar h1 .ipad,
	#sidebar h1 .iphone {
		display: none;
	}
 
	#sidebar h1 .screen {
		display: block;
	}
}
 
/* < 1320 */
@media screen and (max-width:1319px) {
	#sidebar h1 .widescreen,
	#sidebar h1 .screen,
	#sidebar h1 .ipad,
	#sidebar h1 .iphone {
		display: none;
	}
 
	#sidebar h1 .laptop {
		display: block;
	}
}
 
/* < 1039 */
@media screen and (max-width:1039px) and (min-device-width: 1025px) {
	#sidebar h1 .widescreen,
	#sidebar h1 .screen,
	#sidebar h1 .laptop,
	#sidebar h1 .iphone {
		display: none;
	}
 
	#sidebar h1 .ipad {
		display: block;
	}
}
 
/* < 759 */
@media screen and (max-width:759px) and (min-device-width: 1025px) {
	#sidebar h1 .widescreen,
	#sidebar h1 .screen,
	#sidebar h1 .laptop,
	#sidebar h1 .ipad {
		display: none;
	}
 
	#sidebar h1 .iphone {
		display: block;
	}
}
 
 
/* < 1039 */
@media only screen and (max-device-width: 1024px) and (orientation:landscape) {
	#sidebar h1 .widescreen,
	#sidebar h1 .screen,
	#sidebar h1 .laptop,
	#sidebar h1 .iphone {
		display: none;
	}
 
	#sidebar h1 .ipad {
		display: block;
	}
}
 
/* < 1039 */
@media only screen and (max-device-width: 768px) and (orientation:portrait) {
	#sidebar h1 .widescreen,
	#sidebar h1 .screen,
	#sidebar h1 .laptop,
	#sidebar h1 .iphone {
		display: none;
	}
 
	#sidebar h1 .ipad {
		display: block;
	}
}
 
/* < 759 */
@media only screen and (max-device-width: 480px) and (orientation:landscape), only screen and (max-device-width: 320px) and (orientation:portrait) {
	#sidebar h1 .widescreen,
	#sidebar h1 .screen,
	#sidebar h1 .laptop,
	#sidebar h1 .ipad {
		display: none;
	}
 
	#sidebar h1 .iphone {
		display: block;
	}
}

Man kann sofort sehen das es etwas mehr Denkarbeit ist als normales CSS schreiben und natürlich ist es auch mehr Aufwand beim tippen. Im Grunde wird hier nur die Bildschirmauflösung bzw. die maximale Geräteauflösung abgefragt. Bei den iPad und iPhone dann noch ob es sich im horizontalen oder vertikalen Zustand befindet. Dem entsprechend werden dann die Icons aus bzw. eingeblendet. Diese kleine Beispiel soll nur mal einen kleinen Einblick geben was man mit den CSS Media Queries anfangen kann. Es gibt weitaus mehr Möglichkeiten.

Genug von der Technik hin zu dem menschlichen Aspekt von Make Better Shirts. Endlich kann ich mal mit Jan zusammen ein Projekt betreuen wo wir beide gleichermaßen Freude daran haben. Ist das nicht schön?!! So, Schluss jetzt. Viel Spaß beim besuchen der Website(s).

www.makebettershirts.com
www.makebetterflyers.com
www.makebetterwebsites.com
www.makebetterapps.com

]]> http://www.davidhellmann.com/tutorials/make-better-shirts-wieso-schon-wieder-was-neues/1185/feed/ 5 ★ Remember the Milk richtig nutzenhttp://www.davidhellmann.com/tutorials/remember-the-milk-richtig-nutzen/739/ http://www.davidhellmann.com/tutorials/remember-the-milk-richtig-nutzen/739/#comments Sun, 04 Oct 2009 01:54:46 +0000 David Hellmann http://www.davidhellmann.com/?p=739 remember-the-milkGestern habe ich mich dann endgültig für Remember the Milk entschieden und mir meinen Pro Account geholt. Jetzt sollte das ganze natürlich auch sinnvoll genutzt werden. Es sollte quasi ein System in die ganze Sache gebracht werden. Bisher hatte ich einfach Listen angelegt für verschiedene Dinge wie: Privat, Schule, Arbeit, Verein und und und. Doch irgendwann kommt es hier zu einem Listenchaos und man hat hier zisch Listen und im Grunde keinen Überblick mehr. Also mal ein wenig Google bemüht und da kamen die ein oder anderen Lösungsansätze zum Vorschein.

Smart Lists anstelle von normalen Listen

Remember the Milk kann deutlich mehr als einfach nur Listen anlegen und darin ein paar ToDo's zu posten. Mit Smart Lists kann man seine Listen dynamisch machen. Man trägt jetzt seine Aufgaben nicht mehr in irgendwelche Listen ein sondern nutzt im Endeffekt nur noch eine. Dort stehen dann alle Aufgaben drin. Jetzt legt man sich Smart Lists an um die Aufgaben automatisch in diese einordnen zu lassen. Klingt erstmal eher kontraproduktiv und viel zu kompliziert aber es klappt eigentlich ganz gut. Das ganze ist im Endeffekt auch wesentlich mächtiger wie wir später sehen werden. Grundvoraussetzung dafür ist, dass man seine Einträge alle ordentlich mit Tags versieht. Es gibt hierzu eine reihe von Anwendungsbeispielen wie man das am besten macht. Ich habe jetzt einen Mix aus mehreren davon den ich hier vorstellen möchte.

Tags richtig vergeben (Struktur rein bringen)

Man muss sich vorher klar überlegen wie man das ganze strukturiert sonst wird es später schwer wenn man mal mehr als eine Hand voll Aufgaben eingetragen hat. Man könnte natürlich einfach taggen wie folgt: Schule, Klausur, Deutsch. So hätte man drei Tags die auch ganz gut verständlich sind aber wird das ganze dann etwas komplexer ist da keine Übersicht mehr gegeben. Persönlich nutze ich jetzt folgende Struktur:

.tagName = Projekte
(Bsp.: .klausuren, .makebetterwebsites, .spielen)
Alle meine Projekte haben quasi eine "." vor den Projektname und somit sind sie leichter zu finden da sie immer zusammen stehen werden und markiert sind.

+tagName = Leistungen in den Projekten
(Bsp.: +design, +pflege, +monopoly)
Wenn ich jetzt das Projekt .makebetterwebsites habe und dort eine Aufgabe "Täglich zwei Seiten posten" gebe ich ihr noch das Tag "+pflege" mit. Somit haben wir die Aufgabe "Täglich zwei Seiten posten" im Projekt: ".makebetterwebsites" mit der Leistung: "+pflege".

@tagName = Kontext
(Bsp.: @home, @mac, @schule)
Diese Tags sind sind dazu da um Zusammenhänge darzustellen. Nehmen wir das Beispiel mit dem Projekt ".makebetterwebsites" mit der Leistung: "+pflege" und dort haben wir dann den Kontext "@mac". Was dann so viel heißt wie "Pflege Makebetterwebsites am Mac". :)

rememberthemilk-tagging

Was bringen die Zeichen (. + @) vor den Tagnamen?

Im Grunde ganz einfach. Dadurch werden die Sachen Gruppiert. Alle Projekt-, alle Leistungs- und alle Kontext Tags stehen zusammen. Somit hat man eine viel größere Übersicht und findet sich wohl auch schneller zurecht. Wie das ganze dann letztendlich ausschaut sieht man in folgendem Bild.

rememberthemilk-tagcloud

Smart Lists anlegen

Smart Lists sind schlaue Listen deren Inhalt dynamisch generiert wird. Wer einen Mac hat wird sie wohl schon kennen da aber meist unter dem Namen "Smart Folder". Der Sinn ist aber der gleiche. Bei Remember the Milk werden Smart Lists erstellt indem man Suchergebnisse speichert. Das ganze ist sehr komplex. Hier kann man sich mal anschauen wie und mit was man das perfekte Suchergebnis bekommen kann. Man kann das ganze auch in den Erweiterten Suchergebnissen zusammen klicken (siehe Bild)

rememberthemilk-suche

Beispiele für Smart Lists

Wie gesagt habe ich mir ein paar Beispiele angeschaut und mir dann meine persönlichen Smart Lists erstellt. Hier mal eine das ein oder andere Beispiel was zeigen soll was alles möglich ist.

Es gibt eine Liste die keine Smart List ist und das ist die Default Liste, da wolle alle Aufgaben abgelegt werden die ich erstelle. Ausnahme sind Aufgaben die per Mail versendet werden, diese landen in der Liste "Eingang". OK, fangen wir an mit den Listen:

Name: .
Beschreibung: Die Liste "." ist meine Standard Liste für alle Aufgaben. Hier werden alle Aufgaben abgelegt. Man könnte Sie auch "alle Aufgaben" nennen oder sonst wie.

Name: !notTagged
Suchfunktion: isTagged:false
Beschreibung: Hier landen alle Aufgaben die noch nicht mit Tags versehen wurden. Grund dafür sind das die Aufgaben noch nicht zugeordnet werden konnten oder es einfach vergessen wurde. Hier hat man Sie dann schnell im Blickfeld und kann Sie nachträglich bearbeiten.

Name: <2weeks
Suchfunktion: not(tag:-someday) (due:never or dueBefore:"15 days")
Beschreibung: <2weeks steht für die nächsten zwei Wochen. Hier werden alle Aufgaben angezeigt die: das Tag "-someday" nicht besitzen, (Aufgaben ohne festen Termin/Zeitpunkt), nicht erledigt wurden und in den nächsten zwei Wochen erledigt werden müssen.

Name: >2weeks
Suchfunktion: not(tag:-someday) (dueAfter:"14 days")
Beschreibung: >2weeks steht für nach zwei Wochen. Hier erscheinen alle Aufgaben die: das Tag "-someday" nicht besitzen und erst in zwei Wochen erledigt werden müssen.

Name: ?someday
Suchfunktion: tag:-someday
Beschreibung: Hier werden alle Aufgaben angezeigt die das Tag: "-someday" haben. Damit hat man eine Übersicht über Aufgaben die noch oder überhaupt keinen Termin haben.

Name: @home
Suchfunktion: tag:@home
Beschreibung: Hier werden alle Aufgaben mit dem Tag: "@home" angezeigt.

Name: @mac
Suchfunktion: tag:@mac
Beschreibung: Hier werden alle Aufgaben mit dem Tag: "@mac" angezeigt.

Name: @outdoor
Suchfunktion: tag:@outdoor
Beschreibung: Hier werden alle Aufgaben mit dem Tag: "@outdoor" angezeigt.

Name: @phone
Suchfunktion: tag:@phone
Beschreibung: Hier werden alle Aufgaben mit dem Tag: "@phone" angezeigt.

Name: @schule
Suchfunktion: tag:@schule
Beschreibung: Hier werden alle Aufgaben mit dem Tag: "@schule" angezeigt.

Ich denke das sollte als kleiner Einblick reichen. Es sind hier eigentlich keine Grenzen gesetzt und jeder kann sich nach belieben Smart Lists erstellen.

RTM Aufgaben im Google Calender anzeigen

Ein weiteres Killerfeature was ich gestern dann noch gefunden habe ist die problemlose Einbindung in den Google Kalender. Man kann hier Problemlos aussuchen welche Liste man in dem Kalender angezeigt haben möchte. Wie das ganze Funktioniert findet man hier: Remember the Milk in Google Kalender einbinden.

Fazit

Ich hatte Remember the Milk vor langer Zeit schon ausprobiert aber das Potential dahinter nicht erkannt und deswegen erstmal wieder auf Eis gelegt. Vor ein paar Wochen kam ich wieder drauf. Was bleibt zu sagen. Mit der iPhone App und dem guten Webinterface hat man eine Killeranwendung und ich überlege ob ich "The Hit List" überhautp noch brauche. Mal schauen wann deren iPhone App kommt und was die kann. Von mir klar die Note 1 für Remember the Milk!

]]> http://www.davidhellmann.com/tutorials/remember-the-milk-richtig-nutzen/739/feed/ 20 ★ Tutorial – Ein Portfolio mit WordPress realisierenhttp://www.davidhellmann.com/tutorials/tutorial-ein-portfolio-mit-wordpress-realisieren/663/ http://www.davidhellmann.com/tutorials/tutorial-ein-portfolio-mit-wordpress-realisieren/663/#comments Mon, 31 Aug 2009 10:27:50 +0000 David Hellmann http://www.davidhellmann.com/?p=663 portfolio Hin und wieder taucht bei mir die Frage auf, wie ich mein Portfolio hier umgesetzt habe. Meine Antwort war recht simple bisher: "Mit Custom Fields und Artikeln". Aber wenn ich eherlich bin war es dann doch ein wenig mehr arbeit. Um es nicht jedem einzeln zu erklären was sehr Zeitaufwendig werden könnte werde ich hier versuchen das ganze in einem kleinen Tutorial zu erläutern. Natürlich ist das nicht "DER" Weg und es wird eine vielzahl an anderen Lösungen geben doch ich bin mit dieser hier sehr zufrieden bisher.

Vorbereitung - Verzeichnisstruktur und Dateinamen

Kommen wir zum ersten Teil, das anlegen der Verzeichnisstruktur. Habe mir hier mehrfach Gedanken gemacht wie es am besten und sinnvollsten ist und das war die letzte Version meiner Gedanken.

Verzeichnisstruktur:

Portfolio (Hauptordner)
- apparel (Ordner für Kleidung)
-- picture (Große Bilder im Portfoliobereich)
-- preview (Mittlere Bilder in der Portfoliovorschau)
-- thumb (Kleine Bilder für die Portfolioschnellansicht (Startseite))
- print (Ordner für Print)
-- picture (Große Bilder im Portfoliobereich)
-- preview (Mittlere Bilder in der Portfoliovorschau)
-- thumb (Kleine Bilder für die Portfolioschnellansicht (Startseite))
- web (Ordner für Web)
-- browser (Große Bilder im Portfoliobereich)
-- preview (Mittlere Bilder in der Portfoliovorschau)
-- slide (Bilder für Slideshow im Macbook Pro)
-- thumb (Kleine Bilder für die Portfolioschnellansicht (Startseite))

Im FTP Programm oder wie hier Dreamweaver schaut das dann so aus: verzeichnisstruktur

Nun kommen wir zu den Dateinamen. Es sollte endlos erweiterbar sein ohne groß den Überblick zu verlieren. Es klappt bisher super :)

Der Dateiname ist wie folgt aufgebaut:

projektname_zähler_bildnummer.erweiterung
was dann konkret so ausschaut:
daivdhellmann_02_img01.jpg

davidhellmann = Projektname
02 = 2tes Projekt dafür
img01 = Bild 01

So werden die Bilder in jedem Ordner abgelegt. Es gibt immer nur ein Bild außer bei den Picture und Browser Bildern, da sind bis zu vier Bildern möglich (kann erweitert werden). Das sind dann die Bilder in der Detailansicht. Es würde dann in diesem Ordner so aussehen:
daivdhellmann_02_img01.jpg
daivdhellmann_02_img02.jpg
daivdhellmann_02_img03.jpg

Sollte soweit alles verständlich sein. Falls nicht einfach in den Kommentaren nachfragen.
Die größe der Bilder lasse ich hier mal außer acht, dass muss jeder selbst entscheiden was da brauchbar ist.

WordPress vorbereiten

Als erstes erstellt man am besten die Kategorien für die späteren Portfoliobereiche.

portfolio (ID=3) Diese dient nur als Oberkategorie.
- apparel (ID=6) Hier kommen die Apparel Sachen rein.
- print(ID=5) Hier kommen die Print Sachen rein.
- web<(ID=4) Hier kommen die Web Sachen rein.

Das ganze sieht dann in WordPress so aus: kategorien

Gebrauchte Funktionen

Funktion 1 ist diese, das für jede Kategorie eine eigene single.php Datei verwendet wird. Wenn diese nicht vorhanden ist dann wird die normale single.php genommen. Diese single.php für die einzelnen Kategorien muss man selber anlegen und zwar: single-4.php für die Kategorie mit der ID=4 für "Web".

Jede Kategorie bekommt eigene single.php zugewiesen

1
2
3
4
5
6
7

<?php
// Jede Kategorie bekommt eine eigene single.php. Falls diese nicht vorhanden ist wird die normale single.php genutzt.
add_filter('single_template', create_function('$t', 'foreach( (array) get_the_category() as $cat ) {
	if ( file_exists(TEMPLATEPATH . "/single-{$cat->term_id}.php") )
	return TEMPLATEPATH . "/single-{$cat->term_id}.php"; } return $t;' )
);
?>

Portfolio Kategorien von den normalen Blogposts ausschließen

1
2
3
4
5
6
7
8

// Kategorien von der Startseite ausschließen
function filter_posts() {
	global $wp_query;
	if(is_home()) {
		$wp_query->set('category__not_in',array(3,4,5,6));
	}
}
add_action('pre_get_posts','filter_posts');

Beide Funktionen kommen in die functions.php im Theme Ordner.
Das hätten wir geschafft. Jede Portfolio Kategorie bekommt nachher eine eigene Templatedatei. Die Portfolio Artikel tauchen nun nicht mehr unter den normalen Blogartikeln auf was so auch keinen Sinn machen würde.

Templates erstellen

Das sind nicht wenige. Es gibt "apparel.php", "print.php", "web.php", "portfolio.php", "portfolio-list.php", "single-4.php", "single-5.php" und "single-6.php". Das sollten alle sein. Ich werde jetzt den kompletten Inhalt dieser Dateien hier abbilden. Im Grunde sind es ganz normale Loops wo Artikel und deren Benutzerdefinierten Felder ausgelesen werden.

apparel.php

Diese Datei ist ist für die Voransicht der Apparel Sachen zuständig

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
48
49

<?php
/*
Template Name: Apparel
*/
?>
<?php get_header(); ?>
<!-- Left -->
<div class="content-portfolio">
 
<ul class="brotnavi">
	<li><a class="list" href="<?php bloginfo('home'); ?>/portfolio/list">Liste</a></li>
	<li><a class="apparel apparel-aktiv" href="<?php bloginfo('home'); ?>/portfolio/apparel">Apparel Stuff</a></li>
	<li><a class="print" href="<?php bloginfo('home'); ?>/portfolio/print">Print Stuff</a></li>
	<li><a class="web" href="<?php bloginfo('home'); ?>/portfolio/web">Web Stuff</a></li>
	<li><a class="overview" href="<?php bloginfo('home'); ?>/portfolio/">Overview</a></li>
</ul>
 
<a name="apparelstuff"></a><h2 class="apparel">Apparel Stuff</h2>
<hr class="portfolio" />
<ul class="portfolio-preview">
 
<?php
	global $myPosts;
	$myPosts = '';
?>
 
<?php
	$my_query = new WP_Query();
	$my_query->query('cat=6&showposts=-1&orderby=date');
	if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post();
	 $myPosts .= $post->ID . ",";
?>
 
<li>
	<?php $ordner = get_post_meta($post->ID, 'ordner', true); ?>
	<?php $preview = get_post_meta($post->ID, 'preview', true); ?>
	<?php $name = get_post_meta($post->ID, 'name', true); ?>
	<?php $umfang = get_post_meta($post->ID, 'umfang', true); ?>
 
	<a href="<?php the_permalink() ?>"><img src="<?php bloginfo('home'); ?>/wp-content/uploads/portfolio/<?php echo $ordner; ?>/preview/<?php echo $preview; ?>.jpg" alt="<?php the_title(); ?>" /></a>
	<div class="ordner"><?php echo $ordner; ?></div>
	<h3><a href="<?php the_permalink() ?>"><?php echo $name; ?></a></h3>
	<cite><?php echo $umfang; ?></cite>
</li>
<?php endwhile; endif; ?>
</ul>
 
</div>
<?php get_footer(); ?>

print.php

Diese Datei ist ist für die Voransicht der Print Sachen zuständig

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
48
49

<?php
/*
Template Name: Print
*/
?>
<?php get_header(); ?>
<!-- Left -->
<div class="content-portfolio">
 
<ul class="brotnavi">
	<li><a class="list" href="<?php bloginfo('home'); ?>/portfolio/list">Liste</a></li>
	<li><a class="apparel" href="<?php bloginfo('home'); ?>/portfolio/apparel">Apparel Stuff</a></li>
	<li><a class="print print-aktiv" href="<?php bloginfo('home'); ?>/portfolio/print">Print Stuff</a></li>
	<li><a class="web" href="<?php bloginfo('home'); ?>/portfolio/web">Web Stuff</a></li>
	<li><a class="overview" href="<?php bloginfo('home'); ?>/portfolio/">Overview</a></li>
</ul>
 
<a name="printstuff"></a><h2 class="print">Print Stuff</h2>
<hr class="portfolio" />
<ul class="portfolio-preview">
 
<?php
	global $myPosts;
	$myPosts = '';
?>
 
<?php
	$my_query = new WP_Query();
	$my_query->query('cat=5&showposts=-1&orderby=date');
	if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post();
	 $myPosts .= $post->ID . ",";
?>
 
<li>
	<?php $ordner = get_post_meta($post->ID, 'ordner', true); ?>
	<?php $preview = get_post_meta($post->ID, 'preview', true); ?>
	<?php $name = get_post_meta($post->ID, 'name', true); ?>
	<?php $umfang = get_post_meta($post->ID, 'umfang', true); ?>
 
	<a href="<?php the_permalink() ?>"><img src="<?php bloginfo('home'); ?>/wp-content/uploads/portfolio/<?php echo $ordner; ?>/preview/<?php echo $preview; ?>.jpg" alt="<?php the_title(); ?>" /></a>
	<div class="ordner"><?php echo $ordner; ?></div>
	<h3><a href="<?php the_permalink() ?>"><?php echo $name; ?></a></h3>
	<cite><?php echo $umfang; ?></cite>
</li>
<?php endwhile; endif; ?>
</ul>
 
</div>
<?php get_footer(); ?>

web.php

Diese Datei ist ist für die Voransicht der Web Sachen zuständig

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
48
49

<?php
/*
Template Name: Web
*/
?>
<?php get_header(); ?>
<!-- Left -->
<div class="content-portfolio">
 
<ul class="brotnavi">
    <li><a class="list" href="<?php bloginfo('home'); ?>/portfolio/list">Liste</a></li>
    <li><a class="apparel" href="<?php bloginfo('home'); ?>/portfolio/apparel">Apparel Stuff</a></li>
    <li><a class="print" href="<?php bloginfo('home'); ?>/portfolio/print">Print Stuff</a></li>
    <li><a class="web web-aktiv" href="<?php bloginfo('home'); ?>/portfolio/web">Web Stuff</a></li>
    <li><a class="overview" href="<?php bloginfo('home'); ?>/portfolio/">Overview</a></li>
</ul>
 
<a name="webstuff"></a><h2 class="web">Web Stuff</h2>
<hr class="portfolio" />
 
<ul class="portfolio-preview">
<?php
	global $myPosts;
	$myPosts = '';
?>
 
<?php
	$my_query = new WP_Query();
	$my_query->query('cat=4&showposts=-1&orderby=date');
	if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post();
	 $myPosts .= $post->ID . ",";
?>
 
<li>
	<?php $ordner = get_post_meta($post->ID, 'ordner', true); ?>
	<?php $preview = get_post_meta($post->ID, 'preview', true); ?>
    <?php $name = get_post_meta($post->ID, 'name', true); ?>
    <?php $umfang = get_post_meta($post->ID, 'umfang', true); ?>
 
	<a href="<?php the_permalink() ?>"><img src="<?php bloginfo('home'); ?>/wp-content/uploads/portfolio/<?php echo $ordner; ?>/preview/<?php echo $preview; ?>.jpg" alt="<?php the_title(); ?>" /></a>
	<div class="ordner"><?php echo $ordner; ?></div>
	<h3><a href="<?php the_permalink() ?>"><?php echo $name; ?></a></h3>
	<cite><?php echo $umfang; ?></cite>
</li>
    <?php endwhile; endif; ?>
</ul>
 
</div>
<?php get_footer(); ?>

portfolio.php

Diese Datei ist ist für die Voransicht des Portfolios zuständig

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

<?php
/*
Template Name: Portfolio
*/
?>
<?php get_header(); ?>
<!-- Left -->
<div class="content-portfolio">
 
<ul class="brotnavi">
    <li><a class="list" href="<?php bloginfo('home'); ?>/portfolio/list">Liste</a></li>
    <li><a class="apparel" href="<?php bloginfo('home'); ?>/portfolio/apparel">Apparel Stuff</a></li>
    <li><a class="print" href="<?php bloginfo('home'); ?>/portfolio/print">Print Stuff</a></li>
    <li><a class="web" href="<?php bloginfo('home'); ?>/portfolio/web">Web Stuff</a></li>
    <li><a class="overview overview-aktiv" href="<?php bloginfo('home'); ?>/portfolio/">Overview</a></li>
</ul>
 
<h2 class="latest">Latest Stuff</h2>
<hr class="portfolio" />
 
<ul class="portfolio-preview">
<?php
	global $myPosts;
	$myPosts = '';
?>
 
<?php
	$my_query = new WP_Query();
	$my_query->query('cat=4,5,6&showposts=15&orderby=date');
	if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post();
	 $myPosts .= $post->ID . ",";
?>
<li>
	<?php $ordner = get_post_meta($post->ID, 'ordner', true); ?>
	<?php $preview = get_post_meta($post->ID, 'preview', true); ?>
    <?php $name = get_post_meta($post->ID, 'name', true); ?>
    <?php $umfang = get_post_meta($post->ID, 'umfang', true); ?>
 
	<a href="<?php the_permalink() ?>"><img src="<?php bloginfo('home'); ?>/wp-content/uploads/portfolio/<?php echo $ordner; ?>/preview/<?php echo $preview; ?>.jpg" alt="<?php the_title(); ?>" /></a>
	<div class="ordner"><a href="<?php bloginfo('home'); ?>/portfolio/<?php echo $ordner; ?>/"><?php echo $ordner; ?></a></div>
	<h3><a href="<?php the_permalink() ?>"><?php echo $name; ?></a></h3>
	<cite><?php echo $umfang; ?></cite>
</li>
    <?php endwhile; endif; ?>
</ul>
</div>
<?php get_footer(); ?>

Alle vier Quelltexte sind hier nahezu identisch. Sie unterscheiden sich nur Teilweise im Wording und ziehen andere Daten aus der Datenbank (Die verschiedenen Portfoliokategorien). Jetzt fehlt nur noch die Detailansicht, hierfür haben wir jetzt jeweils eine single.php mit der jeweiligen Kategorienummer hinten dran. single-4.php, single-5.php und single-6.php. Wenn diese nicht vorhanden sind müssen sie erstellt werden. Hier die Quelltexte.

single-4.php

Diese Datei ist für die Detailansicht der Web Portfolio Sachen zuständig.

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

<?php get_header(); ?>
<div id="blog" style="width:970px;">
	<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>
	<ul class="brotnavi brotnavi-left">
		<li><a class="overview" href="<?php bloginfo('home'); ?>/portfolio/">Overview</a></li>
		<li><a class="web web-aktiv" href="<?php bloginfo('home'); ?>/portfolio/web">Web Stuff</a></li>
		<li><a class="print" href="<?php bloginfo('home'); ?>/portfolio/print">Print Stuff</a></li>
		<li><a class="apparel" href="<?php bloginfo('home'); ?>/portfolio/apparel">Apparel Stuff</a></li>
		<li><a class="list" href="<?php bloginfo('home'); ?>/portfolio/list">Liste</a></li>
	</ul>
	<div style="float:left;">
		<?php $ordner = get_post_meta($post->ID, 'ordner', true); ?>
		<?php $browser = get_post_meta($post->ID, 'browser', true); ?>
		<?php if($browser !== '') { ?>
			<p class="browser"><img src="<?php bloginfo('home'); ?>/wp-content/uploads/portfolio/<?php echo $ordner; ?>/browser/<?php echo $browser; ?>.jpg" alt="<?php the_title(); ?>" /></p>
		<?php } ?>
			<?php $img02 = get_post_meta($post->ID, 'img02', true); ?>
		<?php if($img02 !== '') { ?>
			<p class="bild"><img src="<?php bloginfo('home'); ?>/wp-content/uploads/portfolio/<?php echo $ordner; ?>/browser/<?php echo $img02; ?>.jpg" alt="<?php the_title(); ?>" /></p>
		<?php } ?>
			<?php $img03 = get_post_meta($post->ID, 'img03', true); ?>
		<?php if($img03 !== '') { ?>
			<p class="bild"><img src="<?php bloginfo('home'); ?>/wp-content/uploads/portfolio/<?php echo $ordner; ?>/browser/<?php echo $img03; ?>.jpg" alt="<?php the_title(); ?>" /></p>
		<?php } ?>
			<?php $img04 = get_post_meta($post->ID, 'img04', true); ?>
		<?php if($img04 !== '') { ?>
			<p class="bild"><img src="<?php bloginfo('home'); ?>/wp-content/uploads/portfolio/<?php echo $ordner; ?>/browser/<?php echo $img04; ?>.jpg" alt="<?php the_title(); ?>" /></p>
		<?php } ?>
		<?php the_content(); ?>
	</div>
	<div id="sidebar">
		<?php $name = get_post_meta($post->ID, 'name', true); ?>
		<h3 class="details"><?php echo $name; ?></h3>
		<?php $kunde = get_post_meta($post->ID, 'kunde', true); ?>
		<?php $umfang = get_post_meta($post->ID, 'umfang', true); ?>
		<?php $datum = get_post_meta($post->ID, 'datum', true); ?>
		<?php $beschreibung = get_post_meta($post->ID, 'beschreibung', true); ?>
		<?php $url = get_post_meta($post->ID, 'url', true); ?>
		<div class="p">
			<?php if($kunde !== '') { ?>
			<p><?php echo $kunde; ?></p>
			<h4>kunde</h4>
			<?php } ?>
			<?php if($umfang !== '') { ?>
			<p><?php echo $umfang; ?></p>
			<h4>umfang</h4>
			<?php } ?>
			<?php if($datum !== '') { ?>
			<p><?php echo $datum; ?></p>
			<h4>datum</h4>
			<?php } ?>
			<?php if($beschreibung !== '') { ?>
			<p><?php echo $beschreibung; ?></p>
			<h4>beschreibung</h4>
			<?php } ?>
			<?php if($url !== '') { ?>
			<p><a href="http://<?php echo $url; ?>"><?php echo $url; ?></a></p>
			<?php } ?>
		</div>
	</div>
	<?php endwhile; else: ?>
	<p>Keine Artikel vorhanden</p>
	<?php endif; ?>
	<div class="navigation" style="clear:both; float:left; width:600px; padding:40px 10px 0 10px;">
		<div class="alignleft" style="float:left;"><?php next_post_link('%link', '&laquo;  previous work', TRUE, '1 and 3 and 5 and 6 and 7 and 8'); ?></div>
		<div class="alignright" style="float:right; text-align:right;"><?php previous_post_link('%link', 'next work &raquo;', TRUE, '1 and 3 and 5 and 6 and 7 and 8'); ?></div>
	</div>
</div>
<?php get_footer(); ?>

single-5.php

Diese Datei ist für die Detailansicht der Print Portfolio Sachen zuständig.

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

<?php get_header(); ?>
<div id="blog" style="width:970px;">
	<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>
	<ul class="brotnavi brotnavi-left">
		<li><a class="overview" href="<?php bloginfo('home'); ?>/portfolio/">Overview</a></li>
		<li><a class="web" href="<?php bloginfo('home'); ?>/portfolio/web">Web Stuff</a></li>
		<li><a class="print print-aktiv" href="<?php bloginfo('home'); ?>/portfolio/print">Print Stuff</a></li>
		<li><a class="apparel" href="<?php bloginfo('home'); ?>/portfolio/apparel">Apparel Stuff</a></li>
		<li><a class="list" href="<?php bloginfo('home'); ?>/portfolio/list">Liste</a></li>
	</ul>
	<div style="float:left;">
		<?php $ordner = get_post_meta($post->ID, 'ordner', true); ?>
		<?php $browser = get_post_meta($post->ID, 'browser', true); ?>
		<?php if($browser !== '') { ?>
			<p class="bild"><img src="<?php bloginfo('home'); ?>/wp-content/uploads/portfolio/<?php echo $ordner; ?>/picture/<?php echo $browser; ?>.jpg" alt="<?php the_title(); ?>" /></p>
		<?php } ?>
			<?php $img02 = get_post_meta($post->ID, 'img02', true); ?>
		<?php if($img02 !== '') { ?>
			<p class="bild"><img src="<?php bloginfo('home'); ?>/wp-content/uploads/portfolio/<?php echo $ordner; ?>/picture/<?php echo $img02; ?>.jpg" alt="<?php the_title(); ?>" /></p>
		<?php } ?>
			<?php $img03 = get_post_meta($post->ID, 'img03', true); ?>
		<?php if($img03 !== '') { ?>
			<p class="bild"><img src="<?php bloginfo('home'); ?>/wp-content/uploads/portfolio/<?php echo $ordner; ?>/picture/<?php echo $img03; ?>.jpg" alt="<?php the_title(); ?>" /></p>
		<?php } ?>
			<?php $img04 = get_post_meta($post->ID, 'img04', true); ?>
		<?php if($img04 !== '') { ?>
			<p class="bild"><img src="<?php bloginfo('home'); ?>/wp-content/uploads/portfolio/<?php echo $ordner; ?>/picture/<?php echo $img04; ?>.jpg" alt="<?php the_title(); ?>" /></p>
		<?php } ?>
		<?php the_content(); ?>
	</div>
	<div id="sidebar">
		<?php $name = get_post_meta($post->ID, 'name', true); ?>
		<h3 class="details"><?php echo $name; ?></h3>
		<?php $kunde = get_post_meta($post->ID, 'kunde', true); ?>
		<?php $umfang = get_post_meta($post->ID, 'umfang', true); ?>
		<?php $datum = get_post_meta($post->ID, 'datum', true); ?>
		<?php $beschreibung = get_post_meta($post->ID, 'beschreibung', true); ?>
		<?php $url = get_post_meta($post->ID, 'url', true); ?>
		<div class="p">
			<?php if($kunde !== '') { ?>
			<p><?php echo $kunde; ?></p>
			<h4>kunde</h4>
			<?php } ?>
			<?php if($umfang !== '') { ?>
			<p><?php echo $umfang; ?></p>
			<h4>umfang</h4>
			<?php } ?>
			<?php if($datum !== '') { ?>
			<p><?php echo $datum; ?></p>
			<h4>datum</h4>
			<?php } ?>
			<?php if($beschreibung !== '') { ?>
			<p><?php echo $beschreibung; ?></p>
			<h4>beschreibung</h4>
			<?php } ?>
			<?php if($url !== '') { ?>
			<p><a href="http://<?php echo $url; ?>"><?php echo $url; ?></a></p>
			<?php } ?>
		</div>
	</div>
	<?php endwhile; else: ?>
	<p>Keine Artikel vorhanden</p>
	<?php endif; ?>
	<div class="navigation" style="clear:both; float:left; width:600px; padding:40px 10px 0 10px;">
		<div class="alignleft" style="float:left;"><?php next_post_link('%link', '&laquo;  previous work', TRUE, '1 and 3 and 4 and 6 and 7 and 8'); ?></div>
		<div class="alignright" style="float:right; text-align:right;"><?php previous_post_link('%link', 'next work &raquo;', TRUE, '1 and 3 and 4 and 6 and 7 and 8'); ?></div>
	</div>
</div>
<?php get_footer(); ?>

single-6.php

Diese Datei ist für die Detailansicht der Apparel Portfolio Sachen zuständig.

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

<?php get_header(); ?>
<div id="blog" style="width:970px;">
	<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>
	<ul class="brotnavi brotnavi-left">
		<li><a class="overview" href="<?php bloginfo('home'); ?>/portfolio/">Overview</a></li>
		<li><a class="web" href="<?php bloginfo('home'); ?>/portfolio/web">Web Stuff</a></li>
		<li><a class="print" href="<?php bloginfo('home'); ?>/portfolio/print">Print Stuff</a></li>
		<li><a class="apparel apparel-aktiv" href="<?php bloginfo('home'); ?>/portfolio/apparel">Apparel Stuff</a></li>
		<li><a class="list" href="<?php bloginfo('home'); ?>/portfolio/list">Liste</a></li>
	</ul>
	<div style="float:left;">
		<?php $ordner = get_post_meta($post->ID, 'ordner', true); ?>
		<?php $browser = get_post_meta($post->ID, 'browser', true); ?>
		<?php if($browser !== '') { ?>
			<p class="bild"><img src="<?php bloginfo('home'); ?>/wp-content/uploads/portfolio/<?php echo $ordner; ?>/picture/<?php echo $browser; ?>.jpg" alt="<?php the_title(); ?>" /></p>
		<?php } ?>
			<?php $img02 = get_post_meta($post->ID, 'img02', true); ?>
		<?php if($img02 !== '') { ?>
			<p class="bild"><img src="<?php bloginfo('home'); ?>/wp-content/uploads/portfolio/<?php echo $ordner; ?>/picture/<?php echo $img02; ?>.jpg" alt="<?php the_title(); ?>" /></p>
		<?php } ?>
			<?php $img03 = get_post_meta($post->ID, 'img03', true); ?>
		<?php if($img03 !== '') { ?>
			<p class="bild"><img src="<?php bloginfo('home'); ?>/wp-content/uploads/portfolio/<?php echo $ordner; ?>/picture/<?php echo $img03; ?>.jpg" alt="<?php the_title(); ?>" /></p>
		<?php } ?>
			<?php $img04 = get_post_meta($post->ID, 'img04', true); ?>
		<?php if($img04 !== '') { ?>
			<p class="bild"><img src="<?php bloginfo('home'); ?>/wp-content/uploads/portfolio/<?php echo $ordner; ?>/picture/<?php echo $img04; ?>.jpg" alt="<?php the_title(); ?>" /></p>
		<?php } ?>
		<?php the_content(); ?>
	</div>
	<div id="sidebar">
		<?php $name = get_post_meta($post->ID, 'name', true); ?>
		<h3 class="details"><?php echo $name; ?></h3>
		<?php $kunde = get_post_meta($post->ID, 'kunde', true); ?>
		<?php $umfang = get_post_meta($post->ID, 'umfang', true); ?>
		<?php $datum = get_post_meta($post->ID, 'datum', true); ?>
		<?php $beschreibung = get_post_meta($post->ID, 'beschreibung', true); ?>
		<?php $url = get_post_meta($post->ID, 'url', true); ?>
		<div class="p">
			<?php if($kunde !== '') { ?>
			<p><?php echo $kunde; ?></p>
			<h4>kunde</h4>
			<?php } ?>
			<?php if($umfang !== '') { ?>
			<p><?php echo $umfang; ?></p>
			<h4>umfang</h4>
			<?php } ?>
			<?php if($datum !== '') { ?>
			<p><?php echo $datum; ?></p>
			<h4>datum</h4>
			<?php } ?>
			<?php if($beschreibung !== '') { ?>
			<p><?php echo $beschreibung; ?></p>
			<h4>beschreibung</h4>
			<?php } ?>
			<?php if($url !== '') { ?>
			<p><a href="http://<?php echo $url; ?>"><?php echo $url; ?></a></p>
			<?php } ?>
		</div>
	</div>
	<?php endwhile; else: ?>
	<p>Keine Artikel vorhanden</p>
	<?php endif; ?>
	<div class="navigation" style="clear:both; float:left; width:600px; padding:40px 10px 0 10px;">
		<div class="alignleft" style="float:left;"><?php next_post_link('%link', '&laquo;  previous work', TRUE, '1 and 3 and 5 and 4 and 7 and 8'); ?></div>
		<div class="alignright" style="float:right; text-align:right;"><?php previous_post_link('%link', 'next work &raquo;', TRUE, '1 and 3 and 5 and 4 and 7 and 8'); ?></div>
	</div>
</div>
<?php get_footer(); ?>

Die Schnellansicht auf der Startseite

Auf der Startseite habe ich ja die schnell ansicht. Hier kommen dann die Thumb-Bilder zum Einsatz. Es werden zwanzig Arbeiten aus allen drei Kategorien gezogen. Das ganze sieht dann so aus (nur ein Teil des Startseiten Quelltextes):

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

<h2 class="latest">Latest Stuff</h2>
<ul class="latest">
<?php
	$my_query = new WP_Query();
	$my_query->query('cat=4,5,6&showposts=20&orderby=date');
	if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post();
	$myPosts .= $post->ID . ",";
?>
<?php $thumb = get_post_meta($post->ID, 'thumb', true); ?>
<?php $ordner = get_post_meta($post->ID, 'ordner', true); ?>
<?php $name = get_post_meta($post->ID, 'name', true); ?>
<li>
    <a class="tooltip" title="<?php echo $name; ?>" href="<?php the_permalink() ?>">
        <img src="<?php bloginfo('home'); ?>/wp-content/uploads/portfolio/<?php echo $ordner; ?>/thumb/<?php echo $thumb; ?>.jpg" alt="<?php the_title(); ?>" />
    </a>
</li>
<?php endwhile; endif; ?>
</ul>

Der Laptop Slider im Header

Oben im Header der Laptop wird ja auch automatisch und zufällig mit Inhalt gefüllt. Hier läuft das ganze wieder ähnlich ab. Dazu braucht man dann natürlich auch jQuery + innerfade plugin. Aber es sind auch andere Sachen möglich wie Slide etc. Hier wird sich nur aus der Kategorie 4 (Web) der Inhalt gezogen und zwar die Slide Bilder. Sind immer zehn Stück die zufällig ausgwählt werden. Quelltext für diesen Teil:

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

<div id="headslide">
    <div id="slider">
        <ul id="macbookpro">
        <?php
			global $myPosts;
			$myPosts = '';
        ?>
        <?php
			$my_query = new WP_Query();
			$my_query->query('cat=4&showposts=10&orderby=rand');
			if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post();
			 $myPosts .= $post->ID . ",";
        ?>
        <?php $slide = get_post_meta($post->ID, 'slide', true); ?>
        <li>
        	<a href="<?php the_permalink() ?>">
            	<img src="<?php bloginfo('home'); ?>/wp-content/uploads/portfolio/web/slide/<?php echo $slide; ?>.jpg" alt="<?php the_title(); ?>" />
            </a>
        </li>
        <?php endwhile; endif; ?>
        </ul>
    </div>
</div>

Auf gehts zum Befüllen der Bereiche

Hier benötigt man für einfacheres Arbeiten das Plugin: More-Fields. Dort kann man sich kleine Boxen zurecht basteln für die Custim Fields. Auf jeden Fall übersichtlicher als die Standardmethode von WordPress. Meine Box sieht so aus:

more-fields

In einem Artikel sieht das dann so aus:

more-fields-action

Soweit war es das im Grunde

Das Portfolio steht nun quasi. Klar ist das hier nicht eine Lösung die man 1:1 nutzen kann und soll. Es geht eher darum zu verstehen wie mein Portfolio aufgebaut ist. Ich habe versucht das ganze recht ausführlich zu machen. Ob alles dabei ist und auch verstanden wird kann ich nicht sagen da ich selten ein Tutorial in solch einem Umfang geschrieben habe. Bei Fragen dann einfach die Kommentarfunktion nutzen.

]]> http://www.davidhellmann.com/tutorials/tutorial-ein-portfolio-mit-wordpress-realisieren/663/feed/ 54 ★ WordPress Custom Fields, fantastisch!http://www.davidhellmann.com/tutorials/wordpress-custom-fields-fantastisch/491/ http://www.davidhellmann.com/tutorials/wordpress-custom-fields-fantastisch/491/#comments Tue, 06 Jan 2009 09:35:50 +0000 David Hellmann http://www.davidhellmann.com/?p=491 wordpress custom fieldsWordPress Custom Fields sind wirklich fantastisch! Hat man mit ihnen doch eine ganze andere Möglichkeit Projekte umzusetzen. Es verleiht dem ganzen die nötige Flexibiltät die man sich wünscht. Werte die in den Custom Fields gespeichert werden kann man nahezu überall ohne größere Probleme ausgeben lassen. Wie das ganze funktoniert will ich anhand meines Portfolio Bereichs näher erläutern. Dieser wird komplett mit Custom Fields umgesetzt, das eigentliche Eingabefeld bleibt leer.

Was sind diese Custom Fields überhaupt

Das sind einfache Eingabefelder die man einer Seite oder einem Artikel anhängen kann. Quasi Metainformationen zum Artikel. Das Prinzip ist denkbar einfach. Es gibt einen Schlüssel und diesem wird ein Wert zugewiesen. Ein einfaches Beispiel wäre dann also: Kunde > Kundenname. Der Schlüssel Kunde bekommt den Wert Kundenname. Zu finden ist das ganze unter dem normalen Eingabefeld und heisst entweder "Custom Fields" oder "Benutzerdefinierte Felder".

custom-fields-hinzufugen

Bevor man anfängt...

...sollte man sich Gedanken über den Aufbau machen damit man nicht wie ich zehn mal neu anfängt bzw. im Nachhinein dann viel ändern muss. Welche Werte möchte man später ausgeben lassen? Macht es Sinn das ein oder andere zusammenzufassen oder doch lieber für jedes ein einzelnes Custom Field anlegen. Bei mir war das speziell der Fall bei: "Umfang"... Sollte ich jetzt für jede Art der Arbeit ein eigenes Custom Field anlegen oder reicht es wenn ich das unter einem zusammenfasse? Mehr Möglichkeiten bieten sich auf jedenfall wenn man es einzeln macht. Hier muss man wie schon angesprochen einfach schauen was für einen die bessere Lösung ist.

So werden die Custom Fields ausgegeben

Schauen wir uns erst einmal an wie das ganze ausgegeben wird. Ich nehm hier das Beispiel wie ich es in meinem Portfolio verwendet habe. Ich lege mittels Custom Field den Ordner fest worum es sich handel (Web, Print, Apparel) und dann lege iich noch den Bildnamen fest. Mehr nicht, der Rest wird im Loop gemacht.

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

<!-- Wordpress Loop -->
<?php if (have_posts()): ?>
<?php while (have_posts()) : the_post(); ?>;
 
<!-- Hier kommt der Inhalt hin -->
<!-- Den Inhalt der Felder speichern wir in Variablen -->
 
<?php $ordner = get_post_meta(&post->ID, 'ordner', true); ?>
<?php $img01 = get_post_meta(&post->ID, 'img01', true); ?>
 
<!-- $ordner und $img01 sind die Variablennamen in diesen der Inhalt
gespeichert wird. das 'ordner' und 'img01' sind die Custom Field Namen
die wir später im Beitrag mit Inhalt füllen werden im nächsten Schritt
Fragen wir ab ob der Inhalt des NICHT Leer ist und wenn das der Fall ist
dann soll er etwas ausgeben -->;
 
<?php if($img01 !== '') { ?>
<p class="bild"><img src)"<?php bloginfo('home'); ?>/
wp-content/uploads/portfolio/<?php $ordner; ?>/<?php echo $img01; ?>.jpg"
alt="<?php the_title(); ?>" /></p>
<?php } ?>
 
<!-- Jetzt wird, falls das Custom Field "img01" ausgefüllt ist,
ein Bild angezeigt. Das Custom Field "ordner" sollte natürlich
auch richtig ausgefüllt sein damit der Pfad zum Bild später stimmt.
Jetzt muss nur noch der Loop geschlossen werden und das ganze ist fertig.
Natürlich kann man das ganze noch mit anderen Sachen ergänzen
aber da soll hier nicht näher drauf eingegangen werden. -->;
 
<?php endwhile; else: ?>
<p>Falls keine Artikel vorhanden...</p>
<?php endif; ?>

So werden Custom Fields hinzugefügt

Custom Fields werden ganz einfach hinzugefügt. Das funktioniert bei Artikeln und auch bei Seiten. Man scrollt einfach wenn man einen Beitrag schreibt nach unten zur Box "Custom Fields" oder wer die deutsche Version hat: "Benutzerdefinierte Felder". Dort schreibt man bei Name einfach den gewünschen Feldname rein. Sollte man schon mal einen Beitrag verfasst haben und Custom Fields genutzt haben kann man hier auch per Drop Down Namen auswählen. Wenn man sich für einen Namen entschieden hat bekommt dieser einen Wert. In unserem Beispiel ist das "img01" als Name und "Bildname" der Wert. Ist alles richtig klickt man auf hinzufügen und das Custom Field wurde gespeichert. Man kann so viele anlegen wie man möchte bzw. so viele wie man benötigt. Man sollte sich vorher gedanken machen was wirklich gebraucht wird.

customfield-add

Ein vorhandenes Custom Field kann natürlich auch bearbeitet werden. Dazu geht ihr einfach in den Beitrag wo etwas bearbeitet werden soll und scrollt wieder zur Box mit den Custom Fields. Dort seht ihr dann die schon gespeicherten und könnt diese einfach ändern und klickt anschließend auf aktualisieren.

customfield-edit

Plugins um das ganze etwas einfacher zu machen

Ich nutze das Plugin "More-Fields" was mir die Arbeit deutlich vereinfacht. Es soll hier keine Beschreibung des Plugins werden. Soviel sei aber gesagt. Man kann damit schön Sets erstellen für Custom Fields welche man dann beim schreiben einfach mit ausfüllen kann. Problem gibt es hier nur mit den WordPress Post Revisions die abgeschaltet werden müssen sonst schreibt er bei jedem Speichern die Custom Fields doppelt. Das ganze macht man einfach indem man eine kleine Zeile in die config.php schreibt:
define('WP_POST_REVISIONS', False);

Sollte es Fragen geben dann fleißig in den Kommentaren posten.

]]> http://www.davidhellmann.com/tutorials/wordpress-custom-fields-fantastisch/491/feed/ 68 ★ Fortgeschrittenes CSS Menühttp://www.davidhellmann.com/tutorials/fortgeschrittenes-css-menue/465/ http://www.davidhellmann.com/tutorials/fortgeschrittenes-css-menue/465/#comments Wed, 12 Nov 2008 23:10:47 +0000 David Hellmann http://www.davidhellmann.com/?p=465 Ein CSS Menü ist ja nun nicht so der Fortschritt aber das ganze mittels einer einzelnen Grafik zu lösen ist schon etwas anspruchsvoller. Wo wir auch schon beim Thema wären, es geht darum eine Navigation zu bauen wo nur eine Grafik benötigt wird diese aber einen Normalzustand, einen Hoverzustand und einen Aktivzustand hat. Wer das alles schon kann der kann hat Glück gehabt, alle anderen könnten es sich ja mal anschauen da es eine schöne Methode ist.

LIVE DEMO DOWNLOAD

Die Navigations Grafik

Diese hier ist nicht transparent, es soll hier nur verdeutlicht werden wie die Grafik aussieht.

Der HTML Aufbau der Navigation

Ein Recht simpler Aufbau hier. Eine Liste mit fünf Listenpunkten die die jeweiligen Navigationspunkte darstellen. Jeder hat eine eigene "klasse" (man könnte auch ID's nutzen) und wenn man auf der jeweiligen Seite ist wird der klasse eine zweite zugewiesen die angibt das der Aktivstatus abgerufen werden soll. Der Rest ist einfach der Link und der Text der zwischen dem Link-Tag steht wird nicht angezeigt (kommen wir noch im CSS Teil drauf zu sprechen).

1
2
3
4
5
6
7

<ul id="main-navi">
	<li><a class="start start-akt" href="index.html">Start</a></li>
	<li><a class="portfolio" href="index.html">Portfolio</a></li>
	<li><a class="blog" href="index.html">Blog</a></li>
	<li><a class="about" href="index.html">About</a></li>
	<li><a class="contact" href="index.html">Contact</a></li>
</ul>

Die CSS Formatierung der Navigation

Hier gibt es schon ein wenig mehr zu schreiben aber wenn man es sicher genauer anschaut sieht man das es im Grunde immer das gleiche ist und sich nur immer ein paar Werte ändern. Aber geschrieben muss es trotzdem werden. Sollte im Grunde alles selbsterklärend sein. Zwei Sachen die vielleicht nicht jedem klar sind habe ich mit Kommentaren versehen.

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

ul#main-navi {
	width:650px;
	height:429px;
	float:left;
	padding:79px 0 0 340px;
	background:url(../images/head.jpg) left top no-repeat;
}
 
ul#main-navi li {
	float:left;
	margin:0 10px 0 0;
}
 
ul#main-navi li a.start , ul#main-navi li a.portfolio ,
ul#main-navi li a.blog , ul#main-navi li a.about , ul#main-navi li a.contact {
	display:block;
	height:60px;
	text-indent:-9999px;
	/* verschiebt den nach links das er nicht sichtbar aber dennoch da ist */
}
 
ul#main-navi li a.start {
	background:url(../images/main-navi.png) -20px 0 no-repeat;
	/* erster Wert ist von Links und der zweite Wert von oben gerechnet */
	width:91px;
}
 
ul#main-navi li a.start:hover {
	background-position:-20px -60px;
}
 
ul#main-navi li a.start-akt {
	background-position:-20px -120px;
}
 
ul#main-navi li a.portfolio {
	background:url(../images/main-navi.png) -119px 0 no-repeat;
	width:141px;
}
 
ul#main-navi li a.portfolio:hover {
	background-position:-119px -60px;
}
 
ul#main-navi li a.portfolio-akt {
	background-position:-119px -120px;
}
 
ul#main-navi li a.blog {
	background:url(../images/main-navi.png) -270px 0 no-repeat;
	width:103px;
}
 
ul#main-navi li a.blog:hover {
	background-position:-270px -60px;
}
 
ul#main-navi li a.blog-akt {
	background-position:-270px -120px;
}
 
ul#main-navi li a.about {
	background:url(../images/main-navi.png) -384px 0 no-repeat;
	width:101px;
}
 
ul#main-navi li a.about:hover {
	background-position:-384px -60px;
}
 
ul#main-navi li a.about-akt {
	background-position:-384px -120px;
}
 
ul#main-navi li a.contact {
	background:url(../images/main-navi.png) -496px 0 no-repeat;
	width:101px;
}
 
ul#main-navi li a.contact:hover {
	background-position:-496px -60px;
}
 
ul#main-navi li a.contact-akt {
	background-position:-496px -120px;
}

Vorteile dieser Methode

Ganz klar der, dass man nur eine Grafik verwenden muss und diese auch nur einmal geladen werden muss. Man hat keine hänger wenn man mit der Maus über das Menü geht da die Grafik ja schon beim ersten Laden der Seite mitgeladen wird und dann immer nur verschoben wird. Das ganze wird auch übersichtlicher da man nur noch eine Grafik hat die man bei Bedarf anpassen muss und nicht mehr ein oder zwei Hände voll Grafiken.

Nachteile dieser Methode

Wenn man es wirklich mal ändern muss das Menü dann muss man ein wenig am CSS basteln falls sich irgendwelche Größen geändert haben sollten. Sonst kann ich keine weiter feststellen. Wer welche kennt kann diese ja Lautstark in den Kommentaren preis geben.

Das Ergebnis könnt ihr nun anschauen bzw. downloaden

Vielleicht war es ja dem ein oder anderen Hilfreich...
LIVE DEMO DOWNLOAD

]]> http://www.davidhellmann.com/tutorials/fortgeschrittenes-css-menue/465/feed/ 17 ★ Image replacementhttp://www.davidhellmann.com/tutorials/image-replacement/126/ http://www.davidhellmann.com/tutorials/image-replacement/126/#comments Sat, 02 Aug 2008 11:00:06 +0000 David Hellmann http://dev.davidhellmann.com/kunden/dh/wordpress/?p=126 In Zeiten in denen Browser immernoch nur ein paar wenige Schriften unterstützen ist man doch des öfteren darauf angewiesen, das man gewisse Texte als Grafiken darstellen muss. Ein einfaches Beispiel könnte sein, wenn Headlines in der Hausschrift des Unternehmens dargestellt werden sollen. Aber auch rein ästhetische Gründe können hierbei eine Rolle spielen. Im Grunde scheint ja damit alles geklärt zu sein denkt man aber dem ist nicht so. Auf den ersten Blick schaut zwar alles bestens aus und es scheint auch zu funktionieren doch was ist mit den Leuten die Grafiken deaktiviert haben? Oder den Suchmaschinen, denen gefällt es sicher auch besser zwischen einem h2-Tag einen Text zu finden anstatt einer Grafik.

LIVE DEMO DOWNLOAD

Der HTML Aufbau

Hier der reine HTML Code den wir später mittels CSS formatieren werden und die Überschrift durch ein Bild ersetzen werden.

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

<div id="wrapper">
<h2 class="lorem">
Lorem ipsum
</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nullam commodo pharetra lacus. Suspendisse potenti. ...
</p>
<h2 class="ipsum">
Ipsum dolor sit
</h2>
<p>
Proin risus nisi, auctor non, gravida rhoncus, pellentesque
vitae, nisi. Nulla metus. ...
</p>
</div>

h2

Die Formatierung für den H2-Container in dem die Allgemeinen Sachen festgelegt werden die für jede Headline gleich sind.

1
2
3
4
5
6
7
8

h2 {
width:500px;
height:69px;
text-indent:-9999px;
float:left;
clear:both;
margin:40px 0 0 0;
}

h2.lorem

Die Formatierung für den H2-Container .lorem.

1
2
3

h2.lorem {
background:url(../images/lorem.png) no-repeat;
}

h2.ipsum

Die Formatierung für den H2-Container .ipsum.

1
2
3

h2.ipsum{
background:url(../images/ipsum.png) no-repeat;
}

Nachteile dieser Methode

Nachteil dieser Methode ist, dass man für jede headline eine class festlegen muss.

LIVE DEMO DOWNLOAD

]]> http://www.davidhellmann.com/tutorials/image-replacement/126/feed/ 0 ★ Linkrahmen entfernenhttp://www.davidhellmann.com/tutorials/linkrahmen-entfernen/67/ http://www.davidhellmann.com/tutorials/linkrahmen-entfernen/67/#comments Thu, 10 Apr 2008 11:00:19 +0000 David Hellmann http://dev.davidhellmann.com/kunden/dh/wordpress/?p=67 Wer kennt sie nicht, die unschönen Linkrahmen die kommen, wenn man einen Link anklickt. Schaut einfach nicht schön aus und im Grunde kann man ihn ganz schnell und einfach verschwinden lassen. Eine kleine Zeile im Stylesheet und es werden nie wieder Rahmen auf der eigenen Webseite angezeigt. Schade ist, dass man das nicht generell abschalten kann im Browser...

Linkrahmen entfernen

Diese Zeile einfach ganz oben mit ins Stylesheet schreiben.

1
2
3

a:focus {
	outline:none;
}
]]> http://www.davidhellmann.com/tutorials/linkrahmen-entfernen/67/feed/ 26