# 108: Создание отдельной страницы сниппетов - CSS-хитрости

Anonim

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

Однако цель этого скринкаста - стилизовать представление для одного фрагмента. Если бы я создал эту область сайта совсем недавно, фрагменты могли бы быть настраиваемым типом сообщений (например, скриншоты одной галереи), но их не существовало, когда я начал это делать. По сути, это просто «Страницы», и все они используют собственный шаблон страницы. На самом деле это не имеет большого значения, особенно сейчас, когда большое количество страниц не влияет на производительность.

Отдельные страницы с сниппетами будут очень похожи на сообщения в блогах. Стандартная сетка 2/3 1/3 и обычная боковая панель. Однако есть некоторые отличия. Для сниппетов существует четкая иерархия, например

Главная »Фрагменты кода» Категория фрагментов »Имя фрагмента

Это идеально подходит для суб-навигации «черная полоса», которая развивается на этом сайте. Наш плагин Yoast SEO обеспечивает функциональность хлебных крошек, так что это легко - достаточно вызвать функцию.

Еще одно отличие состоит в том, что мы выводим the_modified_time()вместо даты публикации. Таким образом люди узнают дату последнего обновления фрагмента, что более актуально, чем дата его публикации. Это также дает мне некоторую мотивацию для регулярного пересмотра сниппетов.

Мы идем немного в сторону, обновляя старый фрагмент просто для удовольствия.

В конце мы напишем немного JavaScript, который заставит работать наши представления подкатегорий. Эти представления по сути выглядят так же, как наша домашняя страница фрагментов, только если вы находитесь в / snippets / javascript /, фрагменты JavaScript будут отображаться по умолчанию, а категория JavaScript будет выделена. Вы не поверите, но всего несколько строк скрытого кода JavaScript, который, вероятно, должен быть фрагментом самого себя.