Как я структурировал свой CSS и модифицировал свою дочернюю тему, чтобы получить эффектный переход к одностраничному приложению.

Я всегда использовал WordPress для своего личного веб-сайта/портфолио. Я начал с SaaS-версии WordPress.com, прежде чем перейти на WordPress.org в начале этого года. Как многие говорили мне, WordPress.org действительно открыл гораздо больше возможностей по сравнению с WordPress.com, благодаря его зрелой теме и экосистеме плагинов, а также лучшему доступу к настройкам HTML и CSS. Это было действительно состояние «все, что вы можете придумать, вы можете построить».

Однако долгое время я думал, что сайт WordPress всегда будет таким: сайт WordPress. Я думал, что у меня не было возможности получить переход, который предлагают современные конструкторы сайтов, когда только часть страницы обновляется при переходе на другую страницу.

Пока я не наткнулся на некую JavaScript-библиотеку Smoothstate.js (и ее близкого конкурента Barba.js).

Я просмотрел учебные пособия о том, как интегрировать Smoothstate.js в WordPress, и, честно говоря, это выглядело просто. Однако ни одно из руководств не содержит подробного руководства о том, как организовать ваш сайт WordPress, чтобы убедиться, что все работает так, как это было до интеграции Smoothstate.js. Проведя целые выходные, преодолевая препятствия, с которыми я столкнулся, и устраняя небольшие перегибы здесь и там, я решил описать весь процесс в надежде, что другие, столкнувшиеся с подобными трудностями, смогут извлечь пользу из этой документации.

Создание дочерней темы

Перво-наперво, как и во многих учебниках, которые я нашел, я рекомендую создать дочернюю тему для размещения всех настроек, которые мы будем делать, если только вы не создали свою собственную тему с нуля. Причина в том, что любые настройки, внесенные в родительскую тему, будут потеряны при ее обновлении до последней версии, и настоятельно рекомендуется обновить все ваши сторонние зависимости, чтобы исправить любые возможные уязвимости безопасности.

Я не буду вдаваться в подробности создания дочерней темы, но если вам понадобится помощь, вы можете найти множество руководств в Интернете. Я бы порекомендовал выполнить шаги, предусмотренные выбранной вами сторонней темой. Например, Astra имеет отличную документацию по этому вопросу и даже предоставляет инструмент для создания дочерней темы для вас! Как только вы закончите, активируйте эту дочернюю тему, и мы будем готовы начать!

Агрегирование вашего пользовательского CSS

Следующее, что нам нужно сделать, это объединить любой пользовательский CSS, который вы, возможно, написали, в один файл, который будет поставлен в очередь при начальной загрузке вашего сайта, независимо от того, с какой страницы он загружается. В то время как встроенный CSS, добавленный непосредственно в ваш HTML, по-прежнему будет корректно отображаться с помощью Smoothstate.js, этого нельзя сказать о стилях, применяемых через атрибут класса. Я считаю, что если вы используете такой плагин, как Autoptimize, который имеет возможность объединять ваш CSS в один файл, вы можете пропустить этот шаг. Однако, если вы все равно решите это сделать, позвольте мне поделиться с вами двумя способами, которыми это можно сделать:

  1. Добавление всего вашего CSS прямо во встроенный редактор CSS WordPress Customizer. Вы можете получить к нему доступ через Внешний вид → Настроить → Дополнительный CSS. Преимущество такого способа заключается в том, что вы можете просмотреть свои изменения в реальном времени, если вы добавили соответствующие классы в свой HTML-код на каждой странице.
  2. Добавление всего вашего CSS в таблицу стилей вашей дочерней темы. Вы можете получить доступ к этому Внешний вид → Редактор тем. Выберите дочернюю тему и отредактируйте файл style.css. Вы не сможете увидеть изменения вживую, если выберете этот путь, но я лично решил сделать это таким образом, потому что я установил плагин под названием HTML Editor Syntax Highlighter, который красиво кодирует цветом мои классы и атрибуты CSS.

Добавление Smoothstate.js на ваш сайт

