Skip to main content

Child Theme – Sparkling

Anpassungen

In den Einstellungen des Themes habe ich den Header direkt auf Sticky gestellt, da ich für die meisten Artikel gern auf eine Seitenleiste verzichten würde. Stattdessen versuche ich das Topmenu so effektiv wie möglich aufzubauen und am Fuß der Seite weiterführende Links und ähnliche Artikel anzubieten. Der Header scheint mir allerdings etwas breit, zumindest sobald man scrollt. Entweder ich Ändere einfach seine Höhe, oder werde ihn beim Scrollen zu einer schmalen Leiste werden lassen, wie man es von solchen Topmenüs kennt.

Beitragsbild Breite

Was außerdem noch aussteht ist die Anpassung der Headerimages auf den fullwidth Beitragsseiten. Aktuell werden die Bilder auf 750xhöhe zugeschnitten, obwohl das Bild groß genug wäre und der Platz ausreicht um es über die gesamte Artikel Breite zu strecken. das upload script vom Theme legt auch Bilder in allen größen (unter anderem 1140 (?) px) an nur wird stattdessen das 750er geladen auch wenn postlayout auf fullwidth steht oder no sidebar -> gleiches Resultat.

Ein Blick auf den Code und die Commits im Git, verrät mir, dass eine Unterscheidung bei der Auswahl des featured-image (Beitragsbild) gemacht wird, je nachdem von welchem Template aus es eingebunden wird. Nur leider scheint diese If-Bedingung trotz Auswahl des fullwidth-Layouts als Standard oder als Spezielles Beitragslayout nicht erfüllt zu sein. Dadurch wird immer das 750px Breite Bild angezeigt (verringert man die Fensterbreite wird es entsprechend runterskaliert). Da ein 750px Bild zentriert über einem 1140px Container nicht gerade elegant aussieht, werde ich die Schleife einfach herausnehmen, sodass immer, dass 1140 Bild geladen wird. Da es entsprechend runterskaliert (aber nicht hoch) wird, ist dies höchstens ein Performanceverlust für Beiträge mit Seitenleiste, da ich aber keine hohen Besucherzahlen erwarte und hauptsächlich das Fullwidth-Layout nutze, kann ich damit bei einem Bild pro Seite leben, bis ich herausgefunden habe, warum der If-Case nicht eintritt.

Codeausschnitt
if ( is_page_template( 'page-fullwidth.php' ) )
		the_post_thumbnail( 'sparkling-featured-fullwidth', array( 'class' => 'single-featured' ));
	else
		the_post_thumbnail( 'sparkling-featured', array( 'class' => 'single-featured' ));

In der content-single.php content-page.php und content.php wird die if/else Anweisung gelöscht, sodass nur noch die hervorgehobene Zeile stehen bleibt. Für meinen Fall habe ich um meine Header in 3:1 Ratio weiterverwenden zu können, in der functions.php in folgender Zeile noch die Auflösung auf 1200, 400 gesetzt:

add_image_size( 'sparkling-featured-fullwidth', 1140, 624, true );

 

Beitragsbild in Listenansicht

 

Darstellung von Custom-Pages

 

 

Affix Sidebar

Ich wünsche mir für die Seiten mit Sidebar, die Möglichkeit, dass die Sidebar sobald man an ihrem unteren Ende (bzw. oberen) angekommen ist fixed ist. Sobald, man zurückscrollt bewegt sie sich aber wieder mit und nicht erst wenn eine bestimmte Schwelle über schritten ist. So wie auch die Menüleiste neben dem Beitrag den ich gerade editiere.

Beim Seitenstart einfache Eigenschaften: (z-index um anzugeben, ob vor oder hinter header wenn der auch fix ist)

width: auto; position: static; top: auto; bottom: auto; z-index: 1;

Sobald die Unterkante, der Sidebar sichtbar ist soll sie also fixiert werden:

width: 300px; position: fixed; top: auto; bottom: 0px; z-index: 1;

da wir fixed position annehmen, müssen wir die breite (per js die aktuelle abfragen oder per css (kann fehler machen)) fest angeben.

Wenn wir wieder hochscrollen soll die Sidebar direkt mit scrollen und erst oben wieder stoppen, dafür setzen wir die Position auf absolute und geben ihr die aktuelle skrollposition (gemessen am body bereich, da sitebar ja fixed).

style="width: 300px; position: absolute; top: 12345px; bottom: auto; z-index: 1;"

Nun scrollt sie parallel zum content, (bis oberkante erreicht wird). top: 12345 sollte die aktuelle scrollposition + auflösungshöhe sein, sobald die Oberkannte sichtbar wird, wird die position wieder auf fixed gesetzt.

Wird der Footer erreicht, wird der Content wieder auf absolute gesetzt (mit aktueller scroll höhe) damit er nicht vor dem footer ist.

 

Eine einfacher umzusetztende Alternative, wäre Bootstraps ScrollSpy und Affix klasse zu benutzen, ohne weiteren Code, könnte man allerdings nur ein fixed ab bzw. bis zu einer absoluten position angeben, was proglematisch ist, wenn die footer höhe / header höhe / sidebar höhe nicht konstant ist. Aber mit etwas javascript kann dem abgeholfen werden, (TODO: check js runs on Pageresize)

Gutes Beispiel: http://codepen.io/SitePoint/pen/GgOzwX

 

Sonstiges

Für Anpassungen aller Art ist mindestens eine eigene Offline Kopie des Themes und ggf. Backups erforderlich. In der .xml im root-dir kann man den Namen ändern, um verschiedene Versionen der installierten Themes auseinander zu halten (quick and dirty). Oder aber es wird am laufenden Theme gearbeitet, indem die Theme files direkt überschrieben werden.

 

 

Aufjedenfall bietet die Doku erstmal etwas aufschluss über die Funktionsweise, wenn auch leider keine tieferen Einblicke in die Struktur und Arbeitsweise des Codes. Sieht aber sehr verständlich aus.

https://colorlib.com/wp/support/sparkling/

Bootstrap Shortcodes For Sparkling WordPress Theme

 

Alert: vielleicht ist ein child-theme die bessere option (updates mitkriegen, original wiederherstellbar), wenn anpassung, wenn komplett eigene version dann fork

Your Notification

[boxframe type=“alert-info“] test test | test [/boxframe]

 

Social Buttons ergänzen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.