Как редактировать 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. В открывшейся странице по умолчанию будет открыто окно редактирования стилей вашей темы (шаблона). После того как вы добавите свои новые стили или измените уже существующие, не забудьте сохранить изменения нажав кнопку «Обновить файл». Как видите, с административной панели всего за несколько кликов можно…
Обзор
Проголосуйте за урок
Оценка
Итог : Уважаемые читатели! Не поленитесь проголосовать и оставить комментарий. Таким образом я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!
CSS ‘>’ selector; what is it? [duplicate]
I’ve seen the «greater than» ( > ) used in CSS code a few times, but I can’t work out what it does. What does it do?
77.3k 107 107 gold badges 162 162 silver badges 262 262 bronze badges
asked Dec 16, 2010 at 10:39
99.9k 50 50 gold badges 170 170 silver badges 208 208 bronze badges
Aug 16 at 6:27
7 Answers 7
> selects immediate children
For example, if you have nested divs like such:
and you declare a css rule in your stylesheet like such:
.outer > div
your rules will apply only to those divs that have a class of «middle» since those divs are direct descendants (immediate children) of elements with class «outer» (unless, of course, you declare other, more specific rules overriding these rules). See fiddle.
div < border: 1px solid black; padding: 10px; >.outer > div
div.outer - This is the parent. div.middle - This is an immediate child of "outer". This will receive the orange border. div.inner - This is an immediate child of "middle". This will not receive the orange border. div.middle - This is an immediate child of "outer". This will receive the orange border. div.inner - This is an immediate child of "middle". This will not receive the orange border. Without Words
. . Side note
If you, instead, had a space between selectors instead of > , your rules would apply to both of the nested divs. The space is much more commonly used and defines a «descendant selector», which means it looks for any matching element down the tree rather than just immediate children as the > does.
NOTE: The > selector is not supported by IE6. It does work in all other current browsers though, including IE7 and IE8.
If you’re looking into less-well-used CSS selectors, you may also want to look at + , ~ , and [attr] selectors, all of which can be very useful.
This page has a full list of all available selectors, along with details of their support in various browsers (its mainly IE that has problems), and good examples of their usage.
Добавляем CSS стили в WordPress админку (2 метода + советы)
Иногда при создании клиентского сайта приходится вносить какие-то изменения в бэкенд (то есть админку), например убрать лишние пункты меню или установить специальные плагины для панели WordPress дабы подправить ее функциональность и т.п. Это делается в первую очередь для удобства и комфорта пользователя, чтобы ему проще и нагляднее было работать в системе. Сегодняшний пост из этой же сферы – будем добавлять свои стили в wp админку, причем покажу как это сделать двумя способами.
Наиболее простой пример использования этого приема – когда у вас в одном из установленных плагинов есть десятки разных полей, но для пользователя реально нужны только некоторые из них. Например, я как-то ставил модуль по недвижимости, где среди всевозможных параметров объекта по типу площади квартиры, адреса, этажей, балконов и т.д., заказчику нужно было 2-3 значения. Я просто выделил соответствующие заголовки красным цветом с подчеркиванием дабы они бросались в глаза в первую очередь и человек знал, что редактировать нужно только их. Разумеется, пояснения по этому поводу я также добавил в документацию по сайту.
Но вернемся к нашему вопросу – тут есть 2 варианта реализации.
Добавляем отдельные стили в админ панель
Допустим, вам нужно внедрить какие-то незначительные изменения, которые вполне реально описать несколькими CSS-правилами. В таком случае в файл functions.php вставляем строки:
add_action('admin_head', 'my_custom_styles'); function my_custom_styles() { echo ' div#sidebar-left h2, div#footer-bar-left-sidebar h2, div#wc-left-sidebar h2 '; }
add_action(‘admin_head’, ‘my_custom_styles’); function my_custom_styles() < echo 'div#sidebar-left h2, div#footer-bar-left-sidebar h2, div#wc-left-sidebar h2 '; >
В данном примере заголовки некоторых полей виджетов будут красными с подчеркиванием. Внутри тегов style можете добавлять любые другие стили. Хук admin_head вызывает функцию только в бэкенде.
Кстати, этим же способом можно попытаться скрыть кнопку Настройка экрана в админ панели WordPress хотя, думаю, правильнее реализовать все через фильтр.
Добавление файла стилей CSS в админку WordPress
Когда требуется сделать значительные изменения внешнего облика бэкенда, то лучше вынести все оформление в отдельный CSS-файл, например – myadmin.css. Загружаете его в директорию со своим установленным шаблоном, после чего в файле функций functions.php вставляете код:
function my_admin_style() { wp_enqueue_style('admin-styles', get_stylesheet_directory_uri().'/myadmin.css'); } add_action('admin_enqueue_scripts', 'my_admin_style');
Причем тут нужно использовать именно функцию get_template_directory_uri() для определения пути к вашей теме, потому как другая похожая get_stylesheet_directory_uri() не учитывает возможность подключения дочерней темы.
Дополнения по теме
1. Код, приведенный в предыдущем фрагменте работает 100%, только что его тестировал. Но мне вспоминается алгоритм подключения jQuery в WordPress и других скриптов, где тот или иной JS-скрипт сначала регистрируется через wp_register_style(), а затем вызывалась функция wp_enqueue_style(). Однако в описании последней функции сказано, что если предварительно стиль не зарегистрирован, то это будет автоматически сделано (то есть, по идее, достаточно только ее одной).
2. Если вам нужно изменить оформление админки для плагинов и вы решили загрузить соответствующий CSS-файл в директорию определенного модуля, то подключать в бэкенде его следует так:
function change_plugin_styles() { wp_register_style( 'newcss-plugin', plugins_url( 'НАЗВАНИЕ_ПЛАГИНА/new_plugin.css' ) ); wp_enqueue_style( 'newcss-plugin' ); } add_action('admin_enqueue_scripts', 'change_plugin_styles');
Во всех найденных в интернете сниппетах применяется конструкция с двумя совместными функциями регистрирования и подключения стилей, поэтому, думаю, с плагинами есть смысл поступать именно так. ВАЖНО! Перед использованием подставьте в данном коде название модуля, куда вы предварительно загрузили файл new_plugin.css (или другой).
3. Также в одном обсуждении увидел совет, что если ваш CSS-код зависит от другого файла стилей, то следует юзать функцию wp_add_inline_style() с тем же хуком admin_enqueue_scripts. Она позволяет добавить дополнительные правила, когда основные CSS-стили уже загружены. Вот пример из codex.wordpress.org:
function my_styles_method() { wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/css/custom_script.css' ); $color = get_theme_mod( 'my-custom-color' ); $custom_css = " .mycolor < background: ; >"; wp_add_inline_style( 'custom-style', $custom_css ); } add_action( 'admin_enqueue_scripts', 'my_styles_method' );
4. Кстати, если захотите изменить вид страницы логина, то вместо admin_enqueue_scripts используйте:
add_action('login_head', 'my_admin_style');
Либо может сработать (не тестил):
add_action('login_enqueue_scripts', 'my_admin_style');
P.S. Пару слов по поводу моего примера применения данной задачи, озвученного в начале статьи. Многие серьезные веб-разработчики могут сказать, что подсвечивать поля вместо их удаления не совсем корректно, но тут есть определенные нюансы. Во-первых, как правило, клиент предпочитает экономить бюджет, поэтому, как мне кажется, ему предпочтительнее выбирать «подсвеченные красным» параметры нежели доплачивать за максимальную модификацию плагина. Во-вторых, в ходе правки модуля вы рискуете добавить лишних ошибок или возникнет сложность с его дальнейшим обновлением. В-третьих, иногда клиенту может понадобится вернуть то, что вы удалили и т.п.
Поэтому если вы не занимаетесь тем или иным проектом на постоянной основе, не берете оплату за полную кастомизацию плагина, то оптимальным вариантом является именно подобный хак с добавлением стилей в админку WordPress – от этого выиграют все.
Понравился пост? Подпишись на обновления блога по 
RSS, 
Email или 
twitter!
Оцените статью:
(голосов — 14, средний балл: 4,21 из 7)
Категории: Хаки и секреты;
Теги: css, админка wp, оформление админки, решение задач wordpress, сниппеты, функции wordpress.
Похожие статьи:
- Скрываем custom fields для не админов, функция remove_meta_box()
- Как убрать пункты меню в WordPress админке
- Упрощаем админку wordpress
- Список последних сообщений выбранной категории
- Как скрыть кнопку «Настройка экрана» в админке WordPress
Редактор WordPress
С помощью редактора WordPress вы можете создавать страницы и записи с медиаданными, а также управлять их структурой. Из приведённых ниже руководств вы узнаете, как пользоваться редактором.
Обучающее видео
Товары
Товары
- Хостинг WordPress
- Доменные имена
- Платформа для создания веб-сайтов
- Создайте блог
- Professional Email
- Корпоративные решения
- Услуги по разработке веб-сайтов
- WordPress для команд
Возможности
Возможности
Ресурсы
Ресурсы
- Поддержка WordPress.com
- Форумы WordPress
- Новости WordPress
- Советы по созданию сайтов
- Генератор фирменных имён
- Инструмент создания логотипов
- Ежедневные вебинары
- Знакомство с WordPress
- Разработчикам
Компания
Компания
- Детали
- Партнеры
- Пресса
- Условия использования
- Конфиденциальность
- Заявление о защите конфиденциальности для пользователей из Калифорнии