Наконец, шаги, ради которых мы все здесь! Для интеграции Smoothstate.js в WordPress я выполнил шаги, описанные в этом учебнике. Этот вариант мне понравился больше других просто потому, что он пропускал создание тега div-оболочки в HTML, что может быть непросто сделать, если вы используете стороннюю тему. И элемент со страницей в качестве идентификатора, и элемент с классом сайт-контент кажутся универсальными элементами WordPress, но я могу ошибаться (в моей теме Astra они есть). Если после выполнения этого руководства Smoothstate.js не работает, вы можете проверить свой HTML-код в браузере.

Для справки: элемент с идентификатором «страница» на моем сайте — это тег div, который является прямым дочерним элементом тега body, а элемент с классом «site-content» — родственный элемент тега заголовка, расположенный непосредственно после последний.

Первое, что нужно сделать, это загрузить последнюю версию Smoothstate.js. Затем добавьте загруженный файл сценария и еще один файл, содержащий описание сценария ниже, в ту же папку. Лично я предпочитаю добавлять их оба в assets/js в папке моей дочерней темы, потому что тогда они появятся в редакторе тем вместе с таблицей стилей дочерней темы и файлами PHP, что значительно упрощает редактирование. Для этого используйте FTP-клиент вашего хостинг-провайдера.

Начало сценария выше немного отличается от руководства, потому что я решил использовать jQuery, связанный с WordPress, для которого включена функция use-strict.

После того, как все вышеперечисленное будет сделано, все, что осталось, — поставить скрипты в очередь и добавить немного CSS. Для последнего вы можете принять и изменить CSS учебника, поскольку классы, на которые он влияет, не изменяются в приведенном выше сценарии. Или вы можете скопировать мою версию ниже, которая не включает скользящую анимацию.

Не забудьте добавить CSS так же, как в предыдущем разделе. После этого откройте Внешний вид → Редактор тем и добавьте следующие строки в файл functions.php:

Вам нужно заменить your-child-theme на имя вашей дочерней темы. Однако, если вы решили разместить свои сценарии в другом месте, вам необходимо соответствующим образом отследить каталог.

Сохраните изменения и запустите свой сайт, чтобы увидеть, как Smoothstate.js применяет частичное обновление, когда вы перемещаетесь по сайту!

Сглаживание перегибов

Итак, мы закончили? К сожалению, нет, если вы не используете какие-либо другие плагины на своем сайте, то, вероятно, вы закончили (тогда вы можете сразу перейти к следующему разделу). Однако, если вы используете какие-либо другие плагины для создания контента вашего сайта, есть вероятность, что они не будут работать или отображаться неправильно. Причина в том, что при применении изменений Smoothstate.js не перезагружает какую-либо таблицу стилей и не запускает функции, характерные для этой страницы, поскольку технически страница не перезагружается; это просто "обновлено".

Лично ни один из плагинов для создания контента, которые я использую, не требует запуска скриптов при загрузке. Если то же самое относится и к вам, то нужно поставить в очередь необходимый файл CSS при начальной загрузке вашего сайта. Чтобы узнать, какую таблицу стилей нужно поставить в очередь, вы можете выполнить следующие простые шаги:

  1. Откройте вкладку инкогнито в своем браузере.
  2. Запустите консоль разработчика браузера (вы можете быстро узнать, как это сделать, поскольку инструкции специфичны для каждого браузера).
  3. Перейдите на вкладку «Сеть» консоли разработчика и примените фильтр «CSS».
  4. Теперь запустите домашнюю страницу вашего сайта и посмотрите, какие файлы загружает браузер. Обратите внимание на них.
  5. После этого откройте новую страницу в режиме инкогнито и повторите шаги со 2 по 4.
  6. Если вы заметили, что загружается какой-либо файл, которого нет в предыдущем списке, щелкните этот файл в консоли разработчика, а затем перейдите на вкладку «Заголовки».
  7. Посмотрите на URL-адрес запроса. Он укажет, откуда этот файл извлечен. Обратите внимание на путь от «wp-content» и далее.

Сделайте это для любой страницы, где вы заметили проблему с отображением. Получив пути ко всем дополнительным таблицам стилей, перейдите в Внешний вид → Редактор тем и откройте файл functions.php. Теперь посмотрите, есть ли уже функция постановки в очередь таблицы стилей. Если нет, создайте новый и поставьте его в очередь, следуя приведенному ниже фрагменту:

