Меню Рубрики

Установка script на wordpress

Как на сайте WordPress быстро вставить любой скрипт в статью?

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

Что такое JavaScript?

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

Типичный фрагмент кода JavaScript может выглядеть следующим образом:

Теперь, если вы добавите фрагмент кода в контентную часть записи или страницы WordPress, он будет удален при сохранении.

Как быстро вставить любой скрипт в статью?

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

Способ 1. Плагин Shortcoder

Бесплатный плагин Shortcoder позволит одним нажатием кнопки вставлять сохраненный лишь однажды код в текст записи или страницы. Для этого, после установки и активации дополнения, необходимо в админ-панели перейти в раздел Настройки -> Shortcoder.

Для начала нам нужно добавить необходимый код и сохранить его для будущей вставки. Для этого нажимаем кнопку Create a new shortcode.

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

Настройка Disable this Shortcode for administrators позволяет запретить показ кода для администратора. Кроме того, в блоке Visibility Вы сможете указать, для каких устройств будет отображаться код. Доступны следующие варианты: только на мобильных (опция On mobile devices alone), только на десктопах (On desktops alone) и для всех устройств (On both desktop and mobile devices). Для сохранения следует нажать кнопку Create shortcode. Все, Ваш код сохранен. Теперь его можно вставлять в контент. Для этого необходимо открыть на редактирование запись или страницу и поставить курсор в то место, где ожидается вставка кода.

Теперь, чтобы вставить код, нужно нажать появившуюся на панели инструментов кнопку. Во всплывающем окне Вы увидите список сохраненных кодов (в нашем случае – это Clearfy banner). Для его вставки необходимо нажать кнопку Quick insert.

В итоге в тексте статьи появится специальный шорткод.

После обновления страницы или записи (кнопка Обновить), вставленный Вами код будет исполнен и отображен.

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

Способ 2. Плагин Insert Headers and Footers

Иногда вам будет необходимо скопировать и вставить фрагмент кода JavaScript на свой сайт, чтобы добавить сторонний инструмент. источник

Как добавить скрипт на страницу WordPress

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

Поскольку с движком WordPress мое знакомство, как и у многих, происходит по принципу «решаем проблемы по мере их поступления», к суперпродвинутым пользователям этой постоянно развивающейся CMS я себя причислять не решаюсь. Поэтому тоже всегда прежде изучаю и прорабатываю (проверяю) информацию, изложенную на заслуживающих доверия ресурсах. Если по каким-то причинам в открытом доступе информация отсутствует, а решение проблемы затягивается, обращаюсь за советом к специалистам с форумов. Например, многие непонятные с первого захода вопросы по другому популярному движку для создания интернет-магазинов PrestaShop, мне удалось прояснить лишь общением в специализированных форумах, посвященных этой CMS. Как говорят, правильно сформулированный вопрос – уже половина ответа ))

Читайте также:  Установка колесных дисков больше

Сегодня я хочу познакомить вас с простым способом добавления скрипта в записях WordPress. Основные моменты («сюрпризы»), с которыми сталкивается новичок при поиске информации в интернет, и о которых я упоминал в самом начале – это:

  • Отсутствие актуальной информации по теме. В ТОПе выдаче Яндекса мне сплошь и рядом попадались статьи, датированные и 2010-м и даже 2007-м годом. Увы, многое из того, что работало раньше, уже не работает.
  • Недостаток знаний у владельца сайта для применения некоторых решений. Преодолеть этот барьер наскоком не всегда удается. Некоторые барьеры и вообще кажутся непреодолимыми на определенном этапе.
  • Недостаток времени. А реализовать задуманное требуется сегодня или, в крайнем случае, завтра.

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

Зачем вообще добавлять скрипты в записи блога (сайта) на WordPress? Причины прозаичны: нужен скрипт оплаты на странице, скрипт обратной связи, код рекламной сети, вывод интерактивной карты и т.п. В WordPress предусмотрена вставка скриптов в футере (путем редактирования файла footer.php) и сайдбаре – с помощью виджетов. Но простая и понятная вставка скриптов в тело записи средствами движка почему-то не предусмотрена. Скрипт, добавляемый в пост в режиме редактирования html, не отображается на странице, попросту пропадает. Вот и приходится искать обходные пути – самые разные.

