Как создать свой собственный виджет в WordPress? Создание виджета для рабочего стола

Считается, что основная задача вебмастера – привлечение аудитории пользователей. Но это не совсем так. Можно сколь угодно много привлекать аудиторию, но если среди неё не будет лояльной – результаты конверсии опечалят. Чтобы увеличить активность пользователей при взаимодействии с сайтом, стоит сделать для него виджет.

О сколько виджетов нам разных…

Если обратиться к словарю, выяснится, что виджет (widget) – небольшое графическое приложение, встраиваемое в пользовательский интерфейс браузера или сайта, и показывающее какую-либо информацию из какого-нибудь места. Именно поэтому они могут быть очень разнообразны. Когда речь заходит о создании виджета для сайта, обычно под этим подразумевается одно из трех графических приложений:

Что ж, разберемся, как создать каждый из этих виджетов – и зачем он вам вообще нужен.

Создание виджета для Визуальных закладок (для движков Wordpress и других)

Сервис Визуальных закладок от «Яндекс» в последнее время становится всё более популярным. Он удобен, красив и функционален. Визуальные закладки встраиваются в браузеры на движке Chromium из соответствующего магазина, а также входят в Яндекс.Браузер прямо «из коробки».

Визуально этот сервис являет собой табло со ссылками на сайты. Если туда добавить линк на собственную веб-страницу, в подавляющем большинстве случаев она будет выглядеть невероятно уныло – просто доменное имя на цветном фоне.

Чтобы сделать его более привлекательным для пользователей, стоит совсем немного потрудиться. А именно – «поколдовать» с API Табло.

Но сначала требуется создать логотип сайта. Картинка должна соответствовать следующим правилам:

• Формат.PNG;
• Размер 150х60 пикселей;
• Прозрачный фон.

Сам виджет пишется на XML. В блокноте набирается следующий код:

“version”: “1.0”,

“api_version”: 1.

“logo”: “http://домен_вашего_сайта/адрес_файла_с_логотипом/название_файла_с_лого.png”,

“color”: “#номер_желаемого_цвета_в_HEX”,

Следующий этап – немного поколдовать с PHP. Ну, или HTML – в зависимости от того, на каком языке написан движок сайта. Если хедер находится в header.php, то изменения вносятся в этот файл. А если в каком-нибудь другом месте – нижеследующую строчку нужно вписать, соответственно, туда.

А вот код для включения:

Этот код нужно вписать в хедер – то есть между открывающим и закрывающим HTML-тегами .

Виджет в Табло Визуальных закладок обновляется автоматически. Но не мгновенно. Любители покодить могут даже обновляемым его сделать, выводя различные уведомления.

Виджет сайта для главной страницы Яндекс

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

Создать виджет для сайта несложно. Не нужно даже HTML изучать! Для такого виджета требуется, чтобы у сайта была RSS-лента. У движка Wordpress она имеется по умолчанию и располагается по следующему адресу:

http://домен/feed

А вот для других движков потребуется создавать её самостоятельно.

Итак, виджет для Яндекса делается в два простых шага:

1. Зайти на http://wdgt.yandex.ru/widgets и ткнуть на кнопку «Создать виджет»;
2. Заполнить панели с названием виджета, описанием, картинкой и адресом RSS-ленты.

А ещё этот виджет можно разместить на вашем сайте – на боковой панели, например, или в «вылетающем окошке» pop-up.

Виджет Facebook

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

Почему? Причина тут проста. Именно в Facebook проще всего организовать вирусное продвижение контента среди «интеллектуальной элиты». Различные профессионалы в самых разных областях предпочитают пользоваться именно этой социальной сетью, а значит – тут проще всего создать лояльную, «думающую» аудиторию, от которой даже можно подчерпнуть какую-нибудь новую информацию.

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

Итак, вот она, пошаговая инструкция о том, как создать виджет для сайта . Только предполагается, что у вашего сайта – или компании – уже есть соответствующая страница на Facebook, созданная человеком, у которого также есть аккаунт в Facebook:

