php - remove - strip_tags wordpress
Cómo implementar Isotopo con Paginación (4)
¿Has revisado el siguiente enlace?
https://codepen.io/Igorxp5/pen/ojJLQE
Tiene un ejemplo funcional de isótopo con paginación.
Eche un vistazo al siguiente bloque de código en la sección JS en particular.
var $container = $(''#container'').isotope({
itemSelector: itemSelector,
masonry: {
columnWidth: itemSelector,
isFitWidth: true
}
});
Estoy tratando de implementar isótopos con paginación en mi sitio de WordPress (que obviamente es un problema para la mayoría de las personas). He llegado a un escenario que puede funcionar si puedo resolver algunas cosas.
En mi página, tengo esta parte de mi script de isótopos -
$(''.goforward'').click(function(event) {
var href = $(this).attr(''href'');
$(''.isotope'').empty();
$(''.isotope'').load(href +".html .isotope > *");
$( ''div.box'' ).addClass( ''isotope-item'' );
$container.append( $items ).isotope( ''insert'', $items, true );
event.preventDefault();
});
Entonces estoy usando esta función de paginación que modifiqué desde here para tener la clase ''goforward'' -
function isotope_pagination($pages = '''', $range = 2)
{
$showitems = ($range * 2)+1;
global $paged;
if(empty($paged)) $paged = 1;
if($pages == '''')
{
global $wp_query;
$pages = $wp_query->max_num_pages;
if(!$pages)
{
$pages = 1;
}
}
if(1 != $pages)
{
echo "<div class=''pagination''>";
for ($i=1; $i <= $pages; $i++)
{
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
{
echo ($paged == $i)? "<a href=''".get_pagenum_link($i)."'' class=''inactive goforward''>".$i."</a>":"<a href=''".get_pagenum_link($i)."'' class=''inactive goforward'' >".$i."</a>";
}
}
echo "</div>/n";
}
}
Primer problema : tengo problemas con el filtrado / clasificación. Se filtra bien para la primera página, pero no ordena. En la segunda página o en cualquier otra página cargada, no agrega / inserta o incluso filtra / ordena cuando comienza de cero en esa página. En cambio, al tratar de hacerlo, me da este error:
Uncaught TypeError: Cannot read property ''[object Array]'' of undefined
Segundo problema : al cargar los fragmentos de la página, hay un retraso y la página actual sigue siendo visible antes de que el siguiente fragmento de página se cargue en su lugar.
Sé que muchas personas tienen problemas con el isótopo y la paginación, por lo general, terminan usando desplazamiento infinito a pesar de que el autor del isótopo no lo recomienda.
Así que mi teoría está cargando contenido a través de load () y tengo una devolución de llamada de algún tipo para mostrar solo los elementos filtrados.
¿Alguna idea sobre cómo lograr esto?
Mi script completo de isótopos ---
$(function () {
var selectChoice, updatePageState, updateFiltersFromObject,
$container = $(''.isotope'');
$items = $(''.item'');
////////////////////////////////////////////////////////////////////////////////////
/// EVENT HANDLERS
////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////
// Mark filtering element as active/inactive and trigger filters update
$(''.js-filter'').on( ''click'', ''[data-filter]'', function (event) {
event.preventDefault();
selectChoice($(this), {click: true});
$container.trigger(''filter-update'');
});
//////////////////////////////////////////////////////
// Sort filtered (or not) elements
$(''.js-sort'').on(''click'', ''[data-sort]'', function (event) {
event.preventDefault();
selectChoice($(this), {click: true});
$container.trigger(''filter-update'');
});
//////////////////////////////////////////////////////
// Listen to filters update event and update Isotope filters based on the marked elements
$container.on(''filter-update'', function (event, opts) {
var filters, sorting, push;
opts = opts || {};
filters = $(''.js-filter li.active a:not([data-filter="all"])'').map(function () {
return $(this).data(''filter'');
}).toArray();
sorting = $(''.js-sort li.active a'').map(function () {
return $(this).data(''sort'');
}).toArray();
if (typeof opts.pushState == ''undefined'' || opts.pushState) {
updatePageState(filters, sorting);
}
$container.isotope({
filter: filters.join(''''),
sortBy: sorting
});
});
//////////////////////////////////////////////////////
// Set a handler for history state change
History.Adapter.bind(window, ''statechange'', function () {
var state = History.getState();
updateFiltersFromObject(state.data);
$container.trigger(''filter-update'', {pushState: false});
});
////////////////////////////////////////////////////////////////////////////////////
/// HELPERS FUNCTIONS
////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////
// Build an URI to get the query string to update the page history state
updatePageState = function (filters, sorting) {
var uri = new URI('''');
$.each(filters, function (idx, filter) {
var match = /^/.([^-]+)-(.*)$/.exec(filter);
if (match && match.length == 3) {
uri.addSearch(match[1], match[2]);
}
});
$.each(sorting, function (idx, sort) {
uri.addSearch(''sort'', sort);
});
History.pushState(uri.search(true), null, uri.search() || ''?'');
};
//////////////////////////////////////////////////////
// Select the clicked (or from URL) choice in the dropdown menu
selectChoice = function ($link, opts) {
var $group = $link.closest(''.btn-group''),
$li = $link.closest(''li''),
mediumFilter = $group.length == 0;
if (mediumFilter) {
$group = $link.closest(''.js-filter'');
}
if (opts.click) {
$li.toggleClass(''active'');
} else {
$li.addClass(''active'');
}
$group.find(''.active'').not($li).removeClass(''active'');
if (!mediumFilter) {
if ($group.find(''li.active'').length == 0) {
$group.find(''li:first-child'').addClass(''active'');
}
$group.find(''.selection'').html($group.find(''li.active a'').first().html());
}
};
//////////////////////////////////////////////////////
// Update filters by the values in the current URL
updateFiltersFromObject = function (values) {
if ($.isEmptyObject(values)) {
$(''.js-filter'').each(function () {
selectChoice($(this).find(''li'').first(), {click: false});
});
selectChoice($(''.js-sort'').find(''li'').first(), {click: false});
} else {
$.each(values, function (key, val) {
val = typeof val == ''string'' ? [val] : val;
$.each(val, function (idx, v) {
var $filter = $(''[data-filter=".'' + key + ''-'' + v + ''"]''),
$sort = $(''[data-sort="'' + v + ''"]'');
if ($filter.length > 0) {
selectChoice($filter, {click: false});
} else if ($sort.length > 0) {
selectChoice($sort, {click: false});
}
});
});
}
};
////////////////////////////////////////////////////////////////////////////////////
/// Initialization
////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////
// Initialize Isotope
$container.imagesLoaded( function(){
$container.isotope({
masonry: { resizesContainer: true },
itemSelector: ''.item'',
getSortData: {
date: function ( itemElem ) {
var date = $( itemElem ).find(''.thedate'').text();
return parseInt( date.replace( /[/(/)]/g, '''') );
},
area: function( itemElem ) { // function
var area = $( itemElem ).find(''.thearea'').text();
return parseInt( area.replace( /[/(/)]/g, '''') );
},
price: function( itemElem ) { // function
var price = $( itemElem ).find(''.theprice'').text();
return parseInt( price.replace( /[/(/)]/g, '''') );
}
}
});
var total = $(".next a:last").html();
var pgCount = 1;
var numPg = total;
pgCount++;
$(''.goback'').click(function() {
$(''.isotope'').empty();
$(''.isotope'').load("/page/<?php echo --$paged;?>/?<?php echo $_SERVER["QUERY_STRING"]; ?>.html .isotope > *");
$container.append( $items ).isotope( ''insert'', $items, true );
$( ''div.box'' ).addClass( ''isotope-item'' );
});
$(''.goforward'').click(function(event) {
var href = $(this).attr(''href'');
$(''.isotope'').empty();
$(''.isotope'').load(href +".html .isotope > *");
$( ''div.box'' ).addClass( ''isotope-item'' );
$container.append( $items ).isotope( ''insert'', $items, true );
event.preventDefault();
});
});
//////////////////////////////////////////////////////
// Initialize counters
$(''.stat-count'').each(function () {
var $count = $(this),
filter = $count.closest(''[data-filter]'').data(''filter'');
$count.html($(filter).length);
});
//////////////////////////////////////////////////////
// Set initial filters from URL
updateFiltersFromObject(new URI().search(true));
$container.trigger(''filter-update'', {pushState: false});
});
});
Verifique el enlace a continuación si es útil
https://mixitup.kunkalabs.com/extensions/pagination/
También puede usar lazy loder para paginación.
Espero que esto te ayude
codepen.io/Igorxp5/pen/ojJLQE
Esto está bien para mí solo un poco de preguntas ¿Cómo agregar next / prev a la paginación y cómo agregar una clase activa a la paginación?
y lo último "falta o está mal formado". este texto aparece después de mi menú de paginación. No sé qué significa eso.
<a href="http://codepen.io/Igorxp5/pen/ojJLQE"></a>
Creo que esto te ayudará.
Referir esta URL