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

Сделаем еще один небольшой шаг вперед, связанный с валидацией нашей формы. Для поля e-mail мы можем не просто установить проверку пустого ввода, но и задать необходимое форматирование. Указанное решение было подробно описано Стивом Рейнолдсом (Steve Reynolds) в статье Validation With jQuery. Пример Стива очень интересен и стоит тщательного изучения. Стив использует jQuery функцию keyup для проверки ввода e-mail по регулярному выражению в режиме реального времени. Для начала мы добавим функцию…

Чтобы задать представленную валидацию, мы напишем скрипт jQuery, который будет устанавливать blur для выбранных элементов input. Скрипт необходимо будет разместить в файле registration-page.php, после основного цикла, до вызова хука wp-footer(): Мы будем добавлять восклицательный знак, если поле не было заполнено; в противном случае выводить слово «thanks». Однако на данном этапе можно столкнуться с одной проблемой: если пользователь снова заполнит поле, он опять получит подтверждение верного ввода. Для того чтобы исправить…

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

Как уже было сказано ранее, плагин cforms II обеспечивает встроенную серверную валидацию данных. Чтобы увидеть ее в действии, достаточно кликнуть по кнопке Submit, оставив пустыми поля с обязательной для ввода информацией (либо ввести неверно представленный e-mail адрес). После своей перезагрузки форма подсветит те поля, которые были некорректно заполнены. Однако зачем ждать, пока пользователь щелкнет по кнопке Submit, если можно установить проверку правильности заполнения полей еще до отправки данных на сервер?…

Насколько вы помните, наша регистрационная ссылка передает название выбранного события регистрационной форме посредством специальной переменной (через запрос GET). На текущий момент никакого стандартного способа отлова значения этой переменной в панели администрирования cforms не существует, однако на этот случай имеется специальный «взлом» cforms, который позволит нам удостовериться, что мы можем передавать произвольные переменные в форму. Cforms II может принимать небольшие, заключенные в фигурные скобки шаблонные названия переменных. К примеру, добавление переменной…

Давайте создадим в корне нашей папки js новый файл custom-jquery.js и выполним его подключение к теме в файле header.php следующим образом: Указанная строка должна стоять ниже объявления плагина Colorbox. Теперь самое время прибегнуть к услугам jQuery. Добавим в наш файл custom-jquery.js следующие правила: Приведенные выше правила позволяют нам применять плагин Colorbox только для ссылок, расположенных в записях. Каждая из таких ссылок должна содержать в себе тег img. Никакие другие ссылки…

В предыдущих статьях мы провели небольшую подготовительную работу, направленную на создание фундамента для нашего проекта. Теперь пришло время объединить все прошлые наработки, загрузить плагин ColorBox и подготовить несколько jQuery скриптов. Подключение плагина ColorBox Создадим в директории с нашей темой папку js, внутри которой будет находиться подпапка colorbox. Она понадобится нам для размещения стилевых таблиц CSS и изображений, относящихся к плагину Colorbox. Такой подход позволит нам упорядочить и облегчить процесс дальнейшей…

Теперь мы приступим к созданию специального шаблона для рубрики Events. Возле каждой записи должна стоять ссылка, позволяющая зарегистрироваться на событие. Эта ссылка будет передавать заголовок события в регистрационную форму. Насколько вы знаете, страница category.php превосходит по приоритету страницу archive.php. Однако в стандартном шаблоне, который мы используем, отсутствует файл category.php. Создадим его с помощью копирования файла archieve.php и последующего переименования в category.php. Постойте! Нам необходимо, чтобы страница содержала записи только одной…

Список изменений, которые нам понадобится совершить с темой, довольно краток: Создать произвольный шаблон страницы, содержащий в себе форму регистрации, которая будет загружаться в модальном окне; Создать произвольный шаблон рубрики и настроить его таким образом, чтобы в нем выводились только записи из рубрики Events. Также в нем будет производиться вызов формы регистрации, загружаемой в модальном окне. Создание шаблона произвольной страницы Для начала нам понадобится создать шаблон для страницы регистрации. Сделаем копию…