Вывод случайных цитат на сайте

Рад снова Вас видеть на Блоге Свободного Вебмастера! Очень часто приходится использовать элементы дизайна, которые меняют свое содержание при обновлении страницы. Что же это может быть? Например, я использовал на своем блоге случайный вывод изображений.

Цитаты

Кто давно следит за моим блогом наверное помнит те времена, когда моя фотография менялась при обновлении страницы или при переходе по внутренним ссылкам. На самом деле, можно настроить случайный вывод всего что угодно. Начиная от изображения и заканчивая любым кодом. Наиболее распространенное применение: случайный вывод цитат, изображений и ротатор баннеров.

Сейчас я разберу три простых способа, которые помогут осуществить выше сказанное.

Случайный вывод цитат с помощью плагина

Самым удобным, по-моему мнению, является плагин XmasB Quotes. Плагин имеет интерфейс на русском языке и не вызовет затруднений в использовании. Честно говоря, если цитат будет немного, то иногда при обновлении страницы может не произойти смены цитаты. Поэтому чем больше будете использовать цитат, тем выше вероятность их смены. Вывод осуществляется с помощью виджета, если тема имеет их поддержку или с помощью вставки следующего кода в шаблоне:

<?php if(function_exists('xmasb_print_random_quote')) { xmasb_print_random_quote(); } ?>

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

Случайный вывод на PHP

Можно с легкостью использовать скриптовый язык PHP для решения поставленной задачи. Разберу на примере:

<?php
	$quotes[] = 'Цитата №1';
	$quotes[] = 'Цитата №2';
	$quotes[] = 'Цитата №3';
	$quotes[] = 'Цитата №4';
	$quotes[] = 'Цитата №5';
	srand ((double) microtime() * 1000000);
	$random_number = rand(0,count($quotes)-1);
echo
	($quotes[$random_number]);
?>

Как видите, здесь я задаю пять цитат в виде текста, но можно использовать и любой код. Данный метод легок, но ограничен в применении. Если Вы используете виджеты в своем шаблоне, то невозможно запихнуть PHP скрипт в виджет, т.к. он работать не будет. Можно конечно использовать плагины для этих целей, но опять таки это будет не рационально! Данный способ без затруднений можно применить в любом месте шаблона, кроме виджетов.

Случайный вывод на Javascript

Ну и наконец, самым универсальным способом, позволяющим выводить цитаты в любом месте, включая виджеты, является использование языка javascript. Вот небольшой примерчик:

function r_out01() {
	var b=[];
	b[0]='Цитата №1';
	b[1]='Цитата №2';
	var i=Math.floor(Math.random()*b.length);
	document.write( b[i] );
}
<script>r_out01()</script>

В нем я использовал 2 цитаты, на самом деле их можно задать несколько, путем увеличения строк с параметром b[ ], т.е. если продолжить, то b[2], b[3] и так далее.

Как Вы поняли, перечисленные способы можно использовать не только для вывода текстовых цитат, но и для любого кода (изображения, счетчики, баннеры и прочее). По-крайней мере вывод изображений я испробовал всеми тремя способами. Если возникли вопросы, то не стесняйтесь, задавайте.

