Плагин Wordpress "бесконечная прокрутка" (JQuery) взломать помощь

Question

Я пытаюсь заставить мой WordPress блог (удален) работать с плагином «Бесконечная прокрутка» таким образом, чтобы вам приходилось нажимать «больше постов», чтобы загружать больше, а не прокручивать их ближе к нижней части страницы (который является плагином по умолчанию).

Здесь есть инструкции и демонстрация того, как это сделать: http://www.infinite -scroll.com /

Прокрутите вниз до "Пользовательский триггер, не автоматический. Twitter-style ".

Я просто не понимаю, как заставить его работать с моей темой (двадцать десять).У меня, вероятно, нет правильных селекторов.

Может ли кто-нибудь дать мне краткий обзор того, что мне нужно сделать, чтобы это осуществить?

Answer 1

Поскольку вы используете Wordpress, вы должны установить плагин Jetpack и активировать функцию бесконечной прокрутки. Есть примеры конфигурации для тем Двадцать десять, Одиннадцать и Двенадцать. Я думаю, вам будет проще, чем пытаться интегрировать бесконечную прокрутку самостоятельно.

Answer 2

Сначала вы должны найти, где находится <div class="entry-content">.это в вашей папке wp-content/themes/[themename], в файле с именем index.php или loop.php.после закрытия </div> записи-содержимого добавьте:

<div class="moreposts" style="display:none"
 onclick="$('div.moreposts').slideUp();$(document).trigger('retrieve.infscr');">
     Show more
</div>

<script>
$(document).ajaxError(function(e,xhr,opt){
    if (xhr.status == 404) $('div.moreposts').slideUp("normal", function() { $(this).remove(); } );
});
</script>

Теперь, в конфигурации бесконечной прокрутки (Wordpress Admin -> Настройки -> Бесконечная прокрутка), добавьте это в «Javascript, который будетВызывается после получения следующих сообщений "box:

$(window).unbind('.infscr');
setTimeout("$('div.moreposts').slideDown();", 1000);

Наконец, стиль кнопки, чтобы она выглядела красиво (добавить в style.css):

.moreposts { 
    display:block; 
    border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; 
    border: 1px solid #ddd; 
    background: #efefef; 
    text-align: center; 
    font-weight: bold; 
    box-shadow: 2px 2px 2px rgba(50,50,50,0.4); color: #444; 
    text-decoration: none; 
    padding: 5px;
    margin-bottom: 20px;
    cursor: pointer;
}
.moreposts:hover { 
    background: #dfdfdf; 
    color: #222;
}

Обратите внимание, что это будет делатьпервый пост загружается автоматически, а последующие - вручную.Это необходимо, чтобы скрипт автоматически скрывал кнопки «До / Далее».