Пять CSS настроек, которые помогут изменить дизайн блога

Автор:
Nurlan Kemelbekov

В этой заметке мы рассмотрим, как сделать пять быстрых CSS настроек, которые помогут изменить дизайн WordPress блога. Даже если не знаете CSS, вы сможете следовать инструкциям и изменить стандартный вид вашей темы сайта на WordPress.

Прежде чем мы начнем, нам нужно …
• тему с вариантами пользовательских стилей CSS
• или плагин пользовательские CSS
• или дочерняя тема

Если вы еще не знаете, я покажу вам, как найти и установить эти вещи. Таким образом, вы можете спокойно редактировать макет вашего сайта или блога. Если ваш сайт уже получает трафик, рекомендую использовать «maintenance» (https://wordpress.org/plugins/maintenance/) плагин, чтобы посетители не запутались в постоянно меняющемся макете.

Другой альтернативой было бы создание среды разработки на локальном компьютере, а затем загрузить изменения на сервер, как только они будут завершены. Почитайте статью «Запуск WordPress локально с WampServer«, чтобы узнать подробности.

  • Параметры вашей темы

Некоторые темы уже имеют возможность переопределения части CSS стилей, что позволяет создать свой собственный макет без установки дополнительных плагинов или создания дочерней темы. Это может быть найдено в рамках — Внешний вид> Тема> Параметры темы.

Иногда это в одном из подкатегорий, нужно искать коробку, которая имеет «Custom CSS» (Пользовательские стили CSS ) в качестве заголовка.

пользовательский css

  • Пользовательские CSS плагины

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

Эта функция плагина сохраняет изменения и позволяет легко вернуться к предыдущему макету, если вы почувствуете, что испортили что-то. Но если вам не нужны множество остальных функций плагина Jetpack, можно было бы использовать простой CSS плагин.
После установки и активации плагина Jetpack, вы можете редактировать CSS во “Внешний вид”> “Редактировать CSS”.

редактировать css

  • Создать дочернюю тему

Если собираетесь делать значительные изменения, лучше создать дочернюю тему…  намного легче отслеживать вещи при редактировании кода.
Для этого, можно просто создать новую папку THEMENAME child, создать style.css в новой папке темы и импортировать основную таблицу стилей.

@import url(«../THEMENAME/style.css»);

Для получения дополнительной информации о том, как создать дочернюю тему, вы можете прочитать статью.

Теперь, когда вы все настроили, настало время редактирования. Мы собираемся начать с чего-то очень простого: изменение фона блога / сайта. Я также покажу, как добавить стильное фоновое изображение.

1. Изменение цвета фона
Чтобы изменить фон сайта, вы должны сначала ознакомиться с моделированием темы. Цвет фона просто под body, или встроен в собственный стиль?
Некоторые темы не интуитивны, так что если та, которую вы в настоящее время используете, не понятна, вы можете перейти на другую тему, прежде чем начать редактирование. Тема, которую я буду использовать в примере — бесплатная тема Catchbox.
В большинстве темах, цвет фона просто под “body”. И изменить его довольно просто.

body {
background-color: #477C67;
}

Если вы хотите установить изображение в качестве фона, сначала загрузите картинку в папку с изображениями. Убедитесь, что это высокое разрешение в противном случае он будет выглядеть не очень хорошо. Затем скопируйте URL. Вам нужно всего лишь часть, так что если вы загрузили файл с помощью WordPress, то путь должен выглядеть примерно так: «wp-content/uploads/IMAGE.jpg»

body {
background: url(расположение /img.jpg) no-repeat center center fixed;
background - repeat : no - repeat ;
- webkit - background - size : cover ;
- moz - background - size : cover ;
- o - background - size : cover ;
background - size : cover ;
background - position : center ;
}

Готовый результат должен выглядеть примерно так:background

Чтобы скачать бесплатно большие фотографии, вы можете посетить unsplash.com.

2. Улучшение читаемости.
Иногда встречаются темы, которые выглядят прекрасно, но есть одна проблема. Шрифт маленький и серый, почти нечитаемый. Но не волнуйтесь, вы можете изменить это в один простой шаг.

 
body {
font-size: 16px;
color:#000
}

Добавить этот короткий фрагмент кода в пользовательский CSS файл, и это должно решить проблему. Вы можете почитать статью Выбор оптимального размера шрифта для веб — сайта, чтобы узнать подробности.

Хороший размер для стандартного шрифта сайта или блога 14-16 пикселей. Избегайте 12 пикселей, которые были обязательными, скажем, в школьных отчетах, а ваша главная цель заключается не в экономии бумаги. Вы же хотите, чтобы ваш контент был более удобным для чтения. Если вы чувствуете, что с стандартным шрифтом ваша тема выглядит непрофессионально, вы можете добавить эту строку:

body {
font-family: Arial, Helvetica, sans-serif;
}

Это выглядит следующим образом:

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color:#000
}

