WordPress Javascript: руководство для начинающих

Если вы спросите миллион веб-разработчиков, что такое JavaScript, вы получите миллион разных ответов. Практически все интерактивное в сети делается с помощью JavaScript.

Как современная система управления контентом (CMS) WordPress и многие его плагины частично полагаются на JavaScript для выполнения своей работы. Вопреки тому, как это может звучать, JavaScript не имеет отношения к языку программирования Java. Это называется так только в маркетинговых целях.

Давайте углубимся во все, что вам нужно знать, чтобы использовать объединенную мощь JavaScript и WordPress.

Что такое JavaScript?

Давным-давно Интернет полагался исключительно на HTML и CSS. Эта комбинация позволяет создавать очень простые стили контента. Однако для того, чтобы сделать контент динамичным, можно было сделать очень немногое, и о создании веб-приложений не могло быть и речи.

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

В веб-браузерах есть движок JavaScript, который знает, как выполнять код JavaScript. Например, движок JavaScript в Chrome - v8, а движок JavaScript FireFox - SpiderMonkey. По этой причине Javascript полагается на браузеры, чтобы «понимать», как интерпретировать, обрабатывать и управлять отображением данных.

Технические аспекты JavaScript

Хотите узнать больше о технологиях, лежащих в основе JavaScript? Есть несколько важных отличий, которые следует знать тем, у кого есть опыт в других типах развития. Во-первых, JavaScript не зависит от типа, как и PHP. Это означает, что его переменные не имеют определенного типа, и любой заданной переменной можно присвоить почти любой тип значения.

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

Что делает JavaScript?

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

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

Хотя конфиденциальные данные должны обрабатываться на сервере, многие веб-приложения активно используют JavaScript, чтобы воспользоваться вычислительной мощностью клиентского компьютера. Теперь, когда мы живем в эпоху бесконечных «фреймворков», которые значительно ускоряют разработку различных типов контента, возможности безграничны.

Безопасен ли JavaScript?

Как и большинство протоколов и более старых языков, JavaScript изначально не создавался с учетом требований безопасности. Это вполне разумный вопрос, учитывая, насколько распространенными стали кибератаки.

Существуют расширения браузера, такие как «NoScript», которые просто блокируют выполнение всего кода JavaScript. Если вы следуете общему правилу Интернета и не посещаете ненадежные сайты, можно разрешить запуск JavaScript.

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

Два основных типа атак JavaScript

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

Межсайтовый скриптинг (XSS)

Межсайтовый скриптинг (XSS) - это тип атаки вредоносного ПО, который выполняется путем использования межсайтовых уязвимостей на любом сайте WordPress. Фактически, это наиболее распространенный способ взлома сайтов WordPress, потому что существует очень много плагинов WordPress, имеющих XSS-уязвимости.

Атака с использованием межсайтовых сценариев используется, если страница позволяет отправлять на нее данные. В этой атаке злоумышленник помещает код JavaScript в данные, которые должны быть отправлены на страницу, доступную для всех.

Если не приняты меры по снижению риска, этот вредоносный код фактически запускает код JavaScript на любом компьютере, который посещает эту страницу. Вот почему так важно «дезинфицировать» ввод. Это означает, что перед публикацией вы удаляете такие вещи, как скобки и кавычки, которые делают код бесполезным.

Подделка межсайтовых запросов (CSRF)

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

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

Один сценарий, который на самом деле произошел с крупным сайтом и крупным банком, заключался в том, что ссылка банка для перевода денег выглядела так: www.bankwithbadsecurity.com/transfer&amount=1000&toAccount=12345 для перевода 1000 долларов на счет с номером 12345 .

Для банка это выглядит так, как будто вы его запрашивали, и поскольку запрос будет исходить с вашего IP-адреса, трудно доказать, что вы его не инициировали. К счастью, большинство современных браузеров автоматически обнаруживают это и предотвращают.