1. Нужно зайти от имени этого человека (авторизоваться через его логин и пароль) и нажать кнопку «Редактировать профиль» на главной странице профиля;
2. Пролистать страницу до конца и открыть «Разработчикам»;
3. На открывшейся странице отыскать кнопку Sharing, сопровождающуюся знаком Like, и смело в неё ткнуть;
4. Затем требуется выбрать «Социальные плагины»;
5. Найти Like Box;
6. Откроется страница настройки виджета, где можно установить его размеры, цветовую схему, контент и визуальную составляющую;
7. Затем нажатием кнопки Get Code можно получить код, выбрав язык разметки, максимально совместимый с движком сайта.

Виджет для Wordpress

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

Второе – место непосредственного размещения виджета, например, сайдбар. Туда требуется скопировать CSS-код с div-блоком, в котором расположена ссылка на скрипт.

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

Copyright © 2016 "Design ONE"

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

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

Для начала, нам нужно создать файл, который и будет отвечать за вывод виджета. Скажу сразу все можно писать сразу в файл пользовательских функций Вордпресс - functions.php . Но я не люблю засорять его лишним кодом, поэтому посоветую подключать отдельный файл. В папке с с темой создайте файл, например widget_gnat_thumb.php . Далее нужно подключить этот файл в functions.php . Для этого открываем functions.php и в его конец, перед закрывающим PHP тегом - ?> , если его нет, то просто в конце, добавляем такую строку:

Include("widget_gnat_thumb.php");

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

Пока не добавим весь код, проверить работу виджета не получится, потому как у Вас будет выбивать ошибку. Так что старайтесь внимательно все читать, следовать инструкциям и ничего не пропустить, дабы потом не ломать голову, если что-то не получится. Метод, 100% рабочий и код взят с работающего виджета.

Здесь есть важные моменты. Во второй строке задаем имя нашему виджету - Gnat_thumb_Widget . В пятой строке мы задаем ID нашего виджета, в данном случаи это - widget_gnat_thumb . Если будите создавать много виджетов, то у каждого должно быть свое, то есть уникальное.

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

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

