Soweit ich es verstanden habe, wird die Infrastruktur zur Anbindung der Gemeinde durch ein ‘dickeres Kabel’ durch die LEW TelNet bereitgestellt und der Internet-Bürger kann seinen Anschluss dann bei M-net bestellen, welche die Versorgung der Häuser mit Breitband Internet übernimmt. Aktuelle Infos gibt es auch auf der Homepage von Eresing. Ich bin mal gespannt auf die reale Umsetzung…

Keine ähnlichen Beiträge

Featured Posts automatisch rotieren lassen

Folgende Schritte sind notwendig um die Featured Posts automatisch rotieren zu lassen:

1. Die Javascript-Datei showcase.js ersetzen
2. Die Datei showcase.php anpassen

Die Javascript-Datei showcase.js ersetzen

Damit die Featured Articles nun automatisch rotieren können (auto-slide), muss die Javascript-Datei showcase.js des Twenty Eleven Themes durch eine neue Version ersetzt werden. Dazu den Ordner “js” im Child Theme Ordner anlegen: /wp-content/themes/dein_child_theme/js/ und folgende Datei als “showcase.js” anlegen.

(function($) {
$(document).ready( function() {
$('.feature-slider a').click(function(e) {
$('.featured-posts section.featured-post').css({
opacity: 0,
visibility: 'hidden'
});
$(this.hash).css({
opacity: 1,
visibility: 'visible'
});
$('.feature-slider a').removeClass('active');
$(this).addClass('active');
e.preventDefault();
});
});
var current=1;
function autoAdvance(){
if(current==-1) return false;
$('.feature-slider a').eq(current%$('.feature-slider a').length).trigger('click',[true]);    // [true] will be passed as the keepScroll parameter of the click function on line 28
current++;
}
// The number of seconds that the slider will auto-advance in:
var changeEvery = 7;
var itvl = setInterval(function(){autoAdvance()},changeEvery*1000);
})(jQuery);

Diese Datei fand ich hier, die Hintergrundinfos zu dieser Datei gibt es im Supportforum von WordPress.

In dieser Datei kann man nun die zeitliche Verzögerung bis zum Wechsel der Featured Posts anpassen. Dazu einfach den Wert in Zeile 24 den eigenen Wünschen anpassen, dieser Wert entspricht Sekunden.

Die Datei showcase.php anpassen

Damit dann auch die showcase.js aus dem Child Theme benutzt wird, muss man noch eine kleine Anpassung an der showcase.php Datei des Twenty Eleven Themes vornehmen. Dazu die sowcase.php aus dem Twenty Eleven Theme Ordner in das eigene Child Theme kopieren und dort diesen Code aus Zeile 18

wp_enqueue_script( 'twentyeleven-showcase', get_template_directory_uri() . '/js/showcase.js', array( 'jquery' ), '2011-04-28' );

durch diesen ersetzen:

wp_enqueue_script( 'twentyeleven-showcase', get_stylesheet_directory_uri() . '/js/showcase.js', array( 'jquery' ), '2011-04-28' );

Die Übergänge der Featured Posts anpassen

Die Übergänge zwischen den einzelnen Featured Posts, der Slide-Effekt, lassen sich durch ein paar wenige Anpassungen am Stylesheet des Chilld Themes vornehmen. CSS bietet ja wunderbare Möglichkeiten.

Im original Stylesheet aus dem Twenty Eleven Theme sieht das so aus (Zeile 1509):

.featured-posts section.featured-post {
-webkit-transition-duration: 200ms;
-webkit-transition-property: opacity, visibility;
-webkit-transition-timing-function: ease;
-moz-transition-duration: 200ms;
-moz-transition-property: opacity, visibility;
-moz-transition-timing-function: ease;
}

Diese Style-Anweisung kann man nun einfach in sein eigenes Stylesheet im Child-Theme kopieren und seinen eigenen Anforderungen anpassen. Eine sehr gute und ausführliche Beschreibung der Möglichkeiten der CSS-Eigenschaft Transition inkl. Beispielen findet man z.B.im CSS – Wiki. Meine Anpassung sieht so aus:

