Importante: esta página está oculta a la navegación, sólo se puede acceder a ella mediante el enlace directo y sirve para documentar este procedimiento específico.
La forma de construir posts paginados en wordpress es relativamente sencilla, ya que aunque a nivel de backend trabajemos con un único post, este se desglosa en varias URLs distintas en el visionado público del contenido.
La manera de hacerlo es incluyendo un shortcode de page break en cada punto del contenido del post en el que queramos dividirlo.
Esto tendrá el siguiente aspecto en la edición del post una vez introducido:
Incluir la paginación
El bloque de paginación ANTERIOR/SIGUIENTE no es automático, y debe ser introducido manualmente como un bloque de código justo antes del page break.
El código del mismo es el siguiente:
<div class="bb-carousel-navigation"><a class="bb-carousel-navigation-prev" onclick="bbCarNav('prev')"><span class="bb-truncate">Anterior</span></a> <a class="bb-carousel-navigation-next" onclick="bbCarNav('next')"><span class="bb-truncate">Siguiente</span></a></div>
<script>jQuery('body').addClass('bb-carousel');</script>
Al incluirlo hay que tener las siguiente consideraciones:
- El primer bloque de navegación introducido debe incorporar en el primer elemento del HTML la clase first:
<div class="bb-carousel-navigation first"><a class="bb-carousel-navigation-prev" onclick="bbCarNav('prev')"><span class="bb-truncate">Anterior</span></a> <a class="bb-carousel-navigation-next" onclick="bbCarNav('next')"><span class="bb-truncate">Siguiente</span></a></div>
<script>jQuery('body').addClass('bb-carousel');</script>
- El último bloque de navegación introducido debe incorporar en el primer elemento del HTML la clase last. Este bloque no va nunca sucedido de un page-break, es el que cierra el post:
<div class="bb-carousel-navigation last"><a class="bb-carousel-navigation-prev" onclick="bbCarNav('prev')"><span class="bb-truncate">Anterior</span></a> <a class="bb-carousel-navigation-next" onclick="bbCarNav('next')"><span class="bb-truncate">Siguiente</span></a></div>
<script>jQuery('body').addClass('bb-carousel');</script>
Los bloques de código se han creado también como bloques reutilizables, y aparecerán en el buscador de bloques como paginación FIRST, paginación y paginación LAST.
Los títulos deben ser H5
Para controlar los anuncios que se muestran asociados a los títulos de cada subpágina, éstos deben introducirse como H5. Aunque visualmente durante la edición no se aprecian distinción sobre el texto de un párrafo, durante la visualización es estéticamente como un H3.
Backend de la paginación
Para controlar el comportamiento de la paginación, debe incluirse en Insert Headers & Footers (en la sección del footer) el siguiente código (ojo, algunos de los estilos a continuación son específicos para el site revistacachet, otros sites tendrán otras consideraciones estéticas):
<!-- CAROUSEL PAGINATION -->
<style>
body.bb-carousel h5 {
font-weight:600;
font-size:24px;
}
body.bb-carousel .entry-pagination.pagination {
display:none;
}
.bb-carousel-navigation {
padding:20px 0;
}
.bb-carousel-navigation a{
background-color: #F9D8D3;
color: #813d45;
padding:10px 20px;
pointer-events:all;
cursor:pointer;
margin-right:10px;
font-weight: bold;
text-decoration:none;
transition:.4s;
}
.bb-carousel-navigation a:hover {
background-color:#ffb0a4;
color: #333;
text-decoration:underline;
}
.bb-carousel-navigation.first a.bb-carousel-navigation-prev, .bb-carousel-navigation.last a.bb-carousel-navigation-next{
pointer-events:none;
background-color: #e4e4e4;
color: #777777;
}
.bb-carousel-navigation a.bb-carousel-navigation-prev:before {
content:'«';
padding-right:5px;
display:inline-block;
position:relative;
}
.bb-carousel-navigation a.bb-carousel-navigation-next:after {
content:'»';
padding-left:5px;
display:inline-block;
position:relative;
}
.bb-carousel-navigation .bb-truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width:200px;
display:table-cell;
}
</style>
<script>
console.log(window.location.protocol);
console.log(window.location.host);
console.log(window.location.pathname);
console.log(window.location.search);
var pathArray = window.location.pathname.split('/');
console.log("pathArray 1 : " + pathArray[1]);
console.log("pathArray 2 : " + pathArray[2]);
console.log("pathArray 3 : " + pathArray[3]);
function bbCarNav(value) {
var pathArray = window.location.pathname.split('/');
if (pathArray[1] === "en" || pathArray[1] === "es" || pathArray[1] === "fr" || pathArray[1] === "ar") {
console.log("Lang detected");
if (pathArray[3]){
if (value === "prev") {
pathArray[3] = (pathArray[3]) - 1;
}
if (value === "next") {
pathArray[3] = parseInt(pathArray[3]) + 1;
}
console.log('nuevo pathArray 3 es: ' + pathArray[3])
var newPathname = "";
for (i = 0; i < pathArray.length; i++) {
//newPathname += "/";
newPathname += pathArray[i] + "/";
}
var newURL = window.location.protocol + "//" + window.location.host + newPathname + window.location.search;
console.log('newURL: ' + newURL)
window.location = newURL;
}
else {
if (value === "prev") {
pathArray[3] = (pathArray[3]) - 1;
}
if (value === "next") {
pathArray[3] = 2;
}
console.log('nuevo pathArray 3 es: ' + pathArray[3])
var newPathname = "";
for (i = 0; i < pathArray.length; i++) {
//newPathname += "/";
newPathname += pathArray[i] + "/";
}
var newURL = window.location.protocol + "//" + window.location.host + newPathname + window.location.search;
console.log('newURL: ' + newURL)
window.location = newURL;
}
}
else {
console.log("No lang detected");
if (pathArray[2]){
if (value === "prev") {
pathArray[2] = (pathArray[2]) - 1;
}
if (value === "next") {
pathArray[2] = parseInt(pathArray[2]) + 1;
}
console.log('nuevo pathArray 2 es: ' + pathArray[2])
var newPathname = "";
for (i = 0; i < pathArray.length; i++) {
//newPathname += "/";
newPathname += pathArray[i] + "/";
}
var newURL = window.location.protocol + "//" + window.location.host + newPathname + window.location.search;
console.log('newURL: ' + newURL)
window.location = newURL;
}
else {
if (value === "prev") {
pathArray[2] = (pathArray[2]) - 1;
}
if (value === "next") {
pathArray[2] = 2;
}
console.log('nuevo pathArray 2 es: ' + pathArray[2])
var newPathname = "";
for (i = 0; i < pathArray.length; i++) {
//newPathname += "/";
newPathname += pathArray[i] + "/";
}
var newURL = window.location.protocol + "//" + window.location.host + newPathname + window.location.search;
console.log('newURL: ' + newURL)
window.location = newURL;
}
}
}
</script>
A continuación, dejo contenido típico estructurado como post dividido o en carrusel.