Вместе с базовой темой Twenty Twenty идут сразу несколько преднастроенных блоков: цитаты, лэндинги, кнопки, мероприятия, которые в дополнение к уже существующим галерее, коду и другим блокам дают богатый выбор для форматирования.
PS: Статья в процессе написания и тестирования…
Скачать исходники для статьи можно ниже
Приступим к редактированию темы!
Меняем ширину страниц и статей в WordPress
Разработчики по умолчанию выставили ширину области контента в темах twenty twenty и twenty twenty-one чуть больше 500 пикселей. Сейчас уже сложно найти устройства, где разрешение экрана не позволяет вместить все содержимое.
Первое, что я сделал изменил ширину контента, но не в пикселях а в процентах от ширины основного элемента – страницы html. Укажем ширину как 70rem. А отступы слева и справа в 6rem.
Все правки мы делаем в дочерней теме и в окне настроек темы “Дополнительные стили”
.author-bio,.post-meta-wrapper,
.comment-respond p:not(.comment-notes),
.entry-content .wp-audio-shortcode,
.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce),
*[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce),
.default-max-width {
max-width: 70rem;
width: calc(100% - 6rem);
}
Меняем размер заголовков
Что еще более странное в настройке темы по умолчанию, это гигантские размеры всех заголовков по умолчанию. Такое впечатление, что разработчики хотели, чтобы тема после установки выглядела уродливо или, может они проверяли дизайн только на смартфоне. У админа сайта, взглянув на сайт сразу возникает мысль искать сторонний темплейт. Но не торопитесь, все можно настраить.
h1, .heading-size-1, .archive .heading-size-1 {
font-size: 5.6rem; }
h2,.heading-size-2 {
font-size: 3.8rem; }
h3,.heading-size-3 {
font-size: 2.8rem; }
h4,.heading-size-4 {
font-size: 2.4rem; }
h5,.heading-size-5 {
font-size: 2.1rem; }
h6,.heading-size-6 {
font-size: 1.6rem; }
Изменяем стиль ссылок
Не знаю как вам, мне не нравится пунктирное подчеркивание ссылок. Но это мое субъективное мнение. Как можно исправить.
Вариант 1. Убрать подчеркивание у ссылок
a {
text-decoration:none;
}
Вариант 2. Показывать подчеркивание только при наведении на ссылку
a {
text-decoration:none; }
a:hover {
text-decoration:underline; }
Изменяем палитру шапки сайта.
Также можно изменить палитру шапки сайта и сделать её, например, черной. Это настраивается еще одним кодом CSS в “Дополнительные стили”.
#site-header {
background-color: #000;
position: relative;
}
.primary-menu a, .primary-menu span.icon, #site-header button {
color: #fff!important;
}