PS: Именно третьим способом я раньше пользовался для отображения фотографий автора блога (это я про себя) в правом сайдбаре. Плагин XmasB Quotes, за ненадобностью, удалил, тем самым сократив число обращений к базе данных и снизив нагрузку на сервер. Данным постом я открыл на блоге новую рубрику, под названием «Кодекс», в которой буду размещать способы использования различных языков (HTML, CSS, PHP, Javascript и пр.), которые позволят отказаться от плагинов.

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(3 голоса, в среднем: 5 из 5)
  1. Ahawks

    XmasB Quotes — его юзал раньше и статья есть такая же на блоге)

    Ответить

  2. Webliberty

    Ahawks, а я сейчас его удалил, добавил скрипт и все, тем самым сократил общее число плагинов до 12 🙂

    Ответить

  3. Ольга

    Хм… мне кажется или скрипт «съелся»? Не вижу параметра b[] в коротенькой строчке.

    Ответить

  4. Webliberty

    Ольга, спасибо большое что заметили, сейчас все поправил! К сожалению часто такое случается, когда при редактировании записи перехожу из режима HTML в визуальный…

    Ответить

  5. Fibika

    Пожалуйста, приведите пример кода для вставки фотографий. Там нужно прописать только название файла, а путь до картинки не указывать?

    Ответить

  6. Webliberty

    Fibika, только пару дней назад я убрал сменяющуюся свою фотографию и заменил на статическую. Вот как я выводил рандомные фотографии:
    1. создал файл с расширением .js (например, foto.js) и в него вставил вот такой код:

    function r_out01() {
    	var a=[];
    	a[0]='<img src="https://example.com/image_1.png" />';
    	a[1]='<img src="https://example.com/image_2.png" />';
    	document.write(a[Math.floor(Math.random()*a.length)])
    };

    Если требуется не две картинки, а больше, то добавляете строки a[2], a[3] и так далее с путями к ним.

    2. Сохраняем созданный файл у себя на сервере.

    3. Там где нужно случайно вывести изображения пишем следующий код:

    <script src='путь к файлу foto.js'></script>
    <script>r_out01()</script>

    4. Пользуемся и радуемся случайному выводу изображений на Javascript 🙂 Удачи! Если что — спрашивайте еще, обязательно подскажу!

    Ответить

  7. Fibika

    Большое спасибо! А про фотографию я заметила, специально несколько раз обновляла страницу и удивлялась, что ничего не меняется 🙂

    Ответить

  8. Webliberty

    Fibika, я решил пока одну фотографию оставить, может потом снова несколько сделаю)

    PS: пост немного подправил, чтобы больше не вводить в заблуждение насчет обновления страницы)

    Ответить

  9. Саша

    Здравствуйте!
    Хотелось бы узнать — можно ли воспользоваться третьим способом, только чтобы цитаты выводились на фоне картинки, которую я сам ему установлю? И если да, то каким образом подправить этот чудесный скрипт?

    Ответить

  10. Webliberty

    Саша, здравствуйте! Извиняюсь за задержку с ответом. Конечно можно сделать фон и для этого даже не понадобиться изменять этот скрипт. Все оформление закладывается в стилях оформления CSS. Создайте свой класс, для примера пускай это будет foncitat и задаете его внешний вид в файле style.css:

    .foncitat {
    	height:100px;
    	width:100px;
    	background:transparent url(file.png) no-repeat;
    }

    На этом этапе Вы подбираете изображение для фона, подгоняете под нужный размер и задаете его в параметрах height и width (для примера я взял изображение 100х100). Загружаете изображение на хостинг и указываете путь к файлу.

    Далее файлы скриптов, отвечающие за вывод цитат оборачиваете в дивы:

    <div class="foncitat">
    	<script src='foncitat.js'></script>
    	<script>r_out01()</script>
    </div>

    Ну а файл foncitat.js формируется аналогичным способом, как я рассказывал в комментариях выше для Fibika.

    Ответить

  11. Саша

    Webliberty, большое спасибо! Сразу, конечно, было не понятно, но разобравшись всё получилось. Были проблемы с padding-right, и вообще с выравниванием текста (впервые делали такое с CSS) — но кажется, слава Богу, теперь всё в порядке. Прекрасное ощущение!

    Ответить

  12. legos

    День добрый! А как сделать чтобы изображения появлялись с интервалом, скажем 3 секунды, и были кликабельны?

    Ответить

  13. Webliberty

    legos, здравствуйте! Хотите слайдер сделать? Таким способом не получится. А кликабельными их сделать очень просто — в качестве цитат (в примере Цитата №1 и т.д.) вставляйте изображение со ссылкой:

    <a href="https://example.com/"><img src="https://example.com/file.png"></a>

    Ответить

  14. Эсмонд

    Добрый день, вот такой вопрос. А как сделать так, что бы этот скрипт работал по щелчку мыши? Скажем у меня есть картинка, я навожу мышь, щелкаю и в определенном документе появляется цитата, фраза, анекдот? Спасибо)

    Ответить

  15. Webliberty

    Эсмонд, с помощью этого скрипта — никак.

    Ответить

  16. Даня

    Здравствуйте.

    Можно ли как-нибудь с помощью яваскрпита выполнить вывод случайных товаров с другого сайта (интернет-магазина) на мой блог, чтобы товары менялись произвольно с магазина, их не нужно было задавать нигде в файлах скрипта?

    Ответить

  17. Webliberty

    Даня, э-э-э даже не знаю. Посмотрите вот эту запись, она конечно не относится к теме, но там есть одна интересная функция — Аниматор заголовков — может быть с ее помощью что нибудь получится 💡

    Ответить

  18. stant

    Хороший плагин. Скачал, но еще не ставил. На некоторых сайтах написано, что он только кодом устанавливается, а вы пишите про установку с помощью виджета. Буду сам смотреть.

    Ответить

  19. Олюся

    Webliberty, а если я хочу иметь возможность добавлять новые цитаты, но не влезать всё время в код, то как можно всё это оформить? Согласитесь, если у меня 1000 цитат и ежедневно я и мои посетители добавляю ещё и ещё, то редактировать джава-скрипт муторно и не удобно.

    Ответить

  20. Webliberty

    Олюся, в таком случае воспользуйтесь плагином Quotes Collection — добавлять и редактировать цитаты станет проще. Реализация скрипта, описанного в статье, удобна при небольшом количестве цитат, когда устанавливать громоздкий плагин ради 3-5 предложений не целесообразно.

    Ответить

  21. avalan4e

    Ну и при чем тут вывод цитат? Я читал только часть про JS и там тупо вывод случайного элемента массива. Под темой с таким названием, думаю, все же ожидают увидеть что-то типа стащить со специального сервиса случайную сгенерированную цитату, получить ее например в JSON и разобрать у себя на странице. Ну или распарсить несколько страниц сайта с цитатами, загнать их в базу ну и т. д. Короче, в топку вашу тему.

    Ответить

  22. Надежда

    Я понимаю, тема давнишняя, но может быть, ответите. Я установила плагин XmasB Quotes -все хорошо — установила в сайдбар. Но почему-то в Инструментах нельзя добавить цитату, пишет «Нельзя добавить цитату «…», потому что такая цитата уже существует.» Подскажите, пожалуйста, как исправить.

    Ответить

  23. Webliberty

    Надежда, плагин не получал обновлений более двух лет, поэтому он может быть несовместим с последней версией WordPress. Рекомендую поискать альтернативу этому плагину, хотя бы в целях безопасности.

    Ответить

:) ;) :D :( :cry: :| :o :P 8-) :oops: :roll: :idea:

Отправляя комментарий, вы соглашаетесь с политикой конфиденциальности.