3. Изменение внешнего вида ссылки
Если вы хотите изменить цвет ссылок, вы можете сделать это довольно легко. Все, что вам нужно сделать, это использовать параметр CSS для ссылок «А», а затем изменить цвет на тот, который хотите.

a {
color: #1982D1;
}

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

a:hover {
color: #222;
background-color:#BA2323;
}

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

a:visited {
color: #004A4A;
}

4. Изменение внешнего вида заголовка
Заголовок статьи, как правило, в элементе H1, и подзаголовок, как правило, в элементе h2 (хотя это то, что вы выбираете сами при создании поста). Но если в вашей теме изменение стиля тегов h1 не поможет, Вы можете проверить, использует ли ваша тема определенный стиль для заголовков, открыв исходный код страницы и искать стиль (нажать Control +F) для «post title». Если результаты показывают «<h1 style=» некоторые -style»> </ h1>», то вы должны предоставить стиль в атрибуте » некоторые style».

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

Для этого перейдите в редакцию, в меню Внешний вид. и искать » некоторые style». Как я уже отметил выше, стиль, как правило, » entry-title». И посмотреть, какие строки необходимо переопределить. Иногда, бывает специальный стиль для связи с title. Это может быть, как «h1 a {» или» другие -style a {«.

Чтобы изменить цвет и размер заголовка, я должен был бы добавить эти строки:

.entry-title {
color: #ЦВЕТ;
font-size:РАЗМЕРpx;
}
.entry-title a {
color: #ЦВЕТ;
}

5. Округление и выравнивания углов виджетов
Если есть какие-либо углы в виджетах, которые должны быть закруглены или были округлены слишком много, можно быстро исправить.

Найдите контейнер в оригинальном стиле. Откройте исходный style внутри приборной панели WordPress или в текстовом редакторе и найдите текст, который нужно изменить. Стили для виджета обычно находятся под .widget, а пост контейнер, как правило, под content или text.

Код для использования здесь:

-moz-border-radius: SIZEpx;
border-radius: SIZEpx;

Если вы хотите заменить текущий изогнутый угол и сделать его прямым, просто установите размер 0. Если вы хотите посмотреть, как будет с  закругленным углом, начните с цифры 5 и посмотрите, как это выглядит.

Изменение цветовой схемы виджетов
Один из самых простых способов создания цветовой схемы для виджетов — иметь различные цвета фона для самого виджета и названия виджета. Это можно сделать путем идентификации класса стиля заголовка виджета.

Как правило, это просто widget-title. И если вы хотите изменить цвет фона самого виджета, найдите стиль для виджета, который обычно под.widget. После чего, выберите цвет и добавить этот код в custom CSS или child theme:

.widget {
background: #COLOR;
}
.widget-title {
background-color: #COLOR;
}

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

Хотя сначала это может показаться невероятно сложной, начать играть с кодом вашего сайта, большинство стилей достаточно понятны и если у вас есть базовые знания в области функциональности WordPress, вы сможете легко справиться с этой задачей.

Конечно, здесь мы едва коснулись темы редактирования, но теперь вы знаете достаточно, чтобы сделать некоторые изменения.

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



Вам также может понравиться:


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

* Copy This Password *

* Type Or Paste Password Here *

18 + девятнадцать =

Я просто хотел сказать, как сильно я ценю Ваш комментарий на мой пост. Спасибо Вам !!