Красивый дизайн страниц в WordPress с помощью CSS


Стандартного набора инструментов форматирования может не хватать для красивого оформления страниц WordPres. Можно, конечно, посмотреть что-то из плагинов. Но есть куда более действенный способ — использование HTML и CSS для дизайна.

Прямое редактирование кода

Собственно, за оформления отвечает CSS. Его код размещен в WordPres, как правило, в отдельном файле style.css.

Но этот файл отвечает за глобальные настройки внешнего вида всего сайта. А если требуется «подправить» конкретную страницу, отдельный заголовок или картинку?

Мы будем использовать атрибуты тегов. В WordPres есть возможность напрямую редактировать HTML страницы и юзать атрибуты CSS.

Заходим в редактор HTML страницы

Переход в редактор HTML кода зависит от версии редактора WordPres: «новый» или «классический». В стандартном редакторе (назовем его «новый») находим меню вверху-справа (три точки). И выбираем пункт «Редактор кода»:

Красивый дизайн страниц в WordPress с помощью CSS

 

Если установлен плагин типа «Classic Editor», то внешний вид редактора будет другим («классическим»). В правом углу окна редактора находим ссылку «Текст».

Красивый дизайн страниц в WordPress с помощью CSS

Атрибуты тегов

Например, задача поставить рамку вокруг изображения через код. Сам тег картинки выглядит так: <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. Которые заканчивается точкой с запятой. Также обрати внимание — наш код расположен внутри угловых скобок, после тега.

Выглядит в коде примерно так:

Красивые заголовки в WordPress

Еще больше дизайна с помощью CSS

Таким же способом можно редактировать и части текста. Для этого нужный фрагмент должен находиться внутри одного из тегов.

Например, если выделить текст «жирным», то этот фрагмент автоматически будет помещен в тег <strong>. А к этому тегу можно добавить атрибуты CSS, как в примере с заголовками.

Точно также редактируется части текста, которые выделены «курсивом» или «цитатой», установлены как маркированный или номерной список. Или если части текста выравниваются по правому/ левому краю, или по центру. Во всех случаях текст помещается в один из тегов, к которому мы можем дописывать атрибуты.

Необходимый фрагмент текста можно поместить в тег <p> — абзац. Сам по себе этот тег никак не «выдает» себя визуально. Но мы можем применить к нему атрибуты CSS.

Тень текста или заголовка

Текст можно украсить тенью. Для этого используется свойство text-shadow. В значениях этого свойства описывается параметр тени. Например, так:

style=»text-shadow: -2px 2px 5px #FD6969;»

Тут важна последовательность значений:

  1. Первое значение отвечает за горизонтальный сдвиг. Отрицательное значение отображает тень слева.
  2. Второе отвечает за вертикальное выравнивание. Положительное значение отображает тень ниже текста.
  3. Третье — радиус размытия тени. Чем тень шире, тем она бледнее.
  4. И четвёртое значение — цвет.

И еще

Тема HTML и CSS огромна. И в данной статье мы лишь рассмотрели основные моменты использования кода для дизайна страниц в WordPres. Чего должно хватить для понимания возможностей «глубинной» настройки внешнего вида.

Поделиться в соц сетях
Подписаться
Уведомить о
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии

Есть идеи, замечания, предложения? Воспользуйтесь формой Обратная связь или отправьте сообщение по адресу replay@sciencestory.ru
© 2017 Истории науки. Информация на сайте опубликована в ознакомительных целях может иметь ограничение 18+