Public function update($new_instance, $old_instance) { $instance = array(); $instance["title_thumb"] = strip_tags($new_instance["title_thumb"]); $instance["cat_thumb"] = strip_tags($new_instance["cat_thumb"]); $instance["numper_post_thumb"] = strip_tags($new_instance["numper_post_thumb"]); $instance["size_thumb"] = strip_tags($new_instance["size_thumb"]); return $instance; } public function form($instance) { ?>

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

• title_thumb - Название виджета, которое задается при его активации и выведется на странице сайта. Вам больше он знаком как - Заголовок .
• cat_thumb - Это настройка выбора категории из которой будут выводится наши записи. То есть мы будем выбирать рубрику и от этого будет зависеть наш список.
• numper_post_thumb - Данная настройка будет задавать количество записей что будет выводится. Мы сделаем просто текстовое поле, где нужо будет вводить число.
• size_thumb - Это настройка, которая предложит выбрать размер миниатюры (картинки) рядом с названием записи.

Как вы поняли, чтобы добавить настройку, нужно добавить строку и указать название настройки

$instance["название_настройки"] = strip_tags($new_instance["название_ настройки"]);

Теперь приступим к выводу данных настроек. Это то что вы увидите в админке в разделе Виджеты . Пока что у нас есть виджет и его видно в списке других виджетов. У него есть имя и описание. На картинке выше видно как это выглядит.

Первая настройка выведет поле - Заголовок . добавляем дальше следующий кусок кода.

">Заголовок " name="get_field_name("title_thumb"); ?>" type="text" value="" />

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

Теперь перейдем к следующей настройке. Это будет выбор рубрики. Тут мы используем выпадающий список select. Это удобно и быстро. Нажали на список и выбрали рубрику. Если Вам не нужно будет выбирать рубрику, а просто выводить последние записи со всего сайта, то данный пункт можно опустить.

Код, который нужно добавить в наш файл виджета, будет следующим:

">Выберите рубрику " id="get_field_id("cat_thumb"); ?>"> term_id) . """ . selected($instance["cat_thumb"], $link_cat->term_id, false) . ">" . $link_cat->name . "\n"; } ?>

Как видите здесь так же везде указано название настройки - cat_thumb . Так что если вы ввели в начале свое название, то и тут оно должно быть соответственным. Данный список, автоматически сгенерирует все категории. В админке это будет выгладить так:

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

Как и в предыдущих настройках, в коде ниже указано везде одно название - numper_post_thumb . Следующий код добавляем к нашему файлу:

">Количество постов " name="get_field_name("numper_post_thumb"); ?>" type="text" value="" />

Далее очередь последней настройки. Она будет задавать размер миниатюры, картинки которая будет рядом с названием записей. Данная настройка мне нравится тем, что можно выбирать размер в зависимости от нужд, размера сайдбара и тд. То есть не обязательно строго задавать размер в стилях. Можно менять хоть каждый день в зависимости от настроения. Как обычно, добавляем код:

">Выберите ширину миниатюры " id="get_field_id("size_thumb"); ?>"> ... 45 75 100 125

Как уже упоминал, тут тоже используется выпадающий список option. Мы задаем несколько пунктов. первый неактивный, а далее задаем строгие размеры. если пожелаете, можете всегда поменять на свои или увеличить количество.

Еще момент. В value , я задал значения size_1,size_2,size_3 и тд. Эти значения в будущем будут классами. То есть каждому классу будут заданы свои стили, что и будут регулировать размер миниатюр. В настройках виджета в админке появится еще один элемент:

С настройками закончили, теперь перейдем к выводимой части. То есть к тому, что будет видно на сайте, как на картинке в самом начале статьи. По сути мы добавим разметку которая выведется в виде HTML кода на сайте. Для этого добавляем дальше еще кусок кода:

have_posts()) { $populargb->the_post(); ?>
• ">
  " title="">
  " title="">Смотреть больше

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

• Тут мы выводим наше заглавие. Как вы поняли, чтобы вывести настройку в HTML коде, нужно просто добавить вод такой код и внутри указать название настройки.

  То что Вы зададите под этим названием выведется при таком вызове.

• Дальше идет ul список, который собственно и выводит название записей с миниатюрами. Для вывода, я использую WP_Query. Подробно останавливаться на том как это работает не буду, если хотите можно прочитать в статье - или . Тут везде применяется WP_Query.

  Для WP_Query задаем следующие параметры:

  • posts_per_page= - Это количество выводимых записей. Естественно, ему присваиваем нашу настройку numper_post_thumb.
  • cat= - Это параметр отвечающий за категорию из которой будет выбирать свои записи цикл. Тут присваиваем cat_thumb.
• Дальше идет уже разметка выводимой записи. По коду видно. что мы выводим Миниатюру, название записи, дату публикации и ссылку - Смотреть больше . Можете менять, добавлять и удалять все в зависимости от потребностей.
• Наша миниатюра завернута в и ему присвоен class="thumb и рядом подключение настройки. То есть присвоено два класса, один постоянный - thumb и второй задается в настройках виджета. Это как раз то о чем я писал выше при описании настроек размера миниатюры. Тоесть в зависимости от того, какой размер миниатюры Вы выберите, такой и класс присваивается. Например, если указать размер 45 на 45, то присваивается класс - size_1 . В HTML коде будет такой вид - class="thumb size_1".

Вот и весь вывод виджета. Если разобраться то сложного абсолютно ничего, просто нужно иметь хоть какой-то опыт. Для новичка, конечно же все это сплошной код Да Винчи:).

Осталось добавить последнюю часть кода. Мы зарегистрируем наш виджет и можно будет проверить его в работе.

В четвертой строке указываем имя виджета, которое указали еще в самом начале - Gnat_thumb_Widget

Теперь весь код целиком:

__("Виджет для вывода записей с маленькими миниатюрами", "text_domain"),)); } public function update($new_instance, $old_instance) { $instance = array(); $instance["title_thumb"] = strip_tags($new_instance["title_thumb"]); $instance["cat_thumb"] = strip_tags($new_instance["cat_thumb"]); $instance["numper_post_thumb"] = strip_tags($new_instance["numper_post_thumb"]); $instance["size_thumb"] = strip_tags($new_instance["size_thumb"]); return $instance; } public function form($instance) { ?>

">Заголовок " name="get_field_name("title_thumb"); ?>" type="text" value="" />

">Выберите рубрику " id="get_field_id("cat_thumb"); ?>"> term_id) . """ . selected($instance["cat_thumb"], $link_cat->term_id, false) . ">" . $link_cat->name . "\n"; } ?>