Так вот. О том, как добавить скрипт на страницу WordPress, информации в сети предостаточно. Интернет предлагает нам следующие пути решения проблемы:

  • Использование функции wp_enqueue_script, используемой для регистрации нужных скриптов в WordPress. Наиболее распространенный способ – вызов функции в файле шаблона. Реализуется разными способами. Требует понимания принципа работы движка, знания его структуры.
  • Правка файла functions.php. Необходимо знание того, куда и что нужно добавить, чтобы и скрипт запускался, и тема продолжала работать как прежде.
  • Использование Произвольных полей WordPress. Относительно простое, но не всегда работающее решение. Возможно, вам повезет и на вашем сайте скрипт, внедренный в запись WordPress с помощью произвольных полей, заработает. У меня на паре сайтов произвольные поля напрочь отказывались работать со скриптами.
  • Использование плагинов, добавляющих на сайт шорткоды (shortcode). Элегантное решение, заключающееся в следующем. Для исполнения различных скриптов простым добавлением в предлагаемую плагином форму создаются сниппеты кода. Плагин реализует вызов встроенных в движок функций самостоятельно, вебмастеру же остается добавить в запись конструкцию типа [short_code], вызывающую исполнение необходимой функции. Достоинство метода в том, что нет привязки к шаблону, шорткоды можно применять в любой теме WordPress. Примеры плагинов для создания шорткодов: Shortcoder, Shortcode Exec PHP, Shortcodes Ultimate. К сожалению, тоже не на всех шаблонах и не у всех вебмастеров этот метод срабатывает.
  • Использование конструкции iframe вида Это позволяет выводить в теле страниц (записей) блога содержимое из внешних файлов. Все, что нужно вебмастеру – загрузить файл со скриптом на хостинг – в корень или в специально отведенную для этого папку, затем прописать в процессе редактирования записи вывод содержимого этого файла с помощью iframe в нужном месте страницы.

Необходимость в скриптах на страницах WordPress стала появляться у меня сравнительно недавно. И, как полагается, я перепробовал все возможные варианты их добавления. Но именно последний метод срабатывал всегда, я им активно пользуюсь и в настоящее время. Приведу пару примеров добавления скрипта в WordPress, реализованных в предыдущей записи Регистрация в каталогах сайтов. На этой странице выводится две конструкции вида

На многих сайтах для реализации контактной формы раньше я с успехом использовал популярный плагин Contact Form 7, легкий в настройках, простыми манипуляциями в котором создать продвинутую форму обратной связи, а затем добавить шорткод в тело записи или страницы, не составляло большого труда. На этом сайте Contact Form 7 нормально работать отказался, как и форма от Вебмани. Проблема была решена с помощью iframe.

Последовательность действий при вставке скрипта в запись WordPress:

  1. Создаем в текстовом редакторе типа Notepad++ пустую страницу, добавляем в нее необходимый код (скрипты для решения самых разных задач на сайте есть в свободном доступе в сети).
  2. Сохраняем страницу с расширением html в кодировке UTF-8 без BOM.
  3. Забрасываем эту страницу к себе на сервер, в папку с сайтом (или внутреннюю папку на сайте).
  4. Выводим в нужном месте статьи (редактирование в режиме Текст) ссылку на наш файл.
Читайте также:  Установка cwm recovery i9000

Я использовал готовый шаблон формы обратной связи, реализованный на двух файлах (оба файла через FTP сохраняются в папку с сайтом):

1) contacts.html

2) contacts.php

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

Дальше необходимо открыть запись WordPress и в режиме Текст добавить ссылку на первый файл:

— где параметры width и height отвечают за размеры вставки, параметр frameborder тега указывает на толщину (в данном случае — отсутствие) границы фрейма, а параметр scrolling — на отсутсвие или наличие полосы прокрутки во фрейме.

источник

Правильное подключение JavaScript и Style в WordPress

Многие начинающие веб-мастера и блогеры для создания собственного сайта, используют готовый программный «движок». На сегодняшний день существует большой ассортимент CMS – Системы управления содержимым. Все они в той или иной мере функциональны, а различия их скрываются в мелочах, которые можно самостоятельно подкорректировать.

Одним из наиболее удобных, функциональных и бесплатных CMS, является WordPress. Данная программа просто предназначена для создания блогов, однако, может быть использована в иных проектах.

Подключение JavaScript в WordPress

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

Итак, для того чтобы подключить JavaScript в WordPress, можно воспользоваться как минимум двумя способами. Первый и наиболее ошибочный— это использование через функцию « wp_head ».

Этот вариант подключения JavaScript в WordPress является неправильным. К примеру, если вы загружаете jQuery вручную, и в то же время один из плагинов также подключает библиотеку jQuery по правильному пути, то в итоги получится что загрузка происходит дважды. А еще возможно, что это могут быть две разные версии, которые будут вызывать конфликт.

Наиболее приемлемый вариант

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

Поэтому, имеется встроенная функция wp_enqueue_script , которая позволяет использовать изначально встроенный JavaScript. Данная функция подразумевает постановку сценария скрипта в очередь. Благодаря этому, происходит их проверка и открытие с помощью интегрированного в систему JS.

