На прошлом уроке вы научились создавать свой собственный сайдбар , а на этом уроке вы узнаете как создать свой виджет на WordPress . Виджет - это модуль, который предназначен как раз для размещения на сайдбаре.
Зачем вообще нужны виджеты? Они нужны для упорядоченного размещения вспомогательного контента на сайте, а также его дальнейшего редактирования. Например, очень часто в виджетах размещают: ссылки, рекламные блоки, формы подписки и другую важную информацию.
На WordPress уже есть стандартные виджеты, которые можно увидеть в левой части админ-консоли. На вкладке - Внешний вид / Виджеты , правую часть занимают сайдбары, куда можно мышкой перетащить все доступные виджеты.
Как создать свой виджет на WordPress
Откроем кодекс WordPress и посмотрим, что есть в документации насчёт создания своего виджета . WordPress предлагает расширить стандартный класс WP_Widget и его функции и демонстрирует пример готового кода с одним текстовым полем. New_Widget расширяет встроенный в WordPress виджет WP_Widget .
Class New_Widget extends WP_Widget {
Код для создания нового виджета с дефолтным названием Foo_Widget , вам надо это название везде заменить на своё - New_Widget .
Надо добавить новый класс New_Widget , скопируйте код из Example в кодексе и вставьте в файл function.php . Необходимо ещё зарегистрировать новый виджет, делается это с помощью хука widgets_init , хук цепляет добавленный виджет к ядру WordPress . Ниже пример регистрации виджета New_Widget , добавьте этот код в файл function.php , сразу после кода с классом.
Function register_new_widget() {
register_widget("New_Widget");
}
add_action("widgets_init", "register_new_widget");
Теперь в области доступных виджетов появился наш виджет, который можно добавить в нужное место в сайдбаре.
Созданный нами виджет мы видим и на сайте. Новый виджет абсолютно бесполезен, так как выводит только заголовок, но мне было важно показать сам принцип создания.
Файл function.php не резиновый
Если у вас слишком много пользовательского кода, то я рекомендую код каждого нового класс виджета выносить в отдельный PHP файл, которые складывать в свою отдельную папку с виджетами. Кроме того для кода регистрации всех кастомных виджетов необходимо создать ещё один файл. Теперь надо подключить эти файлы к function.php через функцию require .
Require get_template_directory() . "/widgets/custom-widget-1.php";
require get_template_directory() . "/widgets/custom-widget-2.php";
Как отключить виджеты
В случае, если вы не собираетесь использовать какие-то стандартные или собственные виджеты, то можно их отключить. Для этого у WordPress предусмотрена функция - unregister_widget() , она не удаляет виджеты из WordPress насовсем, а убирает их просто их админ-консоли. Вставьте в файл function.php названия виджетов, которые вам надо отключить.
Function remove_calendar_widget() {
unregister_widget("WP_Widget_Calendar");
}
А так же не забудьте убрать хук, связывающий с ядром WordPress .
Add_action("widgets_init", "remove_calendar_widget");
Если вы начинающий веб-разработчик, конечно можно воспользоваться уже готовыми плагинами с виджетами. По своему опыту знаю, какие виджеты наиболее востребованы сейчас на сайтах.
Contact Form 7 - плагин формы обратной связи
Этот плагин самый востребованный, он хоть и не создает собственного виджета, зато все созданные вами формы имеют свой шорткод. Вы копируете шорткод нужной формы и вставляете в текстовый виджет в режиме "Текст" данный шорткод.
На сайте в сайдбаре появится виджет с готовой формой обратной связи.
Виджеты в WordPress позволяют облегчить пользователям процесс размещения элементов на своем сайте. Существует много различных тем и плагинов для WordPress, которые используют виджеты, дающие возможность пользователям создавать свои собственные макеты. Есть различные плагины для улучшения управления виджетами. В данной статье мы покажем вам, как создать произвольный виджет для своего сайта WordPress.
Что собой представляет WordPress-виджет?
Виджеты создавались с целью обеспечения простого способа управления дизайном и структурой материалов в WP-теме. Виджеты хороши тем, что их можно перетаскивать в сайдбар или в любые готовые к виджетам области своего сайта. Они придают прекрасную гибкость плагинам, благодаря чему их так часто и используют разработчики тем. позволяют разработчикам добавлять функциональность к своим продуктам, давая возможность пользователям обращаться к ней без необходимости написания какого-либо кода.
Конечно, как пользователь, вы всегда можете создавать свои собственные , которые впоследствии вы сможете использовать в любой теме.
Создание виджета в WordPress
Код виджета можно оформить двумя способами: либо добавить его в файл functions.php вашей темы, либо создать отдельный функциональный плагин.
В данном руководстве мы создадим простой виджет, который просто приветствует посетителей. Скопируйте следующий код и поместите его в плагин или в functions.php вашей темы.
// Creating the widget class wpb_widget extends WP_Widget { function __construct() { parent::__construct(// Base ID of your widget "wpb_widget", // Widget name will appear in UI __("WPBeginner Widget", "wpb_widget_domain"), // Widget description array("description" => __("Sample widget based on WPBeginner Tutorial", "wpb_widget_domain"),)); } // Creating widget front-end // This is where the action happens public function widget($args, $instance) { $title = apply_filters("widget_title", $instance["title"]); // before and after widget arguments are defined by themes echo $args["before_widget"]; if (! empty($title)) echo $args["before_title"] . $title . $args["after_title"]; // This is where you run the code and display the output echo __("Hello, World!", "wpb_widget_domain"); echo $args["after_widget"]; } // Widget Backend public function form($instance) { if (isset($instance[ "title" ])) { $title = $instance[ "title" ]; } else { $title = __("New title", "wpb_widget_domain"); } // Widget admin form ?>
" name="get_field_name("title"); ?>" type="text" value="" />
Теперь перейдите в раздел Внешний вид – Виджеты и перетащите виджет WPBeginner Widget в свой сайдбар, чтобы увидеть его в действии.
Довольно просто, не правда ли? Сначала мы создаем произвольный виджет. Затем мы определяем, что именно виджет делает и как он отображается в бэкенде. После чего мы определяем, как следует обрабатывать изменения, сделанные виджетом. Наконец, мы регистрируем и загружаем виджет.
В этом коде некоторые вещи могут вызвать у вас вопросы. Скажем, к примеру, что делает wpb_text_domain. WordPress использует gettext для обработки трансляции и локализации. Так вот: wpb_text_domain и __e указывают gettext на то, что эти строки доступны для перевода. , смотрите в нашем руководстве.
май 21 , 2016
Каждый раз подключая на своих сайтах готовое решение от сервисов вроде disqus или google-аналитики, я удивляюсь простоте интеграции достаточно сложного функционала. Поставил в код 3 строчки javascript-кода - и у тебя уже развернулся блок с комментариями. Еще 2 строчки - и доступна аналитика от гугла или яндекса. Конечно, никакого волшебства при этом не происходит, те самые 3 строчки кода подтягивают с удаленного сервера весь нужный код, и по сути разворачивают небольшое веб-приложение на страницах Вашего сайта. Но как это устроено внутри и как это сделать самому? Разобраться с этим было достаточно интересно, и в итоге у меня получился небольшой виджет, который работает именно по такой простой схеме встраивания и при этом еще выполняют некоторые полезные вещи. Далее подробности.
Зачем нужны виджеты?
Для этой цели хорошо подходят iframe-ы. Это фактически отдельные html-страницы, которые встраиваются в другие страницы, при этом не имея доступа к своему "родителю". То есть в iframe можно встроить наше веб-приложение, которое будет спокойно выполнять свою работу, не вмешиваясь в основной сайт. А что именно будет делать Ваш виджет, строить систему комментариев на странице, показывать прикольную игрушку или рисовать интерактивный рекламный баннер - дело исключительно Вашего вкуса и фантазии.
В этой статье на игрушку мы замахиваться не будем, а рассмотрим, как создать встраиваемый виджет для определения погоды. Конечно, для этого есть много различных погодных сервисов, но нам неинтересно воспользоваться готовым решением. Хочется создать простенький виджет своими руками, чтобы понять, как это вообще работает и в дальнейшем применить знания уже для каких-то полезных вещей. Заодно попутно освежим знания в нативном javascript и php.
Что будем делать?
Мы создадим виджет, который рисует форму с прогнозом погоды на завтра. В качестве примера возьмем только температуру, но как увидите дальше, легко можно будет добавить и другие данные. В виджете будет располагаться информация о температуре на завтра, раскрывающийся список с возможностью выбрать город. Кнопка Обновить будет отправлять запрос на сервер, который в свою очередь обращается на сторонний сервис для определения погоды и возвращает нам нужную инфу. Эти данные мы обрабатываем и возвращаем в браузер клиенту. Где уже клиентская часть виджета перехватывает информацию и выводит ее пользователю.
Здесь мы видим какую-то страницу, где рассказывается, что якобы мы умеем определять погоду. И демонстрируем нашим посетителям формочку, дабы они могли убедиться, что погоду действительно можно узнать прямо здесь.
Я не развлекался с версткой формы, цель статьи не в этом. В реальном мире мы, конечно же, создали бы симпатичную формочку, которая привлекала бы внимание.
Итак, вернемся. Люди узнают погоду, возможно, даже не задумываясь о том, что фактически пользуются другим сервисом. Но все довольны и счастливы, Вы получаете посетителей на свой сайт, клиенты - нужную информацию.
Здесь нужно небольшое уточнение: смысл виджетов в том, чтобы предоставлять уникальный, удобный, интересный функционал. Мы не даем в нашем примере какую-то особенную информацию. Погоду можно узнать где угодно. Но в познавательных целях, так как мы сами пока ничего не умеем делать, возьмем данные по погоде с сервиса Прогноз погоды в России и СНГ . Они любезно предоставляют бесплатный api, коим мы и воспользуемся.
По технологиям
Тоже ничего сложного. Про iframe я уже проговорился. javascript-код будем писать на vanillaJS, без единой дополнительной библиотеки. Даже без jQuery для манипуляции DOM. Наша цель еще состоит и в том, чтобы полученный виджет был максимально легковесным, и ни к чему тащить в браузер пользователя мешок дополнительных библиотек для облегчения своей работы. Поэтому вспомним, как работать с DOM и отправлять ajax-запросы на нативном javascript, и наши клиенты скажут нам спасибо. Серверная часть - пара десятков строк кода на php.
Пишем код. Создаем базовую страницу
Страницу, на которой будет располагаться наш будущий виджет. Напишем там пару строчек текста о том, какие мы классные в плане умения прогнозировать погоду на завтра. Это будет файл index.html - обычная html-страничка. В секции head напишем так:
Webdevkin. Демонстрация виджета Погода
В секции body вот так:
Что здесь из интересного? В файле css/style.css будем хранить стили для страницы (не для виджета!). И в нужном месте создаем iframe..html. Мы убираем у него границу и возможность скроллинга и задаем руками размеры виджета. Конечно, интереснее создать адаптивный, но до этого доберемся позже.
Стили для страницы, без особых изысков:
Body { font-family: Arial; font-size: 14px; } .wrapper { width: 960px; margin: 0 auto; } .weather-widget-container { margin: 30px 0; }
Заготовка для виджета
Виджет представляет из себя обычный html-документ. В чем отличие? Первое - мы не будем заморачиваться с лишними мета-тегами, потому как поисковикам наш виджет не нужен. И второе - и стили, и js-код мы напишем прямо в коде html-страницы. Нам это нужно, чтобы сделать загрузку виджета максимально быстрой, а уменьшение числа запросов к веб-серверу в этом нам поможет. Все, что нужно, мы загрузим одним файлом.
В секции head у нас будет такой код:
В секции body:
Рассмотрим эти блоки подробнее.
Разметка для виджета
Температура на завтра °C
Здесь обычная форма. Сверху небольшая панель, где мы будем выводить температуру. Дальше select с выбором города. Значения value у городов взяты с сервиса meteoservice.ru, где именно, расскажу позже, в разделе, где будем непосредственно получать данные о погоде. И в конце кнопка Обновить. Верстка у нас будет на классах, айдишники проставлены тем элементам, доступ к которым нужен из кода javascript. Префикс wbd- (от webdevkin) используется для удобства, чтобы не путать разметки виджета и основной страницы.
Стили для виджета
html, body, body * { margin: 0; padding: 0; } .wbd-widget, .wbd-widget * { box-sizing: border-box; font-family: Ubuntu; } .wbd-widget { border: solid 1px #333; padding: 20px; color: black; } .wbd-widget__info { color: steelblue; font-size: 16px; text-align: center; } .wbd-widget__form-label { display: block; line-height: 30px; }Стили для виджета максимально просты - Вы можете написать их под себя, как угодно. Не забываем, что стили ставим прямо в html-файл виджета в раздел head - style.
javascript-код виджета.
Напишем класс, в котором будут методы инициализации, привязки событий и получения данных с сервера. Не забываем, что код будем писать на нативном js, так как не хотим обременять пользователей лишним грузом библиотек.
Var WeatherWidget = (function() { // Для выполнения ajax-запросов var XHR = ("onload" in new XMLHttpRequest()) ? XMLHttpRequest: XDomainRequest; // Конструктор виджета function Widget() { this..php"; this.ui = { updateBtn: null, citySelect: null, temperatureSpan: null }; this.init(); } // Обновление данных о погоде Widget.prototype._updateData = function(e) { // Отправка ajax-запроса на сервер } // Инициализация компонентов ui Widget.prototype._initUI = function() { this.ui.updateBtn = document.getElementById("wbd-widget-update"); this.ui.citySelect = document.getElementById("wbd-widget-city"); this.ui.temperatureSpan = document.getElementById("wbd-widget-temperature"); } // Привязывание событий Widget.prototype._bindHandlers = function() { this.ui.updateBtn.addEventListener("click", Widget.prototype._updateData.bind(this)); } // Инициализация виджета Widget.prototype.init = function() { this._initUI(); this._bindHandlers(); this._updateData(); } // Возвращаем класс виджета return Widget; })(); new WeatherWidget();
Что здесь происходит? Мы создаем модуль на основе замыкания WeatherWidget, внутри оного пишем класс Widget, в прототип которого закидываем нужные методы и возвращаем его из замыкания. Последней строкой мы создаем экземпляр виджета - new WeatherWidget();
Переменная XHR нужна для выполнения ajax-запросов. В конструкторе инициализируем свойство url, по которому будем получать данные о погоде. Также есть объект ui, в котором хранятся 3 поля - те самые элементы DOM, к которым нам нужен доступ из js-кода. Инициализируются они позже, в методе _initUI(). Метод init() вызывает инициализацию ui, привязку событий и обновление данных с сервера (мы же хотим, чтобы при отрисовке виджета пользователь сразу видел погоду без нажатия на Обновить). В _bindHandlers привязывается метод _updateData к клику на кнопку Обновить. Это единственная "интерактивная" часть нашего виджета.
Обратите внимание на конструкцию Widget.prototype._updateData.bind(this). Здесь явным образом привязываем контекст - нам нужно, чтобы в методе _updateData this всегда указывал на экземпляр класса Widget. Сейчас будет видно, зачем - рассмотрим код метода _updateData
Получение данных с сервера, метод _updateData
// Обновление данных о погоде Widget.prototype._updateData = function(e) { e && e.preventDefault(); var xhr = new XHR(), city = this.ui.citySelect.value, temperatureSpan = this.ui.temperatureSpan, data = "city=" + city, resp; xhr.open("POST", this.url, true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send(data); xhr.onreadystatechange = function() { if (this.readyState != 4) return; if (this.status != 200) { console.log("Request error"); return; } resp = JSON.parse(this.responseText); temperatureSpan.innerHTML = resp.temperature; } }Обращаю внимание, что в параметры метода передаем свойство e (event).
Оно нужно, чтобы сделать preventDefault в самом начале, дабы не перезагрузить наш виджет
(иначе сработает submit формы).
Но делаем мы это такой строчкой
e && e.preventDefault();
Эта дополнительная проверка на наличие параметра e нужна, потому что когда мы вызываем this._updateData(),
параметр e будет равен undefined, и соответственно e.preventDefault() выкинет исключение.
После этого мы создаем нужные переменные, объект для ajax-запроса, выбранный город и DOM-элемент, в который выводим значение температуры, полученной с сервера. data будет отправляться в ajax-запросе, resp - это ответ от сервера. Дальше мы открываем соединение и отправляем данные на сервер. Дожидаемся ответа 200 от сервера и выводим полученную температуру в span. Условимся, что от сервера приходит json-строка в формате {"code": "success", "temperature": "диапазон температур"}. Традиционно обработку ошибок оставлю на Вашу совесть, все делают по-разному. И наконец, нам осталось узнать, как получить данные о погоде с нашего сервера.
Как узнавать погоду?
Рекомендую пользоваться этим сервисом с осторожностью. Когда статья уже почти была готова, неожиданно поменялся формат ответа по запросу о погоде. Отрубился вывод прогноза по времени суток, который я изначально хотел продемонстрировать в виджете. Пришлось частично переписывать код и уменьшать функциональность виджета, что меня не порадовало. Не знаю, как часто происходят у них такие вещи, но пользоваться сервисом в реальном приложении не советую.
Пишем php-код для получения информации о погоде
Как брать данные, уже понятно, алгоритм прост: вытаскиваем из $_POST параметр city - выбранный город, формируем строку вида http://xml.meteoservice.ru/export/gismeteo/point/$cityId.xml. Это путь к файлу с погодой. Отправляем на него get-запрос curl-ом. Полученный ответ парсим и вытаскиваем из него нужные параметры: минимальная и максимальная температуры. Полученные числа отдаем в json-объекте обратно в браузер.
$cityId = (int)$_POST["city"]; $url = "http://xml.meteoservice.ru/export/gismeteo/point/$cityId.xml"; $temperature = ""; if ($curl = curl_init()) { curl_setopt($curl, CURLOPT_URL, $url); curl_setopt($curl, CURLOPT_RETURNTRANSFER, true); $result = curl_exec($curl); curl_close($curl); $xml = simplexml_load_string($result); $object = $xml->REPORT->TOWN->FORECAST->TEMPERATURE; $temperature = $object["min"] . "-" . $object["max"]; } echo json_encode(array("code" => "success", "temperature" => $temperature));
Поясню про simplexml_load_string - эта функция создает xml-объект, который мы уже можем парсить.
А создается объект из строки xml, которую мы получаем от сервиса погоды.
REPORT->TOWN->FORECAST->TEMPERATURE - это путь по узлам xml, чтобы добраться до нужных значений температуры.
Пройдите по ссылке выше (московская погода) и наглядно увидите эти пути.
Если что-то непонятно, спрашивайте в комментариях.
Итого
И на этом все! Мы создали несложный виджет для получения информации о погоде. Главная его особенность в том, что его очень легко встроить на любой сайт, достаточно всего лишь вставить в html-код такие строки
Полагаю, что есть масса вариантов применения таких виджетов, от сбора различной информации до рекламных баннеров. А у Вас есть идеи, где это можно применить? Поделитесь в комментариях!
AppWidget, или просто «виджет» - один из самых эффектных и удобных элементов пользовательского интерфейса в операционной системе Android, который можно добавить на рабочий стол для быстрого доступа к тем или иным функциям соответствующего приложения. В данной статье мы разберемся, как собственноручно создать свой виджет.
Что виджет представляет из себя конструктивно? Виджет нужен для отображения той или иной информации, связанной с приложением, к которому он относится, или же для оперативного взаимодействия с данным приложением напрямую через рабочий стол. Самый простой пример – часы на рабочем столе. Естественно, виджеты без труда можно добавлять или удалять с рабочих столов.
Качественно выполненные виджеты заметно оптимизируют взаимодействие с устройством. Более того, очень часто самые удобные виджеты занимают на рабочем столе минимум пространства, и при этом наиболее информативны. Практически любой пользователь будет стараться разместить на рабочих столах своего Android-гаджета максимальное количество информации, и важный момент заключается в том, что пространство ограничено.
Начнем создание виджета мы с дизайна. Благо, компания Google предоставила весьма полезные UI Guidelines для разработчиков программного обеспечения, где подробно описан процесс создания дизайна и основные принципы эргономичности. Есть также и отдельная официальная инструкция для создания виджетов, с которой можно ознакомиться по ссылке: //developer.android.com/guide/practices/ui_guidelines/widget_design.html .
Виджет, занимающий одну «клетку» на рабочем столе, имеет разрешение 80х100 точек, соответственно, для создания продолговатый виджет длиной в 4 клетки и высотой в одну, то нужно, соответственно, 320х100 пикселей. Такой размер мы и возьмем за основу создаваемого нами виджета.
Теперь виджет нужно нарисовать. В принципе, виджет вполне может и не иметь никакой графической части, и отображать только текст или элементы управления, без фона и рамки, но, естественно, красивый и приятный глазу виджет просто обязан иметь качественный дизайн. Поэтому нарисуем фон. За основу возьмем фон из упомянутого выше UI Guideline. Открываем доступную нам заготовку в Photoshop или другом графическом редакторе и делаем всё, что заблагорассудится, после чего сохраняем полученное изображение в формате.png. Нужный нам формат PNG-24, с 8-битным цветом и прозрачным фоном. Вот и готова основа для нашего виджета.
Теперь перейдем к созданию программной части. Виджет может не иметь программной части. Проще говоря, в меню добавления виджетов он будет, но в основном меню приложений – нет. Мы создадим виджет именно такого типа. Создаем новый проект, и называем его для удобства так, чтобы основной класс имел имя widget.java.
Редактируем AndroidManifest . xml . Объявляем наш виджет:
package=»com.example.widget»
android:versionCode=»1″
android:versionName=»1.0″>
android:resource=»@xml/widget_info» />
Теперь редактируем widget.java. Тут необходимо описать, как будет реагировать виджет на различные условия. Класс AppWidgetProvider имеет такие методы:
onUpdate – метод вызывается при создании виджета, а также по истечении заданного времени. Время задается в конфигурационном файле данного виджета. Отметим, что используется чаще всего.
onDeleted – метод выполняется при удалении виджета с рабочего стола.
onEnabled – метод вызывается при первой активации виджета. Но если добавляется еще один точно такой же виджет, данный метод уже не выполняется.
onDisabled – метод выполняется тогда, когда удаляется последняя копия виджета с рабочего стола. Соответственно, данный метод является обратным onEnabled.
onReceive – метод вызывается одновременно со всеми остальными. Зачастую не используется вообще.
Сильно углубляться в программную часть виджета мы не будем, а потому не будем переполнять наш пример какими-либо обработчиками, а просто реализуем весь функционал посредством Layouts. Необходимо следующим образом объявить класс AppWidgetProvider:
package com.example.widget;
import android.appwidget.AppWidgetProvider;
public class widget extends AppWidgetProvider{
}
Далее, описываем наш виджет – это нужно для того, чтобы мобильный аппарат понимал, с чем имеет дело. Для этого нужно создать папку xml в папке res . В ней создаем файл с именем widget _ info . xml . Открываем созданный файл и прописываем в него вот такой код:
android:minWidth=»294dp»
android:minHeight=»72dp»
android:updatePeriodMillis=»0″
android:initialLayout=»@layout/widget»>
Приведем краткое описание заданных параметров:
minWidth – минимальная необходимая для работы виджета ширина.
minHeight – минимальная необходимая для работы виджета высота.
updatePeriodMillis – период, за который происходит обновления виджета, указывается в миллисекундах. Параметр весьма полезен, так как по истечении указанного временного промежутка срабатываем метод onUpdate объекта AppWidgetProvider.
initialLayout – параметр указывает на ресурс с описанием интерфейса нашего виджета.
Формула подсчета размеров виджета имеет такой вид: (количество клеток * 74) - 2.
Приступим к описанию интерфейса создаваемого нами виджета. Здесь-то нам и пригодится созданный ранее фон. Импортируем рисунок фона в папку dwawable (или во всех три папки drawable для разных разрешений экрана). В папке layout создаем файл с именем widget . xml . Интерфейс описывается как для обычных Activity, но есть некоторые ограничения. Допустимы для использования такие элементы:
Создадим LinearLayout, к которому применим созданную картинку-фон и добавим для примера AnalogClock. Сами часы в рамку не влезут, но как наглядный пример вполне сгодятся. Итак:
android:id=»@+id/Widget»
android:layout_height=»fill_parent»
android:orientation=»horizontal»
android:gravity=»center_vertical»
android:background=»@drawable/frame»>
android:layout_width=»fill_parent»
android:layout_height=»wrap_content»/>
Виджет представляет собой небольшое приложение, которое может быть установлено на веб-странице. Эта статья-рецензия содержит инструкции, которые помогут вам добавить такое приложение на своем сайте.
Виджет , также называющейся веб-гаджетом, фрагментом, портлетом и т.д., является элементом графического интерфейса пользователя, который предоставляет информацию и позволяет пользователю взаимодействовать с приложением. Например, он может быть использован, чтобы позволить пользователям проигрывать интерактивные игры, а также добавлять и изменять содержимое веб-сайта. Встраивание этих замкнутых кодов на веб-странице, блоге или сайте социальной сети может сделать их более интерактивными, так как личный контент может быть превращен в веб-приложения, которые могут использоваться на любом сайте – не без пользы для Вас и посетителей.
Откуда берутся виджеты для сайтов
Если вы хотите поставить веб-гаджет на свой веб-сайт, блог или на свой профиль на любом социальном медиа сайте, вы сначала должны найти такие приложения. Есть некоторые сайты, которые позволяют пользователям создавать такие приложения основываясь на собственной базе данных. Вы можете просто вставить код и поместить его на своем сайте. Вы можете найти их в каталогах виджетов, таких как 101widgets.com (http://101widgets.com/) или Babywonder.ru (http://widgets.babywonder.ru/) или создать их с помощью Widget editor (специального Интернет сервиса для самостоятельного создания виджетов с индивидуальным подходом).
Как сделать виджет
Помимо готовых виджетов существуют сервисы, реализующие ваш творческий потенциал, предоставляя возможность создать виджет самостоятельно. Например, Вы с лёгкостью сделаете блок слайд-шоу с выбранными картинками или практичный вывод любого ресурса. Как раз, о втором случае и пойдёт речь ниже…
Прежде всего, следует поискать сайты, которые позволяют пользователям сделать веб-гаджет. Посидите в интернете и перейдите к любому из этих сайтов. На странице веб сервиса найдите кнопку «Создать» или «Сделать» (возможно, что Интернет сервис будет англоязычным, поэтому ориентируйтесь по визуальному отображению элементов). Вы должны нажать на эту кнопку. Теперь следующий шаг, следуя подсказкам мастера настройки, который затребует ввести в поле URL RSS потока (адрес RSSленты веб сайта) вставьте заранее скопированный адрес ленты (например, для блогов на WordPress, он выглядит так « »). После этого нажмите на кнопку «Продолжить». Для выбора цвета фона, вы можете использовать селектор цвета. После того, как выбор цвета будет сделан, Вы можете назвать веб гаджет, введя имя в текстовом поле и совместить его. Затем нажмите на «Сохранить виджет», чтобы получить
