Домой / WordPress / Полезное / CSS в WordPress — как правильно?
CSS в WordPress http://obg.kz

CSS в WordPress — как правильно?

В этой небольшой статье расскажу как правильно добавить свои стили CSS в WordPress.

Нередко возникает ситуация, когда после установки нового шаблона на блог приходится либо что-то менять в в таблице стилей, либо что-то добавлять. Короче говоря - подстраивать CSS в WordPress под свой вкус и нужды. С этим сталкивался практически каждый блогер. Причём, на такую необходимость абсолютно не влияет купили вы шаблон за $100 или скачали где-то бесплатно. Она, необходимость, просто возникает и всё тут.

Многие поступают самым простым, но совершенно неправильным способом - начинают редактировать стили CSS в WordPress прямо в файле style.css шаблона. Почему такой способ корректировки CSS в WordPress я считаю неправильным? Во-первых, при обновлении шаблона или его смене надо начинать всё заново, а во-вторых, как правило бывает затруднительно вспомнить где конкретно и что менял.

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

Как правильно добавить свои стили CSS в WordPress

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

Свои стили CSS в WordPress используя возможности шаблона

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

Огни большого города http://obg.kzЭтот вариант работает у меня. Я уже несколько раз устанавливал обновления шаблона, а это, если кто не знает, подразумевает следующий порядок действий - активация другого шаблона, удаление данного, загрузка обновлённого и его активация. Стили CSS, прописанные в этом блоке никуда не исчезают, они хранятся в базе и продолжают действовать.

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

Свои стили CSS в WordPress используя плагин

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

 

 

Custom CSS - Whole Site and Per Post - «Добавление пользовательских таблиц стилей для вашего WordPress сайта - Стиль всего сайта или конкретные сообщения / Страницы. Легко добавлять Styling и внешние таблицы стилей». 

Custom CSS for WordPress - «Простой и легкий плагин для добавления пользовательских CSS для вашего сайта WordPress. Этот плагин поможет вам переопределить тему или плагин CSS». 

Не уверен, но возможно, что при использовании этого варианта в некоторые идентификаторы css придётся добавлять параметр «!important».

Также считаю этот вариант очень хорошим решением.

Свои стили CSS в WordPress путём импорта

Если по каким либо причинам первые два варианта задания своих стилей CSS в WordPress не подходят, то можно поступить следующим образом. Создать отдельный файл стилей, например «my.css», положить его либо в корень сайта, либо в папку wp-content/themes - короче куда вам нравится и в нём прописывать всё, что нужно. А чтобы подключить этот файл к активной теме, необходимо в самом начале style.css шаблона прописать всего лишь одну строчку:

@import url('my.css');

 Конечно, в URL надо указать реальный путь к вашему файлу css в зависимости от того, куда вы его положите. Желательно не размещать его в папке конкретной темы - может удалиться вместе с шаблоном...

Вот пример из одного моего рабочего проекта, показано начало файла demo.css, в первой строке которого в него импортируется reset.css:

@import url('reset.css');

/* General Demo Style */
body{
	background:#e4ebe9 url(../images/pattern.png) repeat top left;
	color:#000;
	font-family: 'PT Sans Narrow', Arial, sans-serif;
	font-size:12px;
}
a{
	color:#000;
	text-decoration:none;
}
.clr{
	clear:both;
}
h1, h5{
	margin:15px;
	font-size:44px;
	color:#000;
	font-family: 'Rochester', sans-serif;
	text-shadow:1px 1px 1px #fff;
	text-align:center;
}

 Этот вариант тоже неплох, только надо не забывать при изменении шаблона или его обновлении вставлять команду импорта в style.css.

Заключение

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

aleksandr_karataev1_cr

Смотрите также

Огни большого города http://obg.kz

Как по клику на кнопке открыть страницу в новой вкладке

Как по ссылке открыть страницу в новой вкладке знают все. Добавляем в ссылку атрибут target="_blank" …

Огни большого города http://obg.kz Автосерфинг

Как привлечь посетителей на сайт бесплатно

Извечный вопрос всех владельцев сайтов - как привлечь посетителей на сайт? В этой статье расскажу …