Правильное добавление сценария в WordPress

Описанная выше, загрузка сценариев (более правильная), производится с помощью довольно простого способа. Ниже, будет представлен код, который необходимо будет внести в файл functions.php или же в собственный файл плагинов.

Загрузка скрипта из темы оформления.

Загрузка скрипта из плагина.

Примечание: Данная функция утверждает 5 параметров:

1) $handle . Эта функция представляет собой название скрипта. В данном примере она имеет название “my_amazing_script”. Поэтому, на ее место нужно будет вписать иное название.

2) $srс . SRC сокращенно Source (по-русски — источник). Данный параметр представляет собой расположение скрипта. В примере, используется функция под названием « plugins_url » для получения корректного веб-адреса, для директории (папки), в которой находятся файлы скрипта.

3) $deps . Эта функция используется для совместимости. Так как скрипт использует JQuery, то логично добавить его в данную область. Благодаря этому, WordPress автоматически осуществит его загрузку.

4) $ver представляет собой номер скрипта. В данном случает функция не требуется.

5) $in_footer эта функция ставится для того, чтобы загрузка скрипта произошла в нижней части сайта. Чтобы загрузить его в заголовок, потребуется ввести другую команду.

В итоге вводится команда « wp_enqueue_script() », которая позволяет запуститься скрипту.

Правильное добавление style.css (стилей) в WordPress

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

Следует обратить внимание на наличие команды « wp_enqueue_scripts » несмотря на то, что применялась она ранее для добавления скрипта. Все дело в том, что данная команда универсальна и подходит как для оформлений, так и для скриптов, а также иных расширений.

Читайте также:  Установка плинтусов наличников подоконных досок

В примере мы, использовали команда « plugins_url ». Но, если вы подключаете скрипт внутри вашей темы оформления, то нужно воспользоваться этой командой — get_template_directory_uri () .

А также если вы работаете с дочерней темой, то можно использовать команду « get_stylesheet_directory_uri ». Пример использования:

Больше информации по функциям:

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

источник

Лучшие способы для загрузки скриптов в WordPress

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

В целом, можно использовать 2 сценария загрузки скриптов:

  • Загружать скрипты для всего сайта или темы
  • Загружать скрипты с определенным условием для конкретных постов или страниц

Загрузка скриптов для использования на всём сайте

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

Эти боксы в основном используются для добавления скриптов вроде Google Analytics или скриптов онлайн-чата . Если в вашей теме таких боксов нет, можно внести правки в код файла functions.php:

Примечание: После однократной регистрации скрипта нет необходимости регистрировать его повторно; его можно вызывать в зависимости от указанных условий в функции wp_register_script :

Загрузка скриптов только для определенных страниц или постов

Качественные платные фреймворки и темы наподобие Genesis облегчают задачу по настройке WordPress путем вызова необходимых скриптов для каждой отдельной страницы или определенного типа постов. Под каждой страницей или постом вы найдете отдельный бокс для добавления скриптов.

Если в вашей теме таких боксов нет, кликните по вкладке «Настройки экрана» справа вверху и активируйте отображение боксов для скриптов на экране в режиме редактирования:

Если в вашей теме вообще не предусмотрены отдельные боксы для добавления скриптов, добавьте следующий код в конце файла functions.php. При этом не забудьте заменить значение ‘007’ на нужный вам page_id и указать верный путь расположения .js-файла для приведения скрипта в рабочее состояние:

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

Единственная разница между загрузкой скриптов для родительской и дочерней темы заключается в следующем:

  • get_template_directory_uri() — используйте эту функцию для родительской темы.
  • get_stylesheet_directory_uri() — используйте эту функцию для дочерней темы.

Приведенный ниже код следует применять для загрузки скриптов в зависимости от указанных условий в родительской теме:

Загрузка скриптов при помощи кода

Просто создаем новую папку «js» в дочерней теме в корневой папке и туда помещаем наши файлы с расширением .js. По приведенному коду подразумевается, что ваш файл скрипта носит название your-script. Если вы назвали файл иначе, то и пути к файлу, а также имена файлов в коде тоже надо изменить.

Загрузка скриптов для настраиваемого фона

А вот код для популярной темы Metro , созданной StudioPress. Этот код также можно применять для дочерних тем на основе Genesis, чтобы добавить адаптивное фоновое изображение на сайте:

Загрузка скриптов для плагинов вручную

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

Для загрузки скриптов применяется метод, аналогичный загрузке таблиц стилей CSS, включая функции wp_register и wp_enqueue для корректной обработки и взаимодействия с файлом style.css.

Плагин Simple Scripts

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

источник

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