№ 108: Створення окремих сторінок фрагментів - CSS-хитрощі

Anonim

Ми починаємо з того, що розглядаємо деякі бурхливі роботи, які я робив за лаштунками, розкриваючи деякі речі, які потрібно було зробити. Як додавання решти викликів wp_list_pages () для виведення решти списку фрагментів для кожної категорії. А також додавання в CSS для зміни кольору панелі, що розділяє категорії та списки фрагментів. Ми також змінили наведення категорій, щоб освітлити кольори, замість німої білої межі, яку ми тимчасово мали там. Буквально ми використовували lighten()функцію в Sass, щоб виконати роботу за нас.

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

Сторінки окремих фрагментів будуть схожими на дописи в блозі. Стандартна структура сітки 2/3 1/3 та нормальна бічна панель. Однак є деякі відмінності. Існує чітка ієрархія фрагментів, наприклад

Головна »Фрагменти коду» Категорія фрагмента »Назва фрагмента

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

Інша відмінність полягає в тому, що ми видаємо the_modified_time()замість дати публікації. Таким чином люди знають останню дату оновлення фрагмента, що є більш актуальним, ніж коли він був опублікований. Це також дає мені певну мотивацію для регулярного перегляду фрагментів.

Ми продовжуємо трохи оновлювати старий фрагмент просто задля розваги.

На завершення ми пишемо трохи JavaScript, який змусить наші подання підкатегорій працювати. Ці подання по суті виглядають так само, як наша домашня сторінка фрагментів, лише якщо ви перебуваєте в / snippets / javascript /, фрагменти JavaScript будуть переглядатись за замовчуванням і виділятиметься категорія JavaScript. Вірте чи ні, лише декілька рядків підступних URL-адрес, що піднімають код JavaScript, який, мабуть, повинен бути фрагментом самого себе.