do you need design? Get in touch! • Subscribe the RSS Feed or follow me on Twitter

Tutorial – Ein Portfolio mit WordPress realisieren

31. August 2009 — Tutorials — 33 Kommentare

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.

Tags: , , ,
Gelesen: 4881
Heute: 2
Zuletzt: 30. July 2010

31 Kommentare • Eintrag schreiben

  1. 31. August 2009

    #1 Fabian

    Danke, war sehr interessant deinen Lösungsansatz zu sehen. War vor ein paar Wochen auch am überlegen, wie ich mein Portfolio relativ dynamisch mit WordPress umsetze. Da hat mir schon dein Artikel über die Custom Fields sehr geholfen.

    Im Grunde ist dies mit meiner Version vergleichbar. Zwei Sachen sind mir dabei aufgefallen. Zum einen nutze ich Seiten für die Darstellung und zum anderen ist mein Anzahl von Bildern nicht begrenzt. Es würde beispielsweise reichen ein Custom Field für “img” anzulegen und dieses mehrfach bei einem Artikel dann zu benutzen. Beim Abfragen müsste dann ein Array ausgelesen werden.

    Später werde ich noch das More-Fields-Plugin ausprobieren.

    Gruß



    ""zitieren"

  2. 31. August 2009

    #2 David Hellmann

    Ja das mit dem array wäre sicher eine möglichkeit. Ich kam bisher mit den 4 Bildern hin. Du meinst ich schreib dann in einem feld: bild1, bild2, bild3 … etc. und lasse das dann auslesen?

    Warum ich es mit Artikeln gemacht habe weiss ich gar nicht mehr. Ich glaube wegeen der Kategorien da das einfacher war. Aber mit Seiten wird es ähnlich funktionieren.



    ""zitieren"

  3. 31. August 2009

    #3 Fabian

    Der Vorteil von Artikeln ist auf jeden Fall, dass man es auch gleich über den Feed mitbekommt, wenn es etwas neues gibt. Bei den Seiten kann ich im Backend ein Template auswählen, das sparst du dir ja auch.

    Das mit den Bildern habe ich so gemeint: Du legst ein Custom Field (image) an und nutzt dieses mehrmals. Also nicht etwas mit Komma trennen, sondern dass es mehrere image gibt mit verschiedenen Werten.

    Bei der get_post_meta-Funktion gibt der letzte Wert an ob man das ganze in einem Array zurückbekommen möchte (false).



    ""zitieren"

  4. 31. August 2009

    #4 David Hellmann

    Ah ok. Klingt auch interessant. Dann müsste man in der More-Fields Box einach mehrmals das gleiche Feld anlegen. Wäre natürlich eine alternative.

    Zu den Artikeln. An die Vorteile die du hier ansprichst habe ich beim schreiben gar nicht gedacht :) Aber ich denke sie sind nicht von der Hand zu weisen.



    ""zitieren"

  5. 31. August 2009

    #5 Mike

    Super, danke für diese Erklärung! :)



    ""zitieren"

  6. 01. September 2009

    #6 Florenz

    Sind zwar jetzt keine neue Infos für mich, aber sehr gut geschrieben, und einige Sachen kannte ich bislang hier auch noch nicht.
    Vorallem das Custom Field Plugin war mir neu.
    Mehr davon!



    ""zitieren"

  7. 02. September 2009

    #7 Heiko

    Sehr geil David,

    Jetzt machste noch ein schönes Tut wie man sein Design in HTML/CSS umwandelt dann bist als Referenz etabliert :)

    Grüße



    ""zitieren"

  8. 02. September 2009

    #8 David Hellmann

    Das mache ich glaube zu “dreckig” :D Aber ich werde mal drüber nachdenken, hehe.



    ""zitieren"

  9. 02. September 2009

    #9 Holger

    Hi David,

    super geschrieben! Ich überlege auch grad wie ich ein Portfolio für meine neue Seite mit WordPress aufbauen könnte und da sind deine Überlegungen und Ansätze eine prima Hilfe!

    Vielen Dank!



    ""zitieren"

  10. 02. September 2009

    #10 MikE

    Ja, das mit der Designumsetzung in HTML/CSS würd mich auch sehr interessieren :)



    ""zitieren"

  11. 02. September 2009

    #11 David Hellmann

    OK, dann frage ich mal anders. Was stellt ihr euch denn da vor bzw. was wollt ihr wissen? :) Habt ihr irgendwas bestimmtes im Kopf oder geht es generell darum?



    ""zitieren"

  12. 03. September 2009

    #12 MikE

    Prinzipiell würd mich interessieren wie man ein Design, das man in Photoshop/GIMP/usw. gebastelt hat, dann mit HTML und CSS umsetzt. :)



    ""zitieren"

  13. 03. September 2009

    #13 MikE

    Nachtrag zum obigen Kommentar:

    Interessant wäre natürlich auch noch wie das ganze dann mit WordPress laufen könnte ;)



    ""zitieren"

  14. 03. September 2009

    #14 David Hellmann

    OK, ich werde mir das mal durch den Kopf gehen lassen.



    ""zitieren"

  15. 09. September 2009

    #15 Alex

    Hallo :)

    Das Tutorial ist echt gut geschrieben, danke!

    MfG



    ""zitieren"

  16. 11. September 2009

    #16 Philipp E

    Echt sehr hilfreiches Tutorial. Ich danke dir David. Bisher habe ich immer nur von Custom Fields gelesen, aber deren Sinn hinterfragt. So werden nun meine Fragen beantwortet und es eröffnet mir ganz neue Möglichkeiten :)



    ""zitieren"

  17. 11. September 2009

    #17 Philipp E

    Ich gehe auch davon aus, dass du die integrierte Mediathek von WordPress nicht mit nutzt?



    ""zitieren"

  18. 11. September 2009

    #18 David Hellmann

    Für das Portfolio an sich nicht, nein. Ich wollte die Struktur etc. selber in der Hand haben um das auch vielleicht mal woanders einsetzen zu können. Man kann ja nie wissen :)

    Und es ist ja nicht so das problem denn FTP hat man ja überall mal schnell zur hand um die sachen hochzuladen.

    aber vielleicht gibt es hier auch noch die masterlösung die das ganze voll automatisiert macht. wer weiss :)



    ""zitieren"

  19. 16. September 2009

    #19 denis

    any chance to get this tut in English?



    ""zitieren"

  20. 17. September 2009

    #20 David Hellmann

    @denis

    good question :) but you can put the text into the google translator :)



    ""zitieren"

  21. 14. Oktober 2009

    #21 luis

    Sehr gutes Tutorial. hat mir sehr weitergeholfen. vielleicht wäre es noch ganz gut zu erkären, wie du die anderen templates (web.php, print.php…) eingebunden hast.



    ""zitieren"

  22. 14. Oktober 2009

    #22 David Hellmann

    Zitat luis ↑:

    Sehr gutes Tutorial. hat mir sehr weitergeholfen. vielleicht wäre es noch ganz gut zu erkären, wie du die anderen templates (web.php, print.php…) eingebunden hast.

    Da gibts eigentlich nicht viel zu sagen. Die web.php, print.php etc. sind einfach nur Templates wo dann im Backend Seiten erstellt werden die dann die jeweiligen Templates zugewiesen bekommen.

    Also Die Seite Web nutzt die Vorlage Web und so weiter :)

    War es das was du wissen wolltest oder hab ich was falsch verstanden?



    ""zitieren"

  23. 18. Oktober 2009

    #23 luis

    Zitat David Hellmann ↑:

    Zitat luis ↑:
    die dann die jeweiligen Templates zugewiesen bekommen.

    Also Die Seite Web nutzt die Vorlage Web und so weiter :)

    klar. hätte ich mir ja auch selber denken können. werde in zukunft versuchen mehr nachzudenken. :D
    lg luis



    ""zitieren"

  24. 07. November 2009

    #24 webdesign grafik

    hilfreiche seite, obwohl ich die scgnipsel irgendwie nicht hin bekomme… werde mal weiter schmöckern… thx schon mal und grüße



    ""zitieren"

  25. 08. November 2009

    #25 David Hellmann

    Zitat webdesign grafik ↑:

    hilfreiche seite, obwohl ich die scgnipsel irgendwie nicht hin bekomme… werde mal weiter schmöckern… thx schon mal und grüße

    Was passt denn nicht? :)



    ""zitieren"

  26. 15. Dezember 2009

    #26 ernst

    Hey,
    sehr hilfreich die Seite, dank der genauen Erklärungen einfach zu verstehen und umzusetzen.
    Danke
    Ernst von
    Webdesign München



    ""zitieren"

  27. 18. Dezember 2009

    #27 David Hellmann

    Zitat ernst ↑:

    Hey,
    sehr hilfreich die Seite, dank der genauen Erklärungen einfach zu verstehen und umzusetzen.
    Danke
    Ernst von
    Webdesign München

    Kein Problem, freut mich wenn es geholfen hat.



    ""zitieren"

  28. 29. Dezember 2009

    #28 leodom

    Super anleitung!!!
    bin durch zufall drauf gelandet, bei der suche nach einigen probs.

    vielen dank für den post und ein gesundes neues jahr
    grüße
    leo



    ""zitieren"

  29. 03. Januar 2010

    #29 Webdesign Trier

    Macht Spass hier zu lesen, war vor längerer Zeit schonmal da. Danke für die Tipps, werd sicher noch öfter kommen :) Gruß aus Trier!



    ""zitieren"

  30. 24. Januar 2010

    #30 Ex zurück

    Super Artikel! Hat mir geholfen, das endlich in WordPress zu realisieren.



    ""zitieren"

  31. 25. März 2010

    #31 Wolfgang

    Hallo David,

    wirklich ein sehr gelungenes und detailliertes Tutorial, danke dafür!

    Gruss

    Wolfgang



    ""zitieren"

2 Trackbacks

  1. (#32) • Pingback: Artikel und Links – 1st September - Florenz.co.uk (1. September 2009)
  2. (#32) • Pingback: Weekly News: Canon 7D, Feuerwerk, Wordpress Gallerie und vieles mehr. - mahomathome - the blog (7. September 2009)

Kommentar schreiben

close
Navigation: START • PORTFOLIO • BLOG • ABOUT • CONTACT
Soicial Sharing: Google Buzz - Buzz thisBuzz! Twitter - Tweet thisTweet! Facebook - Share this Link on FacebookShare! Delicious - add a Bookmark to deliciousBookmark! Digg - Digg this!Digg! Stumbleupon - Stumble this!Stumble!
Get in touch: Write a MailMail!
Subscribe RSS Feed: RSS Feed - Subscribe now!Subscribe!
scroll up