Могу ли я использовать JavaScript внутри WordPress?

Да, вы можете использовать JavaScript при разработке для WordPress. Имейте в виду, что WordPress - это гибкая система управления контентом, которая имеет два режима редактирования. Один из них позволяет вам напрямую редактировать код, а другой позволяет использовать редактор, аналогичный тому, что вы можете видеть в текстовом процессоре, также известный как редактор «WYSIWYG». В последней версии WordPress редактор WYSIWYG называется Gutenberg.

Имейте в виду, что вы также можете использовать JavaScript при разработке расширений для WordPress. В то время как серверная часть WordPress - это PHP, клиентская сторона почти на 100% - это JavaScript.

Стоит ли изучать JavaScript для WordPress?

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

С другой стороны, довольно легко начать работу с JavaScript, и вы также узнаете много нового о том, как работают HTML и CSS. Однако, помимо обучения WordPress, вы захотите поработать над изучением JavaScript, если хотите сделать сайт динамичным и запоминающимся.

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

Вам следует особенно потратить время на изучение JavaScript, если вы фрилансер или агентство, которое управляет сайтами клиентов. Хотя существуют первоклассные инструменты, которые позволяют управлять несколькими сайтами WordPress, ни один плагин не может создавать сайты за вас!

Кроме того, если у вас есть стремление стать веб-разработчиком, изучение JavaScript полезно для следующих профессий:

• Front-end разработчик
• Back-end разработчик
• Разработчик полного стека

Кроме того, изучение JavaScript вместе с более продвинутым HTML, CSS и PHP служат прочной основой для WP, которая, вероятно, сократит для вас накладные расходы. Вам больше не нужно будет платить внешним подрядчикам, сокращая вашу прибыль, за выполнение задач, выполнение которых в действительности может занять несколько минут. Освоив JavaScript, вы можете перейти к популярным фреймворкам, таким как React и Angular, чтобы создавать действительно уникальные, отзывчивые приложения в WordPress.

Как писать JavaScript при кодировании в WordPress?

Хотя добавить JavaScript на сайт WordPress не так просто, как добавить CSS и HTML, вам не понадобится много времени, чтобы начать работу. Есть два разных подхода к этому, и у каждого своя цель.

Метод 1: на каждой странице

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

Есть несколько бесплатных плагинов, которые берут ваш настроенный JavaScript и помещают его в верхний и / или нижний колонтитул каждой страницы вашего сайта WordPress. Администраторам WordPress нравятся эти плагины, потому что они отлично работают с Google Analytics, обеспечивая подсчет каждого попадания на страницу, что помогает быстрее повысить рейтинг SEO.

Метод 2. Разный JavaScript на каждой странице

Допустим, у вас есть сайт WordPress, на каждой странице которого есть разные инструменты, для работы которых требуется хотя бы одна «библиотека». Принудительная загрузка всего вашего JavaScript на каждой отдельной странице, особенно когда это не нужно, просто замедлит доступ к вашему сайту. Здравый смысл подсказывает нам, что замедление взаимодействия с посетителями - не лучший способ выиграть бизнес!

В Интернете есть множество руководств, в которых описаны безумно сложные методы выполнения этого процесса. Хотя это правда, что это можно сделать, внося сложные изменения в файл functions.php, нет никакой реальной необходимости применять этот подход, если вам не нравится головная боль.

Вместо этого установите плагин Code Embed на свой сайт. Это позволит вам добавить JavaScript и встроить его в любое место страницы.

Использование подключаемого модуля CodeEmbed

После установки подключаемого модуля Code Embed перейдите в Параметры экрана и установите флажок «Пользовательские поля». Это позволит вам добавить на страницу свой JavaScript.

На странице редактирования вы увидите поле с надписью «Настраиваемые поля» с возможностью «Ввести новые» настраиваемые поля. Щелкните по нему, и у вас появятся пустые текстовые поля для ввода имени вашего кода JavaScript, а также самого кода.

