0
36
2018-01-23

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

Давайте реализуем вывод отображения случайной записи в сайдбаре сайта, которая будет загружена по клику через Ajax
Понравилась страница? Поставь свою оценку!
PLUGIN_STAR_RATINGS.SCORE_TEXTPLUGIN_STAR_RATINGS.VOTES_TEXT

Уверен Вам покажется данный урок немного смешным, но кто знает благодаря навыкам приобретенным в данном уроке, Вы сможете реализовать что-то полезное основываясь на практику полученную в ходе "разбора" примерэтого поста. Ведь в нем мы будем использовать некоторые серьезные умения как в 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