«
»
WordPress

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

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

Связанные записи
ElementorWordPressПлагиныПолезные сайты

Elementor - 10 потрясающих мест для поиска бесплатных или премиальных шаблонов

MailChimpWordPressПлагины

5 лучших плагинов WordPress для Mailchimp (большинство из них бесплатны)

WoocommerceWordPressПлагины

Дропшиппинг: Как импортировать продукты AliExpress в WooCommerce при помощи плагина DropshipMe

WoocommerceWordPressПлагины

8 лучших плагинов для WooCommerce Dropshipping для AliExpress и не только (Или дропшиппинга на WordPress)