СПИСОК СТАРИЧЕСКИЙ СТРАНИЦА
1. Загрузите библиотеку jQuery
Поскольку это AJAX, управляемый JQUERY, загрузка библиотеки jQuery является обязательной.
2. Формат списка статьи
На странице списка вашей статьи (Home Page Index.php, Archive.php) вам необходимо убедиться, что существует аналогичная структура следующим образом
<!-Контейнер, содержащий все статьи-> <div id = "content"> <!-Контейнер для каждой статьи-> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div>
3. Добавить в навигацию по умолчанию
Поскольку Ajax Paging каждый раз получает контент на следующей странице, вам нужно только вызовать навигацию WordPress по умолчанию. Добавьте следующий код в свой index.php (или другая страница списка статьи), чтобы сгенерировать навигацию по умолчанию WordPress.
<div id = "pagination"> <? php next_posts_link (__ ('загружать больше')); ?> </div>4.Ajax Получите следующую страницу
Добавьте следующий код в вашу тему файла JS
// Использование Live () для того, чтобы JS все еще действителен для нового контента, полученного через AJAX $ ("#Pagination A"). Live ("click", function () {$ (this) .AdClass ("загрузка"). Текст («загрузка ...»); $. $ (data) .find ("#content .post"); undefined) {$ ("#pagination a"). attr ("href", nexthref);5. Прокручивать триггеры поворот страницы
Если вы хотите автоматически повернуть страницу, когда мыши прокручиваются в нижней части страницы, вы можете изменить код в следующем стиле
// Привязанность прокрутки $ (window) .bind ("scroll", function () {// определить, близка ли полоса прокрутки окна. Тип: «post», url: $ (this) .attr ("href") + "#content", успех: функция (data) {result = $ (data) .find ("#content .post"); $ ("#Content"). Append (result.fadein (300)); $ ("#pagination"). remove ();}}});}});6. Добавить навигацию CSS
Добавьте раздел CSS в навигацию, чтобы украсить его. Вы также можете подготовить диаграмму GIF, чтобы указать, что она загружается. Ниже приведен стиль мелодии:
#pagination {Padding: 20px 0 0 30px; } #pagination .nextpostslink {width: 600px; Цвет: #333; Текстовое декорация: нет; дисплей: блок; Подкладка: 9px 0; Текст-альбом: Центр; размер шрифта: 14px; } #pagination .nextpostslink: hover {founal-color: #cccccc; Текстовое декорация: нет; граница радий: 5px; -Моз-грамотный радий: 5px; -Вебкит-грамотный радий: 5px; } #pagination .loading {founale: url ("images/load.gif") 240px 9px no-repeat; Цвет: #555; } #pagination .loading: Hover {founal-color: прозрачный; Курсор: по умолчанию; }Комментарий Парень
1. Подготовьте
Загрузка библиотеки jQuery, это не объяснено.
2. Открыть страницу комментариев WordPress
Откройте Backend WordPress - Настройки - обсуждение, проверьте страницу, чтобы отобразить комментарии в «Настройках других комментариев», установите количество комментариев. Количество комментариев здесь рассчитывается только для основных комментариев, и ответ на комментарии не будут рассчитаны. Здесь я заполнил большее число (15), потому что подсказка для комментариев слишком подробно и сделает пользователями неудобным для чтения предыдущих комментариев.
После открытия подготовки к комментарию в фоновом режиме добавьте следующий код, в который вам нужно добавить навигацию по пейджинге в комментарии.
<NAV ID = "Комментарии navi"> <? php paginate_comments_links ('prev_text =? & next_text =?');?> </nav>3. SEO с комментария
С точки зрения SEO, подключение к комментариям вызовет дублированный контент (содержание пейджинга одинаково, а ключевые слова и описание одинаковы), поэтому блоги легко со многими комментариями понизить свои права, потому что они являются слишком большим дублированным контентом. Поэтому в SEO требуются некоторые методы лечения. Наиболее удобным и эффективным способом является использование метатеток. Добавьте следующий код под исходной метатетом вашего header.php, чтобы страницы, которые являются пейджингом, запрещаются включать поисковые системы и предотвратить дублирование контента.
<? php if (is_single () || is_page ()) {if (function_exists ('get_query_var')) {$ cpage = intval (get_query_var ('cpage')); $ commentPage = intval (get_query_var ('comment-page')); } if (! ement ($ cpage) ||! elme ($ commentpate)) {echo '<meta name = "robots" content = "noindex, nofollow" />'; Echo "/n"; }}?>4. Аякс комментарии
Согласно вышесказанному, в этой теме есть подсказка для комментариев. Чтобы достичь подкрепления комментариев в Ajax, вам нужен только JavaScript для сотрудничества. Однако до этого вы должны сначала добавить элемент перед списком комментариев, чтобы указать, что список загружается при отображении нового списка комментариев страницы. Предположим, что структура модуля комментариев тематического шаблона Comments.php выглядит следующим образом:
<div> <H3 id = "Комментарии-list-title"> Комментарии </h3> <!-Показать новые комментарии загрузки-> <div id = "Загрузок-комплексы"> <pan> Загрузка ... </span> </div> <!-Список комментариев-> <ol> <li> ... </li> <li> ... </li> </li> </ol> <! id = "Комментарии navi"> <a href = "#"> 1 </a> ... </nav> </div>
Добавьте следующий код JS в свой файл JS для реализации лиц комментариев
// Комментарий Paging $ body = (window.opera)? (Document.compatmode == "css1compat"? $ .ajax ({type: «get», url: $ (this) .attr ('href'), beforesend: function () {$ ('#comments-navi'). remove (); $ ('. comment_list'). remove (); $ ('#загрузка-comments').). $ ('#Комментарии-списка'). Offset (). Top-65}, 800); $ ('#Загрузка-камеры'). После (result.fadein (500));CSS для загрузочной полосы (только для справки)
Кода -копия выглядит следующим образом:
#Загрузочные комплексы {Display: none; Ширина: 100%; Высота: 45px; Фон: #A0D536; Текст-альбом: Центр; Цвет: #fff; размер шрифта: 22px; высота линии: 45px; }