Вывод случайного HTML на web-страницу
Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.
Здравствуйте! Так получилось, что я сначала сделал страницы с уроками по организации вывода случайной фразы, картинки и времени на web-странице. Осталось последнее — вывод случайного HTML. Этот простой скрипт позволяет в режиме ротации отображать как небольшие изображения или аватары, короткие фразы в текстовом варианте, так и ссылки и даже небольшие таблицы.
При заходе на страницу на ней уже отображается случайный HTML в виде одного из перечисленных ранее. При обновлении страницы будет происходить замена HTML и будут появляться другие варианты.
Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master.
Установка на ваш сайт
1. Скачайте учебный материал, распакуйте в текущую папку на компьютере. В папке randomhtml находятся:
— папка с изображениями img ;
— папка js со скриптом randomhtml.js ;
— файл index.html .
Можно открыть последний в вашем браузере и проверить работу скрипта. При каждой перезагрузке страницы картинка, анимашка, текст, ссылка, должны меняться. (Не торопитесь с перезагрузкой, делайте её с интервалом в 5-7 секунд и все будет нормально работать).
2. Подберите нужные Вам изображения и загрузите их в папку img вашего сайта.
3. Файл скрипта randomhtml.js загрузите в корневую папку со скриптами на сайт, обычно она так и называется js .
4. На странице своего сайта в разделе head вставьте следующий код вызова скрипта:
Путь к файлу randomhtml.js .
5. В раздел body вставьте этот код:
Одна из коротких текстовых фраз.
Пропишите путь к вашему изображению.
Ширина и высота картинки, анимашки.
В результате этих действий Вы получите такую же картину, как в моём демо-примере. А мне остаётся пожелать Вам доброго здоровья и успехов в работе над своими проектами. Пока! Ваш Л.М.
Вывод случайных цитат на сайте
Рад снова Вас видеть на Блоге Свободного Вебмастера! Очень часто приходится использовать элементы дизайна, которые меняют свое содержание при обновлении страницы. Что же это может быть? Например, я использовал на своем блоге случайный вывод изображений.
Кто давно следит за моим блогом наверное помнит те времена, когда моя фотография менялась при обновлении страницы или при переходе по внутренним ссылкам. На самом деле, можно настроить случайный вывод всего что угодно. Начиная от изображения и заканчивая любым кодом. Наиболее распространенное применение: случайный вывод цитат, изображений и ротатор баннеров.
Сейчас я разберу три простых способа, которые помогут осуществить выше сказанное.
Случайный вывод цитат с помощью плагина
Самым удобным, по-моему мнению, является плагин XmasB Quotes. Плагин имеет интерфейс на русском языке и не вызовет затруднений в использовании. Честно говоря, если цитат будет немного, то иногда при обновлении страницы может не произойти смены цитаты. Поэтому чем больше будете использовать цитат, тем выше вероятность их смены. Вывод осуществляется с помощью виджета, если тема имеет их поддержку или с помощью вставки следующего кода в шаблоне:
if(function_exists('xmasb_print_random_quote')) < xmasb_print_random_quote(); >?>
Метод довольно простой, я до недавнего времени пользовался именно этим плагином для вывода своей фотографии в сайдбаре. Почему пользовался? Потому что считаю нерациональным нагружать движок и захламлять базу данных только ради фотки. Далее предлагаю еще два способа, но уже без использования плагинов.
Случайный вывод на 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] ); > r_out01()/script>
В нем я использовал 2 цитаты, на самом деле их можно задать несколько, путем увеличения строк с параметром b[ ] , т.е. если продолжить, то b[2] , b[3] и так далее.
Как Вы поняли, перечисленные способы можно использовать не только для вывода текстовых цитат, но и для любого кода (изображения, счетчики, баннеры и прочее). По-крайней мере вывод изображений я испробовал всеми тремя способами. Если возникли вопросы, то не стесняйтесь, задавайте.
PS: Именно третьим способом я раньше пользовался для отображения фотографий автора блога (это я про себя) в правом сайдбаре. Плагин XmasB Quotes, за ненадобностью, удалил, тем самым сократив число обращений к базе данных и снизив нагрузку на сервер. Данным постом я открыл на блоге новую рубрику, под названием «Кодекс», в которой буду размещать способы использования различных языков (HTML, CSS, PHP, Javascript и пр.), которые позволят отказаться от плагинов.
Вывод случайных записей с помощью функции query_posts
Вывод случайных записей на сайте является очень полезным ходом, так как это позволяет не только создать внутреннюю перелинковку, что хорошо с точки зрения оптимизация для выдачи в поисковых системах, но и помогает показать пользователям записи, которые были опубликовано достаточно давно и возможно уже оказались незаслуженно забытыми. А именно как раз эти записи могут оказаться очень полезными для некоторых, поэтому периодически поднимать их из архива очень необходимо. Поскольку нам нужно вывести именно случайные записи в нужном месте, то как никак лучше подойдет такая функция WordPress, как query_posts. Она позволяет выводить записи согласно заданным критериям, например только из определенной категории или вообще только определенные записи. Теперь расскажу немножко подробнее об этой функции и приведу несколько примеров, чтобы вы имели о ней представление. Для вывода записей в WordPress используют цикл, так называемый “The Loop”. Обычно он выглядит вот так:
Если перед этим циклом поставить функцию query_post с нужными нам параметрами, то можно добиться нужного нам результата. Приведу первый пример:
Такой код выведет записи из всех категорий, кроме категорий с ID 1, 2 и 3.
Теперь, когда вам понятно что делает эта функция и принцип задания параметров, приведу остальные виды параметров для query_posts:
- query_posts(‘cat=-3′) – Не показывать категорию с Не показывать категории с id, равным 1, 2 и 3;
- query_posts(‘cat=1,5,9′) – Вывести категории с id, равным 1, 5 и 9;
- query_posts(‘category_name=Статьи’) – Вывести категорию с названием “Статьи”;
- query_posts(‘name=Возможности WordPress’) – Вывести запись с названием “Возможности WordPress”;
- query_posts(‘p=12′) – Вывести одну запись, id которой равно 12;
- query_posts(‘pageid=8′) – Вывести одну страницу, id которой равно 8;
- query_posts(‘pagename=Об авторе’) – Вывести страницу, название которой “Об авторе”;
- query_posts(‘cat=3&showposts=5′) – Вывести 5 записей из категории, id которой равно 3;
- query_posts(‘cat=3&orderby=date&order=ASC’) – Вывести записи из категории, id которой равен 3 по дате в хронологическом порядке, т.е выше будут распологаться записи, которые были созданы последними. Если вам надо вывести записи в обратном порядке, то нужно применить параметр DESC;
- query_posts(‘posts_per_page=10′) – Вывести на страницу 10 записей. Если задать значение ‘-1′, то будут выводиться все записи;
- query_posts(‘cat=3&year=2010′) – Вывести записи из категории, id которой равен 3, за 2010 год;
- query_posts(‘orderby=rand&showposts=5&cat=3′) – Вывести случайно 5 записей из категории, id которой равен 3;
- query_posts(‘orderby=rand&showposts=5′) — Вывести случайно 5 записей из всех категорий;
- query_posts(‘meta_key=cars&meta_value=volvo’) – Вывести список записей с произвольным полем “cars” и значением этого поля “volvo”.
Ну что же, мы познакомились с примерами вывода записей согласно заданным параметрам, и теперь можно вывести случайно нужное нам количество записей из всех категорий:
Приведенный выше код выводит случайно 10 записей из всех категорий. Вы можете задавать различные параметры функции query_posts, чтобы добиться нужного вам результата.
Можете даже немного модифицировать этот код и добавить еще вывод в скобках количество комментариев к этой записи:
Кстати, лично я предпочитаю не забивать кодом основные файлы шаблона, а выношу его в виде функции в файл functions.php, присваиваю ей имя, а затем в нужном мне месте прописываю только имя этой функции всего лишь одной строчкой. Приведу пример в нашем случае:
Всю нашу конструкцию мы вложили в функцию с именем randomPosts(), а это значит, что теперь нам достаточно всего лишь вывести имя этой функции в том месте, где это необходимо, т.е достаточно всего лишь написать:
Как видите, все получается чистенько и аккуратно, можете даже написать комментарий в этом месте, пояснив, вывод какой именно функции здесь осуществляется.
Выводим случайную картинку при обновлении страницы
Сегодня поговорим как вывести случайную картинку или файл из группы одинаковых элементов.
На примере: на одном из последних сайтов, который делался клиенту, было необходимо в шапке выводить при обновлении страницы одну из 3 шапок случайным образом.
Можно было бы использовать вот такую штуку Ротатор баннеров при помощи небольшого кода, но у нас одинаковые элементы, которые можно спокойно переименовать. В связи с этим я использовал стандартную функцию php echo(rand(1,5)); .
По итогу достаточно было вставить такое:
Используется стандартный тег HTML для изображений, а вместо цифр в названии изображений стоит функция echo(rand(1,5)); . Т.е. у меня имеется 5 картинок с названиями ferrari_1.jpg, ferrari_2.jpg, ferrari_3.jpg и т.д. Именно в этих названиях я и подменил цифру в функцию.
Смотрите пример ниже (пообновляйте страницу пару раз, CTRL+R).
Таким образом можно случайно выводить изображение не только в шапке сайта, но и в сайдбаре, либо статьях. При этом не только изображения, но и различные файлы. Просто меняем в функции echo(rand(1,5)); цифру 5 на нужное количество файлов и радуемся.
На том же сайте premierdevelopment.ru можно в ротацию поставить примеры квартиры в Климовске и других городах, чтобы пользователи больше взаимодействовали с сайтом.
Привет. Я автор этого блога и ридера вебмастеров/SEO-специалистов WMSN.ru Можешь оставить свой вопрос в комментариях к статье или предложить идею для новой статьи. Не стесняйся.