Чтобы избежать конфликтов с существующими кодами WordPress, вы должны начинать имя вашего кода JavaScript с заглавных букв «CODE». Что-нибудь вроде «CODEtimer» подойдет. Затем вы добавите фактический JavaScript в другое поле. Убедитесь, что вы включили открывающий и закрывающий теги скрипта !

Когда вы закончите, просто нажмите кнопку с надписью «Добавить настраиваемое поле». Наконец, определите, где на странице вы хотите выполнить код JavaScript. Например, если код загружает таймер, найдите, где на своей странице вы хотите вставить этот таймер. Затем вы будете использовать точный синтаксис [[CODEtimer]], чтобы WordPress вставил туда ваш JavaScript, и все готово!

Как мне включить мои файлы JavaScript и CSS в WordPress?

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

В этой части вам нужно зайти в диспетчер файлов и найти файл с именем «functions.php». Обратите внимание, что это будет в папке, где находится базовая тема для вашего сайта.

Добавление CSS в functions.php

Как только вы окажетесь в файле functions.php , выполните следующие действия:

1. В новой строке создайте пустую функцию, добавив код функции
   addMyCSS () {#Fill This In Later}
2. «Зарегистрируйте» свой CSS-файл в WordPress с помощью встроенной функции wp_register_style на следующем шаге.
3. Удалите заполнитель, который мы добавили в код, и вместо этого поместите wp_register_style ('name_of_css_style', plugins_url ('file-location.css', __ FILE__));
4. Теперь мы сказали WordPress, как называть наш стиль CSS и где он находится. Теперь пришло время поставить стиль в очередь или сказать WordPress, что мы готовы его использовать.
5. Оставаясь в функциональном блоке addMyCSS , добавьте код wp_enqueue_style ('name_of_css_style'); прямо под кодом, который мы ввели на последнем шаге.
6. Есть еще один последний шаг, но сначала убедитесь, что вы ВНЕ всей функции, которую мы создали, и в общей части файла PHP.
7. Вне addMyCSS просто добавьте следующую строку: add_action ('wp_enqueue_scripts', 'name_of_css_style'); . Это указывает WordPress запускать загрузку этого файла при загрузке страницы.

Вам может быть интересно, почему у нас есть wp_enqueue_scripts в функции add_action для таблицы стилей. Это просто способ, которым WordPress всегда реализовывал эту функцию.

Добавление файлов JavaScript в WordPress

Теперь, когда мы рассмотрели процесс создания функции, регистрации файла и добавления действия, эта часть должна быть легкой задачей!

1. Создайте функцию addMyJS в functions.php, как мы это сделали с addMyCSS .
2. Мы будем использовать функцию wp_register_script , но она немного сложнее. У него пять «параметров» (элементы заключены в круглые скобки). Посмотрите ниже, чтобы узнать, что такое каждый параметр.
3. wp_register_script (1. Имя вашего скрипта, 2. plugins_url (location_of_script.js, __FILE__), 3. массив зависимостей JS, обычно массив (jquery), 4. (Необязательно) версия вашего файла JS в одинарных кавычках, 5. должна быть true, если вы хотите, чтобы JS был в нижнем колонтитуле, false, если вы хотите, чтобы он был в заголовке);
4. Вот практический пример JavaScript для запуска в нижнем колонтитуле темы: wp_register_script ('timer_js', plugins_url ('timer_file.js', __FILE__), array ('jquery'), '1.0', true);
5. Опять же, ВНЕ нашей функции addMyJS , «поставьте в очередь» ваш скрипт, поместив его в вашу общую область PHP: add_action ('wp_enqueue_scripts', 'addMyJS');

Это может показаться сложным, но как только вы освоитесь, это займет меньше минуты, так что не бойтесь!

Какие плагины я могу использовать для добавления JavaScript в WordPress?

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

• ASync - уникально то, что этот плагин загружает файлы JS и CSS отдельно от остальной части страницы. Это может быть особенно полезно, если есть ошибка кодирования, которая в противном случае остановит загрузку вашей страницы на неопределенный срок.

• JS в виджетах - просто нужно добавить несколько строк кода для чего-то вроде Google Analytics? Этот плагин избавляет от лишних хлопот и позволяет добавлять небольшие фрагменты кода на ваши сайты WordPress.

• Zia CSS / JS Helper - это, безусловно, лучший вариант для тех, кто знаком с классической веб-разработкой на HTML / CSS / JS. Это делает вашу функциональность редактирования WordPress такой же, как редактирование сайта через файловый менеджер cPanel. Вы можете использовать встроенный CSS и JavaScript для быстрого добавления фрагментов кода, создания и управления внешними файлами и т. Д.

Всегда сначала делайте резервную копию своего сайта!

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

Могу ли я использовать API WordPress с помощью JavaScript?

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

Здесь мы получили те «встроенные функции», которые использовали ранее. Мы могли бы целыми днями рассказывать о каждой функции в API и о том, как они работают в тандеме с JavaScript. Однако это сложная тема, которая требует отдельного времени и самоотверженности для изучения.

Есть ли библиотеки JavaScript, специально предназначенные для WordPress?

Да! Осознавая, что многие разработчики не освоили весь контент WordPress API, многие программисты создали библиотеки JavaScript, которые можно легко встраивать, используя любые плагины, которые мы обсуждали ранее.

Большинство библиотек JavaScript можно найти на GitHub и они совершенно бесплатны. Существуют сотни тысяч доступных библиотек JavaScript, совместимых с WordPress, от одной, которая добавляет забавные эффекты в WordPress, до той, которая позволяет создавать сайт с макетом, очень похожим на Pinterest!

Самая известная библиотека, используемая с WordPress (и большинством сайтов), называется jQuery. jQuery упрощает JavaScript, и как только вы освоите его, вы сможете быстро и легко писать функции.

Помощь! Мой WordPress JavaScript не работает!

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

Некоторые ошибки могут быть вызваны так же легко, как забытые кавычки. Другие могут быть вызваны серьезными ошибками кодирования, которые не так легко выявить. Итак, как профессиональные разработчики видят разницу?

Есть два основных ключа к устранению неполадок: функция JavaScript console.log и консоль отладки браузера. В частности, для этого отлично подходит консоль Chrome.

console.log

Это можно использовать, чтобы увидеть, каково значение переменной в данной точке функции, и убедиться, что части функций действительно достигаются. В файле JavaScript вы просто поместите что-то вроде console.log ("test"); .

Консоль отладки

В зависимости от используемого браузера настройка консоли будет отличаться. Как правило, вам просто нужно нажать F12, чтобы открыть его, а затем щелкнуть вкладку «Консоль».

Консоль покажет, в какой строке, в каком файле JavaScript произошла ошибка. Обычно он показывает полную «трассировку стека» или серию файлов, которые нужно просмотреть, пока вы не обнаружите виновника. Здесь также печатаются сообщения console.log .

Заключение: JavaScript + WordPress

Существуют профессиональные инструменты, которые дадут вам гораздо больше информации, но они обычно стоят немалых денег. Хорошая новость заключается в том, что по мере того, как вы становитесь следующим величайшим в мире разработчиком JavaScript для WordPress, инструменты будут масштабироваться вместе с вами!

Кристен Райт

Кристен пишет учебные пособия, чтобы помочь пользователям WordPress с 2011 года. Обычно вы можете увидеть, что она работает над новыми статьями для блога iThemes или разрабатывает ресурсы для #WPprosper. Вне работы Кристен любит вести дневник (она написала две книги!), Ходить в походы и кемпинги, готовить и ежедневные приключения с семьей, надеясь жить более настоящей жизнью.