Пользовательский CSS в WordPress: как добавлять, редактировать и настраивать стили CSS

вы можете воспользоваться услугами веб-студии filandor и filandor.com. Студия работает много лет и предоставляет комплексные услуги.

Что такое CSS? Можете ли вы использовать CSS в WordPress? Как лучше всего добавить пользовательский CSS в WordPress? И как вы можете изучать CSS, если вы никогда не использовали его раньше?

На все эти вопросы я отвечу в этой статье, так что оставайтесь здесь, чтобы узнать все, что вам нужно знать об использовании CSS в WordPress.

Что такое CSS?

CSS означает Каскадные таблицы стилей. Если вы никогда раньше не сталкивались с этими словами, возможно, они мало что для вас значат. Давайте сделаем шаг назад и кратко поговорим о HTML.

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

Вы можете просмотреть HTML-код любой веб-страницы, щелкнув ее правой кнопкой мыши и выбрав Посмотреть исходный код страницы.

просмотреть исходный код страницы

Если вы хотите отредактировать HTML-код на своем веб-сайте WordPress, откройте страницу или опубликуйте в редактор Гутенбергаи щелкните значок Текст вкладка

включить режим кода в редакторе гутенберга

Вы можете добавить некоторые стили прямо в HTML-код.. Например, вы можете центрировать заголовок, выделить его жирным шрифтом и выбрать другой шрифт. Однако это неэффективный способ оформления веб-страниц. поскольку это означает, что вам нужно вручную редактировать HTML-код для всех страниц, для которых вы хотите использовать этот стиль.

Это где Каскадные таблицы стилей (CSS) спасти день. Добавление кода CSS для любых стилей, которые вы хотите применить к своим страницам, может спасти вас много времени. Например, у вас может быть код CSS, определяющий, как все заголовки отображаются на всех страницах, без добавления этого кода стиля на все страницы по отдельности.

Вы можете сделать это для любого аспекта внешнего вида вашего сайта. И самое замечательное, что если вы позже захотите кардинально изменить внешний вид всего вашего веб-сайта, вы можете сделать все это в коде CSS без редактирования HTML-кода всех различных веб-страниц.

Нужно ли использовать CSS в WordPress?

Одна из замечательных особенностей WordPress заключается в том, что можно иметь потрясающе выглядящий веб-сайт и работает не касаясь кода. В наши дни доступно так много великолепно выглядящих тем WordPress, которые выглядят потрясающе даже при небольшой работе с вами. И эти темы часто имеют параметры настройки, которые вы можете изменить без изменения кода.

Что, как говорится, все же стоит понимать CSS на случай, если вы когда-нибудь захотите настроить внешний вид своего сайта за пределами стандартных параметров настройки.

Как добавить пользовательский CSS в WordPress

CSS-файл вашего сайта WordPress можно редактировать напрямую. Однако я бы сильно советовать против этого по двум причинам:

  1. Если вы сделаете ошибку, вы можете испортить внешний вид вашего сайта.
  2. Когда вы позже обновите свою тему WordPress, вы потеряете свой пользовательский код CSS.

Однако есть простой способ обойти это: установить плагин под названием Простой пользовательский CSS и JS. Чтобы установить это, перейдите к Плагины > Добавить новый и найдите «Простой пользовательский CSS и JS». Далее нажмите Установить а потом Активировать.

простой пользовательский плагин css для wordpress

После того, как вы установили плагин, вы увидите меню на панели инструментов WordPress, которое называется Пользовательские CSS и JS. Выберите это меню, а затем нажмите Добавить CSS-код.

добавить код css с помощью плагина

Коричневый текст, который вы видите здесь, является информационным комментарием. В CSS-коде комментарии начинаются с /* и закончить с */.

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

Чтобы найти код CSS, который вы можете использовать, перейдите на страницу Раздел CSS на w3schools.com. Там вы можете найти пример кода, который можно скопировать, а затем изменить.

Например, вот код, который делает фон светло-голубым. Код CSS — это только часть, которую я выделил. Остальной код HTML.

пример светло-голубого css в редакторе w3school

➡ Вас также могут заинтересовать наши Обзор плагина CSS Hero для WordPress. 👍

Добавление пользовательского CSS в WordPress: демонстрация

Вот пример сообщения в блоге, отображаемого с использованием нашей темы Kava:

пример поста в блоге в теме kava

Теперь я собираюсь добавить следующий пользовательский код CSS:

h2 {
  color: purple;
}

Это делает заголовок фиолетовым:

Этот код сделает все заголовки h2 фиолетовыми. по всему сайту. Но если бы я хотел уточнить цвет, я мог бы использовать шестнадцатеричный код вместо слова фиолетовый. Например, если я использую код #9C33FFвы можете видеть, как он немного изменился в разные оттенки фиолетового.

Допустим, я хочу изменить шрифт основного текста. Я мог бы использовать такой код CSS:

p {
  font-family: Georgia;
  font-size: 20px;
}

п здесь означает параграфа это значит, что весь текст абзаца будет иметь шрифт Georgia кегля 20. Вот он:

css код в заголовке пример

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

Как выучить код CSS

HTML и CSS идут рука об руку, поэтому, если вы хотите изучить CSS, стоит изучить и HTML. Если вам нравится учиться по видео, канал YouTube Программирование с помощью Моша есть 1-часовое видео, знакомящее вас с HTML и CSS. Вы можете следовать вместе с ним и опробовать код на себе по пути.

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

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

Я закончил первые четыре курса, а именно:

  • Изучите HTML, создав приложение Cat Photo
  • Изучите основы CSS, создав меню кафе
  • Изучите цвет CSS, создав набор цветных маркеров
  • Изучите HTML-формы, создав регистрационную форму

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

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

курсы удемы

Например, посмотрите курс CSS — полное руководство 2023 (включая Flexbox, Grid и Sass):

  • Он имеет средний рейтинг 4,7 из 5 звезд из более чем 15 000 оценок.
  • Курс прошли более 85 000 студентов.
  • Он содержит более 22 часов видеоуроков, 303 загружаемых ресурса и 31 статью.
  • Он содержит задания, и вы получаете сертификат по их выполнению.

Но если вам нужен почти такой же подробный видеокурс бесплатно, У freeCodeCamp есть 11-часовой курс CSS на YouTube.:

Итак, вот и все. Я дал вам четыре способа изучения кода CSS, три из которых бесплатны. 😀

➡Вы также можете посмотреть наши 23 лучших онлайн-инструмента для изучения кодирования и улучшения навыков программирования. 👍

Резюме

В этой статье я дал обзор CSS в WordPress. Вот краткое изложение основных моментов, которые я рассмотрел:

  • CSS означает пользовательские таблицы стилей. и определяет внешний вид и макет вашего сайта.
  • Если вы используете WordPress, не обязательно знать код CSS.. Тем не менее, на всякий случай все же стоит изучить CSS.
  • Самый простой способ добавить пользовательский код CSS на ваш веб-сайт WordPress — это Простой пользовательский плагин CSS и JS.
  • Если вы хотите быстро найти код CSS для своего сайта WordPress, перейдите на Раздел CSS на w3schools.com.
  • Если вы хотите изучить код CSS, есть разные места для его изучения, как бесплатные, так и платные. Я рекомендую начать с видео из Programming with Mosh а потом глядя на freeCodeCamp.org.