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

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

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

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

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

Откройте главную страницу Вашего сайта. Кликните правой кнопкой мыши по пустому месту на странице. Выберите в контекстом меню пункт «Исходный код страницы» (название может быть немного другим).

Найдите

/wp-content/themes/

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

<link rel='stylesheet' id='fontstyle-css'  href='http://mexalim.com.ua/wp-content/themes/superportfel/fonts/stylesheet.css?ver=4.0.1' type='text/css' media='all' />

сразу после слеша (/) будет название папки активного шаблона в WordPress. Например в строке Выше это «superportfel».

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

Для этого перейдите в папку wp-content/themes в корневом каталоге вашего сайта (http://site.ru/www/wp-content/themes/name) где name это имя активного шаблона. Вместо каталога www может быть public_html

Шаг 4  Откройте папку «css» или «style» который находятся в папке с шаблоном

В ней будут файлы вида style.css, editor.css….

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

Откройте в консоли раздел редактирования тем http://site.ru/wp-admin/theme-editor.php и найдите файл «Функции темы»

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

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

Откройте в консоли раздел редактирования тем http://site.ru/wp-admin/theme-editor.php и найдите файл «Функции темы»

 

1

 

Нажмите Ctrl+F и введите текст «function trak_scripts_styles() {» без кавычек.

Если что-то нашли то замените

— Если что-то нашли то замените

function trak_scripts_styles() {

на

function trak_scripts_styles() {
wp_enqueue_style( 'fontstyle', get_template_directory_uri() . '/css/style.css', '2013-07-18' );

— Если не нашли то после

<?php

вставьте код

function trak_scripts_styles() {
wp_enqueue_style( 'fontstyle', get_template_directory_uri() . '/css/style.css', '2013-07-18' );
}
add_action( 'wp_enqueue_scripts', 'trak_scripts_styles' );

где

css — это имя папки в которую вы загружали свои стили.

style.css — имя вашего файла стилей

font-style — уникальный идентификатор подключаемого стиля. Название может быть любым. Главное что бы оно не повторялось.

Что бы подключить несколько файлов стилей, добавляете еще одну строку после

function trak_scripts_styles() {

вида

wp_enqueue_style( 'fontstyle', get_template_directory_uri() . '/css/style.css', '2013-07-18' );

меняете идентификатор (font-style) и имя файла (style.css) стилей

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

function trak_scripts_styles() {
wp_enqueue_style( 'fontstyle', get_template_directory_uri() . '/css/style.css', '2013-07-18' );
}
add_action( 'wp_enqueue_scripts', 'trak_scripts_styles' );

или вот так

function trak_scripts_styles() {
wp_enqueue_style( 'fontstyle', get_template_directory_uri() . '/css/style.css', '2013-07-18' );
wp_enqueue_script( 'new-script', get_template_directory_uri() . '/js/social.js', array( 'jquery' ), '2013-07-18', true );
wp_enqueue_script( 'social-script', get_template_directory_uri() . '/js/other.js', '2013-07-18', true );

}
add_action( 'wp_enqueue_scripts', 'trak_scripts_styles' );

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

 

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

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

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

Откройте главную страницу Вашего сайта. Кликните правой кнопкой мыши по пустому месту на странице. Выберите в контекстом меню пункт «Исходный код страницы» (название может быть немного другим).

Найдите

/wp-content/themes/

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

<link rel='stylesheet' id='fontstyle-css'  href='http://mexalim.com.ua/wp-content/themes/superportfel/fonts/stylesheet.css?ver=4.0.1' type='text/css' media='all' />

сразу после слеша (/) будет название папки активного шаблона в WordPress. Например в строке Выше это «superportfel».

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

Для этого перейдите в папку wp-content/themes в корневом каталоге вашего сайта (http://site.ru/www/wp-content/themes/name) где name это имя активного шаблона. Вместо каталога www может быть public_html

Шаг 4  Откройте папку «js» которая находятся в папке с шаблоном

В ней будут файлы вида script.js, libe.js….

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

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

Откройте в консоли раздел редактирования тем http://site.ru/wp-admin/theme-editor.php и найдите файл «Функции темы»

 

1

 

Нажмите Ctrl+F и введите текст «function trak_scripts_styles() {» без кавычек.

— Если что-то нашли то замените

function trak_scripts_styles() {

на

function trak_scripts_styles() {
wp_enqueue_script( 'social-script', get_template_directory_uri() . '/js/social.js', array( 'jquery' ), '2013-07-18', true );

— Если не нашли то после

<?php

вставьте код

function trak_scripts_styles() {
wp_enqueue_script( 'social-script', get_template_directory_uri() . '/js/social.js', array( 'jquery' ), '2013-07-18', true );
}
add_action( 'wp_enqueue_scripts', 'trak_scripts_styles' );

где

js — это имя папки в которую вы загружали свои стили.

social.js — имя вашего файла стилей

social-script — уникальный идентификатор подключаемого скрипта. Название может быть любым. Главное что бы оно не повторялось.

часть  array( ‘jquery’ ) — означает что скрипт будет загружен после загрузки jQuery

Что бы подключить несколько файлов со скриптами, добавляете еще одну строку после

function trak_scripts_styles() {

вида

wp_enqueue_script( 'social-script', get_template_directory_uri() . '/js/social.js', array( 'jquery' ), '2013-07-18', true );

меняете идентификатор (social-script) и имя файла (social.js) скрипта.

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

function trak_scripts_styles() {
wp_enqueue_script( 'new-script', get_template_directory_uri() . '/js/social.js', array( 'jquery' ), '2013-07-18', true );
wp_enqueue_script( 'social-script', get_template_directory_uri() . '/js/other.js', '2013-07-18', true );
}
add_action( 'wp_enqueue_scripts', 'trak_scripts_styles' );

или вот так

function trak_scripts_styles() {
wp_enqueue_script( 'new-script', get_template_directory_uri() . '/js/social.js', array( 'jquery' ), '2013-07-18', true );
wp_enqueue_script( 'social-script', get_template_directory_uri() . '/js/other.js', '2013-07-18', true );
wp_enqueue_style( 'fontstyle', get_template_directory_uri() . '/css/style.css', '2013-07-18' );
}
add_action( 'wp_enqueue_scripts', 'trak_scripts_styles' );

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

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

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

Обсуждения

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