Для каждого пути, который вы записали, примените код, написанный в строке номер 8. Замените my-missing-theme-name именем таблицы стилей, my-missing-theme-path с путем к таблице стилей и my-missing-theme-version с версией таблицы стилей, если она есть (в противном случае оставьте значение ''). Нажмите «Обновить файл» и попробуйте снова запустить и перемещаться по сайту. Будем надеяться, что все проблемы с рендерингом теперь исправлены.

Приведенное выше исправление применимо только для устранения проблемы с отсутствующими таблицами стилей. Если ваш плагин требует, чтобы одна или несколько функций выполнялись при загрузке страницы, то, согласно этому сообщению в блоге, вам нужно будет снова вызвать эту функцию, добавив ее в свойство onAfter настройки Smoothstate.js. .

Добавление загрузчика

К этому моменту, я надеюсь, у вас есть обновленный сайт с должным образом интегрированным Smoothstate.js. Если вы размещаете свой сайт на управляемом хостинге с отличной пропускной способностью, скорее всего, вам это не понадобится. Однако, если, как и я, вы размещаете свой сайт на общем плане хостинга, то иногда переход вашего сайта с одной страницы на другую может занять больше времени, чем ожидалось. Вот тут и приходит на помощь загрузчик!

Идея загрузчика состоит в том, чтобы предоставить пользователю индикатор того, что сайт не сломан. Я считаю, что показать посетителю что-то лучше, чем ничего. Тем не менее, наличие загрузчика, отображаемого при каждом переходе страницы, также будет раздражать пользователя. Следовательно, важно настроить время допуска перед отображением загрузчика.

Поскольку наш сайт теперь применяет переходы Smoothstate.js, этот загрузчик будет отображаться только тогда, когда посетитель уже находится на вашем сайте и переходит между страницами. Он не будет отображаться при начальной загрузке вашего сайта.

Поскольку мы переносим тег div с классом «site-content», нам нужно будет добавить загрузчик в качестве родственного элемента этому элементу. Нам также нужно будет убедиться, что загрузчик занимает только оставшееся пространство под заголовком, который остается неизменным на протяжении всего визита посетителя на сайт.

Для этого нам потребуется изменить файл header.php дочерней темы. Однако есть вероятность, что созданная вами дочерняя тема не имеет файла header.php. Если это так, все, что вам нужно сделать, это скопировать файл header.php родительской темы в дочернюю тему с помощью FTP-клиента вашего хостинг-провайдера. После этого вы можете перейти в Внешний вид → Редактор тем и получить доступ к файлу header.php дочерней темы. Там найдите тег HTML с классом «сайт-контент».

Прежде чем изменять файл header.php, просмотрите веб-страницы или создайте хороший загрузчик на чистом CSS. Если вы предпочитаете перенимать чей-то дизайн, я рекомендую взять его с loading.io. Все 12 дизайнов, показанных в гиперссылке, имеют лицензию CC0 и поэтому могут использоваться свободно.

Скопируйте теги HTML вашего выбранного загрузчика прямо над тегом HTML с классом «site-content». Дайте вашему загрузчику свойство id, чтобы мы могли легко ссылаться на него в нашем скрипте позже. Вы можете обратиться к фрагменту ниже для справки. Не забудьте добавить CSS в объединенный файл CSS, выполнив действия, описанные в предыдущем разделе.

Как видите, загрузчик инициализируется встроенным атрибутом стиля «display: none». Мы будем обрабатывать отображение и скрытие как содержимого, так и загрузчика с помощью некоторого jQuery, дополняя пользовательский скрипт, который мы сделали выше.

С учетом сказанного перейдите к пользовательскому файлу сценария в папке assets/js (или куда вы только что поместили свой) и приготовьтесь внести некоторые изменения. Первое, что нам нужно сделать, это указать Smoothstate.js что-то делать во время рендеринга страницы. Это делается путем добавления свойства onProgress в его объект настроек. Во время onProgress мы отображали загрузчик и скрывали содержимое. А затем в onAfter мы делаем обратное.