">Количество постов " name="get_field_name("numper_post_thumb"); ?>" type="text" value="" />

">Выберите ширину миниатюры " id="get_field_id("size_thumb"); ?>"> ... 45 75 100 125

have_posts()) { $populargb->the_post(); ?>
• ">
  Смотреть больше

Чтобы задать стили и отобразить более мение правильно задуманное, то нужно добавить вот такие строки в файл стилей style.css .

Titlebg{background:#eee;line-height:35px;text-align:center;letter-spacing:-0.2px;font-size:16px;margin-bottom:20px;} .widget{margin-bottom:25px;box-sizing:padding-box;padding:0 5px;} .widget ul{font-size:11px;margin:0;padding-right:15px;text-transform:none;line-height:15px;} .widget ul ul{margin-left:15px;} .widget ul li{color:#222;padding:5px 0;border-bottom:1px dotted #ddd;} .widget .comment-author-link{font-weight:bold;} .widget ul li:last-child{border-bottom:none;} .widget a{text-decoration:none;color:#444;font-weight:normal;} .widget a:hover,.widget a:focus,.widget a:active{text-decoration:underline;} .gnat_thumb{padding:5px;} .gnat_thumb a{font-size:11px;line-height:11px;margin-bottom:5px;display:block;} .thumb{float:left;border:1px solid #eee;padding:2;margin:0 10px 10px 0;} a.more_read{font-size:11px;text-align:right;font-weight:bold;} .size_1 img{width:45px;height:auto;} .size_2 img{width:75px;height:auto;} .size_3 img{width:100px;height:auto;} .size_4 img{width:125px;height:auto;}

Данные стили примерны и могут не соответствовать тому что Вам надо или конфликтовать с уже имеющимися на Вашем сайте стилями, поээтому рекомендую использовать лишь последние 4 строки, которые нужны для правильного отображения размеров миниатюр:

Size_1 img{width:45px;height:auto;} .size_2 img{width:75px;height:auto;} .size_3 img{width:100px;height:auto;} .size_4 img{width:125px;height:auto;}

Статья получилась, как и обещал, не маленькой. Старался написать понятнее, так что если что не так извините. Более подробно отвечу в комментариях.

На этом все, спасибо за внимание. 🙂

Доброго времени суток всем читателям блога сайт! Не так давно один мой знакомый попросил меня разобраться с содержанием виджетов Яндекса, в том числе и с виджетом визуальных закладок в Яндекс Браузере. А именно – он хотел поменять стандартный виджет в визуальных закладках на свой, благо, возможности для этого предоставлены API Табло от Яндекса. Мне эта мысль показалась интересной, и я взялся за работу.

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

Виджет я установил только вчера, и на сегодняшний день он обновился только в Mozilla и в Файерфоксе. Возможно, для остальных браузеров требуется больше времени, или просто нужно несколько раз почистить кэш, чего я пока делать не хочу – много разных полезностей у меня в кэше спрятано.

Для тех, кто еще не понял, о чем речь, покажу стандартную картинку визуальных закладок Яндекс Браузера:

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

Именно эту картинку я и поставил вчера вместо стандартной по просьбе клиента. Сразу понятно, о чем речь, да и логотип что-то напоминает, не правда ли? Качество СССР – вот что хотел я сказать этим логотипом. Теперь такую картинку будут видеть все, кто захочет оставить этот сайт в визуальных закладках. Думаю, вам будет интересно, как можно добиться такого результата. Это совсем несложно (по моим меркам), и я как можно подробнее опишу все действия.

Как поменять виджет на свой

Итак, как я уже говорил, пользователи с браузерами, имеющими в функционале визуальные закладки, смогут увидеть ваш новый виджет. Это Мозилла, Яндекс Браузер, Google Chrome, Internet Explorer, конечно (да, в нем тоже можно установить визуальные закладки, хотя опционально их и нет), и еще несколько малоизвестных браузеров. Делается это при помощи API Табло, и инструкцию от Яндекса вы можете , а я постараюсь объяснить все своими словами.

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

1. Можно изменить фон виджета для сайта на любой.
2. Можно вставить свой логотип – он должен быть обязательно в формате PNG, иметь размер 150х60 px и обязательно быть с прозрачным фоном.
3. Также вы можете сделать вывод значков для разных уведомлений, но я не стал этого делать. Точнее, я попробовал, но все получается слишком мелким, неприятным на вид и расплывчатым в общей массе.

Чтобы сделать свой виджет, вам нужно будет создать новый файл с именем manifest и с расширением json. То есть – файл manifest.json. Его необходимо будет положить в корень сайта – это там, где лежит ваш robots.txt, и заполнить его таким кодом:

{ "version": "1.0", "api_version": 1, "layout": { "logo": "http://вашсайт.ru/wp-content/themes/тема/images/logo.png", "color": "#сссссс", "show_title": false } }

А подключается к вашему сайту этот файл очень просто – в файле header.php вашего шаблона темы, между тэгами и нужно вставить такую строчку:

Теперь о том, что содержит код файла manifest.json:

1. version - версия виджета. Здесь вы можете указать любую цифру или число, хоть год своего рождения. Это будет всего лишь означать версию виджета.
2. api_version - номер версии API Табло. На сегодняшний день есть только версия 1.
3. logo - абсолютный (то есть, полный) адрес, где лежит ваша картинка. Требования к логотипу я уже обрисовал выше.
4. color - цвет фона виджета, поскольку логотип делается обязательно с прозрачным фоном.
5. show_title - вывод заголовка сайта. Можно указать либо false - не показывать, либо true - показывать. Если заголовок слишком длинный (как в моем примере), то лучше его не выводить – будет смотреться коряво. Поэтому заголовок я сразу нарисовал в логотипе.

О настройках уведомлений вам лучше почитать в инструкции, ссылку на которую я дал выше, а если вы не сильны в программировании — лучше оставьте все, как есть – ваш виджет и так будет красивым. Новый виджет на Яндекс Табло обновится автоматически, но через определенное время, а через сколько – мне так и не удалось установить.

Будем считать, что через 12 часов – я вечером сделал виджет, а утром он уже был в закладках Мозиллы. В Яндекс Браузере он тоже обновился только утром. Но, чтобы убедиться в работоспособности вашего нового виджета, совсем не обязательно ждать столько времени. Есть быстрый способ.

Просто вбейте в адресную строку в Яндекс Браузере (в других браузерах эта фишка не сработает — пробовал) адрес chrome://tableau-widget и скопируйте в открывшееся адресное поле адрес вашего нового файла manifest.json, после чего нажмите кнопку «Проверить»:

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

По крайней мере, хоть я и не дизайнер, но моего знакомого этот виджет порадовал, и он остался доволен – и логотип есть, и заголовок сайта присутствует, и цветовая гамма соблюдена, почти как на сайте. Так что дерзайте – работы немного, а результат, как говорится, на лице 😎 . И до встреч в новых публикациях!

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

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

Откуда берутся виджеты для сайтов

Если вы хотите поставить веб-гаджет на свой веб-сайт, блог или на свой профиль на любом социальном медиа сайте, вы сначала должны найти такие приложения. Есть некоторые сайты, которые позволяют пользователям создавать такие приложения основываясь на собственной базе данных. Вы можете просто вставить код и поместить его на своем сайте. Вы можете найти их в каталогах виджетов, таких как 101widgets.com (http://101widgets.com/) или Babywonder.ru (http://widgets.babywonder.ru/) или создать их с помощью Widget editor (специального Интернет сервиса для самостоятельного создания виджетов с индивидуальным подходом).

Как сделать виджет

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

Прежде всего, следует поискать сайты, которые позволяют пользователям сделать веб-гаджет. Посидите в интернете и перейдите к любому из этих сайтов. На странице веб сервиса найдите кнопку «Создать» или «Сделать» (возможно, что Интернет сервис будет англоязычным, поэтому ориентируйтесь по визуальному отображению элементов). Вы должны нажать на эту кнопку. Теперь следующий шаг, следуя подсказкам мастера настройки, который затребует ввести в поле URL RSS потока (адрес RSSленты веб сайта) вставьте заранее скопированный адрес ленты (например, для блогов на WordPress, он выглядит так « »). После этого нажмите на кнопку «Продолжить». Для выбора цвета фона, вы можете использовать селектор цвета. После того, как выбор цвета будет сделан, Вы можете назвать веб гаджет, введя имя в текстовом поле и совместить его. Затем нажмите на «Сохранить виджет», чтобы получить веб приложения.

Сегодня мы разберемся в том, как создать на Android устройство свой собственный виджет (Widget). Виджет - это всем знакомый элемент рабочего стола, с помощью которого можно получать доступ к некоторым функциям какого - нибудь приложения: просматривать новости в окне виджета, прогноз погоды, обновление новостей на разных сервисах, управлять разными функциями аппарата (блокировать экран, включать радио, Интернет и многое многое другое). На этот раз мы не будем создавать чего то грандиозного и очень полезного, типа там фонарика :), а сделаем простенький виджет, который будет реализован в виде кнопки, при нажатии на которую мы, с помощью стандартного браузера, попадаем на всеми любимый сайт Конечно, вы сможете настроить любой желаемый вами сайт.

Создаем новые проект, выбираем Blank Activity, минимальная версия Android 2.2+. При создании виджета, первое дело - создать объект AppWidgetProviderInfo , в котором мы укажем xml файл, из которого будет заполняться вид самого виджета. Для этого, создадим в проекте папку res/xml и в ней создаем новый xml файл по имени widget.xml со следующим содержимым:

Теперь перейдем в файл activity_main.xml и создадим интерфейс нашего виджета, он будет состоять из кнопки Button :

Как видите, мы создали обычную кнопочку, вот она и будет нашим виджетом:

То есть, можете потом сделать вместо этой кнопочки все, что вам угодно.

Перейдем к работе с кодом в файле MainActivity.java . Он должен наследоваться от класса AppWidgetProvider , для которого существует его основной метод onUpdate () . В этом методе нам нужно обязательно определить два объекта: PendingIntent и RemoteViews . В конце их использования нужно вызвать метод updateAppWidget() . Код файла MainActivity.java :

Чтобы наш виджет успешно заработал, нужно немного магии в файле манифеста AnroidManifest.xml . Он должен выглядеть вот так:

Как вы догадались, виджет определяется в теге <receiver > .

Единственное, что осталось подправить - отредактировать файл strings.xml , добавив туда используемые нами строчки:

Внимание! Android Studio может заругаться на вас при запуске программы, требую указать default activity. Выберите строчку "Не запускать activity" (Do not launch Activity):

Теперь устанавливаем приложение на эмулятор либо устройство, добавляем виджет на рабочий стол:

И жмем по нему:

Как видите, все отлично работает.

Итак, в этом уроке мы создали простенький Android Widget, состоящий из кнопки Button, при нажатии на наш виджет мы создаем простой http запрос и переход по заданной URL ссылке. Можете поупражняться с какими-нибудь другими элементами, а не кнопкой, и придумать им интересный функционал. Удачи!