Как правильно подключить скрипты или стили на сайт DLE или WordPress

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

Не много теории.

1. Что такое таблица стилей CSS.

Умное пояснение Вы можете прочитать в вики . Я поясню значение стилей для сайтов на пальцах.

Любой сайт состоит из html тегов (<p>текст</p>). По умолчанию работаю стили по умолчанию. Примерная схема:

cssВ итоге мы применили стиль который сменил цвет всего текста внутри тега.

А именно

p {
color:#24ff00;
}

Это называется классом. Все классы которые задают стили находится в файле стилей с расширением css.

2. Что такое скрипт

Как Вы поняли из текста выше стили отвечают за внешний вид. Тогда как скрипты отвечают за эффекты на странице (на самом деле javascript имеет куда большее значение в работе сайта но сейчас не об этом). Что бы было понятнее рассмотрим схему которая покажет просто пример работы скрипта.

3. Что означает понятие «подключить внешний стиль или скрипт».

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

Схематически это можно изобразить так

1

Подключение внешних стилей и скриптов к сайту на DataLife Engine.

Подключение стилей

Шаг 1. Подключитесь к с сайту с помощью FTP

Шаг 2 Определите название активного шаблона

Откройте панель управления и перейдите в панель настройки системы http://site.ru/admin.php?mod=options&action=syscon  И найдите пункт «Шаблон сайта по умолчанию»

1

 

Название которое будет в выпадающем списке и есть название активного шаблона (на скрине название шаблона будет Default).

Шаг 3  Откройте папку с шаблоном.

Для этого перейдите в папку templates в корневом каталоге вашего сайта (/site.ru/www/templates/Default) где Default это имя активного шаблона. Вместо каталога www может быть public_html

Шаг 4  Откройте папку с именем «css» или «style»

Она находится в папке с активным шаблоном которую вы открыли в предыдущем шаге. В ней будут файлы вида style.css, engine.css….

Шаг 5 Загрузите в папку «css»,  с помощью FTP , все файлы стилей которые Вам надо подключить.

Если у Вас нет файла, а просто код то следует сделать так

Откройте панель управления, затем раздел «Шаблоны сайта» http://site.ru/admin.php?mod=templates

Откройте файл стилей styles.css который находится в папке style или css

QIP Shot - Screen 003

И в самый конец файла вставьте Ваш код. В таком случае, выполнять следующий шаг нет необходимости.

Шаг 6 Подключение внешних стилей к сайту.

Перейдите в редактор шаблонов DLE http://site.ru/admin.php?mod=templates и выберите файл main.tpl

1

 

Найдите тег

 </head>

и перед ним вставьте строку

<link media="screen" href="{THEME}/style/engine.css" type="text/css" rel="stylesheet" />

где

style — это название папки в которую вы загрузили ваши стили

engine.css — это название стиля которые подключается

Замените название на название своего стиля который Вы загрузили в шаге 6

Если стилей несколько то вставляем еще одну аналогичную строку и меняем имя на нужное. Т.е. для каждого внешнего файла своя строка подключения.

В итоге у Вас получится вот так

<link media="screen" href="{THEME}/style/engine.css" type="text/css" rel="stylesheet" />
<link media="screen" href="{THEME}/style/name.css" type="text/css" rel="stylesheet" />
</head>
<body>

После внесения этих строка нажимаете сохранить и смотрите изменения.

 

Подключение скриптов

Шаг 1. Подключитесь к с сайту с помощью FTP

Шаг 2. Определите название активного шаблона

Откройте панель управления и перейдите в панель настройки системы http://site.ru/admin.php?mod=options&action=syscon  И найдите пункт «Шаблон сайта по умолчанию»

1

Название которое будет в выпадающем списке и есть название активного шаблона (на скрине название шаблона будет Default).

Шаг 3  Откройте папку с шаблоном.

Для этого перейдите в папку templates в корневом каталоге вашего сайта (/site.ru/www/templates/Default) где Default это имя активного шаблона. Вместо каталога www может быть public_html

Шаг 4 Откройте папку  с именем js

В папке должны быть файлы вида libs.js, main.js …. Если такой папки нет то создайте ее в папке с активным шаблоном

Шаг 5 Загрузите в папку «js»,  с помощью FTP , все файлы скриптов которые Вам надо подключить.

Если у Вас нет файла, а просто код то откройте блокнот, вставьте туда Ваш код и сохраните с расширением «js» задав любое имя буквами латиницы без спец символов и пробелов.

Шаг 6 Подключение внешних скриптов к сайту.

Перейдите в редактор шаблонов DLE http://site.ru/admin.php?mod=templates и выберите файл main.tpl

1

Найдите тег

 </head>

и перед ним вставьте строку

<script type="text/javascript" src="{THEME}/js/libs.js"></script>

где

js — это название папки в которую вы загрузили ваши скрипты

libs.js- это название файла с скриптом который Вы подключаете

{THEME} — при загрузки страницы этот тег заменяется на адрес к папке активного шаблона. Например http://site.ru/templates/name/

Если у Вас несколько скриптов то следует вставить еще одну строку перед тегом

 </head>

и сменить название файла

В итоге у Вас получится вот так

<script type="text/javascript" src="{THEME}/js/libs.js"></script>
<script type="text/javascript" src="{THEME}/js/other.js"></script>
</head>
<body>

После внесения этих строка нажимаете сохранить и смотрите изменения.

Понравилась статья? Ставь лайк.

Похожие материалы

Обсуждения

Оставьте свой Email И мы обсудим Вашу идею
*P.S.:Не работаю с бюджетами менее чем 600$