Im Beitrag https://www.powergap.de/Die-Paginierung.html von 2021 hatten wir die aus der Urzeit zurück gekehrte Paginierung vorgestellt.
Diese wurde nun erweitert um die Möglichkeit nicht nur die Seiten vor und zurück zu springen, sondern von Seite 3 an auch auf die erste Seite zurück zu gelangen. Das soll gut sein für den Google-SEO-Bot, weil dann aus den Folgeseiten immer ein Link zur ersten Seite besteht. In den Suchergebnissen kann man daher nun diesen Button dazu aktivieren:
In der T2 Version muss dazu lediglich über Layout > Suchergebnis > Suchergebnis Footer Template der Part zwischen
durch diesen neuen Code ersetzt werden:
Bei den T3 - Installationen sieht der Code so aus:
Zusätzlich muss im CSS dieser Part hier ausgetauscht werden:
In T2 und auch in T3 haben wir den Code so optimiert, dass er auf SVG-Grafiken verzichtet. Damit werden zwei Objekte weniger geladen. Wieder gut für den Speed. Wir nutzen die Pfeile aus den Standard-HTML-Codes. Die passen in der Regel in Sachen Design genauso gut.
Wer sich da unsicher ist, kann natürlich wie immer uns damit beauftragen.
Diese wurde nun erweitert um die Möglichkeit nicht nur die Seiten vor und zurück zu springen, sondern von Seite 3 an auch auf die erste Seite zurück zu gelangen. Das soll gut sein für den Google-SEO-Bot, weil dann aus den Folgeseiten immer ein Link zur ersten Seite besteht. In den Suchergebnissen kann man daher nun diesen Button dazu aktivieren:
In der T2 Version muss dazu lediglich über Layout > Suchergebnis > Suchergebnis Footer Template der Part zwischen
<!-- Anfang Paginierung direkt unter Suchergebnis -->
und
<!-- Ende Paginierung direkt unter Suchergebnis -->
durch diesen neuen Code ersetzt werden:
<style>
#pag_se_all{width: 100%;position: relative;height: 4.5rem;border: 1px solid rgb(221,221,221);border-radius: .5rem;margin: 10px;padding-top: 2.5rem;background-color: #FAFAFA;}
#pag_se{display: table;margin: 0 auto;}
#pag_se ul li {float:left;}
#pag_se ul li a { padding: 1rem 1.5rem; }
#pag_seiten {display: table-cell;vertical-align: middle;}
.pag{font-size: 1.5em !important;}
#icon-vor,#icon-zur {height:1.6rem;width:1.6rem;padding: 1.2rem;}
#icon-1 {height:2rem;width:3rem;padding: 1.2rem;}
.nopag{opacity:0.3;}
</style>
<div id=pag_se_all><div id=pag_se><ul><li id=pag_1><a href="#link_pag_1" id=linkpag1 class=pag>❮❮</a></li><li id=pag_zur><a href="#link_pag_zur" id=linkpagzur class=pag>❮</a></li><li id=pag_s><div id=pag_seiten><div class=pag>Seite #seite von #seiten</div></div></li><li id=pag_vor><a href="#link_pag_vor" class=pag>❯</a></li></ul></div></div>
#pag_se_all{width: 100%;position: relative;height: 4.5rem;border: 1px solid rgb(221,221,221);border-radius: .5rem;margin: 10px;padding-top: 2.5rem;background-color: #FAFAFA;}
#pag_se{display: table;margin: 0 auto;}
#pag_se ul li {float:left;}
#pag_se ul li a { padding: 1rem 1.5rem; }
#pag_seiten {display: table-cell;vertical-align: middle;}
.pag{font-size: 1.5em !important;}
#icon-vor,#icon-zur {height:1.6rem;width:1.6rem;padding: 1.2rem;}
#icon-1 {height:2rem;width:3rem;padding: 1.2rem;}
.nopag{opacity:0.3;}
</style>
<div id=pag_se_all><div id=pag_se><ul><li id=pag_1><a href="#link_pag_1" id=linkpag1 class=pag>❮❮</a></li><li id=pag_zur><a href="#link_pag_zur" id=linkpagzur class=pag>❮</a></li><li id=pag_s><div id=pag_seiten><div class=pag>Seite #seite von #seiten</div></div></li><li id=pag_vor><a href="#link_pag_vor" class=pag>❯</a></li></ul></div></div>
Bei den T3 - Installationen sieht der Code so aus:
<div id=pag_se_all>
<div id=pag_se>
<ul><li id=pag_1><a href="#link_pag_1" id=linkpag1 class=pag>❮❮</a></li>
<li id=pag_zur><a href="#link_pag_zur" id=linkpagzur class=pag>❮</a></li>
<li id=pag_s>
<div id=pag_seiten>
<div class=pag>Seite #seite von #seiten</div>
</div>
</li>
<li id=pag_vor><a href="#link_pag_vor" id=linkpagvor class=pag>❯</a></li>
</ul>
</div></div>
<div id=pag_se>
<ul><li id=pag_1><a href="#link_pag_1" id=linkpag1 class=pag>❮❮</a></li>
<li id=pag_zur><a href="#link_pag_zur" id=linkpagzur class=pag>❮</a></li>
<li id=pag_s>
<div id=pag_seiten>
<div class=pag>Seite #seite von #seiten</div>
</div>
</li>
<li id=pag_vor><a href="#link_pag_vor" id=linkpagvor class=pag>❯</a></li>
</ul>
</div></div>
Zusätzlich muss im CSS dieser Part hier ausgetauscht werden:
#pag_se ul { list-style: none; padding: 0; display: flex; align-items: center; place-content: center; }
#pag_se ul > li > div { height: 2.5rem; background-color: var(--theme-accent-medium); color: var(--theme-accent-text); padding: 0 1rem; line-height: 2.5rem; border-radius: var(--theme-radius-small); box-shadow: var(--shadow-elevation-medium); }
#pag_se ul > li > #linkpagzur, #pag_se ul > li > #linkpagvor, #pag_se ul > li > #linkpag1 { cursor: pointer; display: block; height: 2.5rem; width: 2.5rem; background-color: var(--theme-accent-medium); border-radius: 20%; background-repeat: no-repeat; background-position: center; background-size: 32%; margin: 0 1rem; box-shadow: var(--shadow-elevation-medium); transition: box-shadow .3s ease-out;}
#shopLayer #pag_se ul > .nopag { opacity: .5; }
#pag_se ul > li > *[href]:hover { box-shadow: var(--shadow-elevation-high); }
.pag{font-size: 1.2em !important;text-align: center;color: var(--theme-accent-text);align-items: center; place-content: center;}
#pag_se ul > li > div { height: 2.5rem; background-color: var(--theme-accent-medium); color: var(--theme-accent-text); padding: 0 1rem; line-height: 2.5rem; border-radius: var(--theme-radius-small); box-shadow: var(--shadow-elevation-medium); }
#pag_se ul > li > #linkpagzur, #pag_se ul > li > #linkpagvor, #pag_se ul > li > #linkpag1 { cursor: pointer; display: block; height: 2.5rem; width: 2.5rem; background-color: var(--theme-accent-medium); border-radius: 20%; background-repeat: no-repeat; background-position: center; background-size: 32%; margin: 0 1rem; box-shadow: var(--shadow-elevation-medium); transition: box-shadow .3s ease-out;}
#shopLayer #pag_se ul > .nopag { opacity: .5; }
#pag_se ul > li > *[href]:hover { box-shadow: var(--shadow-elevation-high); }
.pag{font-size: 1.2em !important;text-align: center;color: var(--theme-accent-text);align-items: center; place-content: center;}
In T2 und auch in T3 haben wir den Code so optimiert, dass er auf SVG-Grafiken verzichtet. Damit werden zwei Objekte weniger geladen. Wieder gut für den Speed. Wir nutzen die Pfeile aus den Standard-HTML-Codes. Die passen in der Regel in Sachen Design genauso gut.
Wer sich da unsicher ist, kann natürlich wie immer uns damit beauftragen.