TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Отобразить в WordPress случайную запись (с обновлением AJAX)

706

Уверен Вам покажется данный урок немного смешным, но кто знает благодаря навыкам приобретенным в данном уроке, Вы сможете реализовать что-то полезное основываясь на практику полученную в ходе “разбора” примерэтого поста. Ведь в нем мы будем использовать некоторые серьезные умения как в WordPress, так и в jQuery библиотеке JavaScript.

1. Настройте область для случайной публикации (HTML)

На самом деле данная область может быть где угодно, главное что бы в нее был вставлен блок с идентификатором, на который вы можете настроить подгрузку контента через Ajax. Для данного примера я решли разместить её в sidebar.php.

<h4>Random Post</h4> <ul> <li id="randomPost">… loading …</li> </ul> <a href="#" id="another">Get another!</a>

2. Создайте новый шаблон страницы.

Единственная цель для этого шаблона страницы – запросить сообщения и отобразить одну случайную запись. Посмотрите, как это легко выглядит:

<?php /* Template Name: Random Post Ajax */ ?> <?php query_posts('showposts=1&orderby=rand'); the_post(); ?> <a href='<?php the_permalink(); ?>'><?php the_title(); ?></a>

3. Публикация страницы с использованием этого шаблона

Может быть где угодно. Вот реальный пример как это работает https://digwp.com/random/ .

4. JQuery

Вам нужно загрузить jQuery и ссылку на собственный скрипт, а затем добавить следующее:

$("#randomPost").load("/random/"); $("#another").click(function(){ $("#randomPost") .text("... loading ...") .load("/random/"); return false; });

5. Радуйтесь

Я сказал вам, что это будет легко! Посмотрите нашу боковую панель если Вы все сделали верно, то увидите список из случано загруженных названий записей.

Если Вдруг пример выше не сработал

Чтобы побороть проблему, просто добавьте случайный параметр URL в конец URL-адреса загрузки. Вот так:

$("#another").click(function(){ $("#randomPost") .text("... loading ...") .load("/random/?cachebuster=" + Math.floor(Math.random()*10001)); return false; });

Статья была переведена для блога TechBlog.SDStudio.top
Источник: https://digwp.com

Источник записи:

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее