Как создать список дел с помощью плагина контрольного списка WordPress

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

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

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

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

Как мы уже говорили ранее, вы можете легко добавить контрольный список в свой блог с помощью плагина WordPress Frontend Checklist. Это потрясающее решение, которое вам просто понравится.

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

Контрольный список внешнего интерфейса

Frontend Checklist — это плагин WordPress для создания контрольных списков HTML или PDF для вашего сайта. Это очень простой, интуитивно понятный плагин без суеты. Он не особенно многофункционален, но это только потому, что он вам не нужен, чтобы делать так много вещей. Вам нужен простой контрольный список, и это то, что Frontend Checklist поможет вам получить.

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

Основные настройки и использование

Первое, что нужно сделать, это, конечно же, установить плагин и активировать его. После того, как вы со всем разобрались, перейдите в «Настройки»> «Контрольный список внешнего интерфейса».

Вы увидите простую панель параметров, которая содержит несколько разных шорткодов. Единственная доступная опция здесь — «Новый контрольный список».

Нажмите «Новый контрольный список» и сначала введите имя контрольного списка. Не беспокойтесь, название списка на самом деле не появится на вашей странице.

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

Часть Items является важной. Здесь вы фактически вставляете элементы своего контрольного списка. Вы можете добавить до 50 элементов, что более чем достаточно. Дополнительные поля открываются по мере прохождения списка и заполнения полей элемента.

<b>

После того, как вы заполнили свой контрольный список и вставили все элементы, следующим шагом, естественно, будет добавление его на страницу вашего сайта. Frontend Checklist предлагает четыре разных шорткода.

Используйте первый, [frontend-checklist name="Standard"], чтобы добавить контрольный список на страницу. Обязательно замените атрибут name именем вашего фактического контрольного списка.

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

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

Следующая опция шорткода — «Cookie on/off», и она чрезвычайно полезна. По сути, это помогает вам установить, хотите ли вы сохранить контрольный список для будущего использования или нет. Если файлы cookie включены, состояние контрольного списка будет сохранено для вошедших в систему пользователей, и они смогут продолжить с того места, на котором остановились, прежде чем обновить страницу или покинуть ее. Если вы не хотите, чтобы эта функция была включена — если вы хотите каждый раз отображать пустой контрольный список, просто отключите файлы cookie.

[название внешнего интерфейса-контрольного списка = «Имя контрольного списка» cookie = «отключено»]

Вы даже можете установить время жизни куки, используя атрибут days. Просто добавьте количество дней, в течение которых ваши файлы cookie должны храниться, и обратите внимание, что по умолчанию установлено значение 365 дней.

[название внешнего интерфейса = «Стандартные» дни = «180»]

Еще один интересный вариант, который вы можете использовать, — предложить ссылку на PDF-версию вашего контрольного списка. Таким образом, ваши посетители, заполнив контрольный список, смогут сохранить его на своем компьютере или распечатать. Это особенно удобно для списков покупок, пакетов для отпуска и так далее.

Шорткод для этого: [frontend-checklist name="ChecklistName" type="pdf" title="My Checklist" linktext="To the Checklist"].

Ссылка для скачивания будет расположена под контрольным списком. Вы можете изменить тест ссылки по умолчанию «На контрольный список» и заменить его своим собственным текстом.

Расширенные настройки

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

С плагином Frontend Checklist по умолчанию ваш контрольный список имеет те же настройки, что и другие формы, используемые на вашем сайте. Это означает одинаковый размер шрифта, цвет, интервал и так далее. Благодаря этому ваш сайт стилистически един, но если вы хотите его изменить и выделить свой чек-лист, это тоже возможно.

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

После того, как вы вставили теги HTML, вам нужно определить, как будут выглядеть элементы в классе «myclist». Для этого вам нужно добавить несколько строк CSS, что очень просто и не требует особых знаний этого языка. Думайте о добавлении CSS как о добавлении определенных атрибутов к классу. Просто выполните следующие действия:

Перейдите в «Внешний вид» > «Настроить» > «Дополнительный CSS».

Слева от вас вы увидите поле, в которое вы можете ввести свой CSS, в нашем случае класс «myclist». Вы можете следить за изменениями в реальном времени в поле справа.

Перейдите в Меню и найдите страницу, на которой находится ваш контрольный список.

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

• color: для изменения цвета шрифта элементов в контрольном списке
• text-shadow: для добавления эффекта 3D к шрифтам. Числа в коде определяют размер тени по сравнению с размером шрифта. Вы также можете поэкспериментировать с добавлением разных цветов к теням и шрифтам.
• font-weight: для установки толщины шрифта
• font-family: доступно множество вариантов, так что выбирайте по своему вкусу
• font-size: для установки размера шрифтов, используемых для элементов контрольного списка.
• padding: для определения количества пикселей вокруг самого элемента. Выраженные значения относятся к верхнему, правому, нижнему и левому порядку, поэтому обратите внимание. В нашем примере это просто отступ слева, то есть пробел между полем и элементом в контрольном списке.

text-shadow: 0,5px 1px оранжевый;

семейство шрифтов: ‘Comic Sans MS’, Comic Sans, скоропись;

.myclist {цвет: #cc615f; text-shadow: 0,5px 1px оранжевый; вес шрифта: 600; семейство шрифтов: ‘Comic Sans MS’, Comic Sans, скоропись; Размер шрифта: 20 пикселей; отступ: 0 0 0 10 пикселей; }

.myclist {
color: #cc615f;
text-shadow: 0.5px 1px orange;
font-weight: 600;
font-family: 'Comic Sans MS', Comic Sans, cursive;
Font-size:20px;
padding: 0 0 0 10px;
}

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

Еще одна интересная вещь, которую вы можете настроить, — сделать отмеченные элементы отличными от неотмеченных, чтобы сделать различие еще более четким. Для этого вы добавите свойства в класс .checked .myclist.

В отличие от неотмеченных элементов, отмеченные будут иметь text-decoration: line-through, через который отмеченные элементы будут перечеркнуты.

оформление текста: сквозное;}

.checked .myclist {цвет:#e4d2b8; вес шрифта: 300; оформление текста: сквозное;}

.checked .myclist {
color:#e4d2b8;
font-weight: 300;
text-decoration: line-through;}

Результат будет выглядеть так:

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

Последние мысли

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

Кроме того, теперь, когда вы знаете, насколько это просто, обязательно настройте свой контрольный список, сделайте его более личным и соответствующим стилю вашего блога. И сообщите нам о результатах!