/* Slidetime für Featured Post Animation anpassen */
.featured-posts section.featured-post {
/* Browser spezific: Chrome and Safari */
-webkit-transition-duration: 1000ms;
-webkit-transition-property: opacity, visibility;
-webkit-transition-timing-function: ease-in-out;
/* Browser spezific: Firefox */
-moz-transition-duration: 1000ms;
-moz-transition-property: opacity, visibility;
-moz-transition-timing-function: ease-in-out;
/* Browser spezific: Opera */
-o-transition-duration: 1000ms;
-o-transition-property: opacity, visibility;
-o-transition-timing-function: ease-in-out;
/* Browser spezific: IE from Version 10 */
-ms-transition-duration: 1000ms;
-ms-transition-property: opacity, visibility;
-ms-transition-timing-function: ease-in-out;
/* Standard CSS3 */
transition-duration: 1000ms;
transition-property: opacity, visibility;
transition-timing-function: ease-in-out;
}

Anpassungen am Design

Nachdem die Featured Posts nun automatisch mit Slide-Effect rotieren, kommen noch ein paar kleinere Anpassungen am Stylesheet des Child-Themes. Damit die Änderungen bzw. Anpassungen deutlich werden, hier nochmal ein Vergleich des Originaldesigns von Twenty Eleven (Screenshot von http://twentyelevendemo.wordpress.com/showcase/) mit dem von meinem Baublog.

Der Bereich Featured Posts im original Twenty Eleven Style

Der Bereich Featured Posts auf baublog.matthesius.de

Wie leicht zu erkennen ist, habe ich ein paar Anpassungen vorgenommen:

1. Eine Hintergrundfarbe für den Bereich der Featuerd Post gewählt.
2. Den Rand am unteren Ende entfernt.
3. Die Navigationsbuttons des Sliders in Form und Farbe angepasst.
4. Die Schriftgröße der Überschrift im Featured Post anpassen.

Alle diese Anpassungen kann man einfach im Stylesheet des Child-Themes vornehmen, indem man damit einfach die Style Anweisungen aus dem Eltern Theme Twenty Eleven überschreibt. Im Einzelnen:

1. Eine Hintergrundfarbe für den Bereich der Featuerd Post gewählt.

/* Hintergrundfarbe Featured Post */
.featured-posts section.featured-post {
background-color: #fae5d3;
}

2. Den Rand am unteren Ende entfernt.

/* Border Featured Post entfernen */
.featured-posts {
border: 0;
}

3. Die Navigationsbuttons des Sliders in Form und Farbe angepasst.

/* Form der Buttons für den Slider anpassen */
.feature-slider a {
border-radius: 1px 1px 1px 1px;
}

/* Farbe der Buttons für den Slider anpassen */
.feature-slider a.active {
background: #E0721B;
opacity: 1;
}

4. Die Schriftgröße der Überschrift im Featured Post anpassen

/* Anpassung Schriftgröße Überschrift im Featured Post Slider */
.featured-post h2.entry-title {
font-size: 18px;
}

Zusammenfassung

Dach Teil 3 dieser kleinen Artikel-Serie sind wir nun am Ziel: Das erstellte Child-Theme zum Twenty Eleven Theme stellt mit dem Showcase Template als Startseite Sticky Posts im Bereich Featured Articles an, slided automatisch durch die verschiedenen Post und das ganze sieht auch noch gut aus. Fertig.

← Zurück zu Teil 2

← Zurück zu Teil 1

Ähnliche Beiträge:

1. WordPress und Twenty Eleven Theme mit Showcase – Teil 2
2. WordPress und Twenty Eleven Theme mit Showcase – Teil 1
3. Außenansichten Teil 1

1. Showcase Seite anlegen

Zunächst muss man entweder eine neue Seite anlegen und dieser Seite unter “Attribute” das Template “Showcase Template” zuweisen. Oder man ändert alternativ an einer bestehenden Seite das Template auf “Showcase”.

Das Showcase Template wählen

Soll diese Showcase-Seite später dann die Startseite für das Blog werden, muss man unter Einstellungen > Lesen im Abschnitt Startseite die Auswahl “Eine statische Seite” treffen und die entsprechende Seite über das Pull Down auswählen.

Eine statische Seite als Startseite wählen

2. Artikel im Bereich “Featured Post” anzeigen

Dies ist der Bereich “Featured Post” des Showcase Template:

Der Bereich Features Posts im Showcase Template

Damit nun Artikel im Bereich “Featured Post” oder in Deutsch “Herausgehobene Artikel” des Showcase Templates angezeigt werden, müssen die Artikel als “Sticky Post” oder “Auf Startseite halten” markiert werden. Dazu einfach im “Artikel bearbeiten” Bildschirm im Modul “Veröffentlichen” im Abschnitt “Sichtbarkeit” das Häkchen bei “Diesen Artikel auf der Startseite halten” aktivieren und mit “OK” bestätigen.

Artikel auf Startseite halten (Sticky Post)

3. Bild für den Featured Article auswählen

Das Showcase Template von Twenty Eleven stellt drei wunderbare Möglichkeiten zur Verfügung, die Sticky Posts darzustellen: nur Text,  ein Bild auf der rechten Seite mit Titel und Text auf der linken Seite oder auch ein Bild über die ganze Breite des Templates mit dem Titel des Artikels ins Bild eingeblendet. Das sieht dann so aus:

Featured Article Darstellung nur Text

Featured Article Darstellung mit Text und Bild

Featured Article mit breitem Bild (1000 x 288px)

Nach den oben beschriebenen Schritten wird der Sticky Posts nur mit Text im Bereich Featured Article angezeigt. Wenn der Sticky Post auch mit einem Bild angezeigt werden soll, muss ein “Artikelbild” oder “Featured Picture” im “Artikel bearbeiten” Fenster im Modul “Artikelbild” ausgewählt werden.

Ein Artikelbild auswählen

Das Artikelbild anzeigen

Das Bild als Artikelbild wählen

Das Artikelbild ist eingefügt

Die Artikelbilder müssen bestimmte Dimensionen haben, damit sie entsprechend angezeigt werden. Für eine Darstellung über die ganze Breite muss das Bild die Dimension 1000 x 288px haben. Für eine Darstellung als Bild mit Text muss das Bild über eine Höhe von 288px verfügen und eine breite von max. 500px haben. Bei mir setzte ich Bilder in der Dimension 484 x 288px ein, damit passen sie prima in das Template. Da ich den linken Bereich im Featured Post noch farblich hervorgehoben habe, kam es mir darauf an, dass die Bilder exakt in das Template passen, daher die pixelgenauen Bilder.

4. Zusammenfassung

Nach diesem Teil ist Showcase Template im Einsatz und ausgewählte Artikel erscheinen bereits im Bereich “Featured Article” oder “Herausgehobene Artikel”. Noch muss man manuell durch die verschiedenen Featured Posts klicken und die farbliche Hervorhebung des Bereiches Featured Posts fehlt noch. Beide Punkte beschreibe ich dann in Teil 3 dieser kleinen Serie.

← Zurück zu Teil 1

→ Weiter zu Teil 3

Ähnliche Beiträge:

1. WordPress und Twenty Eleven Theme mit Showcase – Teil 1
2. Außenansichten Teil 1
3. Innenansichten Rohbau Teil 2

Als Blogsystem kommt das sehr bekannte und verbreitete Blogsystem WordPress zum Einsatz. Was mit WordPress so alles möglich ist und wofür WordPress sonst noch genutzt wird kann man sich zum Beispiel im WordPress Showcase ansehen. Konkret nutze ich die deutsche Version 3.3.2 von WordPress, zur Verfügung gestellt von WordPress Deutschland. Diese Version enthält bereits alle Sprachdateien in Deutsch, eine Anpassung der englischsprachigen Version mit Sprachdateien entfällt also.

Um die Ausgabe der Inhalte im Frontend auch ansehnlich zu gestalten nutze ich das WordPress Standardtheme “Twenty Eleven“. Dieses Theme kommt mit einer sehr aufgeräumten Struktur und unterstützt sogenannte “Featured Artikles”. Diese hervorgehobenen Artikel lassen sich als “Sticky Post” über die Seitenformatvorlage “Showcase” wunderbar darstellen. Zum Standardtheme Twenty Eleven gibt es eine Demoseite, wo die angesprochenen Merkmale vorgestellt und erklärt werden.

Leider hat Twenty eleven ein paar Einschränkungen, welche mit nicht so sehr gefielen. Als Beispiel sei die Ansicht der Single Posts ohne Seitenspalten genannt. Diese Einschränkungen lassen sich mit der Erweiterung “Twenty Eleven Theme Extension” jedoch elegant umgehen. Twenty Eleven Theme Extension funktioniert auch prima mit einem Child Theme zu Twenty Eleven.

Darüber hinaus wollte ich an Twenty Eleven noch weitere Anpassungen vornehmen. Als Beispiel sei der Slide-Effekt mit den “Featured Artikles” durch die “Showcase” Formatvorlage auf der Startseite von BauBlog sowie ein paar Anpassungen am CSS genannt.  Diese Anpassungen habe ich über ein sogenanntes Child Theme umgesetzt. Der Codex von WordPress fordert, dass man das bestehende Theme Twenty Eleven nicht direkt verändert, sondern mit Hilfe eines sogenannten “Child Themes” das “Parent Theme” Twenty Eleven eben für seine Zwecke beerbt und anpasst. Wie diese Erstellung eines Child Themes nun funktioniert ist auf den Codex Seiten von WordPress ausführlich beschrieben.

Zur Verwaltung und Anzeige der Bilder nutze ich das Plugin NextGen Gallery. Eine Demoseite über NextGen Gallery gibt einen Eindruck über die umfangreichen Möglichkeiten des Plugins. Dazu gibt es zu diesem Plugin noch jede Menge Erweiterungen um bei Bedarf weitere Funktionen hinzuzufügen.

Die Funktionen Statistik, Facebook like, Google +, Kurze Links usw. werden durch das WordPress Jetpack Plugin realisiert. Weitere Infos zum Jetpack gibt es auf der Jetpack Homepage.

Die ersten Schritte sind also:

1. WordPress ist installiert und betriebsbereit.
2. Das Standardtheme Twenty Eleven ist unter “Design” verfügbar
3. Ein eigenes Child Theme zu Twenty Eleven ist erstellt und aktiviert
4. Das Plugin “Twenty Eleven Theme Extension” ist installiert und aktiviert (optional)
5. Das Plugin “NextGen Gallery” ist installiert und aktiviert (optional)
6. Das Plugin “WordPress Jetpack” ist installiert und aktiviert (optional)

Diese Schritte sollten soweit klar und einfach sein. Falls nicht einfach mal die WordPress Dokumentation und WordPress Support Foren durchstöbern.

Alle weiteren Anpassungen dann im nächsten Artikel. → Weiter zu Teil 2.

Ähnliche Beiträge:

1. Außenansichten Teil 1
2. Innenansichten Rohbau Teil 2

Anschaffung und Einbau des zentralen Wasserenthärters (“AQA perla Duplex-Weichwasseranlage nach Ionenaustauscherprinzip“) hat sich wirklich gelohnt. Trotz des sehr harten, kalkhaltigen Wassers hier in unserer Region haben wir keine Probleme mit Kalk. Wasserkocher, Kaffeemaschine und Dusche machen absolut keine Probleme und das Wasser beim Duschen ist sensationell weich. Eine lohnende Investition.

Ähnliche Beiträge:

1. Einbau zentraler Wasserenthärter
2. Fundament für unser Wohnzimmer

Diashow Hausbau

Eine Diashow über die Entstehung unseres Hauses

57 Fotos

Keine ähnlichen Beiträge

Ähnliche Beiträge:

1. Letzte Lage Außenputz an der Fasade
2. Feierabendstimmung auf der Baustelle
3. So könnte unser Kaminofen aussehen

Jetzt im Winter habe ich in der Filterbox von Paul einen Filter der Partikelfilterklasse G4 eingesetzt. Auch die Gerätefilter sind G4. Für das Frühjahr, wenn die Pollen zu fliegen beginnen, habe ich für die Filterbox noch Filter der Partikelfilterklasse F7 mitbestellt. Die Filter hatte ich online bei Luftladen bestellt.

[Zeige als Diashow]

[Mit PicLens anzeigen]

Ähnliche Beiträge:

1. Der Winter ist da! Erfahrungen mit der Lüftungsanlage.
2. Lüftungsanlage fast fertig
3. Einbau zentrale Lüftungsanlage

Bei 0 Grad Außentemperatur kommt die durch das Erdreich angesaugte Luft bereits mit 8 Grad im Keller an und der integrierte Wärmetauscher hebt die Temperatur der Frischluft auf 19 Grad an. Im Gegenzug wird im Wärmetauscher die Abluft aus dem Haus von 21 Grad Raumtemperatur auf 13 Grad abgekühlt bevor sie ins Freie geblasen wird. So bleibt die Luft im Haus den ganzen Tag frisch ohne auch nur ein Fenster öffnen zu müssen. Durchaus gewöhnungsbedürftig aber energieeffizient.

[Zeige als Diashow]

[Mit PicLens anzeigen]

Ähnliche Beiträge:

1. Einbau zentrale Lüftungsanlage
2. Kaminofen angefeuert – der Winter kann kommen
3. Lüftungsanlage fast fertig

[Zeige als Diashow]

[Mit PicLens anzeigen]

Ähnliche Beiträge:

1. So könnte unser Kaminofen aussehen
2. Der Kaminofen wird eingebaut
3. Kamin und Geländer am OG montiert

[Zeige als Diashow]

[Mit PicLens anzeigen]

Keine ähnlichen Beiträge

[Zeige als Diashow]

[Mit PicLens anzeigen]

Ähnliche Beiträge:

1. Der Kaminofen wird eingebaut
2. Wärmepumpenheizung wird eingebaut
3. Die Erdgeschossdecke wird eingelegt

Ähnliche Beiträge:

1. Wärmepumpenheizung wird eingebaut
2. So könnte unser Kaminofen aussehen
3. Luft-Wasser Wärmepumpe läuft

[Zeige als Diashow]

[Mit PicLens anzeigen]

Keine ähnlichen Beiträge

[Zeige als Diashow]

[Mit PicLens anzeigen]

Ähnliche Beiträge:

1. Unser Haus ist fast fertig
2. Der Dachstuhl ist fast fertig
3. Werkpläne sind fertig!

Ähnliche Beiträge:

1. Blick in die Galerie – nun mit Geländer
2. Kamin Entwurf optimiert
3. Kamin immer noch nicht fertig

[Zeige als Diashow]

[Mit PicLens anzeigen]

Ähnliche Beiträge:

1. Der Dachstuhl ist fast fertig
2. Innenausbau fast fertig
3. Lüftungsanlage fast fertig

[Zeige als Diashow]

[Mit PicLens anzeigen]

Ähnliche Beiträge:

1. Der Außenputz kommt an die Fasade
2. Vorbereitung für den Außenputz

[Zeige als Diashow]

[Mit PicLens anzeigen]

Ähnliche Beiträge:

1. Vorbereitung für den Außenputz
2. Der Estrich kommt pünktlich
3. Neue Ansichten mit Garage und Rolläden

[Zeige als Diashow]

[Mit PicLens anzeigen]

Keine ähnlichen Beiträge