№ 122: Створення архіву відео, частина 1 - CSS-хитрощі

Anonim

Сторінка архіву відео - це частина сайту, де люди можуть переглядати всі безкоштовні відео, доступні для перегляду. Це для перегляду, має сподобатися домашня сторінка для фрагментів або домашня сторінка для демонстраційних версій.

Ці сторінки є їхнім власним шаблоном, який ми можемо дуже швидко та легко створити у формі, як це було зроблено багато разів раніше. Ми кладемо власну обгортку навколо речей і використовуємо нашу структуру сітки, щоб надати їй макет 2/3 1/3.

Для мене тут дуже захоплює те, що ми отримуємо можливість вирвати стару валову націнку і замінити її більш розумною та автоматично генерованою розміткою. Раніше я писав кожен запис до відеоархівів як список визначень. Для початківців це, мабуть, не правильна семантична розмітка для списку відео, особливо коли кожен запис починає новий список.

Натомість ми вириваємо всю стару розмітку і замість цього запускаємо ретельно сформований запит, щоб зачепити всі потрібні нам дані з WordPress. Ми запускаємо цикл над цим запитом і виводимо нову розмітку, яка є чистішою (просто divs з класами). Це заощадить нам час у майбутньому, не потребуючи ручного обслуговування цих архівних сторінок.

Поки ми пишемо цю нову розмітку, ми додаємо їй функції WordPress, які заповнюють біти, які нам потрібні, щоб бути динамічними. Назви є the_title(). Посилання є the_permalink(). Ескізи - це власні поля. Легкий сирний.

У div використовуються назви класів з нашої сіткової системи, так що всі плаваючі та розмірні та інші матеріали автоматично працюють. Хіба ми не ефективні? Хоча деякі CSS мають бути налаштовані, і ми пишемо те, що було потрібно. Наприклад, налаштування відступів для модулів спеціально в цьому розділі (це було занадто багато, ми його зменшили). Подібні речі легко зробити за допомогою доступних нам назв класів, оскільки ми розумно використовували body_class()шлях назад, коли працювали над головою.