Красивый дизайн страниц в WordPress с помощью CSS
Стандартного набора инструментов форматирования может не хватать для красивого оформления страниц WordPres. Можно, конечно, посмотреть что-то из плагинов. Но есть куда более действенный способ — использование HTML и CSS для дизайна.
Прямое редактирование кода
Собственно, за оформления отвечает CSS. Его код размещен в WordPres, как правило, в отдельном файле style.css.
Но этот файл отвечает за глобальные настройки внешнего вида всего сайта. А если требуется «подправить» конкретную страницу, отдельный заголовок или картинку?
Мы будем использовать атрибуты тегов. В WordPres есть возможность напрямую редактировать HTML страницы и юзать атрибуты CSS.
Заходим в редактор HTML страницы
Переход в редактор HTML кода зависит от версии редактора WordPres: «новый» или «классический». В стандартном редакторе (назовем его «новый») находим меню вверху-справа (три точки). И выбираем пункт «Редактор кода»:
Если установлен плагин типа «Classic Editor», то внешний вид редактора будет другим («классическим»). В правом углу окна редактора находим ссылку «Текст».
Атрибуты тегов
Например, задача поставить рамку вокруг изображения через код. Сам тег картинки выглядит так: <img>. Внутри угловых скобок может быть множество другой информации: класс и ссылка на само изображение. Добавим в атрибуты тега <img> и наш код. Который может выглядеть так:
style=»border: 3px solid #00a8e1;»
Здесь атрибут style означает код CSS. Знак равно, кавычки и точка с запятой — это синтаксис. Свойство border устанавливает толщину, стиль и цвет границ (в шестнадцатеричном коде). Тут важна последовательность значений.
В нашем случае свойство border устанавливает границу вокруг изображения. Выглядит в коде это примерно так:
Обрати внимание: на синтаксис тега <img>, отвечающего за картинку. Конструкция class=»wp-image» нужна самому WordPres и мы ее не касаемся. А далее идет наш код: style=»border: 3px solid #00a8e1;».
Заметь — разные части кода разделяются обычными пробелами. За нашим кодом идет атрибут src с адресом картинки. Эту часть кода также мы не касаемся.
Красивые заголовки
Точно также CSS можно использовать для прямого редактирования «дизайна» заголовков. Нужный заголовок будет находиться в одном из тегов <h1>, <h2>, <h3> и т.д. Которые мы и будем редактировать.
Например, такой код меняет шрифт и размер текста (в нашем случае заголовка):
style=»font-style: italic; font-size: 40px;»
Здесь обрати внимание: в атрибуте style используются сразу два разных свойства: font-style и font-size. Которые заканчивается точкой с запятой. Также обрати внимание — наш код расположен внутри угловых скобок, после тега.
Выглядит в коде примерно так:
Еще больше дизайна с помощью CSS
Таким же способом можно редактировать и части текста. Для этого нужный фрагмент должен находиться внутри одного из тегов.
Например, если выделить текст «жирным», то этот фрагмент автоматически будет помещен в тег <strong>. А к этому тегу можно добавить атрибуты CSS, как в примере с заголовками.
Точно также редактируется части текста, которые выделены «курсивом» или «цитатой», установлены как маркированный или номерной список. Или если части текста выравниваются по правому/ левому краю, или по центру. Во всех случаях текст помещается в один из тегов, к которому мы можем дописывать атрибуты.
Необходимый фрагмент текста можно поместить в тег <p> — абзац. Сам по себе этот тег никак не «выдает» себя визуально. Но мы можем применить к нему атрибуты CSS.
Тень текста или заголовка
Текст можно украсить тенью. Для этого используется свойство text-shadow. В значениях этого свойства описывается параметр тени. Например, так:
style=»text-shadow: -2px 2px 5px #FD6969;»
Тут важна последовательность значений:
- Первое значение отвечает за горизонтальный сдвиг. Отрицательное значение отображает тень слева.
- Второе отвечает за вертикальное выравнивание. Положительное значение отображает тень ниже текста.
- Третье — радиус размытия тени. Чем тень шире, тем она бледнее.
- И четвёртое значение — цвет.
И еще
Тема HTML и CSS огромна. И в данной статье мы лишь рассмотрели основные моменты использования кода для дизайна страниц в WordPres. Чего должно хватить для понимания возможностей «глубинной» настройки внешнего вида.