29 комментариев

  1. Александр, спасибо за статью!

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

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

    В этом случае, наверное, правильнее всего оставлять комментарии к каждой правке. Но, понятное дело, мало кто это делает.

    В темах, не предоставляющих возможность изменения стилей через админку, правлю CSS по старинке, т.к. не всегда то, что нужно, прячется в style.css — смотрю в код через F12, отыскиваю нужный блок, затем нужный файл, исправляю. Темы практически никогда не обновляю. А вот при установке новой, действительно, приходится ковыряться заново. Но это нормально, т.к. редко к новой теме оформление из старой темы подходит — обычно, в новой теме и шрифт другой, и его размер, и цвета темы отличаются.

    • Я раньше вообще только style.css и правил… Но эти файлы бывают большими по размеру, больше тысячи строк… Это хорошо, когда можно в конец файла дописать своё с комментариями. Потом, при необходимости этот блок скопировал и перенёс куда надо.  Но ведь иногда в одном месте файла что-то подправишь, в другом, третьем и так далее. А потом внимательно пролистывать все строки css в поисках своих правок — то ещё удовольствие. Даже при наличии своих комментов там. Теперь уже не лезу в style.css и ему подобные вообще. Да, в панели разработчика браузера посмотрю нужный селектор и просто переопределю его в своём отдельном файле.

      Sahifa уже несколько раз обновлял, я так думаю, что обновления — это очередная оптимизация шаблона, чего-ж от этого отказываться?

  2. Спасибо за статью! Это действительно "больной" вопрос для каждого блогера! Я тоже правлю сразу файл стилей темы, а затем не обновляю тему, так как придётся всё делать заново. А теперь я буду знать, как всё сделать правильно, и главное — просто! Мне больше всего понравился последний вариант с подключением своих стилей к любой теме.

  3. Саша, привет! Как всегда, все гениальное просто. Спасибо за урок 

  4. Александр, спасибо за статью. Знакомая проблема. Я уже после неоднократного обращения к Вам с этими проблемами, в компьютере у себя папочку создала со шпаргалками, где и что нужно поменять при обновлении темы. Правда при обновлении Вордпресс тоже иногда сбои появляются, которые я так и не поняла где и как исправить (так и осталась проблема с загрузкой изображений через библиотеку медиафайлов, загружаю сейчас только с помощью ссылок). Интересно, указанные Вами плагины, при обновлении Вордпресс, помогут, чтобы ничего не сбилось? 

    • Валентина, я тут вспомнил, что подобные проблемы иногда могут возникнуть из-за неправильно прописанных прав на папки. На некоторых хостингах приходится выставлять полный доступ — это 777, на некоторые папки, чтобы обновления и загрузка изображений работали нормально. А ещё, помню в wp-config прописывал дополнительные настройки FTP, как раз для нормальных обновлений. Потом ушёл на другой хостинг и там этого не потребовалось уже.

      Интересно, указанные Вами плагины, при обновлении Вордпресс, помогут, чтобы ничего не сбилось?

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

      • Про 777 не совсем поняла, это код такой или 777 раз?

        • Ну вот, чтобы было понятней, скриншоты, сделанные при назначении прав через FTP-клиент, в данном случае FileZilla (картинки увеличиваются по клику!):

           

           

           

           

           

           

           

           

          • Нашла у себя в файловом менеджере, только немного в другом виде.

            И что нужно, во всех квадратиках проставить галочки? Там, правда, у меня будет 4 семёрки. И ещё нужно выбрать к чему применить, там 4 варианта.

        • Валентина, да, это оно. Только сами лучше не выставляйте права. Это безопасность сайта. И если точно не знаешь, что и как, то лучше не делать. Тут ещё от хостинга зависит. Лучше с ними проконсультироваться. И потом надо точно увидеть какая ошибка получается при загрузки тех же медиафайлов и  при обновлении — это можно по логам определить. Может как раз прав на папку не хватает, а может и что другое. Вот так огульно НЕЛЬЗЯ выставлять права 777 на папку и файлы. Сначала надо точно увидеть ошибку. А то я Вам посоветовал на свою голову…

  5. Михаил

    Создать отдельный файл стилей, например «my.css»

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

    • Да уж давай поскорее выбирайся со своих огородов, а то что-то совсем пропал…

      • Михаил

         Смеюсь, кто бы мог подумать!? Ещё ровно год назад я себя считал только садоводом и виноградарем, а огород был уделом мамы. А в этом году решил посадить помидоры, так что, я теперь ещё и огородник, как ты правильно и подметил.

  6. Александр, спасибо за напоминание о  давно забытой науке!

    Настолько забытой, что сочетание из трёх букв воспринимается почти как матерное слово.

    Совсем что-то я в земле закопался — в холода нужно будет хорошенько пошерстить на Вашем ресурсе …

  7. Как говорят поляки — хибо так 🙂

  8. Спасибо за инструкцию! Очень интересный подход!

    • Буду рад, если пригодится.

      Пытался у вас на блоге оставить комментарий, но два раза появлялась страница с текстом "Спама нет!". На третьей попытке никакого сообщения, ни моего коммента, ни фразы типа "Ваш комментарий на модерации" — ничего. Так и не понял, отправил коммент или нет… А сколько комментаторов уйдут после первой неудачной попытки?

      P.S. Комментарий всё-же появился после обновления страницы…

  9. Александр, очень полезная статья! Только, как верно заметили, лето, жара и без необходимости стили в вордпрессе менять не хочется. Взяла эту информацию на заметку, если что прямо бегу к тебе на бложик.

    • Спасибо, Софья!

      лето, жара и без необходимости стили в вордпрессе менять не хочется

      При такой жаре, а у нас под 40 сейчас, вообще ничего не хочется… 

      • У нас такое похолодание было Саша, красота: днем + 29, ночью + 16. Потом пролились дожди 4 дня подряд ночами. А сейчас опять жара: + 33. В общем крепимся и в огород не хожу почти: вечером заливаю все = на пару дней. Трава прет, глаза б на нее не смотрели… Живем дальше, радуемся.

  10. Саша, огромное Спасибо за статью. Как всегда, от тебя очень простые и в то же время полезные подсказки для нас. Раньше, в других шаблонах до этого, который сейчас стоит, я делала, как ты написал здесь: добавляла в стили все, что мне нужно было и на внешнем диске у меня до сих пор папка "Блог шаблон php правки"  И уже внутри все подпапки: css и другие.

    Я копировала полностью файл php перед изменением, сохраняла его в блокноте или нотпаде и обязательно делала его копию — 1 копия + название кода и там, где меняла что — то, я ставила свои пометки, например собачку @ вставленный код@ и делала скрин того, что и где я вставила — выделала код. И так в каждой подпапке. А перед тем, как вставить код в какой либо файл, я скопировала полностью все файлы шаблона php У меня был тестовый блог с тем же шаблоном, что и в настоящем блоге и я на нем все эксперименты проводила.

    Если упал или исчез тестовый — не страшно — можно откат сделать. А пропадал тестовый — было дело. ты же сам знаешь, что в php если потерять один символ — недокопировать или не там вставить шаблон или свалится или изменённый не покажет изменения. По поводу плагинов я знала, но плагины сам знаешь, все таки тормозят блог. Поэтому старалась кодами. И когда приходил день обновления, многие коды слетали.

    У меня выход на запасной аэродром. Но вот еще одну вещь заметила, было и так: обновился ВПресс, вставляю те же коды, а они не работают. Не знаю, с чем это связано, я не ас в php, хотя и изучаю потихоньку. Совсем недавно мне подправили блог капитально и основательно и даже вирусок нашли. У меня не открывалось многое в админке.

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

    • Надежда, приветствую тебя!

      но плагины сам знаешь, все таки тормозят блог. Поэтому старалась кодами

      Надя, тогда тебе прямой путь сюда. Статью писал почти два года назад, но и сейчас готов подтвердить каждое слово.

      … и теперь красота … я сейчас никуда не лезу, все работает, стоит ли создавать грабли…

      Ну и правильно. Есть же золотой принцип — "Работает — не трогай!".

      Я в своё время тоже напрямую правил style.css и другие файлы. Но это всё по-неопытности, хотя и считал, что это круто. Сейчас стараюсь никуда не лезть, а если что-то надо подправить, то ищу способ делать это так, чтобы не было зависимости от шаблона или даже движка, чтобы можно было смело обновляться, не задумываясь, что там слетит… Я вот шаблон свой обновляю периодически — обновления выходят. На всё про всё 2 минуты. А если бы правил файлы напрямую — промучился бы день и не факт, что всё вспомнил бы где и чего надо поменять… Но это уже пройденный этап.

      Одну статью напишу, как время нужно лишнее) и кое чем поделюсь.

      Счастливый ты человек! Время лишнее у тебя бывает… Шучу. Жду статью…

  11. Доброго дня Вам, Александр, и Вашим читателям!

    С интересом читаю Ваш блог, но комментировать зачастую не решаюсь… чувствую себя круглой дурой:) для меня все эти стили, скрипты, коды — ну просто темень непролазная! Не знаю, что делать, с чего начинать, что изучать: html? Php?css?cs50, чтобы понимать все то, о чем Вы говлрите с читателями? 

    Свой простенький сайтик — визитку смогла сделать лишь потому, что вордпресс дает возможность не ковыряться в коде, а писать обычным текстом. Seo, кэш и прочие премудрости вплоть до метрики вывела плагинами. Все это обновляю регулярно и не лезу в дебри, но, наверно, надо получать знания… не знаю, с чего начать, не хочется быть "белой вороной".

    • Елена, вот напрасно Вы так…

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

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

      наверно, надо получать знания… не знаю, с чего начать, не хочется быть "белой вороной"

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

      Однако на мой взгляд, какие-то моменты знать всё-же желательно, хотя бы поверхностно. Например, для чего Вам php или JavaScript? Вы собираетесь писать какие-то программы или корректировать чужие? Будет желание — изучите, а так — нет необходимости. HTML и CSS — достаточно иметь хотя бы общее представление. Чуть глубже, если Вы захотите самостоятельно зелёненькую буковку сделать красненькой.

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

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

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