‘masonry’ als schönere Überblicksseite

Nach der Opti­mie­rung der Bil­der gilt es, die Lis­te der Posts zu ver­schö­nern. Bis jetzt ken­nen wir nur die Form, die die bootS­core-Datei index.php von sich aus erzeugt: eine Lis­te von ‘Strei­fen’, für jeden Arti­kel einen, in der lin­ken Hälf­te das jewei­li­ge pri­mä­re Bei­trags­bild, in der rech­ten die Anfangs­zei­len des Arti­kels oder das manu­ell erstell­te Exzerpt. Wie lang­wei­lig! Dabei gibt es doch ‘mason­ry’ als schö­ne­re Über­blicks­sei­te:

Glück­li­cher­wei­se bie­tet bootS­core in einem Zusatz­pa­ket auf­re­gen­de­re Vari­an­ten. Zum Bei­spiel die mason­ry-Auf­lis­tung, ein auf den Kopf gestell­tes Mau­er­werk: In vier senk­rech­ten Spal­ten neben­ein­an­der erschei­nen die Arti­kel­an­fän­ge, je ein­ge­lei­tet mit dem pri­mä­ren Bei­trags­bild — und zwar so, dass sich in jeder Spal­te der je nächs­te Arti­kel gleich dar­un­ter anschließt. Es über­lap­pen sich also die ‘Leseh­ap­pen’, wie die Stei­ne einer Mau­er, nur eben senk­recht:

Lösung

• Lade das Plug­in bs Mason­ry her­un­ter.
• Instal­lie­re das Plug­in über das Word­Press-Backend Plugins/Add News.
• Lade das Paket bS Loop Tem­pla­tes her­un­ter und ent­pa­cke es.
• Kopie­re die Datei archive-masonry.php unter dem Namen home.php in Dein Child-The­me.
• Erset­ze in die­ser Datei the_excerpt() durch the_content() und
• ent­fer­ne das nach­fol­gen­de div samt der ein­ge­bet­te­ten Zei­le <a class="read-more...

Hintergrund

bootS­core selbst hat die mason­ry-Instal­la­ti­on und Akti­vie­rung gut beschrie­ben:. Ich selbst möch­te aber nicht alles auf die­sen Stil umstel­len, son­dern nur die gene­rel­le Über­sicht. Also hole ich mir die Datei archive-masonry.php unter dem Namen home.php in mein Child-The­me.

Und es geht noch ele­gan­ter. Denn mit der Word­Press-Funk­ti­on the_excerpt() in die­sem Looptem­p­la­te wird Post­in­halt bis zu einer gewis­sen Län­ge rein tex­tu­ell aus­ge­ge­ben, ohne jede Ver­lin­kung oder sons­ti­ge Gestal­tung. Des­halb muss das Tem­p­la­te die more-Funk­tio­na­li­tät selbst bereit­stel­len. Für die Lese­rin ist es jedoch oft ange­neh­mer, den ein­la­den­den Arti­kel­an­fang gleich rich­tig zu sehen, in aller Pracht. Damit das gut klappt, muss die Autorin aller­dings in allen Arti­keln das <!-- more-->-Tag manu­ell set­zen, im Tem­p­la­te die Funk­ti­on the_excerpt() durch the_content() erset­zen und die zuge­hö­ri­ge wei­ter­le­sen-Ver­lin­kung ent­fer­nen.

Damit ent­schei­det die Autorin, wie viel Text als Teaser ver­wen­det wird, nicht die Tech­nik. Sie schnei­det da ab, wo es Sinn macht — was unter­schied­lich lan­ge Text­an­fän­ge ent­ste­hen lässt und die Über­lap­pung in ver­ti­ka­len ‘Mau­er’ unter­streicht.

---

Und in welchem Zusammenhang …

… steht das mit unse­rer Migra­ti­on zu bootS­core? Nun, hat Web-Desi­gne­rin im Rah­men ihrer Anpas­sun­gen die Fra­ge einer guten Bebil­de­rung beant­wor­tet, kann sie ent­spannt Tags und Wol­ken in ihre Site ein­bin­den, ihre Über­blicks­sei­te ver­bes­sern und eine eige­ne Landing­pa­ge gestal­ten. Ob die ent­stan­de­ne Fül­le der eige­nen Lese­rin wirk­lich nutzt, ob es nicht schlan­ker geht und wie, ob dezen­te­re Ver­wei­se und spe­zi­el­le Fonts auch für beson­de­re Anläs­se die Les­bar­keit erhö­hen, all das gilt es zu beden­ken. Das tut auch die­ser Post.

---

Im Übri­gen: Män­ner sind mit­ge­meint.