Подключаем внешний файл стилей CSS

Здравствуйте, сегодня поговорим как подключить к сайту еще один файл стилей CSS.

Скачать исходники для статьи можно ниже

Для начала давайте рассмотрим как же создать свой собственный файл стилей CSS?
Достаточно просто!
Можно воспользоваться обычным «Блокнотом» («Пуск»-«Все программы»-«Стандартные»-«Блокнот») или редактором кода, такими как Notepad, Dreamweaver.
В данном примере буду пользоваться обычным Блокнотом.
Допустим напишем простенький CSS код для нашего будущего файла стилей.

подключаем свой файл стилей CSS

Теперь сохраним его, при сохранении выбираем в строке «Тип файла» — «Все файлы», в строке «Кодировка» — UTF-8, а в строке «Имя файла» — moicss.css.

Создаем свой собственный файл стилей

Все файл стилей создан.

Теперь можно его закачать на сайт через пункт «Медиафайлы» админпанели, но тогда мы не сможем его редактировать через панель управления.
Поэтому советую воспользоваться FTP-загрузчиком, например FileZilla, и перекинуть созданный нами в данной статье файл стилей moicss.css в папку активной темы сайта, например, если активная тема моего тестового сайта называется «Portocal», то файл moicss.css я закачиваю по следующему пути /wp-content/themes/Portocal.

И сейчас, если открыть «Редактор» (Панель управления -«Внешний вид» — «Редактор»), то справа в списке шаблонов я увижу свой еще один файл стилей: moicss.css

подключаем внешний файл стилей к блоку

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

Далее разберемся как подключить наш новый файл стилей непосредственно к сайту?

Для начала нам нужно открыть файл header.php, для этого входим в панель управления сайтом, в левом меню выбираем пункт «Внешний вид» и его подпункт «Редактор», справа в списке шаблонов ищем файл header.php, в его коде ищем строчки:

 

...
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
...

Вот после данной строчки и добавим свой файл стилей, например так:

...
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="stylesheet" type="text/css" href="http://mnogoblogru.hostenko.com/wp-content/themes/Portocal/moicss.css" />
...

То есть мы указали нашей активной теме сайта использовать также помимо основного файла стилей (style.css) еще и созданный нами файл moicss.css, который находится по следующему url: «http://mnogoblogru.hostenko.com/wp-content/themes/Portocal/moicss.css».

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

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

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

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