David Hellmann - Grafikdesign, Webdesign, Webentwicklung, HTML, CSS, Wordpress » 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. Sat, 13 Mar 2010 14:34:29 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Remember the Milk richtig nutzen http://www.davidhellmann.com/tutorials/remember-the-milk-richtig-nutzen/ http://www.davidhellmann.com/tutorials/remember-the-milk-richtig-nutzen/#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/feed/ 4 Tutorial – Ein Portfolio mit Wordpress realisieren http://www.davidhellmann.com/tutorials/tutorial-ein-portfolio-mit-wordpress-realisieren/ http://www.davidhellmann.com/tutorials/tutorial-ein-portfolio-mit-wordpress-realisieren/#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/feed/ 32 Wordpress Custom Fields, fantastisch! http://www.davidhellmann.com/tutorials/wordpress-custom-fields-fantastisch/ http://www.davidhellmann.com/tutorials/wordpress-custom-fields-fantastisch/#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/feed/ 31 Fortgeschrittenes CSS Menü http://www.davidhellmann.com/tutorials/fortgeschrittenes-css-menue/ http://www.davidhellmann.com/tutorials/fortgeschrittenes-css-menue/#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/feed/ 14 Image replacement http://www.davidhellmann.com/tutorials/image-replacement/ http://www.davidhellmann.com/tutorials/image-replacement/#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/feed/ 0 Linkrahmen entfernen http://www.davidhellmann.com/tutorials/linkrahmen-entfernen/ http://www.davidhellmann.com/tutorials/linkrahmen-entfernen/#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/feed/ 6 Transparente PNG im Internet Explorer 6 http://www.davidhellmann.com/tutorials/transparente-png-im-internet-explorer-6/ http://www.davidhellmann.com/tutorials/transparente-png-im-internet-explorer-6/#comments Wed, 09 Apr 2008 11:00:12 +0000 David Hellmann http://dev.davidhellmann.com/kunden/dh/wordpress/?p=91 Transprente PNG GrafikenWer kennt es nicht, man ist gerade voll bei der kreativen Arbeit in Photoshop und gestaltet wild drauf los. Irgendwann kommt der Zeitpunkt wo man mit seinem Ergebnis zufrieden ist und was fällt auf? Das fertige Design wird so nur funktionieren mit transparenten PNG24. Wie schon bekannt sein sollte haben die Macher vom Internet Explorer vor der Version 7 nicht all zu viel zeit daran verschwendet diese Feature einzubauen.

LIVE DEMO DOWNLOAD

Im klartext heisst das für den Entwickler: Mehrarbeit...
Da ich letztens vor genau diesem Problem stand habe ich Mr. Google bemüht und die ein oder andere Methode gefunden die dieses Problem lösen soll. Für mich war klar, dass die unkomplizierteste Lösung genommen wird. Hier das Ergebnis:

Die normale CSS Datei:

Die ie6.css ist nun zuständig dafür, dass der Internet Explorer, falls kleiner als Version 7, das transparente PNG in gewünschter Form darstellen kann.

1
2
3
4
5
6
7
8
9
10

...
#trans-box {
	width:600px;
	padding:50px;
	margin:0 auto;
	text-align:left;
	background:url(../grafiken/trans_dark.png) repeat;
	border:5px solid #ddd;
}
...

Die angepasste CSS Datei für den Internet Explorer 6:

In diesem Falle die style.css, hier einfach ganz normal die CSS Anweisungen reinschreiben für das Transparente PNG. 

1
2
3
4
5
6
7

...
#trans-box {
	background-image:none;
	background:filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
	(src='grafiken/layout/trans_dark.png', sizingMethod='scale');
}
...

Browserweiche

Nun muss noch abgefragt werden wann diese ie6.css aufgerufen werden soll. In diesem Fall wenn der Benutzer eine Version des Internet Explorers benutzt die kleiner als die Version 7 ist. Das ganze schaut dann so aus:

1
2
3
4
5
6
7
8
9
10

...
<style type="text/css">
<!--
	@import url("css/style.css");   
-->
</style>
<!--[if lte IE 7]>
	<link href="css/ie6.css" rel="stylesheet" type="text/css">
<![endif]-->
</head>

HTML Teil

Jetzt muss das ganze nur noch dargestellt werden. Das könnte dann in etwa so aussehen. Hier ist nur der Teil gezeigt der die Box betrifft:

1
2
3
4
5
6
7
8

<body>
<div id="trans-box">
	<h2>Tranparente Box</h2>
	<p>
		hier der text...
	</p>
</div>
</body>

Das ganze in aktion könnt Ihr hier sehen:

LIVE DEMO DOWNLOAD

]]> http://www.davidhellmann.com/tutorials/transparente-png-im-internet-explorer-6/feed/ 6