Статья размещена автором Бетке Сергей Сергеевич

Валютный калькулятор (конвертор) к себе в wordpress (или Widgets on Pages и CSS)

Валютный калькулятор (конвертор) к себе в wordpress (или Widgets on Pages и CSS) Помогаю любимой жене в организации собственного бизнеса по вечерам. Возникла необходимость разместить на сайте курсы валют, а лучше – сразу калькулятор. Ну что же, разберёмся, как это сделать в WordPress.

На первый взгляд задача кажется тривиальной. Либо внедряем сами скрипт, либо ищем плагин. Учитывая тот факт, что времени крайне мало, ищем плагин. И находим — Currency Converter Rub Widget. Указанный плагин один раз в день запрашивает курсы валют с сайта http://www.cbr.ru/scripts/XML_daily.asp?date_req=date. Вроде бы как – то, что надо.

Однако, если бы всё было так просто – стал бы я писать эту статью?

Пора и о ложке дёгтя поговорить. Указанный плагин предлагает нам виджет для установки в sidebar. Всё бы ничего, да sidebar для него в моей теме узковат, да и хотелось мне калькулятор разместить не в sidebar, а на странице. Сделаем.

Валютный калькулятор (конвертор) к себе в wordpress (или Widgets on Pages и CSS) Чтобы не пакостить в чужом коде (очень уж мне нравится возможность обновлять плагины одним щелчком мыши), решил воспользоваться ещё одним плагином, позволяющим размещать виджеты на страницах и в статьях, а не в sidebar — Widgets on Pages. Установил плагин, активировал. Идём в консоли Параметры \ Widgets on Pages. Устанавливаем необходимое нам количество виртуальных sidebar (мне пока хватило одного). Идём далее — Внешний вид \ Виджеты. У нас появился виртуальный sidebar Widgets on Pages 1 (или их будет несколько, если Вы запросили несколько). В него я и поместил виджет конвертора валют.

Теперь пришло время разместить созданный таким путём виртуальный sidebar на странице. HTML код страницы выглядит таким вот образом:

<p>В данном разделе нашего сайта мы представляем Вашему вниманию
курсы валют, online-конверторы, а также прочую справочную информацию,
которая может быть Вам полезна как при заказе тура,
так и в самом туре.</p>
[ widgets_on_pages wop-1 ]

Как видно, я использовал shortcode widgets_on_pages с атрибутом wop-1. Как Вы понимаете, для второго виртуального sidebar атрибут shortcode будет wop-2 и так далее.

И вроде бы и всё, должен получить картинку, показанную в начале статьи, но не тут то было… Появляются лишние отступы, маркер элемента списка перед виджетом, и прочие неприятности. Ведь в соответствии с кодексом wordpress, каждый виджет, размещённый в sidebar, реализуется тегом <li>, то бишь – элементом списка.

Итак, чтобы обойти эти неприятности, нам придётся поправить CSS. Безусловно, эту функцию мог и должен был выполнить плагин Widgets on Pages, но не выполнил…

Итак, добавляем в CSS:

.widgets_on_page ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.widgets_on_page li.widget {
    list-style-type: none;
}

.kurs img {
    padding:0;
    vertical-align:middle;
}

Последнее правило, как Вы понимаете, добавлять следует в CSS виджета с курсами валют, а первые – в CSS темы. Последнее правило вообще мне потребовалось только потому, что в CSS темы уж больно свободно обошлись со стилями вообще всех img.

P.S. Результат Вы видели в начале статьи. Статья больше получилась о виджете Widgets on Pages и его недоработках, посему добавлю я его в заголовок статьи…

Отзывы » (2)

  1. День добрый =)
    очень приятно, что труд мой не напрасен!
    спасибо, Вам, за интересную подсказку на счет shortcode, в плагине Currency Converter Rub Widget
    думаю в будущих версия она будет реализована, как и возможность конвертировать не только в рубли, и конвертировать одну валюту в другую.

    • Приятно, однако когда авторы решений отмечает мои заметки по использованию их решений :-).
      Благодарен Вам за комментарий. Предложения и пожелания к последующим версиям:
      - Действительно, реализация в виде shortcode крайне необходима. Я заметил уже массовую тенденцию для достойных виджетов wordpress — всё больше и больше в первую очередь реализуют функционал shortcode, многие — этим и ограничиваются (ведь можно вставить shortcode в виджет Текст).
      - Крайне желательно предоставить возможность настройки конкретного shortcode (ну и экземпляра виджета, разумеется). В том числе — и в части выбора валюты (из каких в какую), и в части выбора источника курсов. Источники лучше определять в опциях плагина в целом, при этом желательно предоставить возможность указать не только шаблон url (с подстановками даты, валют и так далее), но и файл XSLT преобразования полученного результата, который позволит привести нестандартный результат запроса к той схеме, которая будет необходима Вашему плагину. При таком подходе без переписывания плагина можно будет выбирать разные источники, исходя из задачи (у меня задача — выбрать оптимальную валюту, с которой туристу ехать в страну отдыха, поэтому и источники в идеале должны быть не типовыми).
      - в настройках плагина есть смысл предоставить возможность выбора используемого css: использовать CSS плагина, использовать иной CSS (можно — и с предопределённым именем и расположением, но не замещаемый при обновлении плагина), и не использовать отдельного файла CSS (с расчётом на то, что администратор прописал стили в CSS темы или ещё куда).
      - курсы должны храниться в базе. Нет смысла каждый раз их запрашивать. Если в локальной базе уже есть курсы для этого источника на текущую дату — их и берём. Нет — обновляем базу через источник. Не получилось — берём те, что есть, но предупреждаем.

      На самом деле Ваш плагин может стать началом целого семейства крайне полезных плагинов: и динамика курса может быть полезна, и сравнительный анализ затрат при покупке определённой суммы третьей валюты через несколько вариантов промежуточной валюты (при этом источники курсов 1/2 и 2/3 — разные!). В моём случае (точнее — в случае сайта турагентства моей любимой жены) я бы с удовольствием воспользовался подобными решениями для подбора оптимальной промежуточной валюты для туриста, исходя из той страны, в которую он собирается ехать.

      Могу предложить свою помощь в части XSLT для нескольких популярных источников курсов валют, не сочтите за наглость :-).

Опубликовать комментарий

XHTML: Вы можете использовать следующие HTML теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Tags Связь с комментариями статьи:
RSS комментарии
Обратная ссылка