Как создать виджет WordPress

Как создать виджет WordPress

Виджеты используются для добавления контента на страницу WordPress без изменения шаблонов тем. Боковая панель является областью по умолчанию для добавления содержимого виджетов. Также вы можете зарегистрировать собственную область виджетов и добавить в нее виджеты. WordPress содержит некоторые виджеты по умолчанию Поиск, Категория, Теги и многое другое.

В админке WordPress виджеты располагаются в меню Внешний вид → Виджеты. Если в вашей теме ещё не зарегистрирован сайдбар, то это меню может не отображаться. Для регистрации сайдбара добавляем следующий код в файл functions.php вашей темы:

<?php
if ( function_exists('register_sidebar') )
register_sidebar();
?>

После добавления виджета в область виджетов его можно отобразить с помощью функции dynamic_sidebar() разместив её в шаблоне. Обычно её добавляют в файл sidebar.php текущей темы.

В этом уроке мы создадим и добавим собственный виджет и отобразим его содержимое на страницах сайта на CMS WordPress.

Шаги, которые мы предпримем:

  1. Создадим плагин виджета.
  2. Добавим поддержку виджетов в текущей теме.
  3. Добавим виджет в область виджетов.
  4. Выведем виджет на страницах сайта.

Как конвертировать HTML в Word на JavaScript

Как конвертировать HTML в Word на JavaScript

Экспортировать HTML-страницу как документ Microsoft Word можно различными способами. Существуют PHP-библиотеки, плагины jQuery. Но когда HTML-файл прост без какой-либо сложной разметки, тогда можно экспортировать HTML-содержимое в формат .doc без особых усилий. Мне даже не нужны сторонние библиотеки. Если вы хотите преобразовать HTML в документ Word, без плагинов или библиотек простым JavaScript-кодом, тогда читайте эту статью.

Подборка бесплатных IT-курсов и вебинаров от Skillbox.

Бесплатные IT-курсы, нужно только пройти онлайн-тест здесь

Бесплатные вебинары здесь

Сохранение данных в форме после обновления страницы

Сохранение данных в форме после обновления страницы

Часто ли у вас случалось такое, что при заполнении формы на сайте истекал срок действия сеанса или например зависал браузер, после чего приходилось заполнять форму заново?! HTML5 представил концепцию механизмов хранения заполняемых данных в браузере. В хранилище HTML5 есть возможность хранить строковые значения в локальных или сеансовых переменных. Переменная localStorage может сохраняться между сеансами и может иметь любой размер. Это похоже на cookie, но имеет гораздо меньше ограничений.

В этом руководстве мы будем использовать механизм localStorage для хранения текущего состояния формы. Это означает, что когда страница перезагружается или пользователь повторно открывает страницу после ее закрытия, форма заполняется предыдущими значениями. Для повышения сложности мы будем хранить данные в виде сериализованных строк JSON.

Как использовать animate.css

Как использовать animate.css

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

И только то, что это CSS, не означает, что нет библиотек, которые могли бы вам помочь. Одной из них является библиотека Animate.css.

Git для начинающих

Git для начинающих

Git — это бесплатная система контроля версий с открытым исходным кодом. Это звучит невероятно скучно до тех пор, пока вам не понадобится вернуться к предыдущей версии кода, и сделать это удачно.

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

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

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

Как использовать фильтры CSS

Как использовать фильтры CSS

Фильтры CSS — это мощный инструмент, который позволяет нам создавать удивительные визуальные эффекты с нашими элементами. Особенно они хороши для hover эффектов.

Фильтры предоставляют нам методы для изменения рендеринга базового элемента DOM. Они позволяют сделать такие эффекты, как например, размытие, изменение контраста и даже цвета элемента.

Подборка бесплатных IT-курсов и вебинаров от Skillbox.

Бесплатные IT-курсы, нужно только пройти онлайн-тест здесь

Бесплатные вебинары здесь

Как сделать прогресс бар на CSS

Как сделать прогресс бар на CSS

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

Раньше было невозможно создать анимацию прогресс бара без использования JavaScript, но благодаря CSS3 теперь мы можем выполнять анимацию, добавлять градиенты и некоторые многоцветные элементы внутри div. На самом деле HTML5 также имеет специальный элемент прогресс бара, созданный именно для этой цели.

Когда вы закончите с этим уроком, вы будете знать, как сделать анимированный прогресс бар в стиле флэт дизайна, используя чистый CSS: без flash, изображений и JavaScript.

Давайте начнем…