Однако, как обсуждалось ранее, мы не хотим, чтобы загрузчик отображался сразу же все время. Следовательно, нам нужно установить окно допуска. Только когда загрузка занимает больше, чем окно допуска, мы показываем загрузчик, чтобы предупредить посетителя о досадной задержке. Мы можем легко сделать это, вызвав функцию «setTimeout», предоставляемую JavaScript.

Однако теперь возникает другая проблема! Представьте, что мы предоставляем окно допуска в 1 секунду (1000 мс). Когда страница обновляется, состояние onProgress инициализирует внутренний таймер, чтобы показать загрузчик через 1 секунду. Однако на самом деле страница загружается через 700 мс, в течение которых выполняется процедура onAfter. Если мы не укажем коду остановиться и сбросить внутренний таймер, загрузчик будет показан после загрузки страницы, что неправильно! Следовательно, нам также необходимо изменить onAfter, добавив «clearTimeout» для сброса любого инициированного таймера перед рендерингом страницы.

С учетом всего сказанного, полный код можно увидеть во фрагменте ниже:

В приведенном выше примере мы назначаем окно допуска в 1 секунду (1000 мс). Когда страница загружается, установите внутренний таймер и назначьте его переменной loaderTimer. Если страница загружена до окна допуска, проверка существования loaderTimer вернет значение true, и мы сбросим внутренний таймер. Однако, если загрузка страницы занимает более 1 секунды, внутренний таймер отобразит загрузчик, который будет удален после отображения страницы.

Добавление (или восстановление) Google Analytics

При правильной реализации вышеперечисленного UI/UX вашего сайта должен выглядеть шикарно и современно. К сожалению, если вы включили Google Analytics на свой сайт WordPress, он больше не будет работать правильно.

Причина в том, что когда читатели перемещаются по вашему сайту, скрипт Analytics запускается только один раз во время начальной загрузки страницы. Любая последующая навигация приводит лишь к частичному обновлению HTML-тега body. Таким образом, сценарии, которые обычно запускаются после завершения перезагрузки страницы, не будут выполняться.

Чтобы Google Analytics снова отслеживал переходы по страницам на вашем веб-сайте, нам потребуется использовать Autotrack, который является официальным подключаемым модулем Google для обеспечения работы Analytics на веб-сайте на основе AJAX. Таким образом, нам необходимо внести следующие изменения:

  1. Если вы используете подключаемый модуль Google Site Kit (который вам следует использовать, если вы его еще не использовали), перейдите в раздел Настройки → Аналитика и отключите функцию «Разрешить размещение кода Site Kit на вашем сайте».
  2. Прежде чем мы повторно вставим скрипт аналитики обратно на наш сайт вручную, мы создадим еще один пользовательский файл JavaScript (см. файл analytics-autotrack.js в приведенном выше списке) и добавим его в нашу дочернюю тему assets/js.
    Этот сценарий в основном является модификацией сценария по умолчанию, предоставленного Google. На самом деле вы можете оставить сценарий по умолчанию, если вас интересует только просмотр страницы.
  3. Наконец, давайте перейдем к файлу functions.php дочерней темы и добавим следующий код, чтобы поставить в очередь пользовательский скрипт выше вместе с файлами analytics.js и autotrack.js в файл заголовка нашего сайта.

С указанными выше изменениями, когда инициируется вызов AJAX для перехода читателя на новую страницу, эта информация будет отправлена ​​​​в Google Analytics, что снова предоставит вам точные данные. Что также приятно, так это то, что любые другие средства отслеживания событий, добавленные в пользовательский файл JavaScript выше, также будут отправляться в Google Analytics по мере их запуска. Аккуратный!

Фу! Это было довольно долго. Если вы дошли до конца, поздравляю, и я надеюсь, что вы успешно применили Smoothstate.js к своему сайту WordPress! Если вы прочитали все это, но еще не попробовали, я настоятельно рекомендую вам это сделать. Это не так сложно, как кажется 😄 И если вам нужно больше вдохновения, я надеюсь, что мой веб-сайт портфолио сделает именно это!

использованная литература

  1. Официальный репозиторий smoothState.js на GitHub
  2. официальный репозиторий autotrack на GitHub
  3. Добавление переходов страниц в WordPress
  4. Как интегрировать SmoothState.js в тему WordPress
  5. Переходы страниц в WordPress с SmoothState
  6. Использование Google Analytics для тем на базе Ajax