Теперь у нас есть дизайн Photoshop, с которым можно работать для домашней страницы области фрагментов. В нем гораздо больше возможностей для просмотра, чем раньше, но он сохраняет дух радуги, который был раньше. Теперь мы можем перейти к его созданию в наших шаблонах WordPress. Написание всего HTML, PHP и CSS, и ВЫ ЗНАЕТЕ УРОВЕНЬ!
Первый шаг - это перемещение по нашему настраиваемому заголовку, который мы подготовили для статического дизайна. Это означает изменение небольшого количества HTML, чтобы иметь правильные элементы оболочки. Это также означает, что необходимо убедиться, что в заголовке есть условная логика для загрузки CSS, специфичного для этой области. Это всегда заставляет меня думать о правиле 1, 2 или 3, которое у меня есть для файлов CSS и файлов JavaScript на любом конкретном веб-сайте. CSS-Tricks - прекрасный пример веб-сайта «2», где у нас есть глобальные стили и CSS для каждого специального раздела сайта, где есть довольно много уникальных стилей. Этот макет фрагментов, безусловно, уникален.
Чтобы получить весь необходимый нам вывод на этой странице, мы снова используем кучу вызовов wp_list_pages (). Мы говорим о том, что это может быть проблематично, потому что это такой интенсивный вызов, и у нас были проблемы с ним в прошлом, когда мы создавали область Альманаха. Однако, поскольку мы увеличили использование памяти и используем кеширование, это не имеет большого значения.
Мы заканчиваем скринкаст всем, что нам нужно, выводом на страницу и очень простой настройкой сетки. Теперь мы можем перейти к тому, чтобы сделать его похожим на наш макет, и в конечном итоге добавить взаимодействия.