Twenty Twenty-Five — это новая тема по умолчанию для WordPress версии 6.7. Тема Twenty Twenty-Five отличается простотой и адаптивностью. Она предлагает гибкие варианты дизайна, поддерживаемые различными шаблонами для разных типов страниц, таких как сервисы и целевые страницы, что делает её идеальной для создания личных блогов, профессиональных портфолио, онлайн-журналов или бизнес-сайтов.
Его шаблоны подходят для различных стилей блогов, от текстовых до насыщенных изображениями. Кроме того, он поддерживает международную типографику и разнообразные цветовые палитры, обеспечивая доступность и возможность персонализации для пользователей по всему миру.
Twenty twenty-Five предназначен для поддержки функций редактирования сайта, включая:
Редактор сайта: редактор, который позволяет редактировать все части вашего сайта, переключаться между шаблонами, создавать новые страницы и многое другое.
Стили: функция, которая позволяет настраивать ваш сайт, включая отдельные блоки, по своему усмотрению с помощью различных цветов, шрифтов, макетов и многого другого.
Выберите одну из нескольких цветовых палитр и пар шрифтов или загрузите и установите свои собственные шрифты.
Шаблоны: редактируйте, создавайте и управляйте шаблонами, используемыми для страниц, постов и другого контента.
Шаблоны: создавайте свой сайт с помощью готовых шаблонов, от полностраничных до небольших элементов.
Шаблоны блога по умолчанию имеют невероятно простую и понятную структуру, подходящую для любого поста (с заголовком или без, с иллюстрацией или без, длинным или коротким). Шаблоны также отображают весь контент поста, а не только выдержки.
Тема предлагает вариант шаблона для тех, кто хочет, чтобы их блоги состояли только из текста, как на главной странице, так и в архивах, поиске и публикациях.
Шаблоны фотоблогов предназначены в первую очередь для фотографов или портфолио и ориентированы на использование большого количества изображений. Они имеют интересные макеты, которые можно использовать для различных целей.
В новостном блоге есть три продвинутых варианта оформления главной страницы на выбор. Шаблон одного новостного поста по умолчанию включает боковую панель справа от основного контента.
Вертикальный заголовок, выровненный по правому краю
В этом альтернативном дизайне блога используется разделённый макет, созданный с помощью блока столбцов. Слева находится узкий вертикальный заголовок с меню и названием сайта, а справа — весь контент.
Одиночный пост с выровненным по левому краю содержанием
В этом альтернативном шаблоне в верхней части страницы более заметный раздел с заголовком публикации, выровненным по левому краю, и автором публикации в левом столбце, а также с изображением в правом столбце. Под этим разделом указаны дата публикации и категории. Содержимое публикации также выровнено по левому краю, что создает гармоничную композицию.
Одиночный пост со смещением без характерного изображения
В этом альтернативном шаблоне отображается крупный заголовок публикации, за которым следуют категории публикаций. Разделитель отделяет этот верхний раздел от нижнего раздела с контентом, в котором используется двухколоночная компоновка: дата публикации слева и контент публикации справа.
Страница без заголовка страницы
Этот альтернативный шаблон лучше всего подходит для страниц, на которых вы хотите видеть только содержимое, а не заголовок страницы или изображение.
Этот шаблон может быть полезен, если вы хотите создать целевую страницу с помощью одного из полностраничных шаблонов, доступных в Twenty Twenty-Five, как показано в примере ниже:
С помощью функции «Уменьшить масштаб» в WordPress 6.7 вы можете получить более широкое представление о шаблоне или странице, которую редактируете. Вы можете добавлять, упорядочивать, перемешивать или удалять шаблоны по своему усмотрению.
В Twenty Twenty-Five есть девять вариантов стилей с уникальными цветовыми палитрами, семействами шрифтов и настройками типографики. Каждая цветовая палитра и пара шрифтов также доступны в виде отдельных предустановок, что означает, что вы можете комбинировать их по своему усмотрению.
Стили Twenty Twenty-Five: по умолчанию, вечерний, дневной, вечерний, полуденный, сумеречный, утренний, рассветный и полуночный.
В стандартном варианте стиля «Двадцать двадцать пять» для заголовков и абзацев используется шрифт Manrope. В этом стиле используется белый цвет с тёмно-серыми и жёлтыми, розовыми и фиолетовыми акцентами.
Двадцать двадцать пять функций более 70 шаблонов, включая шаблоны разделов, такие как «О нас», «Контакты», «Призыв к действию», «События», «Герой», «Услуги» и «Отзывы», а также полностраничные шаблоны, такие как «Целевая» и «Главная» страницы.
Вы можете использовать стили разделов в своём контенте или шаблонах, чтобы создать разнообразный дизайн и выделить или разделить разные типы контента. Раздел создаётся путём вставки столбцов или группового блока и выбора одного из шести стилей разделов. Каждый раздел будет иметь уникальную доступную цветовую комбинацию на основе текущей цветовой палитры.
Тема поддерживает все форматы публикаций: примечания, аудио, чат, галерея, изображения, ссылки, цитаты, статусы и видео. Чтобы стилизовать публикации так, чтобы они отличались от других, вы можете использовать стили разделов и шаблоны в своем контенте.
Тема включает в себя три шаблона для форматов сообщений:
Название формата публикации (отображается одно слово, например «Видео»)
WordPress 6.7: тема «Двадцать двадцать пять» и редактирование сайта. Уменьшение масштаба
WordPress 6.7, который вышел 12 ноября 2024 года, стал самым значительным обновлением года.
Этот выпуск включает в себя новую тему по умолчанию, улучшенные инструменты пользовательского интерфейса, улучшения для мультимедиа и редактора, новую регистрацию шаблонов и API для предварительного просмотра.
Этот выпуск отражает стремление WordPress сделать создание сайтов более мощным и интуитивно понятным.
WordPress 6.7 (TOC):
Обзор WordPress 6.7
Основные моменты релиза включают в себя:
Новая тема по умолчанию Twenty Twenty-Five
Улучшенный Редактор блоков
Прямое управление Привязками блоков
Переопределенные представления данных
Уменьшите масштаб, чтобы создавать композиции с помощью шаблонов
API параметров предварительного просмотра
Улучшенный Пользовательский опыт
Повышение производительности
Улучшения безопасности
Изучение Функций и улучшений WordPress 6.7
Новая тема по умолчанию: Twenty Twenty-Five
Одной из главных особенностей WordPress 6.7 является запуск новой темы по умолчанию — Twenty Twenty-Five.
Новая тема WordPress: Twenty Двадцать пять
Эта тема отличается лаконичным дизайном, доступностью и гибкостью. Она создана для бесперебойной работы с последними обновлениями редактора блоков WordPress и новыми инструментами дизайна, такими как:
Это позволяет вам добавить сетку для увеличения плотности информации.
Вы можете скрыть / показать фильтры.
Это позволяет вам изменять порядок столбцов в табличных представлениях.
Выберите параметры просмотра данных из меню, чтобы обеспечить большую выразительность дизайна.
Пользователи могут рассчитывать на улучшенный интерфейс в разделе «Шаблоны» для создания собственных шаблонов непосредственно в настройках темы.
Экран Всех шаблонов WordPress
Кроме того, функция «Шаблоны» была расширена, что позволяет пользователям применять более широкий спектр шаблонов с большим количеством вариантов настройки.
Все выкройки на двадцать Двадцать пять
Улучшенный Редактор блоков
В WordPress 6.7 вы можете увидеть обновлённый редактор блоков, предлагающий больше возможностей и улучшенный интерфейс.
Благодаря этим обновлениям вы сможете более интуитивно понятно настраивать дизайн, лучше управлять макетом и быстрее получать доступ к настройкам отдельных блоков.
Это, несомненно, удобный инструмент для редактирования как для новичков, так и для опытных пользователей.
Например, расширенные настройки типографики дают пользователям больше возможностей для редактирования текста в различных блоках.
Посмотрите настройки размера шрифта:
Предустановленные Параметры размера шрифта
Прямое управление Привязками блоков
API привязки блоков, представленный в WordPress 6.5, получит значительное обновление в WordPress 6.7. Это усовершенствование позволит разработчикам лучше управлять пользовательскими полями и атрибутами в блоках.
Смотрите изображение ниже:
Опция Обновления атрибутов
Теперь вы можете выбирать метаданные напрямую с помощью обновлённого пользовательского интерфейса в настройках блока. Это обновление упростит и ускорит интеграцию пользовательских данных в ваши блоки. В результате вам не придётся использовать редактор кода для подключения атрибутов блока к пользовательским полям.
Переопределенные представления данных
WordPress 6.7 предлагает обновлённую функцию просмотра данных для более удобной настройки и управления.
Просмотр экрана Опций
Это позволяет пользователям более эффективно настраивать отображение данных и управлять ими с точки зрения:
Сортировка (например, по дате, порядку и т.д.)
Свойства (т.е. Название, Автор и статус)
Скрытый (например, Дата и Обсуждение)
Это упрощает организацию данных, их фильтрацию и действия с ними, предоставляя редактору больше возможностей.
Уменьшите масштаб, чтобы создавать композиции с помощью шаблонов
Кроме того, блок «Галерея» теперь поддерживает функцию лайтбокса. Эта функция улучшает визуальное восприятие, позволяя пользователям увеличивать изображения, не покидая основной контент.
Смотрите изображение ниже:
Опция уменьшения масштаба
Вы также можете улучшить работу со мультимедиа, сжав изображения и оптимизировав скорость загрузки.
Обновление также упрощает управление и организацию медиафайлов, обеспечивая более быстрые и эффективные рабочие процессы. Это обновление пойдет на пользу сайтам с большим объемом контента, стремящимся повысить производительность и предоставлять пользователям медиаконтент с более быстрой загрузкой.
API параметров предварительного просмотра
С помощью нового API параметров предварительного просмотра WordPress 6.7 вы можете просматривать пользовательские настройки предварительного просмотра непосредственно в редакторе.
Опция предварительного просмотра в WordPress 6.7
Это обновление позволяет лучше представить, как будет выглядеть контент до его публикации.
Улучшенный Пользовательский опыт
WordPress заботится о том, чтобы обеспечить наилучший пользовательский опыт. В недавнем выпуске основное внимание уделяется нескольким улучшениям этого опыта.
Ключевыми улучшениями являются:
Улучшенное управление блоками
Улучшенное управление средствами массовой информации
Улучшена скорость реагирования в редакторе блоков
Эти обновления позволяют пользователям более эффективно создавать свои сайты, упрощая процесс создания и настройки контента без каких-либо технических знаний.
Повышение производительности
В WordPress 6.7 внесены заметные улучшения производительности, направленные на оптимизацию скорости загрузки и управление ресурсами.
С помощью механизмов сжатия изображений и кэширования вы можете быстрее загружать медиафайлы и сокращать время загрузки страниц.
Эти обновления призваны сделать сайт более удобным для посетителей, что приведёт к повышению вовлечённости и удержанию клиентов.
Улучшения безопасности
В последней версии WordPress улучшена безопасность за счёт добавления новых элементов управления для привязки блоков, которые ограничивают права на редактирование только для пользователей с правами администратора.
Кроме того, снижается вероятность несанкционированного доступа к вашему сайту, например, через межсайтовый скриптинг (XSS) и уязвимости, связанные с внедрением SQL-кода.
Эти улучшения направлены на защиту пользовательских данных, снижение рисков манипулирования сайтом и повышение безопасности WordPress как платформы для создателей и администраторов сайтов.
Вы только что установили на свой хостинг новый движок WordPress. И первое, что вы делаете после установки, — это настраиваете свой сайт и выбираете подходящую тему для вашего блога.
Я тоже раньше использовал готовые темы для своих сайтов, но теперь предпочитаю работать с базовыми темами, которые идут в комплекте с движком. Долгое время я использовал тему Twenty Twenty с небольшими изменениями, и меня всё устраивало. Однако с выходом шестой версии WordPress, на основе которой была создана Twenty Twenty, я решил перейти на более современный движок и тему.
Новый движок WordPress 6 и верстка блоками
Я осознанно перешёл на новую версию, и дело было не в улучшенном дизайне или более продвинутой теме. С переходом на 6 версию полностью изменился подход к вёрстке страниц и блоков. Теперь элементы страницы, такие как шапка и подвал, больше не представляют собой смесь HTML и PHP кода, поэтому изменить их вручную по-старому уже не получится.
Многие настройки стиля теперь хранятся в глобальных параметрах CSS и прописаны в файле theme.json. Из-за этого их нельзя изменить в файле style.css, если только не указать директиву!important.
Однако это неверный подход. Это попытка решения проблем с использованием старых методов, которые применялись ранее, вместо того чтобы воспользоваться встроенными функциями WordPress 6. Для этого необходимо изучить и освоить новые возможности, что потребует времени.
Со временем вы начинаете ценить преимущества шестой версии. В редакторе есть множество готовых блоков, которые позволяют создавать информативный контент без использования дополнительных плагинов. Вы можете добавлять изображения, кнопки и видео, и всё это будет автоматически адаптироваться под любой экран и разрешение устройства.
Поэтому мы загружаем последнюю версию WordPress с официального сайта wordpress.org или используем предустановленную версию WordPress в панели управления хостингом. Затем мы разрабатываем дизайн, используя блоки.
В этой статье я пройдусь по настройке сайта на базовой теме twenty twenty four по следующему плану:
Открываем только что установленный сайт на Вордпрессе. Сразу бросается в глаза, что главная страница заточена под лендинг, где первые два экрана продающие. Ссылки на статьи блога появляются только после двух страниц скрола. Мобильная версия, кстати, отлично парсится под экран смартфона.
Если вы создаёте сайт-лендинг для своего продукта, компании или чего-то другого на платформе WordPress, оставьте дизайн без изменений. Просто наполните его своим контентом.
Если у вас новостной блог и вам нужен журнальный стиль для главной страницы, то можете оставить текущий дизайн. Сейчас ваша главная страница не совсем похожа на блог, но я расскажу вам, как сделать её похожей на главные страницы таких изданий, как Bloomberg или Лента.ру.Сейчас нам важно выполнить базовые настройки темы.
В настройках темы twenty-twenty-four вы также можете найти раздел «Паттерны». Там вы обнаружите более 30 готовых дизайн-решений для статей, обложек и галерей. Поверьте, эта тема способна на многое даже по умолчанию.
И самое важное: пока вы не наполните сайт контентом — статьями и разделами — не из чего будет создавать дизайн. Поэтому сначала нужно поработать над контентом и SEO, чтобы сделать сайт популярным.
Надеюсь, я убедил вас, что базовая тема — это удобное и полезное решение. Теперь перейдём к настройке.
Создаем дочернюю тему
Зачем нужна дочерняя тема? Она нужна, чтобы все ваши изменения в дизайне хранились в дочерней теме и никакие обновления движка или основной темы ваши правки не потерли. Есть отдельная статья про дочерние темы
Заходим в /themes и создаем папку /twentytwentyfour-child
В эту папку нужно поместить 2 файла: style.css и functions.php
Style.css должен содержать всего три строчки. Theme Name должно отличаться от других установленных тем Template должно содержать название папки с родительской темой, то есть twentytwentyfour.
Теперь можно заходить в раздел Темы, где вы увидите новую дочернюю тему. Если вы все сделали верно, то активировав ее вы не увидите никаких изменений на сайте. Но если мы внесем правки к файл style.css внутри дочерней темы, то они будут работать независимо от основной темы. При этом стили основной темы продолжат работать, а изменятся только те, которые определены в файле style.css дочерней папки.
Проверим? Заходим в Инструменты (Tools) -> Редактор тем (Theme editor) и в пустом, совершенно, пустом style.css добавляем строку:
p { color: #ff0000; }
Жмем “Сохранить” и проверяем результат. Текст сайта поменяется на красный.
Конечно, это не означает, что нужно все теперь переписать в файле дочерней темы. Ручками стили имеет смысл писать только для тех специальных случаев, когда невозможно добиться этого настройками темы.
Настройки сайта на WordPress
Как отображаются URL Идем в настройки, в раздел “Постоянные ссылки” (Permalinks) и меняем стиль отображения адресов сайта на такой как на картинке, чтобы в адресе было и название раздела и название статьи. Это нам нужно для SEO.
Чуть ниже в настройках есть такая строчка — “префикс для рубрик”. Вот здесь необходимо поставить точку. Просто “.” Это избавит нас от дублирования ссылок на разделы с коротким url с названием категории и со словом ‘category’. Яндексу это не нравится. Если вы оставите category, то поисковики будут рассматривать оба варианта ссылки /category/finance и /finance как дублирующие контент, что плохо для SEO.
Необходимые плагины
Удалите предустановленные плагины: Akismet и Hello,Dolly.
Вместо этого установите плагин для создания микроразметки. Если нужно, чтобы плагин сделал все сам, выбираем Schema & Structured Data. Если хотите иметь возможность и автоматом и вручную прописать разметку, я посоветую Schema Scalpel Это также важно для SEO.
Не ставьте монструозные SEO плагины типа Yoast или All-in-One SEO съедают больше ресурсов движка и назойливо предлагают купить платную версию.
Кстати, знали ли вы, что sitemap в WordPress генерится на автомате? Просто у него другой адрес: domain/wp-sitemap.xml. И работает он получше всяких плагинов. Прописывайте его в robots.txt и панели вебмастера.
Настройки стиля
Прежде чем баловаться с контентом и шаблонами отображения на сайте, нужно сделать несколько первоначальных настроек в Стиле по умолчанию.
По умолчанию, меня не устраивает ширина контента на сайте. А она выставлена в 620 пикселей. Я бы сделал пошире — около 840 пикселей. Изменить это можно в разделе Стили. Первый стиль выбран по умолчанию. Он нас всем устраивает. Но если вы хотите поменять цвет шрифтов, то это меняется именно в разделе Стили.
Выбираем стиль по умолчанию, жмем карандашик и заходим в настройки стиля. Нам нужен раздел Макет (Layout). Внутри настроек макета мы можем сделать ширину содержания (текста), например, 840 пикселей.
Также убираем внутренние отступы, ставим их в ноль. Это нам позволит использовать полноэкранные блоки в дизайне. Чтобы они действительно шли на всю ширину экрана браузера. Сохраняем.
Цветовая палитра сайта на WordPress
Определитесь с цветовой палитрой сайта. Обычно это два-три контрастных друг другу цвета, один из которых выражает брендинг, ну и пара дополнительный оттенков.
В интернете есть онлайн-помощники, создающие палитру сайта за несколько секунд. Например, Coolors.
Выбрав палитру сайта, нужно настроить ее в разделе цвета. Либо вы меняете палитру уже созданных цветов, либо добавляете дополнительные.
Видите здесь два блока. Первый «Палитра», где определены цвета и ниже цвета для различных элементов дизайна.
Вам захочется сразу поменять цвет ссылок, кнопок и вы начнете делать это во втором блоке. Но это не будет работать или не будет работать глобально, пока вы не внесете нужные цвета в палитру. Так, что жмем на палитру и настраиваем ее.
В дальнейшем вам будет удобно выбирать цвета из готовой палитры, добавляя любой блок, а не вспоминая RGB код нужного цвета.
Прочите параметры, которые не указаны в стилях вы можете настроить в своем файле styles.css. Тот самый, который вы создали для дочерней темы.
Например, если нужно убрать подчеркивание ссылок внутри постов, то добавляем такую строчку стиля.
.wp-block-post-content a { text-decoration: none; }
А если по всему сайту вам не нужны подчеркнутые ссылки, то укажите этот css параметр для глобального тега a.
a { text-decoration: none; }
/** но можно оставить при наведении на ссылку **/
a:hover { text-decoration: underline; }
Настройте языки сайта и админки в WordPress
При установке WordPress вы выбираете язык сайта. Этот язык используется во всех элементах интерфейса и внутри админки.
Если у вас сайт для русскоязычной аудитории, то лучше выбрать «Русский» язык сайта. Но я рекомендую поменять язык админки на английский. Далее вы поймете, что перевод на русский некоторых блоков в верстке совсем не отличается и это путает в работе.
Чтобы это сделать, нужно в настройках зайти в «Основные» (General) и установить язык «Русский». Потом зайти в раздел «Пользователи» — выбрать аккаунт Админа и внутри его настроить язык на Английский.
Спроектируйте структуру разделов и наполните контентом
Эта часть очень важна для дальнейшей работы. Уже на этапе создания блога или сайта у вас должна быть проработана структура сайта. О чем вы пишите, какие основные категории будут на сайте.
Важный совет: Постарайтесь сделать не более 3-4 категорий, чтобы не запутаться и не растянуть меню сайта. И не создавайте вложенных категорий. Все категории должны остаться на верхнем уровне. Это упростит создание URL и тоже полезно для SEO.
Доработаем верхнее меню сайта
После того как со структурой понятно, можно на основе ее сделать верхнее меню. Заходим в настройки темы, далее в раздел Навигация. Здесь уже создано верхнее меню с единственным пунктом — Пример статьи. Для редактирования жмем на иконку “карандашика”. Удаляем пункт “Пример статьи”, а через “+” добавляем наши разделы сайта. Вот почему я просил вас сперва заняться структурой разделов.
как управлять элементами шапки
Здесь же в редакторе тем идем в Паттерны — Части шаблона — Заголовок (Header)
Здесь у вас два основных блока, и каждый сверстан в виде строки. Об этом говорит иконка
Другие варианты группировок: — 1 ый просто в одном div. — второй — div c параметром flex-direction:row — третий flex-direction: column (колонка).
Просто запомните, это может понадобиться для группировки других частей дизайна на сайте. Но для верхнего меню, нам нужен вариант — строка (row), чтобы все элементы выстроились в один горизонтальный ряд.
Блоки с названием сайта и навигацией также между собой объединены в div и сгруппированы как строка.
Ниже есть настройки выравнивания их друг с другом. Выбран вариант “пространство между”. Первые три варианта: — по левому краю, — по центру — по правому краю.
И все это еще раз завернуто в слой div, который и формирует верхнюю шапку сайта (Header).
Варианты отображения постов по умолчанию
Давайте попробуем создать новый пост. В окне написания поста справа можно выбрать нужный шаблон. По умолчанию их всего два.
Шаблон по умолчанию
Шаблон с правой колонкой (sidebar)
Давайте глянем, как они выглядят. Скучно, но неплохо. А давайте, сделаем шаблон с картинкой на весь экран и заголовком статьи поверх этого рисунка. И сделаем это буквально на 5 минут, без установок каких либо сторонних шаблонов.
Создаем новый шаблон отображения постов
Для этого снова идем в раздел Внешний вид — Редактор. Здесь мы и будем создавать новый шаблон. Поэтому и заходим в раздел «Шаблоны».
В разделе “Шаблоны” нужно нажать на плюсик «+». На всплывающем окне не стоит выбирать из предложенных вариантов, так как это все шаблоны встроенные в движок. Мы их трогать не будем. Скролим вниз и выбираем вариант: Произвольный шаблон и даем ему какое нибудь название.
Выберите паттерн обычной страницы поста, чтобы было удобнее начинать с заготовки. Открывается окно очень похожее на создание поста. Но это не пост, а шаблон. Давайте сделаем из него «конфетку».
Выделяем шапку сайта, жмем на три точки и выбираем удалить. Мы потом сделаем более красивую навигацию.
Также выделяем шапку поста. Это должна быть группа элементов, включающая картинку и заголовок. Нужно также нажать на три точки, откроется развернутое меню и выбрать «Удалить».
После того как удалили, жмем “+” плюсик и добавляем новый элемент “Обложка”. Важно нажать на плюсик как раз между шапкой сайта и началом контента. Но если промахнулись, то не беда, так как все это можно перенести в нужное нам место.
Обложку лучше всего выбирать, нажав на пункт “Посмотреть все”, далее зайти в Блоки и там уже найти Обложку. Вам сразу предложат загрузить картинку для фона Обложки. Но мы выберем третий вариант: “Использовать изображение записи”.
Помните, что мы создаем шаблон для любой записи и он должен быть универсальным. То есть мы вставляем элементы, которые в реальном посте будут заменяться на название статьи, автора, категорию, картинку и пр.
Поэтому, мы также удаляем блок с заголовком, который тут стоит по умолчанию, и снова жмем плюсик “+”, но уже внутри Обложки, снова выбираем “Посмотреть все” и ищем блок “Заголовок”.
Обратите внимание, что в русской версии движка из-за кривого перевода у нас несколько таких блоков. Нам нужно поскролить и выбрать “Заголовок” с такой иконкой.
Вставили? Теперь в свойствах этого блока выбираем “отобразить по центру” — тут панель как в Word.
Давайте еще добавим красивую навигацию сайта. Ведь мы зачем-то удалили шапку. Теперь уже нужно зайти в раздел не «Блоки», а уже “Паттерны” и снова выбираем «Заголовки» (да что же не так с переводом?) и выбрать вот такой отцентрованный вариант шапки.
Исследования подтвердили связь выражение благодарности с широким спектром преимуществ для человека, включая укрепление иммунной системы и улучшение сна, чувство оптимизма и больший градус радости от жизни, развитие привычки оказывать помощь, тренировка щедрости, а также снижение ощущений одиночества и изоляции.
Нужно переместить шапку на уровень выше, чтобы она была выше названия статьи. Это можно сделать стрелочкой.
Название сайта можно удалить, также жмем три точки и выбираем Удалить в меню.
Выделяем логотип, и растягивая, можем чуть увеличить его размер.
Добавляем ниже еще один блок. Он называется “Рубрики”, чтобы под Заголовком статьи была указана рубрика. Тут вы решайте сами, что вам удобнее выводить. Можете выводить дату публикации. Или автора. Или теги. Мне удобнее “Рубрику”.
Небольшая доработка руками понадобится на этом этапе. Выделите всю Обложку поста в этом шаблоне. В меню справа раскройте раздел “Дополнительно” и укажите название класса CSS в поле “Дополнительные классы CSS”. Давайте назовем его screen_height.
Это необходимо, чтобы растянуть обложку на 100% высоты экрана.
Для этого нужно выйти из Редактора темы и перейти в другой раздел, который в переводе на русский тоже называется «Редактор тем», но уже в меню Инструменты.
Помните мы создавали пустой файл style.css в дочерней теме. В него нужно добавить стиль.
Всего 1 строчку:
.screen_height { height: 100vh; }
и сохранить.
Добавим в шаблон ссылки на недавние статьи
Чтобы мы могли удержать посетителя на сайте, после того как он дочитал статью, покажем ему каталог недавних статей.
Конечно же, этот блок добавляется после содержимого поста. Жмем плюсик, “Посмотреть все” — Паттерны — Записи. Справа появятся превью предложенных шаблонов Записей, листаем пока не увидим вот такую трехколоночную версию. Ее мы и выбираем.
В Вордпресс это перевели как «Записи» и, кстати, это очень полезный блок. На английском он называется Query Loop. Если вдруг вам нужно вывести список статей из какой-либо категории, этот блок отправляет запрос и выводит заданное число записей из нужной категории, которую вы выбрали. Можно добавлять его как через Паттерны, так и через Блоки — в блоках нужно выбрать Query Loop.
Давайте немного дорабатываем отображение этого блока внизу страницы.
По умолчанию три колонки растянуты на 100% ширины страницы. Давайте добавим отступы от краев страницы. Для этого выделяем блок, убедитесь, что иконка выглядит как такая закорючка. В правой колонке опций блока, включаем опцию “Внутренние блоки используют ширину содержимого”. И ниже по ширине выставляем размер 80 VW.
Далее мы настраиваем то, как отображаются элементы внутри блока.
Здесь у нас выводятся три колонки, но поменяв стиль одного из элементов они применяются ко всем таким же объектам в каждой колонке. Каждый в отдельности не нужно править.
Начнем с картинки. Кликаем по ней и меняем пропорции 4:3 и если нравится картинка с закругленными краями, то можно установить Радиус 6.
Далее, выделяем текст заголовка новости. Выравниваем по центру, меняем тип заголовка на H4. Можно еще и размер шрифта поменять.
Под заголовком есть блок с датой и автором новости. Мне этот блок совсем не нужен. Я его просто удаляю.
Теперь можно нажать голубую кнопочку “Сохранить”. Подтверждаете, что сохраняете шаблон Post Cover и выходите из Редактора на основную страницу Админки.
Смотрим на результат шаблона для постов
Теперь вернитесь в меню «Записи» и зайдите в редактирование любого поста. В меню шаблонов, справа у вас появится еще один вариант “Post Cover”. Выберите его, сохраните пост и посмотрите, что получилось.
Нравится? Мне очень. Чтобы текст был белым и более крупным, можете вернуться в редактирование шаблона и поменять цвета и размер Заголовка и других элементов.
Не получился шаблон?
Если вы следовали описанным на этой странице инструкции, но у вас не получился такой шаблон для постов — не переживайте. Вы можете скачать файл шаблона и добавить его в папку с темой и пользоваться.
Теперь вы видите, что базовая тема, идущая вместе с движком позволяет творить шаблоны записей не хуже, чем внешние шаблоны.
А самый главный плюс, что теперь вы знаете как самому менять нужные элементы дизайна.
Навигация по управлению элементами не самая простая. Но с практикой вы постепенно освоитесь.
В редакторе есть еще окно слева, в котором можно увидеть иерархию элементов дизайна. Вызывается оно вот такой иконкой — бургером.
Иногда, когда нужно перетащить элемент из одной группы в другую это окно бывает очень полезным.
Добавил свои шрифты в Вордпресс
Тема Twenty-Twenty-Four поставляется в комплекте с четырьмя шрифтами. Немного, согласитесь. Вы можете найти подходящие шрифты в библиотеке Google Fonts или добавить свои шрифты.
В версии WordPress 6.5 появилась библиотека шрифтов, которая позволяет легко добавлять и удалять собственные шрифты и они будут работать глобально, вне зависимости от выбранной темы.
Если у вас версия ниже, чем 6.5 вы можете прочесть статью об установке шрифтов в WordPress без плагинов.
Запара с логотипом. На некоторых хостингах, при попытке загрузить логотип в шапке сайта такой опции просто нет. Логотип есть, блок такой создать можно, но картинку не загрузить.
Проблема решается костылем. Для этого проще на 2 минутки установить любую старую тему, где редактируется логотип, переключиться в эту тему и загрузить его. Потом вернуться на тему twenty twenty four и удалить старую тему.
Создаем шаблон главной страницы как у новостного портала
А вот и обещанное видео-инструкция, как сделать красивую главную страницу в стиле новостного портала.
Дочерние темы являются расширениями родительской темы. Они позволяют изменять существующую тему без прямого редактирования кода этой темы. Часто это всего лишь несколько незначительных изменений цвета, но они также могут быть сложными и включать пользовательские переопределения родительской темы.
В этой статье вы узнаете, что такое родительские и дочерние темы, как создавать свои собственные модификации с помощью дочерних тем и какие части родительской темы можно переопределить.
Все темы, кроме тех, которые являются дочерними, можно назвать основными темами. Это означает, что они полноценные темы, которые можно установить и использовать в WordPress.
Родительские темы должны содержать все необходимые файлы, как указано в документации по Структуре темы. Помимо этого, вам не нужно делать ничего особенного, чтобы ваша тема стала родительской.
Дочерняя тема по умолчанию включает в себя все, что относится к родительской теме. Сюда входит дизайн и любая его функциональность. Но ее также можно использовать для настройки родительской темы без прямого изменения файлов родительской темы. Это означает, что вы (или пользователи вашей дочерней темы) по-прежнему можете получать обновления родительской темы без потери этих изменений.
Дочерние темы:
Сделайте ваши изменения переносимыми и воспроизводимыми.
Сохраняйте настройки отдельно от родительской темы.
Разрешите обновлять родительские темы без потери внесенных изменений.
Экономьте время разработки, поскольку вы пишете только необходимый вам код.
Это отличный способ начать свой путь к разработке полноценных тем.
Стоит отметить, что выполнение обширных настроек внутри дочерней темы может в конечном итоге стать головной болью руководства. Для этих более масштабных проектов часто лучше развить исходную тему и создать полную / родительскую тему самостоятельно. Это то, что вам нужно будет решать в каждом конкретном случае.
В настоящее время это невозможно. В стандартной иерархии тем есть только два уровня: родительская и дочерняя тема.
Однако при создании блочных тем существуют другие уровни по сравнению с тем, что представлено во внешнем интерфейсе сайта (они просто не являются частью тематического слоя):
Сам WordPress (по умолчанию theme.json)
Родительская тема
Дочерняя тема
Пользовательские настройки (могут переопределять theme.json шаблоны и паттерны)
В некотором смысле уровень пользовательских настроек работает как своего рода “дочерняя” тема. Большая разница в том, что изменения хранятся в базе данных, а не в файловой системе.
Помимо этого, не существует стандартного метода создания устанавливаемой дочерней темы.
Во-первых, вашей дочерней теме нужно название. Это может быть любое название, которое вы хотите, чтобы ваша тема называлась, но для данного руководства давайте назовем ее “Grand Sunrise”.
Теперь создайте новую папку в своем wp-content/themes каталоге с версией названия вашей темы для шашлыка: grand-sunrise.
Теперь вам нужно создать файл с именем style.css. Это единственный абсолютно необходимый файл для существования дочерней темы. Все style.css файлы должны содержать заголовок файла и обязательные поля заголовка, как описано в документации по основной таблице стилей (пожалуйста, ознакомьтесь с этим документом, если вы еще этого не сделали).
Как указано в документации по основной таблице стилей, для объявления темы в качестве дочерней необходимо дополнительное поле. Вы должны добавить Template поле заголовка к style.css заголовку файла.:
В Template поле есть одно предостережение. Оно должно на 100% совпадать с названием папки родительской темы относительно wp-content/themes папки. В данном случае мы знаем, что папка Twenty Twenty-Four theme расположена по адресу wp-content/themes/twentytwentyfour. Следовательно, Template значение должно быть twentytwentyfour.
Если вы еще не работаете в среде разработки со своей темой в wp-content/themes папке, вам нужно переместить ее туда прямо сейчас. В зависимости от ваших настроек у вас есть несколько вариантов, но самый простой — создать ZIP-файл вашей темы и загрузить его на свой тестовый сайт через Внешний вид> Темы> Добавить новый в вашем WordPress admin.
Для получения дополнительной информации о том, как добавить тему в WordPress, прочитайте о Добавлении новых тем на сайте документации WordPress.
После установки темы перейдите в раздел Внешний вид> Темы в разделе администратора WordPress и найдите нужную тему. Нажмите на ссылку Активировать, как показано на этом скриншоте:
Сейчас это не будет выглядеть иначе, чем ваша родительская тема, потому что вы еще не настроили ее. Но вы успешно создали дочернюю тему.
При настройке дочерней темы вам полностью доступны все функциональные возможности, описанные в этом руководстве. Но есть несколько соображений, которые вам следует иметь в виду, о которых вы узнаете в следующих разделах.
Это необязательный шаг, который часто не требуется для блочных тем, поскольку обработка их стилей обычно выполняется через theme.json. Но часто это необходимо, если вы создаете классическую тему. В любом случае, вам нужно выполнить этот шаг, только если вы хотите убедиться, что любой CSS-код в style.css загружен.
Прежде чем приступить к работе с этим разделом, обязательно ознакомьтесь с документацией, включающей ресурсы, в которой более подробно описывается загрузка style.css. В этой документации вы узнаете, как ставить таблицы стилей в очередь с помощью wp_enqueue_style() функции соответствующего хука (обратите внимание, что дочерние темы загружаются раньше родительских).
Идеальный метод постановки таблиц стилей в очередь — это когда родительская тема загружает как свою style.css, так и дочернюю style.css тему. Но не все темы делают это. Поэтому вы должны изучить код родительской темы, чтобы увидеть, какие таблицы стилей она ставит в очередь. Для каждой темы это по-разному, и жестких правил не существует.
Если родительская тема загружает обе таблицы стилей, дочерней теме ничего не нужно делать. Ее таблица стилей будет загружена автоматически.
В случае темы Twenty Twenty-Four таблица стилей вообще не загружается. Таким образом, вам придется загружать свой style.css через functions.php, как показано в этом фрагменте кода:
Если родительская тема, которую вы используете, загружает только свою собственную таблицу стилей, вы также должны использовать приведенный выше код для загрузки вашей дочерней темы style.css.
Если родительская тема загружает только таблицу стилей активной темы, например, через get_stylesheet_uri(), то она загрузит таблицу стилей дочерней темы. В этом случае вы можете также захотеть поставить в очередь таблицу стилей родительской темы через functions.php, и ваш код будет выглядеть следующим образом:
При создании дочерней темы у вас есть возможность перезаписать любой шаблон, деталь или шаблон, существующий в родительской теме, добавив файл с таким же именем в вашу дочернюю тему. Примечание: шаблоны также должны иметь то же зарегистрированное Slug поле.
Вы также можете добавлять совершенно новые шаблоны, детали и выкройки в свою дочернюю тему, даже если они не существуют в родительской. Чтобы узнать больше об этих функциях, обратитесь к этим статьям в справочнике:
В отличие от шаблонов, functions.php файл дочерней темы не заменяет functions.php файл родительской темы. Фактически, они загружаются оба, причем дочерний файл загружается непосредственно перед родительским.
Таким образом, functions.php дочерней темы предоставляет умный и безотказный метод изменения функциональности родительской темы или WordPress.
Предположим, что вы хотите добавить функцию PHP в свою тему. Самым быстрым способом было бы открыть ее functions.php файл и поместить туда функцию. Но это не считается хорошей практикой — при следующем обновлении вашей темы ваша функция исчезнет!
Гораздо лучше создать дочернюю тему и добавить свой пользовательский код в functions.php файл дочерней темы. Функция будет выполнять точно такую же работу и оттуда, с тем преимуществом, что на нее не повлияют будущие обновления родительской темы.
Не копируйте код непосредственно из functions.php родительской темы в дочернюю тему. Это, вероятно, приведет к фатальным ошибкам из-за дублирования имен функций.
Иногда вам необходимо включить или использовать пользовательские файлы в вашей теме. При этом вам нужно убедиться, что вы используете функцию, которая предоставит вам правильный путь к каталогу или URI на основе каталога вашей дочерней темы.
Например, если вы хотите включить другой PHP-файл через свой functions.php, вы бы использовали get_theme_file_path() функцию. Вот фрагмент кода, показывающий включение functions-helpers.php файла из /inc папки в вашу дочернюю тему:
Когда вам нужно сослаться на файл по его URL, например на изображение или таблицу стилей, вы должны использовать другую функцию: get_theme_file_uri(). Давайте рассмотрим пример использования файла с именем bunny.jpg из /assets/images папки вашей темы в <img> HTML-теге:
Как и родительские темы, дочерние темы также можно интернационализировать и заставить работать на любом языке. Чтобы узнать больше, прочтите документацию по интернационализации в справочнике по темам.
Самые большие изменения, как отмечено в документации по интернационализации, заключаются в том, что вы должны создать уникальный текстовый домен и использовать load_child_theme_textdomain() вместо load_theme_textdomain() при ручной загрузке переводов.
Когда дело доходит до разработки веб-сайта, один размер не подходит всем. Мы понимаем, что у каждого пользователя WordPress есть уникальные потребности и цели, будь то начинающий предприниматель, увлеченный фотограф, плодовитый писатель или некоторые из них. Вот почему мы рады представить Twenty Twenty-Four, самую универсальную тему по умолчанию, которая поставляется в комплекте с WordPress 6.4 и готова сделать ее уникальной для вас.
В отличие от прошлых стандартных тем, Twenty Twenty-Four отказывается от традиции фокусироваться на определенной теме или стиле. Вместо этого эта тема была тщательно разработана для любого типа веб-сайта, независимо от его направленности. В теме рассматриваются три различных варианта использования: один разработан для предпринимателей и малого бизнеса, другой — для фотографов и художников, а третий разработан специально для писателей и блоггеров. Благодаря своему многогранному характеру и адаптируемости Twenty Twenty -Four идеально подходит для любого вашего проекта.
По мере того, как вы будете погружаться в его шаблоны, вы заметите, как новая функциональность редактора сайтов открывает различные пути для беспрепятственного создания вашего сайта.
Шаблоны на каждом этапе
Хотите ли вы создать страницу «О компании», продемонстрировать свои работы, отвечать на приглашения или разработать привлекательные целевые страницы, Twenty Twenty-Four поможет вам.Выбирайте из обширной коллекции более 35 красивых шаблонов, чтобы настроить их в соответствии с вашими потребностями.
Впервые в этой теме представлены полностраничные шаблоны для таких шаблонов, как домашняя страница, архив, поиск, отдельные страницы и сообщения. Некоторые из них доступны исключительно в процессе переключения шаблонов и создания, что гарантирует наличие у вас нужных опций, когда они вам понадобятся.
Кроме того, вы можете воспользоваться различными шаблонами для разделов страницы, такими как часто задаваемые вопросы, отзывы или цены, чтобы соответствовать наиболее специфическим требованиям вашего сайта.
Благодаря этой разнообразной библиотеке шаблонов Twenty Twenty-Four предлагает гибкую основу для быстрого создания страниц без необходимости начинать с нуля, что экономит ваше время и энергию в процессе создания. Просто дайте волю своему творчеству и исследуйте возможности!
Редактирование сайта в лучшем виде
Twenty Twenty-Four открывает новую эру блочных тем, объединяя новейшие возможности редактирования сайтов WordPress. Откройте для себя новые инструменты дизайна, такие как поддержка фоновых изображений в виде групповых блоков и вертикального текста, обеспечивающие интуитивно понятный и эффективный способ создания привлекательного интерактивного контента.
Найдите в шаблонах графические заполнители с предопределенными настройками соотношения сторон, позволяющие размещать изображения, которые идеально заполняют пространство. Чтобы сделать еще один шаг вперед, сделайте ваши визуальные элементы интерактивными, включив лайтбоксы. Эта функция идеально подходит для демонстрации галерей или изображений портфолио, она позволяет вашим посетителям расширяться и взаимодействовать с ними в полноэкранном режиме. Активируйте ее глобально для всех изображений на вашем сайте или для определенных изображений.
Для более плавного просмотра вашего сайта вы можете отключить параметр “Принудительная перезагрузка страницы” в блоке Цикла запросов. Это позволяет динамически загружать необходимый контент при переключении между разными страницами без необходимости обновления всей страницы.
Элегантность с целью
twenty Twenty-Four выходит за рамки универсальности благодаря красивой эстетике, вдохновленной современными тенденциями дизайна, придавая вашему веб-сайту элегантный и современный вид. Ключевые элементы дизайна включают:
Системный шрифт без засечек для абзацев: Шрифт без засечек гарантирует, что ваши тексты будут чище и их будет легче читать, повышая общую удобочитаемость.
Восемь вариантов стиля: Twenty Twenty-Four представляет собой готовую светлую цветовую палитру для придания свежести и привлекательности внешнему виду, но вы можете настроить ее с помощью семи дополнительных вариантов стиля. Каждый из них включает шрифты и цвета, тщательно подобранные для того, чтобы они прекрасно сочетались с шаблонами.
Варианты без засечек: Помимо стилей по умолчанию, тема предлагает два дополнительных варианта без засечек, предоставляя больше возможностей для типографики вашего сайта.
Дизайн Twenty Twenty -Four был тщательно оптимизирован для повышения производительности. Это гарантирует, что ваш веб-сайт не только будет отлично выглядеть, но и обеспечит быстрое и эффективное взаимодействие с пользователем.
Возможно, вы заметили, что в теме WordPress Twenty Twenty-Three нет специального места для боковой панели.
В последние годы важность боковых панелей настолько уменьшилась, что многие веб-сайты предпочитают полностью их исключать. Веб-сайты хотят, чтобы контент был в центре внимания посетителя.
При этом мы должны гарантировать, что элементы, ранее использованные на боковой панели, не потерялись. Их можно использовать где угодно для лучшего погружения и доступности.
Поскольку некоторые из нас не умеют отпускать ситуацию и мысль о завершении кажется надвигающейся гибелью, мы также можем создать псевдосайдбар, чтобы имитировать его функциональность.
В этом уроке мы покажем вам, как создать боковую панель в теме WordPress Twenty Twenty-Three.
Зачем нам нужна боковая панель?
Боковая панель — это, по сути, инструмент доступности. Как и меню, в нем отображаются элементы, которые мы хотим, чтобы посетители видели, или элементы, которые, по нашему мнению, могут их заинтересовать.
Единственное, что отличает его от меню, — это использование виджетов. Виджет — это блок контента, предоставляющий определенные функции.
До появления полносайтового редактора виджеты можно было вставлять только там, где это позволяла наша тема. Теперь везде, где мы можем вставить блок, мы можем вставить виджет.
Полнофункциональный редактор состоит из нескольких виджетов, таких как «Календарь», «Последние публикации», «Список страниц», «Поиск» и многих других. Но мы не ограничиваемся этими вариантами. Мы можем установить плагины на наш сайт, чтобы получить дополнительные виджеты.
Если вы считаете, что меню — это то, что вам нужно, посмотрите публикацию в блоге или видео о том, как создать меню. После того как вы создали меню, узнайте, как настроить его в соответствии с вашими потребностями.
Как создать боковую панель в теме WordPress Twenty Twenty-Three
Прежде чем мы начнем, нам нужно решить, где мы хотим разместить боковую панель и хотим ли мы, чтобы она была стационарной.
Полнофункциональный редактор упростил сложные процессы, но в некоторых случаях простые процессы стали сложными, например, изменение значка нашего сайта. Благодаря обновлениям полносайтового редактора части шаблона теперь можно вставлять как блочный элемент. Мы будем использовать части шаблона в качестве боковой панели.
Это направление, в котором движется WordPress, нам следует к нему привыкнуть и научиться адаптироваться к этим изменениям.
Итак, приступим к созданию.
Шаг 1. Перейдите в полнофункциональный редактор сайта.
Прежде всего, нам нужно зайти в полнофункциональный редактор.
Перейдите на панель управления.
Нажмите «Внешний вид».
Нажмите «Редактор».
Шаг 2. Добавьте новую часть шаблона
Нам нужно добавить новую часть шаблона.
Нажмите на логотип W/Site в верхнем левом углу экрана.
Нажмите «Части шаблона».
Нажмите кнопку «Добавить новый» .
Нажмите «Общие»
Введите имя
Шаг 3. Добавьте виджеты
Виджеты — это блок контента, запрограммированный для выполнения определенных или нескольких задач. В WordPress есть различные виджеты, которые мы можем добавить на наш сайт, но мы не ограничиваемся ими. Получите дополнительные виджеты и функции с помощью плагинов.
Нажмите на любой из символов плюса .
Прокрутите/найдите нужные виджеты.
Настройте виджеты по своему вкусу.
Вот несколько виджетов, которые могут быть полезны посетителям сайта. Не существует формата, которому мы должны следовать. Виджеты, которые нам нравятся, можно выбрать и расположить в том порядке, в котором мы предпочитаем.
Поскольку это не настоящая боковая панель, выделенная темой, полнофункциональный редактор дает возможность добавлять элементы, которые мы не могли. Мы можем добавлять изображения и видео и даже вставлять ссылки на нашу боковую панель. Просто добавив тот тип блока, который нам нужен.
Шаг 4. Встраивание элементов
Мы встроим нашу ленту Twitter и видео YouTube в боковую панель. Есть и другие товары, которые мы можем добавить на наш сайт.
Нажмите «Добавить блок» .
Выберите нужные предметы.
Заполните необходимые поля
Шаг 5: сохраните изменения
Мы должны убедиться, что мы сохранили изменения, прежде чем покинуть редактор. Любые несохраненные изменения будут потеряны.
Нажмите кнопку «Сохранить» .
Подтвердите изменения.
Нажмите кнопку «Сохранить» .
Таким образом, мы успешно создали боковую панель. Теперь нам нужно решить, где мы хотим его разместить.
Этот псевдосайдбар является частью шаблона, теоретически мы можем вставить его в любой блок или столбец.
Вставить боковую панель в отдельные сообщения
Чтобы вставить боковую панель во все отдельные публикации/сообщения в блоге, мы должны спланировать и оставить необходимый столбец там, где мы хотим его вставить.
Нажмите на логотип сайта .
Нажмите «Шаблоны».
Нажмите «Одиночный» .
Теперь нам нужно сгруппировать все элементы публикации, такие как «Избранное изображение», «Заголовок публикации» и т. д., и скопировать блок. Затем нам нужно удалить всю группу, чтобы освободить место для столбцов.
Нажмите «Просмотр списка».
Нажмите на три точки рядом с группой.
Нажмите «Копировать блок» .
Нажмите «Удалить группу».
На экране останутся только верхний и нижний колонтитулы. Здесь мы вставим столбец 66/33. Мы можем дополнительно настроить ширину столбцов вручную в настройках блока.
Нажмите «Переключить вставку блоков» .
Найдите и выберите Столбцы.
Выберите столбец 66/33.
Теперь, когда столбцы созданы, мы можем вставить групповой блок, который мы недавно скопировали в буфер обмена с левой стороны. Боковая панель, которую мы создали как часть шаблона, разместится в правом столбце.
Нажмите на символ «Плюс» в левом столбце.
Поиск и выбор абзаца
Щелкните правой кнопкой мыши блок абзаца .
Вставьте групповой блок из буфера обмена.
Наконец, мы вставим часть шаблона.
Нажмите на символ плюса в правом столбце.
Найдите и выберите Части шаблона .
Нажмите кнопку «Выбрать» .
Выберите боковую панель .
Мы должны сохранить изменения , чтобы они вступили в силу и не потеряли прогресс.
Нажмите кнопку «Сохранить» .
Подтвердите изменения и нажмите кнопку «Сохранить» .
После сохранения изменений мы теперь можем проверить, как выглядит наша боковая панель во внешнем интерфейсе.
Вставить боковую панель на главную страницу
Процесс вставки боковых панелей на домашнюю страницу очень похож. Нам нужно спланировать и оставить достаточно места для нашей боковой панели. Мы можем создать домашнюю страницу с нуля или скопировать содержимое домашней страницы и вставить их в левый столбец.
Нажмите на логотип сайта .
Нажмите на Шаблон .
Нажмите «Домой» .
Нажмите «Переключить вставку блоков» .
Нажмите на три точки.
Скопируйте содержимое домашней страницы.
Снимите блок.
Нажмите «Переключить средство вставки блоков».
Найдите и выберите столбец.
Выберите столбец 66/33.
Вставьте блок «Абзац» в левый столбец.
Щелкните правой кнопкой мыши и вставьте содержимое дома в блок абзаца.
Вставить часть шаблона
Выберите часть «Шаблон боковой панели ».
Теперь давайте посмотрим, как наша домашняя страница выглядит во внешнем интерфейсе.
Заключение
Вот и все, что касается этой статьи в блоге, мы рассмотрели все основы, которые нам нужно знать о боковых панелях в теме Twenty Twenty-Three. Вы можете и дальше экспериментировать и экспериментировать с виджетами и различными элементами блоков Гутенберга.
Базовая тема по умолчанию ( Двадцать двадцать два или двадцать двадцать три ) всегда поставляется с довольно узкой областью содержимого – 600 px. Первое изменение, которое я сделал, состояло в том, чтобы установить его на 100%. Буквально я установил его как 100 vw. Но это не выглядит хорошо, когда дело доходит до создания одного поста. Затем я немного настроил файл CSS, чтобы ограничить ширину поста до 80%. К сожалению, это повлияло на некоторые блоки, которые я планировал использовать в режиме ‘ Полная ширина ’. Например, блок покрытия.
Пытаясь изменить макет поста по умолчанию, я изменил конфигурацию для основного макета и установил ширину страницы и содержимого до 100 vw. Это отлично подходит для моей домашней страницы, но архивы отдельных постов и категорий выглядят не очень хорошо. Поэтому я изменил ширину одного сообщения в файле стиля css. Но я столкнулся с ограничением использования некоторых блоков –, например ‘ Cover ’, где я планировал покрыть страницу блоком полной ширины.
Затем я должен отказаться от идеи управления размером поста в css. Здесь я наткнулся на индивидуальные шаблоны сообщений. У нас была такая же функциональность в предыдущем WordPress и даже больше, у нас уже было Полная ширина макет на месте. Но когда дело доходит до WordPress 6, вы можете использовать только по умолчанию ‘ Single ’ шаблон.
Хорошо. Если есть Единый шаблон, то должен существовать другой. Нет, если вы не создали это. Вы можете создать его на странице администратора почты. Но я предлагаю вам перейти в редактор тем и создать, управлять и изменять все шаблоны там.
В верхней части страницы вы можете нажать на маленькую стрелку, а затем выбрать «Обзор всех шаблонов».
И здесь вы можете увидеть все доступные шаблоны и создать новые. Просто нажмите кнопку ‘ Добавить новый ’ в правом верхнем углу.
Я создал новый шаблон для одного поста, в котором контент имеет 10% с обеих сторон. Кроме того, я внес некоторые изменения в способ отображения избранного изображения и удалил блоки «Автор», «Дата» и «Теги» снизу. Я дал имя своему шаблону. Теперь он работает только для поста, где я выбрал этот шаблон, и не влияет на другие страницы.
Затем я решил сохранить этот шаблон, чтобы повторно использовать его для других проектов WordPress. Когда я открыл папку /wp-content / themes / TwentyTwentyThree-Child/шаблоны я не нашел там новых шаблонов.
Хорошо. Давайте посмотрим на каталог родительской темы. Там тоже не появляется. Он хранит все файлы шаблонов по умолчанию. Затем я часами пытался выяснить, где WordPress хранит обрезанные шаблоны. Без понятия.
Только дискуссионный совет на wordpress.com другой пользователь, у которого есть такие же проблемы, делится методом получения вашего шаблона.
Мы должны использовать «Экспорт» опцию в редакторе. Но это также нелегко, потому что оно скрыто в 3-точечном меню в правом верхнем углу. Как только я нажал на него, я получил zip-файл для загрузки, где хранятся все шаблоны.
Означает ли это, что я могу использовать функцию «Export», чтобы сохранить все мои настройки, которые я сделал при настройке WordPress. К сожалению, этого недостаточно. Некоторые файлы отсутствуют, и вы должны сохранить их вручную. Эти файлы: functions.php, style.css и тема, Json. Таким образом, вы должны сохранить их вручную.
Зачем нам нужны эти файлы и где вы можете их получить, вы можете прочитать в дополнительном посте «Как создать детскую тему».
Вы установили сайт на движке WordPress и первое, что хочется сделать – это настроить дизайн под свои предпочтения. Что делают новички – они конечно же пытаются найти красивую и функциональную тему из обширного каталога WordPress. Устанавливают, ковыряются, не нравится и ставят следующую. Иногда даже забывают удалить неиспольуемые темы. Это очень опасный подход, так как установленные, но не удаленные темы долго не обновляются и могут содержать уязвимости.
Мое правило в настройке WP – это минимум сторонних тем и плагинов.
Я был точно таким же пользователем Вордпресса в самом начале работы с данным движком. Конечно, WP не такая дыра, как Joomla, но уязвимости могут возникать из-за устаревших плагинов и темплейтов. Поэтому мои правила в настройке WP – это минимум сторонних тем и плагинов. Все, что можно сделать на базовой теме или правкой кода, не требует чужой программы.
Мы рассмотрим вариант использования темы, которые идут вместе с установленным движком и попробуем настроить ее под себя. Обычно тема называется 2017 или 2018, 2019, 2020. Текущая версия Twenty Twenty (2020) хорошо оптимизирована для использования и после нескольких настроек будет выглядеть как надо. А настроек здесь достаточно, как внутри темы, так и с помощью CSS.
Помимо этого вместе с темой идут сразу несколько преднастроенных блоков, типа цитаты, лэндинги, кнопки, мероприятия, которые в дополнение к уже существующим галерее, коду и другим блокам дают богатый выбор для форматирования.
Вы можете делать настройки прямо в теме Twenty Twenty, но я советую создать дочернюю тему и все правки вносить в ней.
Для чего нужна дочерняя тема в WordPress?
Дочерняя тема – это как надстройка над основной темой. Все правки и изменения в дочерней теме влияют на отображение и поведение элементов на сайте, но при этом не затрагивают функционал основной темы, на которой работает сайт. При этом вы можете экспериментировать в дочерней теме и не испортить сам сайт. Если вдруг, что пошло не так, то вам будет проще найти свои недавние правки внутри дочерней темы, чем долго ковырять весь код темы основной.
А самое главное преимущество, это то, что обновления основной темы не уничтожат все ваши доработки. Представьте, что вы потратили несколько вечеров на настройки шрифтов, отступов, цветовой палитры под себя, но потом тема обновилась и все эта работа просто затрется вместе с апдейтом. А если бы эти доработки относились к дочерней (child) теме, то и тема обновилась и персональная настройка стилей не съехала.
При обновлении движка WordPress или темплейта, ваши настройки сохранятся в дочерней теме.
А самое главное преимущество, это то, что обновления основной темы не уничтожат все ваши доработки. Представьте, что вы потратили несколько вечеров на настройки шрифтов, отступов, цветовой палитры под себя, но потом тема обновилась и все эта работа просто затрется вместе с апдейтом. А если бы эти доработки относились к дочерней (child) теме, то и тема обновилась и персональная настройка стилей не съехала.
Многие вебмастера прописывают в шапку сайта коды счетчиков и дополнительных скриптов. Либо напрямую кодом, либо через Google Tag Manager. Неважно как, но при обновлении темы – эти коды исчезнут. А в дочерней теме сохранятся. Какие еще нужны аргументы для использования дочерней темы как рабочего пространства?
Установка дочерней (child) темы
Это на самом деле очень просто. Сперва в папке wp-content/themes создаем новую папку и называем ее точно также как основную тему, но добавляем в название -child.
Теперь в этой папке нужно создать всего 2 файла. Первый это style.css, в котором такое содержание. Важные строки здесь Template: twentytwenty (тут указано к какой теме относится эта дочерняя тема) и Text Domain: twenty-twenty-child (где название папки дочерней темы).
/*
Theme Name: Twenty Twenty Child
Description: A child theme for Twenty Twenty
Author: Your Name
Author URI: https://yourblog.com
Template: twentytwenty
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: two-columns, right-sidebar
Text Domain: twenty-twenty-child
*/
Второй файл это functions.php, в который нужно добавить следующий код
<?php
//Child theme for twenty twenty
function my_theme_enqueue_styles() {
$parent_style = 'twentytwenty-style'; // Make sure here it's the parent theme.
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>
Теперь если вы загляните в админке в раздел Темы, то увидите новую созданную тему twentytwenty–child. Активируйте ее. Сейчас она ничем не отличается от основной темы, но зато в ней можно экспериментировать с настройками.
Дополнительно, я рекомендую скопировать из основной темы файл header.php и в этом файле в нужно место вставить коды счетчиков.
Не понимаю, почему разработчики по умолчанию выставили ширину области контента в темах twenty twenty и twenty twenty-one чуть больше 500 пикселей. Сейчас уже сложно найти устройства, где разрешение экрана не позволяет вместить все содержимое. Первое, что я сделал изменил ширину контента, но не в пикселях а в процентах от ширины основного элемента – страницы html. Укажем ширину как 70rem. А отступы слева и справа в 6rem. Все правки мы делаем в дочерней теме и в окне настроек темы “Дополнительные стили”
Что еще более странное в настройке темы по умолчанию, это гигантские размеры всех заголовков по умолчанию. Такое впечатление, что разработчики хотели, чтобы тема после установки выглядела уродливо или, может они проверяли дизайн только на смартфоне. У админа сайта, взглянув на сайт сразу возникает мысль искать сторонний темплейт. Но не торопитесь, все можно настраить.
Не знаю как вам, мне не нравится пунктирное подчеркивание ссылок. Но это мое субъективное мнение. Как можно исправить. Вариант 1. Убрать подчеркивание у ссылок
a {
text-decoration:none;
}
Вариант 2. Показывать подчеркивание только при наведении на ссылку
a {
text-decoration:none; }
a:hover {
text-decoration:underline; }
Для своего сайта я также изменил палитру шапки сайта и сделал ее черной. Это настраивается еще одним кодом CSS в “Дополнительные стили”.
Для начала этих настроек достаточно, чтобы тема выглядела уже прилично. Теперь продолжайте экспериментировать уже в настройках дочерней темы и не бойтесь потерять изменения в общем коде главного css файла, а также вы защищены от стирания ваших наработах в процессе обновления движка Вордпресс.
