Содержание
Подключение CSS в WordPress
Вариант 2 — Добавление Custom CSS WordPress через настройщик темы
Вы можете легко добавить произвольный CSS в WordPress, если версия вашей CMS 4.7 и выше, так как она включает встроенный инструмент в настройке темы. Чтобы использовать его, перейдите в раздел Внешний вид › Настроить в админ консоли. Прокрутите вниз до раздела Дополнительные стили.
Для вас будет открыт встроенный инструмент, который позволит вам добавить любой код CSS. Он прост в использовании и позволяет просматривать как мобильные, так и планшетные версии вашего сайта, что очень ценно, учитывая, насколько важна мобильность в настоящее время.
Поздравления! Теперь вы знаете, как применять пользовательский CSS в WordPress без каких-либо плагинов.
Вариант 3 — Добавление стилей Custom CSS WordPress, используя дочернюю тему
Все приведенные выше примеры показали вам, как добавить свой собственный CSS в уже живой сайт (запущенный онлайн) на WordPress. Однако есть ситуации, когда вам нужно сначала проверить это. Возможно, вы ещё не знаете точно, что хотите сделать, или не хотите рисковать своим сайтом. Чтобы этого не произошло, мы рекомендуем создать дочернюю тему WordPress. Это позволит вам развязать своё воображение и попробовать различные комбинации CSS. И самое главное, ваш живой сайт при этом никак не пострадает!
Разрешение общих вопросов, связанных с пользовательскими стилями в WordPress
Иногда вы можете столкнуться с небольшими техническими заминками при добавлении пользовательского CSS в WordPress. Давайте быстро рассмотрим наиболее распространенные вопросы и посмотрим, как с ними справиться.
Изменения не появляются
Пользовательский CSS-код в WordPress может не отображаться из-за кэша. Если вы используете какой-либо кэширующий плагин, есть большая вероятность, что некоторые ресурсы будут кэшироваться и браться из временного хранилища для увеличения скорости и снижения использования ресурсов. Подробные инструкции по очистке кэша WordPress см. в этом руководстве. Другим решением будет временное отключение таких плагинов.
Если вы также включили кэширование браузера, тогда его очистка может быть достаточно, чтобы увидеть новые изменения, которые вы применили.
И наконец, некоторые хостинг-провайдеры предлагают встроенные инструменты кэширования, чтобы улучшить работу вашего сайта на WordPress. Мы делаем это и на Hostinger. Наши встроенные плагины для WordPress могут быть отключены или очищены через раздел Плагины › Установленные › Must-Use.
Ошибки в синтаксисе CSS
Ошибки синтаксиса или ошибки в написании довольно легко упускаются из виду и это часто препятствует правильному отображению пользовательского CSS в WordPress. Если вы не видите изменений и вы уверены, что это не кэш, использование валидатора CSS может быть действительно полезным. Просто вставьте свой CSS и запустите инструмент. Он покажет любые ошибки или опечатки и укажет строку, в которой она находится.
Слишком много вариантов
Иногда с произвольными стилями CSS можно перестараться. Добавляя две или более ссылки на селектор, можно вызвать конфликт. Поскольку CSS не может читать мысли, он не знает, какое значение применять. Это обычное явление при вызове новой таблицы стилей поверх существующей. Если вы пытаетесь изменить заголовок h3, но ничего не происходит, дважды проверьте таблицу стилей для существующих записей.
Отсутствие идей
Хотя это не проблема, очень часто самая сложная часть – это выяснить, какие стили CSS вы хотите применить в WordPress. Это может вызвать огромную головную боль, поскольку вы должны учитывать много вещей. Если это ваша ситуация, вот несколько ресурсов, которые могут помочь вам почерпнуть свежие идеи:
Заключительное слово
Подводя итог, добавление пользовательского CSS в WordPress – отличный способ сделать ваш сайт уникальным и привлекательным. Мы научились добавлять пользовательский CSS в WordPress с помощью плагинов, встроенных инструментов и дочерней темы.
Если вы нашли это руководство полезным, не стесняйтесь делиться им на Facebook, Twitter или в других социальных сетях. И, наконец, если у вас есть какие-либо советы, хитрости или идеи, которыми вы хотите поделиться, мы с нетерпением ждём их в комментариях ниже!
wp_enqueue_style() — подключение стилей CSS — WordPressify
Рекомендуемый метод подключения CSS-стилей в WordPress. Так же, как и wp_enqueue_script(), эта функция ставит файл в очередь на вывод. После этого выводит его в HTML либо между тегами <head>
, либо в футере сайта.
Стили выводятся в футере (перед </body>
) только в том случае, если они были поставлены в очередь на вывод где-то в середине HTML-документа.
wp_enqueue_style( $handle, $src = false, $deps = array(), $ver = false, $media = 'all' ) |
- $handle
- (строка) рабочее название, идентификатор таблицы стилей, которую нужно подключить (поставить в очередь)
- $src
- (строка|логическое) абсолютный URL таблицы CSS-стилей на сайте. Этот параметр (а также все последующие) нужен только в том случае, если WordPress ещё не знает про таблицу стилей с указанным идентификатором, то есть, если файл CSS уже зарегистрирован при помощи
wp_register_style()
, то этот и последующие параметры отпадают. - $deps
- (массив) зависимости от других CSS-файлов, то есть, если есть какие-то стили, которые нужно загрузить перед нашим подключаем файлом, то нужно перечислить их идентификаторы в массиве
- $ver
- (строка|логическое) версия файла. По умолчанию — текущая версия WordPress. Можно указать
null
, тогда версия не будет указана вообще. Параметр нужен для того, чтобы посетитель получал актуальную версию файла, а не из кэша. - $media
- (строка) атрибут
media
таблицы стилей. По сути означает — для каких устройств предназначен данный CSS-файл, напримерall
— для всех,print
— для печати и т.д.
Примеры
Во всех примерах будем использовать один и тот же файл true_style.css
. Стили также можно подключать через хуки wp_enqueue_scripts
и admin_enqueue_scripts
, хотя это и не обязательно, как со скриптами.
Итак, сначала подключим файл во фронтэнде сайта:
function true_style_frontend() { wp_enqueue_style( 'true_style', get_stylesheet_directory_uri() . '/css/true_style.css' ); } add_action( 'wp_enqueue_scripts', 'true_style_frontend' ); |
Можно подключить файл непосредственно на сайт, вставив функцию прямо в HTML-шаблон, или же в functions.php
, при этом не забыв воспользоваться условным тегом is_admin().
if( !is_admin() ) wp_enqueue_style( 'true_style', get_stylesheet_directory_uri() . '/css/true_style.css', array(), '14981210', 'screen' ); |
Теперь сделаем так, чтобы файл подключался только в админке:
function true_style_backend() { wp_enqueue_style( 'true_style', get_stylesheet_directory_uri() . '/css/true_style.css' ); } add_action( 'admin_enqueue_scripts', 'true_style_backend' ); |
А что, если файл с указанным рабочим названием уже зарегистрирован через wp_register_style()
? Тогда подключить его будет ещё проще. Опять-таки пример для админки:
if( is_admin() ) wp_enqueue_style( 'true_style' ); |
Кстати, список всех зарегистрированных стилей можно узнать следующим образом:
/* * Объект $wp_styles содержит информацию обо всех зарегистрированных на данный момент стилях */ global $wp_styles; print_r( $wp_styles ); |
CSS специально для настроек плагина
В данном случае очевидно, что файл с таблицей стилей нужно использовать только на одной-единственной странице — странице настроек данного плагина. WordPress позволяет реализовать это при помощи специального хука.
Итак, предположим, у нас есть какой-то плагин, вставляем в него следующий код:
/* * Пример будет работать начиная с версии WordPress 2.6.3, */ add_action( 'admin_init', 'true_plugin_init' ); add_action( 'admin_menu', 'true_plugin_menu' ); function true_plugin_init() { /* * Сначала регистрируем стили * файл CSS должен находиться в папке с выполняемым файлов плагина */ wp_register_style( 'trueplugin', plugins_url('true-plugin.css', __FILE__) ); } function true_plugin_menu() { /* * Создаем страницу настроек плагина, она будет находиться в разделе Параметры */ $page_suffix = add_submenu_page( 'options-general.php', 'True плагин', 'True плагин настройки', 'administrator', __FILE__, 'true_plugin_html' ); /* * Создаем хук, содержащий суффикс созданной страницы настроек $page_suffix */ add_action( 'admin_print_styles-' . $page_suffix, 'true_plugin_styles' ); } function true_plugin_styles() { /* * Ставим в очередь на вывод */ wp_enqueue_style( 'trueplugin' ); } function true_plugin_html() { /* * Собственно содержимое страницы настроек */ echo 'Это страница настроек'; } |
Как редактировать CSS в WordPress.Изменение CSS стилей в WordPress.Как добавить CSS в WordPress
Здравствуйте, друзья! В этом уроке мы поговорим о том, как в WordPress можно добавить свои CSS стили или изменить существующие.
Замечу, что данных урок рассчитан в большей степени для тех, кто уже имеет базовые знания в использовании CSS стилей. И так, давайте начнем!
Способ №1
1. Заходим в административное меню и переходим в Внешний вид -> Редактор.
2. В открывшейся странице по умолчанию будет открыто окно редактирования стилей вашей темы (шаблона). После того как вы добавите свои новые стили или измените уже существующие, не забудьте сохранить изменения нажав кнопку «Обновить файл».
Как видите, с административной панели всего за несколько кликов можно добраться до стилей вашего шаблона WordPress.
Способ №2
Для редактирования стилей этим способом нам нужно:
1. Найти файл style.css в корне папки вашей активированной темы (шаблона).
Путь к файлу: wp-content\themes\название_вашей темы\style.css
2. Открываем с помощью текстового редактора (я пользуюсь Notepad++) файл style.css и вносим необходимые изменения.
3. После того как внесете все необходимые правки в стилях не забудьте сохранить файл style.css.
Редактирование таким способом актуальнее всего если сайт размещен на локальном сервере. В таком случае, вам не нужно будет каждый раз обновлять страницу редактирования CSS стилей в административном меню после каждого изменения.
Согласитесь, проще и быстрее нажать Ctrl+S в текстовом редакторе и сразу смотреть изменения на сайте, чем после каждого обновления стилей пересохранять страницу в административном меню.
Если у вас что-то не получилось или возникли вопросы, смело пишите в комментариях!
Здравствуйте, друзья! В этом уроке мы поговорим о том, как в WordPress можно добавить свои CSS стили или изменить существующие. Замечу, что данных урок рассчитан в большей степени для тех, кто уже имеет базовые знания в использовании CSS стилей. И так, давайте начнем! Способ №1 1. Заходим в административное меню и переходим в Внешний вид -> Редактор. 2. В открывшейся странице по умолчанию будет открыто окно редактирования стилей вашей темы (шаблона). После того как вы добавите свои новые стили или измените уже существующие, не забудьте сохранить изменения нажав кнопку «Обновить файл». Как видите, с административной панели всего за несколько кликов можно…
Проголосуйте за урок
100
Оценка
Итог : Уважаемые читатели! Не поленитесь проголосовать и оставить комментарий. Таким образом я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!
Рейтинг: 4.49 ( 14 голосов )
100
Как подключить CSS к HTML
Существует три способа подключения CSS к HTML:
-
Внешние таблицы стилей.
-
Внутренние таблицы стилей.
-
Встроенные таблицы стилей.
Рассмотрим каждый из них на примерах.
Внешние таблицы стилей
Внешние таблицы стилей подключаются при помощи отдельного файла с расширением .css и тега <link>, “встроенного” в HTML-документ. Например:
<html>
<head>
<title>Страница</title>
<link rel=»stylesheet» type=»text/css» href=»style.css»>
</head>
<body>
Текст.
</body>
</html>
Внутренние таблицы стилей
Внутренние таблицы стилей “включаются” в HTML-документ, а используется для этого атрибута style. Например:
<html>
<head>
<title>Страница</title>
</head>
<body>
<h2>Текст<h2>
</body>
</html>
Встроенные таблицы стилей
Встроенные таблицы стилей “прописываются” в заголовке HTML-документа. Например:
<html>
<head>
<title>Моя страница</title>
<style type=»text/css»>
h2 {
«color:red
}
</style>
</head>
<body>
hello! <h2>
</body>
</html>
Как подключить CSS. Методы и способы подключений.
» Как подключить CSS. Методы и способы подключений.
Здравствуйте, мои уважаемые читатели блога bloggood.ru. В сегодняшней статье пойдет речь о методах или способах подключения таблицы стилей CSS. Я вам расскажу, как можно подключить CSS к html сайту четырьмя способами. Эти четыре способа подключения вам в дальнейшем пригодятся, так как бывают случаи, когда необходимо использовать на сайте эти все методы подключения. Для тех, кто не знает, что такое таблицы стилей CSS, прочитайте эту статью.
Приступим…
Как подключить CSS. Методы и способы подключений.
Таблицы связанных стилей.
Способ подключения CSS — №1
Способ №1 — самый удобный способ определения стилей для сайта. Все стили для сайта хранятся в одном отдельном файле и используются для любых веб-страниц. Для подключения или для связки таблицы CSS к html странице используется тег LINK в заголовке страницы.
<link rel="stylesheet" ENGINE="text/css" href="style.css">
или
<link rel="stylesheet" type="text/css" href="https://ВАШ САЙТ/style.css">
Пример подключение таблицы CSS:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Пример подключение таблицы CSS</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h2>Заголовок</h2> <p>Текст</p> </body> </html>
Плюсы данного способа:
1. Использование одного файла стилей CSS для всех веб-страниц веб-сайта;
2. Можно изменять вид сайта через таблицу стилей без редактирования веб-страниц;
3. При изменении стиля в одном файле style.css, стиль автоматически применяется ко всем страницам, где только есть на CSS файл подключение. Это очень удобно;
4. При первой загрузке веб-сайта, файл с CSS стилем помещается в кэш на локальном компьютере пользователя, отдельно от веб-страниц, по этой причине загрузка сайта происходит намного быстрее.
Таблицы глобальных стилей.
Способ подключения CSS — №2
Способ №2 не так эффективен и удобен как способ №1, но бывают моменты, что и этот способ подключения CSS необходим.
Этот стиль подключается и прописывается в самом документе и размещается в заголовке веб-страницы между тегами <head></head>. Подключается стиль тегом <STYLE>.
<style type="text/css"></style>
Пример подключение таблицы CSS:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Пример подключение таблицы CSS</title> <style type="text/css"> h3 { font-size: 90px; /* Размер шрифта */ font-family: Verdana, Arial, Helvetica, sans-serif; /* Шрифт */ color: #cc0000 /* Цвет текста */ } </style> </head> <body> <h3>Заголовок</h3> </body> </html>
В этом примере я показал изменение стиля заголовка <h3>. Теперь на этой веб-странице достаточно только указать тег <h3> и стили добавятся к нему автоматически.
Внутренние стили.
Способ подключения CSS — №3
Способ №3 используется в редких случаях. Внутренний стиль служит для изменения одиночного тега на веб-странице. Для подключения стиля используется параметр style.
Пример подключение таблицы CSS:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Пример подключение таблицы CSS</title> </head> <body> <h3>Заголовок</h3> </body> </html>
Комбинированный метод подключения стилей.
Способ подключения CSS — №4
В этом способе используется сразу несколько стилей, которые мы использовали выше (способ №1 — №3).
Пример подключение таблицы CSS:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Пример подключение таблицы CSS</title> <style type="text/css"> h3 { font-size: 90px; /* Размер шрифта */ font-family: Verdana, Arial, Helvetica, sans-serif; /* Шрифт */ color: #cc0000 /* Цвет текста */ } </style> </head> <body> <h3>Заголовок</h3> <h3>Заголовок</h3> </body> </html>
В итоге по примеру у нас получится первый заголовок красного цвета с размером 50 пикселей, а следующий — зеленым цветом и с размером 90 пикселей.
Повторюсь, что все описанные методы использования CSS могут применяться самостоятельно, а могут совмещаться друг с другом. Это можно увидеть в способе№4.
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
Добавить комментарий
Метки: css, для начинающих, основы
Как использовать CSS в WordPress для легкой настройки стиля
WordPress позволяет создавать функциональный и привлекательный веб-сайт без каких-либо технических знаний. Однако, если вы хотите получить максимальную отдачу от своего сайта, небольшое изучение программирования может иметь большое значение. Один из самых быстрых способов внести значимые изменения в свой сайт — это научиться использовать CSS в WordPress.
Cascading Style Sheets (CSS) — один из важнейших языков веб-дизайна. Внесение изменений в CSS на вашем сайте позволяет вам настроить его внешний вид, макет, шрифты, цвета и многое другое.CSS предлагает более полный контроль над внешним видом вашего сайта, чем ваша тема, — и работать с ним не так уж и сложно.
Если вы новичок в CSS, вы попали в нужное место. Мы объясним, что это такое, как он влияет на ваш сайт и как начать использовать CSS в WordPress. Давайте прямо сейчас!
Что такое CSS (и как он работает)
Во-первых, давайте немного вернемся и поговорим о языке гипертекстовой разметки (HTML). Это основной язык, используемый для создания вашего веб-сайта WordPress, и он носит описательный характер.Код HTML сообщает веб-браузерам о различных элементах вашего контента. Например, он указывает, какой текст является частью заголовка, а какой — частью основного абзаца.
Если вы когда-нибудь проверяли вкладку Text в редакторе WordPress, вы видели HTML в действии:
Вы также можете использовать HTML, чтобы каким-то образом определять стиль вашего веб-сайта. Однако это громоздкий способ выполнить работу. Например, если вы хотите, чтобы все заголовки ваших сообщений были фиолетовыми, вам нужно добавить HTML-код, содержащий ту же инструкцию, для каждого заголовка отдельно.
Вот где на помощь приходят каскадные таблицы стилей (CSS). Этот язык используется для определения внешнего вида элементов HTML, включая их размеры, макеты, цвета, шрифты и т. Д. Например, вы можете изменить цвет всех заголовков на своем сайте с помощью нескольких строк кода с помощью CSS, не изменяя HTML-код вашего контента.
Разделение структуры и стиля таким образом дает вам полный контроль над внешним видом вашего сайта и позволяет легко вносить изменения в любое время.Это также означает, что вы можете начать использовать базовый CSS в WordPress, не зная HTML (хотя понимание основ HTML действительно помогает ускорить процесс).
Где добавить CSS в WordPress
Хотя вы можете добавить CSS непосредственно в таблицу стилей своей темы WordPress, мы не рекомендуем этот метод , потому что в нем легко сделать ошибки, и любые внесенные вами изменения будут перезаписаны при обновлении вашей темы (, если вы не используете дочернюю тему. ) .
К счастью, есть более простое решение. Чтобы добавить CSS в WordPress, вам просто нужно:
- Перейдите к Внешний вид> Настроить на панели инструментов WordPress, чтобы открыть настройщик WordPress
- Выберите опцию Additional CSS в меню слева в интерфейсе настройщика WordPress:
(в настоящее время) пустой редактор в этой области позволяет вам вводить строки кода CSS без необходимости сортировать существующую таблицу стилей.Вы можете добавить сюда столько CSS, сколько хотите — просто включайте каждый новый фрагмент в отдельную строку. Кроме того, вы можете увидеть, как ваши изменения вступят в силу в режиме предварительного просмотра. Таким образом, вы будете знать, правильно ли они выглядят перед тем, как опубликует их на вашем сайте.
Кроме того, этот редактор поможет вам «проверить» ваш CSS, что является причудливым способом сказать, что он предупредит вас, если вы сделаете какие-либо очевидные ошибки.
Если вам интересно, какие настройки CSS вы можете здесь сделать, не волнуйтесь.Оставайтесь на этой странице в своей панели инструментов, и мы рассмотрим несколько способов начать настраивать внешний вид вашего сайта с помощью CSS.
Как начать настройку вашего сайта WordPress с помощью CSS
Как мы упоминали ранее, вы можете изменить практически любой аспект внешнего вида своего сайта с помощью CSS в WordPress. Небо действительно предел здесь. Однако пока мы будем упрощать задачу и рассмотрим некоторые базовые настройки CSS, которые вы можете сделать.
Мы уже упоминали об изменении цвета текста, так что начнем с этого.Если вы действительно хотите, чтобы ваши сообщения WordPress привлекали внимание посетителей, вы можете поэкспериментировать с изменением цвета заголовка каждого сообщения. Вот как выглядит базовый пост в теме Twenty Seventeen WordPress:
Теперь добавьте этот код в поле Additional CSS в настройщике:
h2 {
цвет: пурпурный;
}
Как видите, цвет заголовка сообщения изменился с черного на фиолетовый:
Эта же настройка будет применяться ко всем остальным сообщениям на вашем сайте.Вместо того, чтобы просто называть цвет, вы также можете использовать шестнадцатеричные коды, чтобы получить нужный оттенок. Просто замените фиолетовый на # 9C33FF (или любой другой цвет, который вы хотите использовать). Когда вы будете довольны новым оттенком, выберите Опубликовать вверху экрана, чтобы изменения вступили в силу.
Затем, что, если вы хотите внести некоторые изменения в основной текст? Давайте отредактируем семейство и размер шрифта, добавив этот код в новую строку:
p {
font-family: Georgia;
размер шрифта: 20 пикселей;
}
Опять же, вы можете сразу увидеть результаты в настройщике:
Наконец, давайте немного выделим боковую панель, добавив голубой фон и небольшой отступ.В новой строке вставьте этот CSS:
.widget {
background: # B9EBFA;
отступ: 25 пикселей;
}
Это помещает простой фон позади вашей боковой панели:
Имейте в виду, что этот код повлияет на всех областей вашего виджета, включая нижний колонтитул. Вы также можете вносить изменения в определенные виджеты, если хотите. Например, вы можете добавить фон только к виджету поиска, заменив .widget
в приведенном выше коде на .widget_search
:
На этом этапе вы, возможно, начинаете понимать, как работает CSS под капотом. В первой строке фрагмента CSS указывается, какой элемент вы изменяете, например заголовки сообщений ( h2 ), текст, содержащийся в абзацах ( p ) или области ваших виджетов ( widget ). Следующие строки, заключенные в квадратные скобки, содержат конкретные инструкции о том, что следует изменить.
Где узнать больше о CSS
В Интернете есть множество полезных руководств, которые помогут вам узнать больше о CSS и наиболее распространенных элементах, на которые вы можете повлиять.А до тех пор, если вы изо всех сил пытаетесь понять, какой код вам нужен для внесения того или иного изменения, простой поиск в Google обычно приведет вас к ответу. Ресурсы, такие как веб-документы MDN от Mozilla, обычно имеют высокий рейтинг в Google и прекрасно объясняют различные аспекты CSS.
Немного попрактиковавшись, вы обнаружите, что добавляете CSS в кратчайшие сроки.
Заключение
Работа с кодом вашего сайта может показаться пугающей, если вы новичок. Тем не менее, многие языки, на которых основан ваш сайт, на удивление удобны для пользователя, когда дело доходит до внесения базовых настроек.Обучение эффективному использованию CSS в WordPress может занять немного времени, но это даст вам беспрецедентный уровень контроля над внешним видом и макетом вашего сайта.
Вместо того, чтобы вносить изменения непосредственно в таблицу стилей CSS вашей темы, вы должны использовать настройщик WordPress для быстрого и безопасного добавления кода CSS. Этот процесс позволяет настраивать цвета, размеры, шрифты и размещение различных элементов без постоянного воздействия на основной код активной темы. Более того, вы сможете видеть свои изменения в реальном времени, чтобы точно знать, какой эффект они окажут.
У вас есть вопросы о том, как использовать CSS в WordPress? Спросите нас о чем угодно в разделе комментариев ниже!
Бесплатный гид
5 основных советов по ускорению
вашего сайта WordPress
Сократите время загрузки даже на 50-80%
, просто следуя простым советам.
Как использовать CSS в WordPress (редактировать, добавлять и настраивать внешний вид вашего сайта)
Хотите попробовать редактировать WordPress CSS, но не знаете, с чего начать? С помощью стилей CSS вы можете редактировать внешний вид своего сайта глобально или на определенных страницах.Добавьте цвета, разнесите определенные элементы, создайте макет и в основном измените внешний вид вашей темы WordPress.
Если вы хотите ближе познакомиться со средой разработки WordPress или просто лучше контролировать внешний вид своего веб-сайта, вам нужно знать, как добавить CSS в WordPress (а также как изменить то, что уже есть).
Отредактировав свою тему и добавив собственный дополнительный CSS, вы сможете оптимизировать каждый визуальный элемент на своем сайте.Сегодня мы рассмотрим это подробнее.
Готовы начать? Давай сделаем это!
Предпочитаете посмотреть видео версию?
Что такое редактирование CSS?
CSS означает каскадные таблицы стилей, и это самый популярный веб-язык помимо HTML. Два из них идут рука об руку, поскольку CSS используется для стилизации элементов HTML. HTML закладывает основу внешнего вида веб-сайта, а CSS используется для его дальнейшего стилизации.
Пример кода CSS (Источник: w3schools.com)
CSS дает вам возможность сделать веб-сайт адаптивным, добавить цвета, изменить шрифты, изменить макет и в целом настроить визуальное представление веб-сайта.Подобно HTML и JavaScript, CSS — это интерфейсный клиентский язык, что означает, что он выполняется на стороне пользователя, а не на внутреннем сервере.
Когда вы углубляетесь в разработку WordPress, вам необходимо знать HTML, CSS, JavaScript и PHP. Это то, во что встроено ядро CMS, а также множество тем и плагинов.
Но даже если вы не веб-дизайнер или разработчик, неплохо было бы подобрать немного CSS, так как вы можете использовать его для перемещения или стилизации элементов на своем веб-сайте или внесения небольших эстетических изменений в вашу тему, чтобы они лучше вам подходили.
Готовы придать своему сайту #WordPress индивидуальный вид? 👀 Узнайте, как использовать стили CSS для редактирования цветов 🎨, изменить макет ✨ и многое другое.
WordPress и CSS
В WordPress CSS немного отличается. Он управляется темами, которые состоят из файлов шаблонов, тегов шаблонов и, конечно же, таблицы стилей CSS. Хотя они созданы вашей темой, все они доступны для редактирования вами.
Файлы шаблонов разделяют части вашего веб-сайта на разделы (например, header.php или archive.php), а теги шаблонов используются для вызова их и другого содержимого из вашей базы данных. Эти файлы на самом деле состоят в основном из PHP и HTML, хотя при необходимости вы можете добавить CSS.
Что вам действительно нужно, так это таблица стилей или style.css. Чтобы изменить внешний вид вашего веб-сайта, вам нужно научиться добавлять и редактировать код в этом файле.
Как настроить тему WordPress с помощью CSS
Если вы хотите настроить свою тему и изменить внешний вид вашего сайта с помощью CSS, вам нужно будет либо добавить свой собственный код, либо отредактировать то, что уже есть.Есть способы добавить CSS, даже не касаясь файлов темы, но чтобы изменить существующий код темы, вам потребуется доступ к таблице стилей вашего сайта.
При внесении этих изменений вы должны знать одну вещь: при обновлении вашей темы все изменения, внесенные вами в style.css , functions.php или другие файлы шаблонов темы, будут удалены. В общем, вам не следует вносить прямые изменения в свой веб-сайт в редакторе без использования дочерней темы.
Таблица стилей похожа на «список инструкций» для вашего веб-сайта, в котором точно указывается его стиль и обработка кода CSS.Здесь вы будете выполнять основную часть редактирования, но мы также покажем вам, как получить доступ к другим файлам шаблонов тем, таким как header.php и footer.php.
Есть два способа получить доступ к таблице стилей вашего сайта WordPress: через панель управления WordPress или через FTP-клиент. Мы рассмотрим их обоих.
Не удобно делать это самому? Подумайте о том, чтобы нанять разработчика WordPress, который сделает этот шаг за вас.
Редактирование CSS CSS на панели инструментов
Самый простой и удобный способ получить доступ к вашей таблице стилей CSS — прямо в панели управления WordPress.Нет необходимости устанавливать программы FTP или редакторы кода. Вы можете напрямую редактировать любой файл со встроенной подсветкой синтаксиса и функциональной документацией.
Перед тем, как вносить какие-либо серьезные изменения в файлы ядра, вы всегда должны делать резервную копию своего сайта WordPress. Если вы новичок в CSS, очень легко случайно допустить ошибку, которая может нарушить внешний вид вашего сайта, и может быть сложно придумать, как отменить внесенные изменения.
После того, как вы сделали резервную копию и дочернюю тему, войдите в свой бэкэнд.Вы можете найти редактор, перейдя в меню и нажав Внешний вид> Редактор тем .
Вы должны увидеть всплывающее окно, предупреждающее вас о недопустимости прямого редактирования этих файлов. Не волнуйтесь, просто нажмите «Я понимаю». Это всего лишь предупреждение о необходимости использования дочерней темы и резервного копирования вашего сайта перед внесением каких-либо серьезных изменений. Следуйте этим инструкциям, и вы сможете редактировать.
Прямое редактирование файлов WordPress
И вот вы в деле! Вы должны быть в таблице стилей по умолчанию, но посмотрите меню справа, чтобы просмотреть файлы темы, если нет.
Помимо style.css, у вас также будет доступ к файлам шаблонов, таким как functions.php, header.php и single.php. Все это влияет на работу определенных страниц вашего сайта.
Но вам следует ознакомиться с PHP, прежде чем углубляться в эти конкретные файлы.
Редактирование таблицы стилей style.css в теме WordPress
Просто помните: большинство изменений CSS, которые вы здесь делаете, будут глобальными. Например, если вы измените заголовки h2 на определенный шрифт, это вступит в силу для каждой отдельной страницы вашего сайта.Вам нужно будет использовать специальный синтаксис для настройки стиля определенных страниц.
Редактировать файлы темы напрямую
Что делать, если у вас нет доступа к редактору тем или вы предпочитаете работать через FTP? Бэкэнд-редактор использовать проще, но некоторые темы или плагины могут его отключить. В этом случае вам нужно будет подключиться к своему сайту через FTP.
FTP, или протокол передачи файлов, позволяет удаленно получать доступ к файлам веб-сайта и изменять их. Первое, что вам нужно сделать, это загрузить FileZilla или любой другой FTP-клиент.
Затем вы должны связаться с вашим хостом и запросить свои учетные данные FTP (хост, порт и имя пользователя / пароль, если применимо). Если у вашего хоста есть панель управления, вы можете найти их, войдя в систему.
Учетные данные FTP в MyKinsta
Учетные данные пользователей
Kinsta находятся на панели управления MyKinsta в разделе Сайты> SFTP / SSH .
Когда они у вас есть, запустите FTP-клиент и введите эту информацию. Если это не сработает, попробуйте поставить sftp: // перед URL-адресом в разделе Host .
Использование FileZilla
Войдя в систему, вы можете найти свой файл style.css, щелкнув папку wp-content , чтобы открыть ее, затем папку своей темы (например, тему T goy Twenty ), а затем прокрутите страницу до тех пор, пока не увидите стиль. css.
Дважды щелкните, чтобы открыть его (или щелкните правой кнопкой мыши и выберите View / Edit ) и внесите изменения. Не забудьте сохранить и загрузить обратно на сервер.
Если вам нужно отредактировать другие файлы шаблонов, например home.php, single.php, archive.php, вы можете найти их в той же папке, что и style.css.
Редактирование файлов темы через FTP или панель управления не всегда необходимо. На самом деле, лучше этого не делать, если вы просто добавляете дополнительный код.
Для небольших дополнений, вот лучший способ добавить CSS на ваш сайт WordPress.
Как добавить собственный CSS в WordPress
Если вы не хотите редактировать существующий код CSS, а просто хотите вместо этого добавить свой собственный стиль, настоятельно рекомендуется использовать один из следующих методов: настройщик WordPress или специальный плагин.
Например, код CSS, добавленный с помощью одного из этих методов, намного проще получить и использовать. Вам не нужно беспокоиться о том, чтобы поместить новый CSS в неправильное место или забыть, где вы его добавили, если вы захотите внести изменения позже.
Кроме того, CSS, добавленный с помощью одного из этих методов, не будет потерян при обновлении вашей темы (хотя он все равно может исчезнуть, если вы измените тему).
Подпишитесь на информационный бюллетень
Хотите узнать, как мы увеличили наш трафик более чем на 1000%?
Присоединяйтесь к 20 000+ других, которые получают нашу еженедельную рассылку с инсайдерскими советами WordPress!
Подпишитесь сейчас
Это означает, что вам не нужно использовать дочернюю тему, и если что-то сломается, все, что вам нужно сделать, это удалить только что добавленный CSS.
Обратите внимание, что вам все равно следует сохранять резервную копию своего веб-сайта, поскольку некоторые люди сообщают, что иногда теряют свой CSS во время крупных обновлений. Тем не менее, этот метод намного надежнее, чем прямое редактирование файлов темы.
Хотя вы можете просто добавить код в style.css и закончить это дело, если вы не хотите создавать дочернюю тему, вносите серьезные изменения в существующий CSS в своей теме и, возможно, в конечном итоге все ваши работы будут стерты, это Лучше всего либо использовать опцию Additional CSS в настройщике WordPress, либо установить плагин.
1. Редактирование CSS с помощью настройщика WordPress
Попробуйте это вместо редактора тем. Войдите в свой сервер WordPress и нажмите Внешний вид> Настроить , чтобы открыть экран настройки темы. Вы увидите предварительный просмотр своего веб-сайта в реальном времени с параметрами слева для настройки таких элементов, как цвета, меню или другие виджеты.
В самом низу этого меню вы должны найти поле Additional CSS .
Щелкните, чтобы открыть.Вы попадете на новый экран с полем для ввода кода и несколькими инструкциями. Экран Дополнительный CSS включает подсветку синтаксиса, как и Редактор тем, а также проверку, которая позволяет узнать, ошибочен ли ваш код.
Дополнительный CSS в WordPress
Любой код, который вы пишете, автоматически появляется в области предварительного просмотра справа, если он не содержит ошибки (хотя вы все равно можете опубликовать его).
Когда вы закончите работу, вы можете опубликовать свой код, запланировать, когда он вступит в силу, или сохранить его как черновик для дальнейшей работы.Вы даже можете получить ссылку для предварительного просмотра, чтобы поделиться ею с другими.
Как видите, дополнительная страница CSS во многих отношениях более мощная, чем редактор тем, и гораздо больше подходит для добавления кода, чем для работы с файлами ядра.
Код CSS, который вы здесь пишете, заменяет стиль вашей темы по умолчанию и не исчезает при обновлении темы. Если вы не видите его в режиме реального времени при предварительном просмотре, еще раз проверьте, используете ли вы правильные селекторы в своем коде CSS.
Как и в редакторе тем, CSS по умолчанию является глобальным, но вы можете написать код, ориентированный на определенные страницы.
Единственным недостатком является то, что при переключении темы все написанное будет удалено. Обязательно сделайте резервную копию своего CSS, прежде чем переходить к новой теме, иначе вы можете потерять много работы.
Если вам сложно использовать эту опцию или вам нужно решение, которое работает с разными темами и может более легко настраивать таргетинг на определенные страницы, вам следует попробовать плагин.
2. Добавление собственного CSS в WordPress с помощью плагинов
Есть несколько причин, по которым вы можете захотеть использовать плагин для добавления CSS в WordPress.Хотя эта функция аналогична дополнительному меню CSS, стили обычно сохраняются, даже если вы переключаете / обновляете темы.
Вам также может понравиться их пользовательский интерфейс или дополнительные функции, такие как автозаполнение. Некоторые плагины даже позволяют создавать CSS через раскрывающиеся меню, вместо того, чтобы писать его самостоятельно.
Простой пользовательский CSS
Simple Custom CSS — самый популярный плагин для редактирования CSS, благодаря простоте использования, минимальному интерфейсу и легкому внутреннему интерфейсу. Короче говоря, это очень маленький плагин для WordPress, обладающий большой мощностью.
Простой настраиваемый плагин CSS для WordPress
Установить очень просто, и вы не увидите никакого отрицательного влияния на производительность. Он работает с любой темой и включает подсветку синтаксиса и проверку ошибок.
Простой пользовательский CSS и JS
Простой настраиваемый плагин CSS и JS для WordPress
Simple Custom CSS и JS — хорошая альтернатива. Он также позволяет настроить таргетинг на верхний колонтитул, нижний колонтитул, интерфейс или даже серверную часть администратора.
SiteOrigin CSS
SiteOrigin CSS плагин для WordPress
SiteOrigin CSS — еще один вариант, который также включает традиционный редактор CSS.Вы можете переключаться между ним и визуальным редактором в любое время.
WP Добавить собственный CSS
WP Добавить собственный плагин CSS для WordPress
Если вы изо всех сил пытаетесь добавить CSS на определенные страницы, WP Add Custom CSS добавляет настраиваемое поле CSS на экран редактирования, а также имеет глобальный стиль.
CSS Герой
Вы также можете попробовать визуальный редактор CSS. Они берут на себя все сложное кодирование и превращают его в серию простых в использовании полей ввода и раскрывающихся меню, которые обрабатывают все программирование за вас.
CSS Hero
CSS Hero — это плагин для визуального редактирования премиум-класса с некоторыми очень мощными функциями (анимация, редактирование для конкретных устройств и неразрушающее редактирование, и многие другие).
Где изучать CSS
Готовы погрузиться в CSS для себя? Эти учебные пособия для начинающих познакомят вас с основами и научат вас синтаксису, который вам понадобится для написания собственного функционального кода CSS.
Изучение CSS
Это может быть сложно, но если вы не пытаетесь сделать что-то действительно продвинутое, CSS не так уж и сложен! Простые вещи, такие как изменение цвета фона или настройка стиля шрифта, довольно просты, и в Интернете есть множество примеров.
(Рекомендуемая литература: 50+ современных шрифтов для использования на вашем веб-сайте WordPress)
Большинство руководств по программированию, которые вы найдете в Интернете, также совершенно бесплатны. Есть много информации бесплатно / за небольшую плату.
Вот несколько примеров из лучших руководств по CSS для начинающих.
- W3Schools CSS Tutorial: Здесь можно найти огромное количество информации: подробные руководства, примеры и справочные материалы, с которыми вы можете поработать. Учебники W3Schools максимально просты и понятны, поэтому даже если вы новичок, это отличное место для начала.
- Codeacademy Изучение CSS: с помощью шести бесплатных практических уроков вы изучите основы CSS. Это не простой видеоурок, а интерактивный урок, который заставит вас работать с реальным кодом. С профессиональной версией вы также получаете викторины и проекты произвольной формы для работы.
- Изучите CSS за один час. Многие люди хотят выучить новый язык программирования, но у них просто нет времени на это. Но если вы можете выделить всего один час, вы можете изучить CSS с помощью этого бесплатного курса из 20 частей.Даже если вы к концу не станете мастером, вы должны хорошо разбираться в основах.
- Введение в базовый HTML и CSS для пользователей WordPress: Ищете что-то особенное для WordPress? Если вы всегда боролись с написанием HTML и CSS, этот курс идеально подходит для вас. Он платный, но включает в себя 52 лекции и пять часов видео, на которых можно учиться.
Узнайте, как использовать CSS для настройки и оптимизации вашего веб-сайта, от используемых цветов до промежутков между элементами ✨Нажмите, чтобы твитнуть
Сводка
Для пользователя WordPress переход на CSS поначалу может сбивать с толку.Но как только вы узнаете, как редактировать файлы темы и где добавлять стили, у вас больше не должно быть проблем.
Файлы тем
можно редактировать либо с вашего сервера, либо через FTP, чтобы изменить внешний вид вашего сайта, но этого обычно следует избегать, если вам не нужно редактировать существующий код.
Если вы просто хотите добавить свой собственный CSS, используйте страницу дополнительных CSS в разделе Внешний вид> Настроить или попробуйте плагин, если вам нужно что-то более мощное.
Изменения в вашей таблице стилей будут потеряны при обновлении темы, если вы не используете дочернюю тему.То же самое не относится к дополнительному CSS. Ваш код защищен от обновлений, но не забывайте: только плагин сохранит CSS при изменении темы.
Какой бы метод вы ни выбрали, вы всегда должны регулярно делать резервные копии своего веб-сайта, включая добавленную вами таблицу стилей и пользовательский код. Пришло время освежить в памяти основы CSS, используя предоставленные нами ресурсы.
Удачного стайлинга!
Рекомендуемая литература: Лучшие онлайн-курсы по веб-дизайну
Если вам понравилась эта статья, то вам понравится хостинговая платформа Kinsta WordPress.Ускорьте свой сайт и получите круглосуточную поддержку от нашей опытной команды WordPress. Наша инфраструктура на базе Google Cloud ориентирована на масштабируемость, производительность и безопасность. Позвольте нам показать вам разницу в Kinsta! Ознакомьтесь с нашими тарифами
Как найти файл CSS WordPress
17 января 2014 г.
Тема, купленная на торговой площадке, никогда не может на 100% соответствовать задумке вашего веб-сайта. Всегда есть мелочи, которые нужно изменить.
Трэвис задал мне вопрос о том, где можно редактировать файлы CSS темы WordPress, и я подумал, что просто поделюсь им с вами.
Если вы купили тему WordPress и хотели изменить внешний вид веб-сайта в некоторых областях, этот пост для вас.
От чего зависит внешний вид веб-сайта
Каскадные таблицы стилей (более известные как CSS или таблицы стилей) — это файл, который сообщает нашим браузерам, как должен выглядеть веб-сайт.
Когда вы посещаете веб-сайт, ваш браузер загружает этот файл css вместе с другими важными документами и показывает его вам.
В файлах CSS содержится код, который сообщает вашему браузеру, как отображать (другими словами, показывать) веб-страницу.Пример оператора CSS —
.
/ * Это говорит нашему браузеру, что он должен оставлять пробел в 18 пикселей после каждого абзаца * /
п {
нижнее поле: 18 пикселей;
}
В CSS есть намного больше, чем небольшой фрагмент кода выше, и это не относится к теме этой публикации. Если вы новичок в CSS, я бы посоветовал хотя бы проверить часть CSS в Code Academy, прежде чем пытаться изменить какие-либо файлы CSS в своей теме wordpress.
Где находится этот файл CSS
Найти этот файл CSS может быть немного сложно, и это зависит от того, решил ли автор темы поместить файлы CSS в другую папку (я лично это делаю).
Вы, вероятно, не уверены, находятся ли файлы CSS по умолчанию, поэтому попробуйте следующие методы.
СЕРЬЕЗНОЕ ПРИМЕЧАНИЕ: Независимо от того, какой метод вы использовали для редактирования файлов CSS, всегда сохраняйте резервную копию, прежде чем вносить какие-либо изменения! Если вы случайно взломаете свой сайт, это будет большой катастрофой! Вы, наверное, не хотели бы, чтобы это произошло 🙂
Метод 1
Перейдите в «Внешний вид»> «Редактор» и щелкните style.css.
Вы можете редактировать файлы прямо из этого окна и нажать «Сохранить», когда закончите.Не забудьте очистить кеши, если вы используете какие-либо CDN или плагины кеширования. (Не уверены? Проверьте свои плагины в WordPress и посмотрите, активировали ли вы плагин с кеш-словом.
Метод 2
Если вы видели очень мало строк кода, как на изображении ниже, вам не повезло. Автор темы решил разместить файл в другом месте.
Для этого метода вам потребуется доступ к службе хостинга вашего домена (например, Dreamhost, Hostgater и Bluehost).
Войдите в свою службу хостинга домена и выберите файловый менеджер через cPanel. Выберите последний вариант и выберите корень документа для вашего веб-сайта.
Перейдите в wp-content> themes> ВАШЕ ИМЯ ТЕМЫ и попробуйте найти папку, в которой находятся файлы css. Обычно они называются таблицами стилей CSS или стилями.
Затем вы можете загрузить его и отредактировать с помощью программы для редактирования текста на вашем компьютере.
После редактирования перейдите в тот же каталог, в котором вы нашли файлы CSS, и нажмите «Загрузить».
Конец
Это два метода поиска и редактирования файлов CSS вашей темы. Они определенно не кодируют передовой опыт, и такое редактирование часто вызывает неодобрение.
Но послушайте, вам не нужно беспокоиться о передовых методах, если вы не собираетесь разрабатывать темы.
Если вы хотите узнать об этих вещах, связанных с кодом, в ближайшие пару недель у меня появится кое-что особенное. Присоединяйтесь к моему списку рассылки ниже и получите информацию об этом из первых рук.
Если вам понравилась эта статья, расскажите о ней другу! Поделитесь этим в Твиттере. Если вы заметили опечатку, я буду признателен, если вы сможете исправить ее на GitHub. Спасибо!
Как добавить собственный CSS на свой сайт WordPress: изучено 3 метода
Есть несколько способов добавить собственный CSS на ваш сайт WordPress.
В этих WordPress выходных я объясню сильные и слабые стороны трех различных методов, чтобы вы могли решить, какой из них вам больше подходит, и позволить вам продолжить настройку своего сайта.
Поиск элементов дизайна, которые нужно настроить
После того, как вы изолировали часть темы, которую хотите изменить (например, заголовок сообщения), вам необходимо определить применяемые к ней свойства CSS, чтобы вы могли внести соответствующие изменения. К счастью, это не сложно.
CSS использует селекторы, чтобы определить, какие декларации дизайна применить к определенной части вашего веб-сайта. Обычно это делается путем указания «класса» для конкретного элемента.Однако CSS также можно использовать для определения макета для всего элемента (например, тега «
») или элемента на основе его идентификатора.К счастью, популярные браузеры позволяют вам увидеть, какие селекторы и какие объявления применяются к элементу на странице, всего за несколько щелчков мышью. Например, в Google Chrome вы просто выделяете определенную часть документа, а затем щелкаете правой кнопкой мыши, как показано ниже.
Выберите Inspect Element из раскрывающегося списка, и вы увидите информацию о конструкции в окне справа.Вы можете увидеть пример ниже.
Элементы, выделенные красным, показывают вам конкретные дескрипторы дизайна, которые применяются к выделенному вами тексту. Например, элемент «font-size» сообщает вам, что шрифт, отображаемый в выделенном тексте, имеет размер 13 пикселей («13 пикселей»). Дескрипторы заключены в фигурные скобки селекторами. Имя соответствующего файла таблицы стилей отображается справа от селекторов.
Как только вы вооружитесь всей этой информацией, изменить дизайн станет легко.Например, если вы хотите изменить шрифт с 13 пикселей на 14 пикселей, вы просто выполните поиск в файле таблицы стилей, отображаемом справа от этих селекторов («# plugin-info .block-content»), и измените «13 пикселей» на «14 пикселей».
Вы можете сделать то же самое в Firefox, просто выделите определенную часть страницы, щелкните ее правой кнопкой мыши и затем выберите Проверить элемент в появившемся меню.
Как WordPress и CSS работают вместе
Очевидно, что нет двух одинаковых тем WordPress.Итак, имейте в виду, что ваша тема WordPress может не на 100% соответствовать тому, что вы читаете в следующих разделах.
Тем не менее, более чем вероятно, что CSS, используемый для представления вашего сайта WordPress, находится в файле с именем style.css . Это общее название таблицы стилей для любого типа веб-сайта, а не только для веб-сайта WordPress.
Если вы посмотрите этот файл, то обнаружите, что он содержит подробные стилистические «инструкции» для вашей темы. Подробное описание синтаксиса CSS выходит за рамки данного руководства, но если вы хотите вникнуть в него глубже, мы рекомендуем вам начать с курса W3Schools здесь.
Разобравшись с этим, давайте перейдем к трем вышеупомянутым методам редактирования CSS!
Метод № 1. Редактирование файла темы
style.css
Есть два способа получить доступ к файлу style.css вашей темы.
Один из способов — сделать это через административную панель WordPress. На левой панели навигации выделите параметр Внешний вид . Во всплывающем меню должно отображаться еще несколько параметров. Внизу этого меню вы увидите опцию Editor .Щелкните по нему.
Перейдя на страницу Editor , вы увидите список файлов на вертикальной полосе в правой части страницы. Прокрутите список файлов вниз. Вы увидите style.css внизу страницы.
Если вы нажмете на эту опцию Stylesheet , файл style.css будет загружен и отображен в середине экрана. Вы можете использовать этот экран для редактирования файла, чтобы внести изменения в дизайн вашего сайта, но есть способ сделать это лучше (подробнее об этом чуть позже).
Другой способ найти таблицу стилей — просмотреть операционную систему вашего хостинг-провайдера и найти файл в папке темы. Точное местоположение зависит от вашего хостинг-провайдера. В примере, показанном ниже, имя веб-сайта (в нашем случае thecare ) — это папка в папке public_html . Поскольку для этого сайта установлен WordPress, вы можете увидеть папку wp-content в разделе thecare . Под папкой wp-content находится еще одна папка с названием themes , в которую устанавливаются все темы WordPress.Поскольку этот сайт использует тему под названием Newsletter , правильный style.css находится в родительской папке newsletter .
В этот момент вы могли бы спросить себя: «Почему существует папка — родительский информационный бюллетень и дочерний информационный бюллетень — ?» Это очень хороший вопрос, и на него скоро будет дан ответ.
Метод № 2: Использование дочерней темы для редактирования CSS
Если вы загрузили отличную тему и хотите внести в нее некоторые изменения, вам следует сделать это с дочерней темой, а не редактировать основную (или родительскую) тему.
Почему? Потому что разработчики часто могут обновлять темы для исправления ошибок и изменений дизайна. Если вы внесете изменения в основную тему, а затем установите обновление, ваша тяжелая работа будет перезаписана.
С другой стороны, если вы используете дочернюю тему для изменения CSS, будет обновлена только родительская тема. Все ваши изменения в дочерней теме останутся.
Некоторые профессиональные разработчики тем осознают важность дочерних тем и включают одну для вас. Затем вы можете просто обновить эту дочернюю тему столько, сколько захотите, не беспокоясь о том, что обновления родительской темы перезаписывают ваши изменения.
Если у вас есть тема, в которой нет дочерней темы, ее легко добавить. Вы можете найти инструкции для этого в нашем подробном руководстве по созданию дочерней темы.
Метод № 3: Использование подключаемого модуля для редактирования CSS
Пожалуй, самый удобный способ редактирования CSS вашего сайта — через плагин.
Одно из основных преимуществ использования плагина аналогично использованию дочерней темы. Если вы обновите тему, ваши изменения не будут отменены, потому что они хранятся отдельно от файлов темы.Другое преимущество, конечно же, в том, что вам не придется беспокоиться о создании дочерней темы.
Вот несколько отличных плагинов для изменения CSS:
Простой настраиваемый CSS — один из самых популярных вариантов. Он был установлен более 100 000 раз и получил пятизвездочную оценку.
WP Add Custom CSS — это плагин, который позволяет изменять представление всего веб-сайта или только отдельных сообщений. Это отличный вариант, если вы ищете гибкость дизайна от публикации к публикации.
Плагин был загружен более 10 000 раз и в настоящее время имеет рейтинг 4,3 звезды.
Если вам нужен плагин для CSS, который предлагает предварительный просмотр ваших изменений в реальном времени, подумайте о Custom CSS для Theme Junkie. Это решение добавляет настраиваемый менеджер CSS в консоль администрирования, куда вы можете добавлять свои собственные стили. Он также предлагает альтернативу дочерней теме.
Easy Code Placement — это гораздо больше, чем просто решение CSS.Он также позволяет добавлять другие типы кода, включая PHP, JavaScript, HTML или просто текст.
Вы можете обнаружить, что для правильного изменения макета вашей темы вам потребуется изменить не только CSS. В таком случае поместите Easy Code Placement в начало вашего короткого списка, чтобы вы могли внести всесторонние изменения, необходимые для получения правильной презентации.
И последнее, но не менее важное, это конфигуратор дочерних тем. Это решение, которое позволяет вам настроить макет вашего веб-сайта с помощью дочерней темы.
Плагин также оптимизирует вашу стратегию дизайна. Если вы какое-то время работали с CSS, то знаете, что иногда общая структура ваших таблиц стилей может стать громоздкой. Конфигуратор дочерних тем помогает вам правильно распределять таблицы стилей для обеспечения оптимальной производительности.
Конфигуратор дочерних тем
был загружен более 40 000 раз, и ему присвоен рейтинг 4,8 звезды.
Суть в следующем: какие бы функции вы ни пытались создать, они, вероятно, уже созданы кем-то другим, кто готов предоставить их вам бесплатно или за разумную плату.Возможно, лучше сэкономить время и просто использовать решение, которое уже было разработано для вас.
Заключение
Если вы хорошо разбираетесь в коде, создайте дочернюю тему и копайтесь в style.css. Но если вы предпочитаете оставить их в покое, существует множество доступных плагинов, и, скорее всего, они достаточно хорошо удовлетворят ваши потребности.
Отличная идея — начать разбираться в CSS, если вы хотите развивать свой сайт и дальше, и существует множество курсов и руководств, которые могут вам помочь.
Бесплатное видео
Почему 100 НЕ является идеальным показателем скорости загрузки страницы в Google (* 5 минут просмотра)
Узнайте, как использовать Google PageSpeed Insights, чтобы ставить реалистичные цели, повышать скорость сайта и почему стремиться к 100 баллам — НЕПРАВИЛЬНАЯ цель.
Теги:
Руководство по настройке дизайна вашего сайта
Вы когда-нибудь хотели изменить некоторые аспекты внешнего вида своего веб-сайта, но просто не знали, как это сделать? Решение есть — вы можете добавить собственный CSS (каскадную таблицу стилей) на свой сайт WordPress!
В этой статье мы обсудим все, что вам нужно знать о CSS и о том, как его использовать для изменения внешнего вида вашего веб-сайта.
Что такое CSS?
CSS — это язык таблиц стилей, который изменяет внешний вид базовой структуры вашего веб-сайта, написанной на HTML. CSS позволяет назначать тегам HTML различные свойства, такие как цвет, размер, макет и отображение.
Вы также можете настроить внешний вид определенных тем WordPress по умолчанию. Итак, если вы хотите создать желаемый дизайн и внешний вид, вы можете добавить собственный CSS на свой сайт WordPress.
Добавление пользовательского CSS WordPress через плагины
Один из самых простых способов реализовать собственный CSS в WordPress — это использование плагинов.Есть из чего выбирать, поэтому давайте рассмотрим самые популярные и посмотрим, как они работают. Все инструменты, которые мы используем в этом руководстве, можно легко установить с помощью Plugins -> Add New section на панели инструментов WordPress.
Простой пользовательский CSS
Один из самых популярных плагинов пользовательского CSS для WordPress в сообществе, Simple Custom CSS позволяет реализовать собственные стили или переопределить CSS текущей темы. Установленные здесь значения сохранятся, даже если вы измените тему.
После активации инструмент будет доступен в разделе Внешний вид -> Пользовательский CSS . Пользоваться им очень просто — просто введите любые значения, которые вам нужны, в редакторе и сохраните изменения!
Если вы хотите увидеть изменения, все, что вам нужно сделать, это обновить свой веб-сайт.
WP Добавить собственный CSS
WP Add Custom CSS — еще один отличный инструмент, который вы можете использовать для реализации пользовательского CSS WordPress.
После установки он появится в отдельном разделе вашей панели инструментов.С его помощью вы можете применить CSS ко всему сайту.
Удобно то, что у вас также есть редактор CSS под каждым постом. Таким образом, при необходимости вы можете применить разные правила CSS для отдельных сообщений . Как и в предыдущем плагине, все изменения можно просмотреть, обновив страницу в браузере.
SiteOrigin CSS
SiteOrigin CSS — это удобный и интерактивный инструмент для добавления пользовательского CSS WordPress.
После установки инструмент будет доступен в разделе Внешний вид -> Пользовательский CSS .Этот плагин имеет удобный интерфейс редактора, где вы можете выбрать любую часть вашего сайта и отредактировать ее с помощью встроенных инструментов или путем добавления кода вручную.
Простой пользовательский CSS и JS
Simple Custom CSS ad JS имеет несколько дополнительных функций по сравнению с предыдущими записями. Одна из них — возможность добавлять собственные записи JavaScript.
После установки плагина он появится в отдельном разделе под вашей панелью управления. Там вы сможете создавать собственные записи CSS аналогично тому, как вы создаете записи WordPress.Чтобы проверить это, мы изменили теги h2 , чтобы они стали немного более красочными.
Добавление пользовательского CSS WordPress с помощью настройщика тем
Независимо от того, какую тему WordPress вы используете, вы можете настроить CSS с помощью встроенного настройщика тем. Перейдите в раздел Appearance -> Customize вашей панели инструментов, прокрутите страницу вниз и нажмите Additional CSS .
Откроется встроенный инструмент, который позволит вам добавить любой код CSS. Он прост в использовании и позволяет просматривать как мобильные, так и планшетные версии вашего сайта.Поздравляю! Теперь вы знаете, как применять собственный CSS в WordPress без каких-либо плагинов.
Добавление собственного CSS WordPress с помощью дочерней темы
Другой вариант — создать дочернюю тему WordPress — она позволяет изменять родительскую тему без риска поломки вашего действующего сайта.
Если вы еще не уверены, что хотите сделать, вы можете сначала протестировать свой собственный CSS на дочерней теме. Таким образом, вы сможете экспериментировать, сколько душе угодно.
Устранение распространенных проблем с настраиваемым CSS в WordPress
Иногда вы можете столкнуться с небольшими сбоями при добавлении пользовательского CSS в WordPress.Давайте быстро рассмотрим некоторые из наиболее распространенных проблем и посмотрим, как их решить.
Изменения не появляются
Пользовательский CSS-код WordPress может не отображаться из-за кеширования.
Если вы используете какой-либо подключаемый модуль кэширования, есть большая вероятность, что некоторые ресурсы кэшируются и доставляются из временного хранилища для увеличения скорости и снижения использования ресурсов. Просто очистите кеш WordPress или отключите на время такие плагины.
Если у вас также включено кеширование браузера, то его очистки может быть достаточно, чтобы увидеть новые внесенные вами изменения.
И последнее, но не менее важное: некоторые провайдеры веб-хостинга, такие как Hostinger, предлагают встроенное кеширование на стороне сервера, чтобы помочь вашему сайту WordPress работать лучше. Вы можете отключить его в Cache Manager на hPanel.
Синтаксис CSS с ошибкой
Орфографические ошибки довольно легко не заметить, и они часто могут помешать правильному отображению настраиваемого CSS-кода WordPress. Если вы не видите никаких изменений и уверены, что это не кеш, использование валидатора CSS может быть действительно полезным.Просто вставьте свой CSS и запустите инструмент. Он покажет любые ошибки или опечатки и даже укажет, в какой строке они есть.
Слишком много вариантов
Иногда можно немного переборщить с настраиваемым CSS WordPress. Добавление двух или более ссылок на селектор может вызвать конфликт.
Это обычное явление при вызове новой таблицы стилей поверх существующей. Если вы пытаетесь изменить заголовок h3, но ничего не происходит, дважды проверьте таблицу стилей на наличие существующих записей.
Вне идей
Хотя это не настоящая проблема, во многих случаях самая сложная часть — это выяснить, какой собственный CSS вы хотите применить в WordPress. Это может вызвать огромную головную боль, так как вы должны учитывать множество элементов.
Вот несколько ресурсов, которые помогут вам генерировать свежие идеи:
Заключение
CSS позволяет стилизовать контент вашего сайта. Итак, добавление пользовательского CSS в WordPress — отличный способ сделать ваш сайт уникальным и привлекательным.
Это можно сделать тремя способами:
- Использование плагинов
- Использование настройщика темы
- Настройка дочерней темы
Теперь вы готовы настроить дизайн своего веб-сайта. Удачи!
Domantas возглавляет отделы контента и SEO, предлагая свежие идеи и нестандартные подходы. Обладая обширными знаниями в области SEO и маркетинга, он стремится распространить информацию о Hostinger во всех уголках мира.В свободное время Домантас любит оттачивать свои навыки веб-разработки и путешествовать по экзотическим местам.
Как изменить или добавить CSS в вашу тему WordPress • Silo Creativo
$ 89
Все наши премиальные темы в наборе тем
Посмотреть темы
Это повторяющийся вопрос, особенно на форумах WordPress. Предположим, вы хотите изменить определенный элемент своего дизайна: размер h2, диапазон цветов или просто тон социальных кнопок… Эти изменения в большинстве случаев требуют немного CSS.Но не паникуйте, есть несколько способов сделать это безопасно и практически не касаясь кода .
Другой сценарий — получить отрывок из CSS, который вы хотите добавить в свою тему. По умолчанию WordPress не предоставляет никаких редакторов или полей для ввода этих правил стиля. ( Обновление : WordPress добавил простую функцию добавления пользовательского CSS, доступного для всех сайтов). Поэтому мы должны изменить шаблон или использовать альтернативные (рекомендуемые) методы, которые нам нравятся:
Темы WordPress отвечают за CSS
Если конкретный плагин не имеет собственного стиля и не содержит саму таблицу стилей CSS, правда в том, что весь дизайн загрузки принадлежит исключительно нашему шаблону WordPress.Итак, почему бы не редактировать шаблон напрямую? Ошибка!
Шаблоны
WordPress — это, как и плагины, элементы, которые обновляются, обновляются, улучшаются и перезаписывают предыдущие версии. И не раздумывая, изменения, внесенные в этот шаблон, не сохраняются. Это означает, что если вы обновите свою тему до новой версии, вы потеряете все внесенные вами изменения (в файлах CSS или php, конечно, содержание не имеет ничего общего…)
После обсуждения предыстории мы перечисляем наиболее рекомендуемые методы и их сложность для добавления или изменения любого элемента дизайна с помощью CSS.
0. Пользовательский CSS через WordPress Настроить
Обновление : начиная с версии WordPress 4.7 мы можем добавлять собственный код CSS без внешних плагинов. Эта функция была добавлена в ядро и может использоваться через Внешний вид> Настройка> Дополнительные CSS. Он доступен для всех установок WordPress.org, независимо от того, какие темы или плагины вы используете. Очень быстрый и простой способ добавить свой собственный CSS.
С другой стороны, как видите, редактор очень прост и не имеет параметров редакции или выделенного текста (очень полезно для отображения селекторов, таких как имена классов или идентификаторы).Так что, если вы хотите добавить короткие правила CSS, это ваш лучший вариант. Однако, если речь идет о старых изданиях или более крупных проектах, продолжайте читать, потому что следующие варианты могут лучше подойти для ваших дополнений CSS.
1. Пользовательский модуль CSS JetPack
Несомненно, самый простой и достаточно эффективный метод — это загрузить плагин Jetpack (если у вас есть учетная запись на WordPress.com, вы также можете использовать бесплатный плагин Slim JetPack) и активировать модуль Custom CSS.
Шаги простые:
1.Установите плагин.
2. Активируйте плагин. (Вам может быть предложено подключить вашу учетную запись WordPress.com)
3. Перейдите в JetPack (чуть выше Post в меню администратора WordPress) и найдите настраиваемый модуль CSS.
4. После активации у вас появится новая вкладка в меню Внешний вид> Пользовательский CSS. Вуаля! Вот полный редактор CSS вашей темы у вас под рукой.
Примечание. Если вы выберете Slim JetPack, вам не нужно выполнять активацию на шагах 2 и 3. Вам просто нужно перейти в «Настройки»> «Slim JetPack».В остальном все так же.
Готово! Вы активировали свой редактор, чтобы вставить или написать правила CSS, которые изменят ваш дизайн или тему. Фантастическая особенность этого метода заключается в том, что JetPack включает стили CSS, которые определяют этот редактор сразу после загрузки, которую тема имеет по умолчанию (style.css) , поэтому вы можете плавно перезаписать, не опасаясь потери изменений в будущих обновлениях.
2. Использование плагина Simple Custom CSS
Так же просто, как активировать модуль Jetpack.После установки плагина Custom CSS и его активации (мы расскажем вам, как правильно установить плагин в WordPress в этой статье), вам нужно перейти в Внешний вид> Пользовательский CSS, где вы можете добавить свои собственные стили CSS. Не забудьте сохранить изменения перед тем, как покинуть страницу!
Очень просто 🙂
3. Создание дочерней темы
Более сложный, но не менее эффективный метод — создать дочернюю тему, изменяющую стили родительской темы. По сути, мы будем выполнять ту же задачу, что и предыдущий метод: загружать настраиваемую таблицу стилей сразу после родительской темы таблицы стилей.Перезаписать и добавить новые правила, не затрагивая исходную тему. Фантастика!
Однако для некоторых пользователей этот метод может быть несколько утомительным. Вам понадобится редактор CSS (блокнот не рекомендуется; возвышенный текст лучше), доступ к FTP или дочернему пакету тем и его установка через Внешний вид> Темы.
Что бы вы ни выбрали, вот дополнительная информация о том, как создать дочернюю тему в кодексе WordPress.
Это мой любимый метод , хотя понятно, что имеет место только тогда, когда изменения имеют определенную сущность.Для небольшой модификации метод с помощью JetPack CSS Editor стал проще и быстрее.
Если у вас нет проблем с созданием дочерних тем, это всегда должно быть вашим первым выбором. Основная причина в том, что он масштабируемый, поэтому, если вам нужно включить некоторые дополнительные функции или шаблон, вы можете сделать это через fuctions.php своей дочерней темы (некоторые могут быть очень интересными, особенно те, которые относятся к адаптивным или тем, которые относятся к включить веб-шрифт в свой WordPress.)
С Jetpack вы не можете изменять или добавлять новые функции.Это просто таблицы стилей. Вы включаете только еще один вызов одного файла CSS (style.css вашей дочерней темы), в то время как для первого варианта вы загружаете плагин плюс вызов сервера через новый CSS. Но оба — очень хорошие варианты.
4. Непосредственно отредактируйте style.css своей темы
Редактирование CSS в WordPress. Прямое редактирование CSS вашей темы (style.css) — не самое лучшее решение. Независимо от того, используете ли вы тему премиум-класса или бесплатную, вы потеряете эти изменения при обновлении темы.
Кроме того, если вы не знакомы с CSS, будьте осторожны с пунктуацией и правилами. Открытие ключа или отсутствие точки с запятой может сделать ваш документ стиля нечитаемым для некоторых браузеров.
Если вы все еще уверены, что это ваш метод, давайте посмотрим, как вы можете сделать это прямо через панель администрирования WordPress. Шаги:
1. Перейдите в Внешний вид> Редактор
2. Найдите файл style.css (убедитесь, что выбрана текущая тема)
3. Тщательно отредактируйте
В дополнение к недостаткам, упомянутым выше, этот метод не даст вам доступа ко всем CSS в некоторых темах.Вот наглядный пример: если автор решил разделить стили на несколько CSS, некоторые из них могут быть недоступны из этого редактора, находясь в библиотеке, ресурсах или папке CSS.
Другие методы и альтернативы
Существуют и другие методы и альтернативы: в основном плагины, которые позволяют вам определять таблицу стилей или темы, которые содержат поле для изменений, которые вы хотите внести. Но обычно их меньшинство.
Важно решить, какой метод вы выберете, сделать копии тех файлов, которые вы можете потерять, и использовать альтернативный вариант, который лучше всего соответствует вашим навыкам.Делайте то, что вы можете контролировать.
Удачи! (Если у вас есть какие-либо вопросы, не стесняйтесь спрашивать меня.) Какой ваш любимый способ редактирования CSS в WordPress?
Как редактировать исходный код WordPress (HTML, CSS, PHP, JavaScript)
Плагины
WordPress помогают расширить функциональность вашего сайта и выполнять расширенную цифровую работу с минимальными усилиями. Однако знание того, как редактировать HTML в WordPress , а также другого исходного кода вашего сайта, может пригодиться в самых разных ситуациях.
Допустим, ваш сайт атакован вредоносным вредоносным ПО, или вы обновили плагин, и это привело к сбою вашего сайта. Возможно, вы просто хотите внести некоторые дополнительные изменения. В любом из этих случаев следующим шагом может быть код WordPress . К счастью, есть много способов сделать это.
В этом посте мы расскажем о различных способах доступа и редактирования исходного кода вашего веб-сайта WordPress , а также о том, как изменить тему WordPress без программирования.Давайте начнем!
Плагины для редактирования кода WordPress
Наша команда в WP Buffs помогает владельцам веб-сайтов, партнерам-агентствам и партнерам-фрилансерам решать проблемы, включая редактирование и поддержку исходного кода вашего сайта . Если вам нужно, чтобы мы управляли одним веб-сайтом или поддерживали 1000 клиентских сайтов, мы готовы помочь.
Почему важно знать, как редактировать исходный код WordPress 👈🏻
По умолчанию WordPress — это чрезвычайно интуитивно понятная и удобная платформа .Есть много способов настроить и изменить свой сайт, даже не касаясь строчки кода, благодаря темам и плагинам.
Технически вам не нужен доступ к каким-либо файлам или коду вашего веб-сайта, чтобы иметь полностью функционирующий и хорошо спроектированный сайт. Панель управления, плагины и темы WordPress — все это позволяет настраивать и персонализировать ваш сайт быстро и легко
Однако бывают случаи, когда вам может понадобиться реализовать больший контроль и выполнить расширенные настройки .Возможно, изменение, которое вы хотите внести, не подходит для темы или плагинов, которые вы используете
.
Другая возможность состоит в том, что на вашем сайте происходит сбой или другая ошибка, из-за которой не позволяет вам получить доступ к панели администратора . Вам, вероятно, потребуется отредактировать исходный код WordPress, чтобы устранить проблему
В таких случаях полезно знать, как редактировать HTML в WordPress, а также как безопасно и эффективно получать доступ и изменять другой исходный код, включая PHP, CSS и JavaScript.Проще говоря, изучение некоторых базовых кодов WordPress позволит вам получить больший контроль и гибкость при проектировании, управлении и обслуживании вашего сайта WordPress.
Как редактировать HTML в WordPress 💻
Перво-наперво: давайте обсудим, как получить доступ к вашему HTML-коду в WordPress . Обратите внимание, что внесение изменений в код вашего сайта всегда сопряжено с определенным риском. Редактирование HTML-кода относительно безопасно по сравнению с другими методами, которые мы обсудим в этом посте, но все же разумно действовать с осторожностью и сначала создать резервную копию.
Как редактировать HTML в классическом редакторе WordPress
Если вы хотите добавить или отредактировать HTML-код страницы WordPress или публикации, вам фактически не нужен доступ к исходному коду вашего веб-сайта. В классическом редакторе все, что вам нужно сделать, это перейти из визуального редактора в текстовый редактор на задней панели. Это покажет, как HTML работает за кулисами:
Из текстового редактора вы можете получить доступ, изменить и обновить HTML на любой странице или опубликовать всего несколькими щелчками мыши.Вы можете просмотреть свои изменения в любое время, вернувшись в Визуальный редактор. Когда вы закончите, не забудьте сохранить сообщение или страницу.
Как редактировать HTML в редакторе блоков WordPress
Если вы используете редактор блоков (Gutenberg), для переключения с визуального редактора на текстовый редактор (или редактор кода) потребуется еще несколько шагов. Однако у вас также есть несколько вариантов редактирования HTML-кода, в том числе внесение изменений на всю страницу или публикацию или для отдельных блоков.
Чтобы отредактировать HTML-код всей страницы или сообщения, щелкните три вертикальные точки, расположенные в правом верхнем углу редактора, затем выберите Редактор кода:
Откроется редактор HTML WordPress. Чтобы переключиться с визуального редактора на текстовый редактор в определенном блоке , щелкните три вертикальные точки на панели инструментов блока, затем выберите «Редактировать как HTML:
».
Другой способ добавить HTML на страницу или сообщение — использовать пользовательский блок HTML :
Вы можете написать свой HTML-код прямо в блоке, затем нажмите «Предварительный просмотр», чтобы увидеть, как он будет выглядеть во внешнем интерфейсе. :
Когда вы закончите, сохраните изменения в своем сообщении или на странице.
Как редактировать HTML для вашей домашней страницы в WordPress
А как насчет редактирования HTML на вашей домашней странице ? В некоторых темах домашняя страница действует как отдельная страница. Поэтому процесс редактирования его HTML такой же, как описано выше. Просто выберите соответствующую страницу из списка на вашей панели:
Вы также можете щелкнуть на странице редактирования в верхней панели администратора со своей домашней страницы, чтобы получить доступ к классическому редактору или редактору блоков:
Если ни один из этих вариантов не работает для редактирования HTML на вашей домашней странице, вы можете быть , используя конструктор страниц или тему со встроенным редактором домашней страницы .В этом случае вы можете обратиться к документации по соответствующему инструменту.
Как редактировать HTML в виджете WordPress
Наконец, вы можете добавить HTML в боковую панель или нижний колонтитул WordPress . Многие темы WordPress также используют раздел виджетов для управления контентом на главной странице вашего сайта.
Вы можете настроить домашнюю страницу, верхний и нижний колонтитулы с помощью виджета Custom HTML :
Просто перейдите к Внешний вид> Виджеты , добавьте Custom HTML виджет на боковую панель или нижний колонтитул и отредактируйте его по своему усмотрению.Нажмите синюю кнопку «Сохранить», чтобы опубликовать его на своем сайте.
Начало работы с редактированием исходного кода вашей темы WordPress 🏁
Ваша тема WordPress состоит из файлов шаблонов. Иногда мы также называем их , ваш исходный код WordPress . Они включают необработанные файлы тем (PHP), а также каскадные таблицы стилей (CSS) и JavaScript (JS) вашего веб-сайта WordPress.
Если вы хотите отредактировать эти компоненты (или шаблон по умолчанию в WordPress), существует два основных способа доступа к файлам темы :
- Использование редактора тем WordPress , который позволяет напрямую редактировать файлы исходного кода WordPress на панели инструментов с помощью любого веб-браузера.
- Через протокол передачи файлов (FTP) , где вы редактируете файлы исходного кода WordPress локально, а затем загружаете свои изменения в среду хостинга WordPress.
Вскоре мы расскажем, как использовать каждый из этих методов, начиная с редактора тем WordPress. Однако есть два шага, которые мы рекомендуем выполнить, прежде чем приступить к работе с .
Во-первых, создайте резервную копию вашего сайта. Это гарантирует, что у вас есть обновленная версия вашего контента и настройки , к которым вы можете откатиться на случай, если что-то случится во время редактирования исходного кода.
Второй — создать дочернюю тему. При изменении темы WordPress лучше всего внести изменения в дочернюю тему . В противном случае при следующем обновлении темы ваши изменения будут перезаписаны.
После того, как вы выполнили эти шаги, готов приступить к работе. . Давайте сначала посмотрим, как редактировать тему WordPress прямо из панели управления.
Как редактировать исходный код WordPress через редактор тем 🎯
Если вы не знакомы, WordPress поставляется со встроенным редактором , который позволяет вам изменять файлы вашей темы онлайн.В редакторе тем вы можете получить доступ к PHP, CSS, JavaScript и всем другим файлам, связанным с разработкой, которые составляют вашу тему. Вот как это сделать.
Доступ к редактору тем
Если ваш сайт WordPress все еще запущен и у вас есть доступ к серверной части, вы можете найти исходный код вашего сайта в разделе Внешний вид> Редактор тем :
В этой области редактирования вы можете внести любые изменения, которые вы сочтете подходящими , в дизайн и структуру вашей темы:
Если у вас установлено несколько тем или вы используете комбинацию тем для взрослых и детей, вы можете переключаться между темами в правом верхнем углу редактора:
Для выберите определенные файлы темы для редактирования , вы можете выбрать из списка справа от редактора:
Точные файлы, доступные здесь, будут зависеть от вашей темы, но, как минимум, вы должны увидеть:
- стиль.css : Это ваша таблица стилей, которая содержит множество функций, связанных с дизайном, например шрифты и цветовую схему вашей темы.
- functions.php : Файл functions.php вашей темы включает PHP-код, который изменяет стандартные функции WordPress.
После того, как вы закончите редактировать исходный код WordPress в редакторе тем, убедитесь, что сохранили изменения. . Для этого просто нажмите кнопку «Обновить файл» внизу экрана.
WordPress не даст вам сохранить изменения, если заметит ошибки в коде . Это часть того, что делает использование редактора тем немного безопаснее, чем редактирование кода WordPress через FTP, о чем мы поговорим позже.
Что делать, если ваш редактор тем отсутствует
Если редактор тем не отображается как в разделе «Внешний вид», ваша тема может работать немного иначе.Это не обязательно означает, что вы не можете напрямую редактировать файлы темы. Вам просто нужно знать, где искать.
Проверьте, использует ли ваш сайт редактор кода WordPress для конкретной темы , расположенный где-то еще на вашей панели инструментов. Кроме того, использование редактора тем для вашего сайта могло быть отключено. Например, некоторые плагины безопасности скрывают эту опцию , чтобы «укрепить» WordPress и затруднить взломщикам взлом вашего сайта.
Также может быть других причин, по которым ваш редактор тем WordPress отсутствует или недоступен. Мы рекомендуем обратиться к другим участникам сообщества WordPress, особенно тем, у кого есть доступ к темам или плагинам, которые вы используете, чтобы узнать, есть ли что-то уникальное в вашей среде, скрывающее эту функцию.
Как редактировать файлы JavaScript в WordPress ✍🏻
Прежде чем вы сможете использовать JavaScript где-нибудь на своем сайте WordPress, вам понадобится файл, содержащий ваш код JavaScript.Большинство тем, если не все, поставляются с парой файлов JavaScript, которые могут быть размещены в другом месте и «вызываться» кодом в ваших файлах header.php, footer.php или других шаблонах.
Если вы пишете собственный JavaScript , у вас будет доступ к своей работе в WordPress, где вы можете увидеть список своих файлов. Вы можете открыть любой из них и внести желаемые изменения прямо с помощью редактора тем . Все файлы JavaScript заканчиваются на.js расширение:
Если вы добавляете JavaScript с помощью стороннего плагина , то вы просто вызываете внешний файл, размещенный в другом месте. Чтобы использовать написанный JavaScript, вам нужно будет вызывать файл везде, где вы хотите его использовать.
Вы можете вызвать JavaScript , поместив следующий сценарий (который направляет вашу страницу в расположение соответствующего файла) в любом месте, где вы хотите, чтобы код загружался:
Лучшее место для вызова вашего файла JavaScript зависит от , как вы хотите использовать сценарий . Например, вы можете реализовать его несколько раз на своем сайте или только один раз.
Как добавить JavaScript в верхний или нижний колонтитул WordPress
Если вы хотите внести изменений в верхний или нижний колонтитулы на вашем веб-сайте, в том числе с использованием JavaScript в нескольких местах, вы можете сделать это в верхнем колонтитуле.php и footer.php вашей темы.
Многие сторонние инструменты требуют добавления кода в заголовок вашего сайта . Короче говоря, это означает, что вы будете работать с файлом header.php (который должен быть указан справа от редактора тем), а именно с областью, заключенной между тегами:
Когда вы добавляете JavaScript в файл заголовка , обязательно поместите код где-нибудь между этими двумя тегами (после или под открывающим тегом и над или перед закрывающим тегом).
Тег может быть трудно найти. Если у вас возникли проблемы с его поиском, нажмите клавиши Command (или Control ) + F после щелчка в редакторе. Затем вы можете найти его, просто набрав «голова» в строке поиска .
Вот пример того, как мы добавили код Диспетчера тегов Google и код подтверждения Ahrefs непосредственно над тегом:
Вы можете редактировать нижний колонтитул таким же образом — просто выберите нижний колонтитул .php файл вместо header.php :
После сохранения изменений последним шагом будет повторная проверка , чтобы убедиться, что ваш код был добавлен . Для этого перейдите на свою домашнюю страницу и просмотрите исходный код.
Опять же, вы можете использовать ярлык Command + F , чтобы найти тег, а затем проверить прямо над ним, чтобы убедиться, что ваш код был успешно добавлен.Возможно, вам придется очистить кеш браузера, чтобы все отображалось правильно.
Как добавить скрипты верхнего и нижнего колонтитула с помощью подключаемого модуля
Ручное добавление скриптов верхнего и нижнего колонтитула — не единственный вариант. Есть подключаемых модулей для помощи с этими задачами , и некоторые темы и фреймворки имеют встроенную такую функциональность.
Например, если вы используете Genesis Framework , добавление скриптов верхнего и нижнего колонтитулов просто выполняется с помощью встроенного редактора.Однако вы можете использовать ту же функциональность для любой темы через плагин .
Этот метод выгоден, потому что WordPress обычно перезаписывает ваш файл header.php во время обновлений. Используя плагин (или некоторые внешние функции, имитирующие такие плагины), вы гарантируете себе меньше работы . Вы можете обновить WordPress Core, не беспокоясь о необходимости вручную повторно добавлять код.
Он предоставляет бесплатный способ легко добавить простой код в верхний или нижний колонтитул вашего сайта WordPress .Пытаетесь ли вы добавить скрипты Google Analytics, код AdSense или любой сторонний код интеграции, этот плагин может сделать это всего за несколько кликов .
После установки и активации плагина вы можете получить доступ к редактору JavaScript, перейдя в Настройки > Вставить верхние и нижние колонтитулы :
Там будут текстовые поля, где вы можете добавить скрипты в заголовок, тело и нижний колонтитул вашего веб-сайта .Когда вы закончите, нажмите кнопку Сохранить .
Как добавить JavaScript в сообщения и страницы WordPress
Вместо того, чтобы включать его в файлы header.php или footer.php для использования на всем вашем веб-сайте, вы также можете добавить JavaScript в сообщения или страницы WordPress по отдельности . Для этого вам потребуется:
- Добавьте свой JavaScript в один из файлов темы WordPress (или создайте новый)
- Вызовите файл из своего сообщения или страницы
Итак, как вы вызываете свой файл JavaScript из сообщения? Один из способов — использовать функцию Custom Fields в качестве виджета WordPress JavaScript.В редакторе блоков щелкните три вертикальные точки, чтобы открыть раскрывающееся меню, затем выберите Options :
В нижней части меню Options под панелями Advanced , установите флажок рядом с полями Custom :
Под вашим редактором сообщений теперь вы увидите пространство , где вы можете добавить настраиваемые поля :
Укажите Имя для вашего поля.Затем введите фрагмент кода JavaScript как Value . Когда вы закончите, нажмите Добавить настраиваемое поле с по , сохраните изменения .
Теперь вы можете использовать свой собственный JavaScript в любом месте на странице. Для этого вам нужно использовать тег шаблона, который настраивает используемую вами тему. Вы также можете использовать плагин, который управляет настраиваемыми полями от вашего имени.
Как редактировать CSS вашего сайта WordPress 🖋️
Процесс редактирования CSS вашего сайта WordPress очень похож на процесс изменения вашего JavaScript.Для этого можно использовать три метода:
- Отредактируйте файлы CSS в редакторе тем
- Используйте встроенный редактор CSS вашей темы в настройщике WordPress
- Добавьте CSS с помощью плагина
Какой метод лучше всего подходит для вас, будет зависеть от объема редактирования, которое вы планируете делать, а также от того, как часто вы собираетесь вносить изменения.
Как редактировать CSS в WordPress с помощью редактора тем
Все файлы CSS, используемые для темы вашего сайта WordPress, можно найти в редакторе тем ( Внешний вид> Редактор темы ).В списке справа найдите файлы , заканчивающиеся расширением .css :
Вы можете внести желаемые изменения в редакторе. Когда вы закончите, нажмите Обновить файл с до , сохраните изменения .
Как редактировать CSS в WordPress с помощью настройщика WordPress
Помимо редактора тем WordPress, вы также можете изменить свой CSS с помощью настройщика WordPress .Чтобы получить к нему доступ, перейдите в Внешний вид> Настроить на панели инструментов WordPress:
Далее, нажмите Additional CSS внизу левой панели навигации:
Откроется редактор кода , где вы можете добавить собственный CSS:
Как видите, этот редактор довольно маленький и в основном предназначен для незначительных модификаций , а не для обширного переписывания стиля вашего сайта.Скорее всего, будет проще вносить масштабные изменения в Редакторе тем или с помощью плагина.
Когда вы закончите добавлять собственный CSS в настройщик, нажмите кнопку Опубликовать , чтобы сохранить изменения.
Как редактировать CSS CSS с помощью плагина
Если вы хотите, чтобы настраивал внешний вид вашего сайта без непосредственного редактирования файлов темы , вы также можете использовать плагин.Этот метод особенно полезен, если у вас ограниченные знания CSS. Это также идеально, если вы планируете регулярно вносить изменения в стиль своего сайта, поскольку это упрощает организацию ваших дополнений.
Например, CSS Hero — это интуитивно понятный инструмент, который позволяет редактировать все аспекты дизайна вашего сайта и стиля без изменения файлов темы. :
Это живой редактор тем WordPress , который позволяет сохранять снимки ваших изменений, включая различные версии, и отправлять их вживую.Он создает дополнительную таблицу стилей CSS , которая заменяет исходную таблицу стилей , поставляемую с вашей темой. Таким образом, вам не нужно беспокоиться о том, чтобы нанести какой-либо непоправимый ущерб, напрямую редактируя файлы CSS.
Функции CSS Hero включают:
- Готовые, редактируемых фрагментов стилей
- Интеграция и поддержка Google Font и TypeKit
- Внешний визуальный редактор для предварительного просмотра ваших изменений по мере их внесения
После загрузки плагина вы можете загрузить и установить его на свой сайт WordPress так же, как и любой другой.Вам просто нужно будет ввести лицензионный ключ , который вам будет предоставлен при покупке тарифного плана.
Как редактировать исходный код WordPress через FTP 📥
Как вы могли вспомнить ранее в этом посте, использование редактора тем WordPress — это всего лишь один из способов доступа и изменения исходного кода вашего веб-сайта. Другой вариант — использовать FTP-клиент , например FileZilla. Эти типы инструментов позволяют вам подключаться к серверу вашего веб-сайта для доступа к хранящимся на нем файлам.
Этот подход включает в себя внесение изменений в ваш файл локально , а затем повторную загрузку измененных файлов в среду хостинга WordPress. Это важно, если вы не можете получить доступ к серверной части своего сайта или если вы выполняете какие-либо работы с PSD> WordPress.
Вот как начать работу с FTP в четыре этапа.
Шаг 1. Найдите или создайте учетные данные FTP
Во-первых, для подключения к серверу через FTP вам потребуются учетные данные FTP , включая имя пользователя, пароль и имя хоста.Вы сможете найти их в своей учетной записи хостинга.
Если нет, вы можете создать свое имя пользователя и пароль в cPanel в разделе Файлы> Учетные записи FTP :
Щелкните этот значок, затем выберите Добавить учетную запись FTP :
На странице Добавить учетную запись FTP введите следующее:
- Добавьте уникальный идентификатор для вашего имени пользователя FTP .Ваше имя пользователя FTP будет [email protected], поэтому скопируйте / вставьте его в безопасное место.
- Создайте надежный пароль . Мы рекомендуем использовать генератор паролей для создания пароля с рейтингом надежности 100/100. Это будет ваш пароль FTP, поэтому скопируйте и вставьте его в безопасное место.
- Для расширения Directory , всегда используйте public_html .
- Ваша Квота всегда должна быть Без ограничений .
Нажмите Create FTP Account , и все готово! Если у вас проблемы с созданием информации для входа на FTP , вы можете воспользоваться Google «FTP [ваш хостинг-провайдер]».
Как правило, здесь есть по крайней мере несколько полезных статей и руководств. Например, SiteGround предоставляет огромную поддержку в этой области:
Если вы не можете найти справочную документацию, вы всегда можете обратиться напрямую к своему хостинг-провайдеру за помощью.
Шаг 2. Загрузите FTP-клиент, например FileZilla
После того, как у вас есть учетные данные для входа в FTP, следующим шагом будет загрузка FTP-клиента, такого как FileZilla:
Это бесплатное FTP-решение , которое позволяет передавать файлы между вашим компьютером и сервером вашего сайта и обратно. Однако есть и другие клиенты FTP, поэтому не стесняйтесь использовать тот, который лучше всего соответствует вашим потребностям.
Шаг 3. Войдите в среду своего веб-хостинга через FileZilla
После завершения загрузки FileZilla откройте его и введите свое имя хоста FTP, имя пользователя и пароль . Вы должны были собрать всю эту информацию на шаге 1:
Если ваша cPanel содержит IP-адрес , вы также можете использовать его в качестве хоста. После ввода этих учетных данных нажмите кнопку Quickconnect :
Он должен соединить вас с вашим сервером в течение нескольких секунд.
После входа в систему вы получаете доступ к исходным файлам WordPress и можете вносить изменения в HTML, CSS, PHP и JS по своему усмотрению. Просто щелкните любой файл правой кнопкой мыши и выберите Просмотр / редактирование :
Когда вы внесли изменения (опять же, будьте осторожны, чтобы не оставить белый экран на вашем веб-сайте), вы можете сохранить файл . Затем FileZilla автоматически повторно загрузит его и заменит старую версию.
Как отредактировать тему WordPress без программирования 🚫
WordPress — это платформа с открытым исходным кодом, что делает ее чрезвычайно гибкой и мощной. Однако мы понимаем, что для некоторых кодирование WordPress может быть сложной задачей. К счастью, если вам неудобно манипулировать исходным кодом вашего сайта , вы все равно можете внести значительные изменения.
Несмотря на то, что вы не сможете изменить столько, сколько сможете, с помощью пользовательского кода, вы все равно можете многое сделать с помощью настройщика WordPress .Опять же, это находится в Внешний вид> Настроить :
В этой области вы увидите пошаговый метод настройки выбранной вами темы WordPress. Вы можете начать с элементов высокого уровня в разделе «Идентификация сайта», который позволяет вам изменить название, слоган и значок вашего веб-сайта , а затем изменить цвета, меню, домашнюю страницу и т. Д. Вашего сайта.
Однако, если вы хотите сделать больше, чем то, что предоставляет Customizer, вы также можете использовать дополнительных плагинов .Давайте взглянем на самые полезные из них.
Плагины для редактирования вашей темы WordPress без программирования
Как мы упоминали ранее, существует множества плагинов и инструментов , которые могут помочь вам настроить внешний вид вашего сайта без какого-либо кодирования. Мы уже выделили пару из них в разделах по редактированию JavaScript и CSS выше.
Если вам нужен редактор визуальных стилей, мощный бесплатный вариант . — это плагин YellowPencil:
.
Этот плагин редактора стилей CSS для WordPress позволяет быстро и легко настроить дизайн вашего сайта.Вы можете вносить изменения в любую страницу или тему без программирования. Кроме того, вы можете предварительно просмотреть изменения в режиме реального времени . Доступны бесплатные и премиальные версии.
Этот плагин представляет собой живой редактор CSS для WordPress , который поддерживает адаптивные сетки и функциональность редактирования «укажи и щелкни», что позволяет выполнять точную и простую настройку. Это надежный вариант , если вы используете построитель страниц , такой как Elementor или Beaver Builder, поскольку он имеет встроенную интеграцию.
Наконец, если вы хотите изменить больше, чем стиль и внешний вид вашего сайта, вы можете использовать Ultimate Tweaker:
Этот плагин премиум-класса включает инструмент минификатора HTML , интерфейс перетаскивания, настраиваемые значки и многое другое. Чтобы получить лучшее представление о функциях и функциях, мы рекомендуем изучить демонстрацию плагина.
Плагины
WordPress позволяют выполнять множество задач на вашем сайте.Однако в некоторых случаях может потребоваться получить доступ и отредактировать исходный код вашего сайта.
Как мы обсуждали в этом посте, редактор тем WordPress и FTP — лучший способ получить доступ к исходному коду вашего веб-сайта WordPress, а вносит изменения в его HTML, CSS, PHP и JavaScript . Наряду с мощностью, казалось бы, бесконечным выбором плагинов, это даст вам возможность полностью настроить все на вашем сайте.
Однако, если мысль о редактировании исходного кода WordPress пугает или редактор тем недостаточно мощный для ваших нужд, мы здесь, чтобы помочь .В WP Buffs мы предлагаем планы обслуживания и круглосуточную поддержку, чтобы помочь вам со всеми вашими потребностями в обслуживании и настройке!
Хотите оставить отзыв или присоединиться к беседе? Добавляйте свои комментарии 🐦 в Twitter.