Es wurde mal wieder Zeit ein neues Portfolio zu bauen. Das alte war nicht mal mit CMS, musste also direkt im Code befüllt werden.

Jetzt strahlt hier WordPress, und das war für mich nicht leicht, da einige Funktionen erst auf WordPress umgeschrieben werden mussten. Hier die großen Hindernisse:

Portfolio Filter

Eine sehr schöne Funktion ist es, die Arbeiten dynamisch filtern zu können. Im alten Design waren die Werke in Bootstrap Tabs angeordnet, jetzt sollte etwas schickeres her. Der Aufbau selbst kommt von MixItUp, was eigentlich schon alle Grundfunktionen enthält. Für das alte Design hätte das schon gereicht, im neuen Design muss aber alles mit WordPress befüllbar sein. Zuerst muss klar sein, welche Kategorien es gibt. Dazu erstellt man in WordPress zunächst die Oberkategorie “Portfolio” und darunter dann die, die man haben möchte.

kategorie aufbau

Mit PHP kann ich mir dadurch die Kategorien des Portfolios ausgeben lassen:

<?php $childcats = get_categories(‘child_of=’ . $portfolio_id . ‘&hide_empty=1’); ?>

<li><span class=”filter active” data-filter=”
<?php foreach ($childcats as $childcat) {
if (cat_is_ancestor_of($ancestor, $childcat->cat_ID) == false){
echo $childcat->cat_name.‘ ‘;
$ancestor = $childcat->cat_ID;
}
}?>
“>All</span></li>

Dick markiert sind die wichtigsten Stellen. Mit diesem Abschnitt wird der erste Filter gebaut, der immer alle Artikel anzeigen soll. Analog dazu werden auch die übrigen Filter aus den einzelnen Kategorien erstellt:

<?php foreach ($childcats as $childcat) {
if (cat_is_ancestor_of($ancestor, $childcat->cat_ID) == false){
echo ‘<li><span class=”filter” data-filter=”‘.$childcat->cat_name.'”>’.$childcat->cat_name.'</span></li>’;
$ancestor = $childcat->cat_ID;
}
} ?>

Damit war das schwierigste für mich an der Baustelle geschafft. Zuletzt wurden dann im WordPress Loop die Artikel dieser Kategorien ausgegeben mitsamt einem Modal, um detailliertere Informationen zu erhalten, ohne auf eine neue Seite wechseln zu müssen.

Resume aka Timeline

Die “Timeline” war vom Design her kein großes Problem, nur wollte ich, dass die Artikel abwechselnd links und rechts angeordnet sind, in der Desktop Ansicht. Dazu wurde folgendes gemacht:

 if (have_posts()) :
$c = 0;
$extra_class = ”

Zu Beginn wird “c” auf 0 gesetzt.

$c++;
if( $c % 2 != 0) {
$extra_class = ‘timeline-inverted’;
} else {
$extra_class = ”; }

Immer wenn c dann ungerade ist, wird zu dem Artikel die “extra_class” “timeline-inverted” hinzugefügt, die beschreibt, dass der Artikel auf der anderen Seite sein soll.

Tweet-Einbettung

Die größte Herausforderung war es für mich Tweets einzubetten. Dabei wollte ich nämlich nicht auf das normaler Twitter Widget zurückgreifen müssen, das meiner Meinung nach hässlich aussieht. Gelöst wurde das ganze letztendlich, nach tagelangem Probieren und wieder Verwerfen, durch eine Mischung aus dem Quote Slider von bmoeller1 und dem Twitter Fetcher von Jason Mayes. Um das ganze noch  zu verfeinern kann man dieses Feed in den WordPress Optionen aktivieren und muss nicht mal in das Script, um die Twitter ID einzugeben. Wie man Daten von den WordPress Optionen in ein Script schicken kann wird hier und hier erklärt.

Navigation

Letzte Baustelle war das Menü. Ich habe mich schließlich für eines entschieden, das vom Inhalt aufgedeckt wird. Mit Klick auf dem Button wird es so freigelegt, klickt man in die nun abgedunkelte Fläche oder wieder auf den Button fährt der Hauptinhalt wieder drüber. Bietet auf jeden Fall viel Platz für Seiten, die man in WordPress in das Menü schiebt und es ist praktisch sowohl ein normales Menü, als auch eins zum Scrollen auf der Hauptseite zu haben.

Ergebnis

Der gesamte Inhalt ist über WordPress verwaltbar! Man muss kein einziges mal in den Code eingreifen, alles wird vom Theme übernommen. In den Optionen sind neben den einem Feld für die Twitter ID auch noch Felder, in denen man die eigene Facebook Seite, Twitter Account oder Mail-Adresse eintragen kann, welche dann ebenfalls in der Seite eingebunden werden.

Falls ihr weitere Fragen zu der Programmierung, oder auch zu meinen anderen Projekten hab, IMMER HER DAMIT! Ich bin eigentlich immer erreichbar über Facebook und Twitter und freue mich über jegliches Feedback und jeden Austausch.

Wenn euch das Theme zudem gefällt, zögert nicht mich deswegen anzuschreiben. Ich plane sowieso das Theme in der nächsten Zeit für sehr wenig Geld zum Verkauf anzubieten, vielleicht lässt sich das aber auch mit einer Pizza regeln :)

Für alle anderen Anfragen gilt das selbe: Ich bin immer auf der Suche nach neuen spannenden Projekten und vielleicht hat gerade einer von euch was spannendes am Laufen :)