Изработка на плъгин за op изображения за хедъра на сайта
Гледайки приятелите си на работа, забелязах, че кликват върху заглавните снимки http://lifelongjourney.ru с надеждата да стигнат до публикации, съдържащи точно тази снимка.
Преди това имаше само дълга картина, залепена от 4 по-малки. Линкът от него съответно водеше до един пост. Е, роди се идеята да направим този колаж и още 3 броя на склад за 16 снимки, да направим връзка към всяка снимка и да я покажем всичко в заглавката, събирайки 4 снимки на случаен принцип. Разглеждаме lifelongjourney.ru в заглавката на сайта.
Е, ето какво се получи от това.
Като начало изрязах 16 снимки с размер 275 × 182 Ако се използва дъщерна тема (ще пиша подробно за дъщерните теми), тогава правим всички промени във файловете на дъщерната тема. Веднага ще направим резерв за бъдещето - ще генерираме изхода от функцията, съответно във functions.php на дъщерната тема, добавете
и в header.php добавяме извикване към нашата функция, вместо картина с връзка
и ги попълнете с данни
Цикъл, който ще направи заглавка от 4 снимки
Е, първите 4 снимки, които скриптът ни показва! Ура. Почти победа.
Засега нека оставим файла functions.php настрана и се фокусираме върху CSS. Бих искал снимките да изглеждат същите като в оригиналното изображение - т.е. 4px черна рамка около всяко изображение. Нека вземем предвид, че картините, стоящи вътре, не трябва да имат един ръб, в противен случай границата ще бъде твърде дебела. За да направите това, отидете на файла style.css.
Обърнете внимание на #, това е селектор на етикети със специфичен идентификатор, не е най-гъвкавият начин, но ще ни свърши работа, няма да пипаме нищо допълнително. Пирмерът има два блока с почти идентичен код, за първата снимка и за всички следващи.Първият има всичките 4 граници, а останалите само горната, дясната и долната.
Сега трябва да добавим същия идентификатор към линията за генериране на изображение. Променяме цикъла.
% е остатъкът от разделението, направен така, че при желание можете да покажете няколко реда картини. С този дизайн всеки ред ще започва като първия с картина, изцяло поставена в рамка.
Време е да реализираме генерирането на случаен набор от снимки. Естествено, искам да направя това без повторения. За да направим това, ние ще съхраняваме номера на всяка добавена снимка в масив и, когато генерираме следващото произволно число, ще проверяваме дали същото число не е сред вече добавените. Добавете масив и променлива в началото на функцията
и сега ще избере номера на картината с функцията
getNextImage е нова функция, която сега ще напишем. В параметрите се подава масив с вече добавени снимки и общият брой на участващите в селекцията снимки.
Крайният изглед на двете функции:
Следващият път ще прехвърлим съхранението на информация за снимки в базата данни.