Тег select
Тег позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором, как показано далее. Конечный вид зависит от использования атрибута size тега , который устанавливает высоту списка. Ширина списка определяется самым широким текстом, указанным в теге , а также может изменяться с помощью стилей. Каждый пункт создается с помощью тега , который должен быть вложен в контейнер . Если планируется отправлять данные списка на сервер, то требуется поместить элемент внутрь формы. Это также необходимо, когда к данным списка идет обращение через скрипты.
| Список множественного выбора | Раскрывающийся список |
Синтаксис
Атрибуты
accesskey — Позволяет перейти к списку с помощью некоторого сочетания клавиш. autofocus — Устанавливает, что список получает фокус после загрузки страницы. disabled — Блокирует доступ и изменение элемента. form — Связывает список с формой. multiple — Позволяет одновременно выбирать сразу несколько элементов списка. name — Имя элемента для отправки на сервер или обращения через скрипты. required — Список обязателен для выбора перед отправкой формы. size — Количество отображаемых строк списка. tabindex — Определяет последовательность перехода между элементами при нажатии на клавишу Tab
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Пример
> > charset="utf-8"> >Тег SELECT > > > action="select1.php" method="post"> > size="3" multiple name="hero[]"> disabled>Выберите героя > value="Чебурашка">Чебурашка > selected value="Крокодил Гена">Крокодил Гена > value="Шапокляк">Шапокляк > value="Крыса Лариса">Крыса Лариса > > > > type="submit" value="Отправить"> > > > >
| Тег | |||||
|---|---|---|---|---|---|
| 1,0+ | 3,0+ | 1,0+ | 1,0+ | 4,0+ |
выпадающий список WordPress
(сайт на WordPress) Подскажите как реализовать выпадающий список при нажатии на кнопку (список в две колонки фото — инфо ) в Google не нашел подходящего решения. Благодарен любым советам.
Отслеживать
задан 27 июн 2017 в 7:49
444 3 3 серебряных знака 18 18 бронзовых знаков
Задавать вопрос второй раз не имеет смысла и противоречит правилам сообщества. Видимо, на ваш вопрос нет ответа, раз промолчали. Лично мне такие узкоспециализированные плагины неизвестны.Наверное, следует обратиться на фриланс.
27 июн 2017 в 7:53
понял, спасибо, буду что-то думать
27 июн 2017 в 7:57
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Вообще, всё достаточно просто.
Делаем button showInfo()»»
И блок вроде div в котором делаем вывод нужной инфы в две колонки. Изначально это блок в css будет иметь свойство display:none;
Ну а потом с помощью jQuery или JS делаем вывод, просто меняем атрибут display на block
Что-то вроде
function showInfo() < var info = document.getElementById('info'); info.setAttribute("display" , "block") >; Как-то так должно сработать)
Отслеживать
ответ дан 27 июн 2017 в 8:25
Klimenko Kirill Klimenko Kirill
2,226 1 1 золотой знак 11 11 серебряных знаков 37 37 бронзовых знаков
- html
- css
- wordpress
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.30.4069
Collapse-O-Matic — плагин для выпадающего текста в WordPress
Ранее я рассматривал полезный плагин Социальный замок для раскрутки блогов и веб-проектов. Он позволяет добавлять на страницу скрытый текст в WordPress + блок социальных кнопок, при клике по которым пользователь получал доступ к контенту. Сегодня у нас похожая задача, но без каких-либо SMM фишек — будем создавать выпадающий текст при нажатии на ссылку для WordPress заметки. Проще всего это реализуется с помощью соответствующего плагина — Collapse-O-Matic. Возможно, в системе есть и альтернативные решения, но мне лично приглянулся этот модуль. Прочитав его обзор ниже, поймете почему.
Скачать Collapse-O-Matic можете с официального репозитория по этой ссылке или найти плагин через WP админку. Основная его функция — создание скрытого выпадающего текста в WordPress. Реализуется опция с помощью специального шорткода [expand]. Работать с модулем максимально просто. Требуемая версия WP 4.0, оценка на данный момент максимальная, загрузок — более 60тысяч. Очевидно, данное решение понравилось не мне одному.
По сути, создавать скрытый текст в WordPress или любом другом сайте есть смысл в двух случаях:
- вы хотите сэкономить место на странице дабы пользователю не пришлось использовать прокрутку;
- когда решили создать более простой для восприятия текст и скрыть всю дополнительную (не основную информацию) под кат.
А при нажатии на ссылку выпадающий текст должен отобразиться на странице. Без каких-либо социальных кнопок и всего такого, просто обычный контент. Вот как это приблизительно выглядит:
Отображение текста обычное, только возле одного из слов есть стрелочка вниз. Если посетитель кликнет по ссылке, получится следующая картинка:
Он увидит скрытый блок текста. Повторный клик, его снова уберет. Все предельно просто — как по работе модуля, так и его внедрению.
Создание выпадающего текста с Collapse-O-Matic
Итак, давайте все разберемся как сделать выпадающий текст в WordPress. После установки и активации модуля заходите в редактор для создания статьи/страницы. Далее нужную область для скрытия обрамляете в шорткод [expand] следующим образом:
Ваш текст-текст-текст затем идет [expand title="ссылка для клика"] после чего снова текст, но уже скрытый [/expand]
Ваш текст-текст-текст затем идет [expand title=»ссылка для клика»] после чего снова текст, но уже скрытый [/expand]
В нашем примере у шорткода есть единственный параметр title, который содержит текст линка, при клике на который и будет срабатывать выпадающий текст. На самом деле вариантов гораздо больше: менять обрамление блока, задавать оформление элементам, убирать стрелочку для показа текста и т.п. Почитать обо всем этом можно в документации. Главное, что у плагина есть достаточно много разных дополнительных опций по настройке как функциональности, так и внешнего вида. Кстати, некоторых из них вы можете найти на странице настроек в одноименном разделе админки.
Здесь, например, можно выбрать:
- Style — светлый, темный или свой фон;
- Tag Attribute — тег для оборачивания текста ссылки (span по умолчанию);
- Trigclass Attribute — класс для линка;
- Targtag и Targclass Attribute — аналогично внешний контейнер и класс, но уже для блока скрытого текста;
- Collapse/Expand Duration — скорость, с которой выпадающий текст появится;
- Animation Effect — эффект появления скрытого текста;
- Custom Style — свои CSS стили
… и еще парочка других опций. Если вам нужно прописывать какие-то параметры для конретного элементы, который будет отличаться от глобальных настроек, то с помощью документации сможете это сделать. Напоследок могу показать пример как сделать выпадающий текст в WordPress для списка:
-
[expand title=»Элемент списка1″ elwraptag=»li»]Текст-текст-текст первого элемента;[/expand] [expand title=»Элемент списка2″ elwraptag=»li»]Текст-текст-текст второго элемента;[/expand] [expand title=»Элемент списка3″ elwraptag=»li»]Текст-текст-текст третьего элемента;[/expand]
-
[expand title=»Элемент списка1″ elwraptag=»li»]Текст-текст-текст первого элемента;[/expand] [expand title=»Элемент списка2″ elwraptag=»li»]Текст-текст-текст второго элемента;[/expand] [expand title=»Элемент списка3″ elwraptag=»li»]Текст-текст-текст третьего элемента;[/expand]
В итоге получится вот такое оформление:
Фишка в том, что в шорткоде используется параметр elwraptag, позволяющий задать тег для всего выпадающего элемента. В таком случае и скрытый текст, и ссылка будут внутри одного тега LI дабы список смотрелся максимально красиво. При клике пользователь увидит соответствующий пункт.
Кстати, если вы используете другие плагины шорткодов в WordPress, то посмотрите какие функции предоставляет то или иное решение — вполне возможно, что выпадающий текст там уже имеется. Тогда вам не придется дополнительно ставить Collapse-O-Matic. Если же нужных шорткодов в теме/плагинах у вас нет, то рассмотренный сегодня модуль — отличное решение.
P.S. В принципе, сам скрипт выпадающего текста при нажатии на ссылку не сложен, наверняка его можно реализовать и без плагинов. Однако далеко не каждый начинающий пользователь WordPress сможет правильно его внедрить. Вариант с Collapse-O-Matic — максимально прост.
Понравился пост? Подпишись на обновления блога по 
RSS, 
Email или 
twitter!
Оцените статью:
(голосов — 3, средний балл: 6,33 из 7)
Категории: Плагины;
Теги: контент сайта, обзоры плагинов, простые плагины, текстовый редактор, тексты блога.
Похожие статьи:
- Популярные плагины шорткодов в WordPress
- Плагин TinyMCE Advanced – wordpress текстовый редактор
- Создем html якорь (оглавление) в WordPress, плагин Better Anchor Links
- Better Click To Tweet — твитты в постах блога
- Display Widgets — показываем/скрываем виджеты на страницах
Как в WordPress в произвольных полях создать выпадающий список значений в поле «Значения»?
Для определенного поля «Имя» используется свой постоянный набор значений, которые хотелось бы выбирать из списка, а не вводить какждый раз вручную.
Про плагин ACF знаю.
- Вопрос задан более двух лет назад
- 110 просмотров
Комментировать
Решения вопроса 0
Ответы на вопрос 1
Senior Pomidor
У вас ответ кроется на поверхности самого вопроса. При создании поля в ACF, назначаете полю тип «Выпадающий список». Нужно будет выбрать из предложки, какие данные должны хранится в этом списке, к примеру «Записи». В документации ACF, есть подобный пример.
Ответ написан более двух лет назад
lasthero67 @lasthero67 Автор вопроса
В том-то и дело, что мне нужно без этого плагина. Про плагин я написал, чтобы как раз отмести подобные комментарии. Наверное не совсем четко выразился.
Тогда создаешь переменную подключение к БД в нужную таблицу, и дальше через форыч в селект выводишь.
lasthero67 @lasthero67 Автор вопроса
Alfieros, я по сути новичок в этом деле. На словах-то все понятно было и без вашего комментария, но как это реализовать.
Что за переменная? Где ее создать? Нужна ли таблица (там от силы будет примерно 10 значений)?
lasthero67, Создаешь в базе данных таблицу с нужными полями. Далее в php файле в котором нужно вызывать данный список, пишем примерно следующий запрос:
global $wpdb; $names = $wpdb->get_var("SELECT * FROM `название твоей таблицы`'"); Примерно вот так. Где-то могут быть ошибки в синтаксисе, так как сам давно не работал с WP. Но, способ что описал, точно так бы и реализовывал бы подобную задачу.
lasthero67 @lasthero67 Автор вопроса
Alfieros, вы не до конца поняли задачу. Вы по сути описали, как сделать выпадающий список в произвольном месте шаблона. А мне нужно сделать такой список в стандартном функционале произвольных полей WordPress. У WordPress по умолчанию нет таких списков., т.е. нужно изменить функционал WordPress, а не просто вывести где-либо список через foreach.
lasthero67, тогда у вас 2 варианта. Ковырять ядро и больше не обновлять WP, либо писать плагин. Других вариантов нет. Поставили бы ACF и не мучались. Практически все веб-студии при разработке новых шаблонов его используют.
lasthero67 @lasthero67 Автор вопроса
Alfieros, понял. Про данный плагин я знал давно и другими тоже пользуюсь, но просто не хотел устанавливать такой большой комбайн ради одного поля.
lasthero67, поверьте, это не большой комбайн. Скорость загрузки страниц можете отследить через консоль и посмотреть, какой из плагинов грузит страницу больше всего, путём их включения\отключения. Думаю что ACF будет меньшее из зол.