Задача. Необходимо сделать такой функционал для блока с контентом, который будет по умолчанию скрывать часть его контента, а при нажатии на текст «Развернуть» контент блока должен раскрываться полностью, а текст сам «Развернуть» должен измениться на «Свернуть». И обратно – при клике на «Свернуть» контент должен частично скрыться. Например, это может быть применено в каталоге с товарами, где отображаются в несколько строк какие-то метки для фильтрации товаров. Или нужно просто скрыть часть текста в статье или на главной.
Пример:
«Под кат» означает «спрятать часть моей статьи» (вырезать, где cut — «резать» с англ.). Записи большого размера разбивают на две части: вводную часть и полный текст. Делается это, чтобы на главной странице сайта не было длинных постов, а только начало в несколько строк. Полную версию записи можно читать при клике на ссылку «Подробнее» и т.п.
CUT — с английского «резать, разрезать, отрезать», соответственно на сайтах это что-то вроде «линии отреза», которая разделяет анонс статьи и основную ее часть. На главной странице, большинства блогов, в том числе и на моем, выводятся не полные тексты постов, а только лишь их часть. Остальное же скрывается «под катом».
Лендинг Вконтакте Бесплатно за 15 минут | Конструктор лендингов ВК от Senler
Решение 1. Чтобы убрать контент под кат можно использовать лишь HTML + CSS. Для этого нужно будет сам контент обернуть в div и назначить свой класс. Добавить тег input типа чекбокс перед обернутым контентом. В конец контента добавить пустой див с еще одним своим классом. После обернутого контента добавить label. Вот HTML и CSS Код №1 для примера:
Источник: wpcraft.top
Как сделать блоки в сообществе вк
Теперь же всё легко настраивается и работает вне зависимости от типа сообщества.
Роман Крикун
Как кастомизировать блок ссылок в группе в VKontakte
Контент хоть и король, но, чтобы привлекать аудиторию в ваши паблики, одного его мало. Хорошее оформление групп, подходящие качественные изображения, подобранные с учетом специфики соцсети — играют не менее важную роль в продвижении ваших аккаунтов.
На примере нашей группы в Vkontakte, я хочу показать, как можно красиво оформить блок ссылок.
Обычно в нем размещают важные для группы ресурсы, например личные сайты или аккаунты в других социальных сетях. По этим ссылкам можно попасть на другие ресурсы компании прямо из группы.
Блок Меню в сообществе ВКонтакте
Добавить ссылку очень просто, нужно иметь необходимые права в группе, перейти в режим редактирования, а затем нажать на кнопку «Добавить ссылку».
Поэтому иногда получается так, что в блоке может появиться ссылка с картинкой, которая не очень хорошо смотрится на странице. Например, как тут.
Выход есть всегда
Дома, после работы, я потратил полчаса на исследование запросов к серверу, пытаясь понять, как и что можно подменить в запросах, чтобы социальная сеть добавила конкретный ресурс с нужной картинкой. Теперь хочу поделиться этой информацией, чтобы все могли красиво оформлять свои группы. Возможно в будущем создатели соцсети и добавят такую опцию, но пока ловите этот лайфхак.
Подготовка
Для удобной работы нам понадобится специальная программа Postman, которая позволяет делать запросы к серверу и передавать нужные параметры.
Браузер Chrome, можно и любой другой, но именно тут есть удобный встроенный инструмент для разработки. Кликаете правой кнопкой мыши и в контекстном меню выбираете «Inspect» ( или «Исследовать» в русской версии).
Альтернативный способ: Больше инструментов (More Tools) > Инструменты (Tools) > Инструменты разработчика (Developer Tools).
Шаг 1
Зайдите в группе на страницу редактирования блока ссылок и вызовите Инструменты разработчика, перейдите во вкладку Networks и выберите под вкладку All
Шаг 2
Не закрывая панель разработчика добавьте новую ссылку (не стоит пока обращать внимание на картинку и текст, вы все равно это удалите, а реальные ссылки добавите позже). Это нужно для того, чтобы отловить нужные запросы к серверу.
Шаг 3
После того как добавили ссылку и она появилась у вас в списке, нужно получить данные из кучи запросов, которые были сделаны. Для этого в инструменте разработчика, в поле Filter напишите share.php. Данный запрос отвечает за загрузку изображения на сервер, мы будем использовать его для того, чтобы загрузить нужное нам изображение.
В результате вы увидите что-то похожее на этот скрин. Если у вас получилась подобная картинка, значит все хорошо и можно идти дальше.
Шаг 4
В программе Postman нужно ввести необходимые данные, полученные из запроса: это заголовок с сессией, который храниться в cookie, и сам Body запрос с данными. Делается это очень просто. Из шага 3 нужно скопировать: Request URL, Cookie, Body
и вставить их в Postman.
Чтобы проще было работать, в Postman есть Bulk режим, в котором можно добавлять данные, просто копируя из браузера.
WordPress. Создаем блок «Интересные статьи»
Меня часто спрашивают читатели, как именно реализован блок «Интересные статьи» у меня на сайте. Никакого секрета тут нет, я использую бесплатный шаблон, и этот блок шел с ним в комплекте, так что любой желающий, может скачать тему и посмотреть.
Для того чтобы статья попала в блок, ее необходимо специально отметить, в моем шаблоне это реализовано с помощью плагина FeatureMe. Затем происходит выборка отмеченных статей, и их отображение в блоке. Хочу заметить, что это далеко не единственный способ решения задачи, и сегодня я расскажу как сделать такой блок используя встроенные средства вордпресс.
Для примера, я выбрала простую и аккуратную тему tweaker3, с минимальным дизайном.
1. Создание отметок для записей
Прежде всего, нам необходимо иметь возможность отмечать нужные записи для вывода в блок. С этой задачей нам помогут справиться произвольные поля вордпресс. Использовать их очень просто, достаточно придумать название для своего поля, и указать его значение.
Произвольные поля находятся на странице редактирования записи, однако в новых версиях вордпресс они по умолчанию скрыты, так что если вдруг вы их не видите, нажмите на кнопку «Настройки экрана», и укажите соответствующую галочку:
Вводим название нашего поля featrue, со значением on, поскольку наше поле будет в виде флажка, и нажимаем кнопку «Добавить произвольное поле». Соответственно, если featrue = on, значит статья выводится в блоке:
После этой нехитрой процедуры, произвольное поле запишется в базу данных, и вы сможете использовать его в новых записях, просто выбрав из списка:
В принципе, этого уже достаточно, чтобы выбирать статьи для блока. Но я считаю, что такой способ отметки статей не очень удобен, поэтому мы пойдем дальше и сделаем удобную обертку для нашего поля, в виде чекбокса.
Далее вся работа у нас пойдет в файле темы functions.php. Открывайте его, и вставляйте следующий код:
/*Feature Custom Field*/ function feature_customfield() < >function admin_init() < add_meta_box(‘feature’, ‘Интересные статьи’, ‘feature_customfield’, ‘post’, ‘normal’, ‘low’); >add_action(‘admin_init’, ‘admin_init’);
Функция feature_customfield() отвечает за вывод значения поля, мы добавим ее содержимое на следующем этапе.
Функция admin_init() выступает в роли контейнера для функции add_meta_box(), которая в свою очередь добавляет блок feature на страницу редактирования записи. В двух словах опишу параметры функции:
- feature – название выводимого блока
- «Интересные статьи» — заголовок блока
- feature_customfield – название функции, отвечающей за вывод блока
- post – вид контента для которого будет выведен блок на странице редактирования, может быть записью, страницей, ссылкой, или пользовательским типом данных.
- normal – место вывода блока, указав side можно вывести блок в боковой колонке
- low – приоритет вывода блока на странице, поскольку у нас значение low, блок выводится в самом конце, после всех остальных.
Последняя строчка отвечает за выполнение функции добавления блока, при инициировании административной панели. Можете проверить страницу редактирования записи, если вы все сделали правильно, то должны увидеть вот такой блок:
Пока что у нас есть только заголовок блока, но мы сейчас это исправим. Помните пустую функцию feature_customfield()? Она как раз и будет отвечать за наполнение блока и отображение сохраненного значения. Вставьте внутри функции следующий код:
global $post; $custom = get_post_custom($post->ID); if($custom[‘feature’][0] == ‘on’)< $value = ‘checked’; >else < $value = »; >echo «»; echo » Вывести запись в блоке интересных статей»; >
Здесь мы сначала объявляем глобальную переменную $post, для доступа к нашей текущей записи, и получаем значение произвольного поля feature (если оно установлено). Далее проверяем его значение, если оно равно on (как в нашем примере), то присваиваем переменной $value значение checked. Все это делается для того, чтобы правильно отобразить в нашем поле, ранее сохраненное значение.
Последние две строчки выводят наше поле, с небольшим комментарием. Теперь наш блок выглядит вот так:
Осталось совсем немного — сделать так, чтобы статус поля сохранялся после обновления записи. Для этого нам понадобится еще одна функция с экшеном:
function update_featurecustomfield() < global $post; update_post_meta($post->ID, ‘feature’, $_POST[‘feature’]); >add_action(‘save_post’, ‘update_featurecustomfield’);
Здесь просто обновляем значение произвольного поля на указанное в чекбоксе. Последняя строчка отвечает за выполнение этой функции при сохранении записи. Весь код полностью будет выглядеть вот так:
/*Feature Custom Field*/ function feature_customfield()< global $post; $custom = get_post_custom($post->ID); if($custom[‘feature’][0] == ‘on’)< $value = ‘checked’; >else < $value = »; >echo «<input type=’checkbox’ name=’feature’ $value />»; echo » Вывести запись в блоке интересных статей»; > function admin_init() < add_meta_box(‘feature’, ‘Интересные статьи’, ‘feature_customfield’, ‘post’, ‘normal’, ‘low’); >function update_featurecustomfield() < global $post; update_post_meta($post->ID, ‘feature’, $_POST[‘feature’]); >add_action(‘save_post’, ‘update_featurecustomfield’); add_action(‘admin_init’, ‘admin_init’);
Теперь произвольные поля можно спрятать за ненадобностью, и полюбоваться на наш полностью работающий блок:
2. Вывод отмеченных записей в шаблон
После того, как у нас все заработало в админке, неплохо было бы иметь возможность вывести отмеченные записи в шаблон. С этой задачей легко справится отдельный цикл вывода записей. Отркываем header.php (или любой другой шаблон, в котором вы планируете разместить блок), и вставляем следующий код:
Здесь мы создаем новый объект класса WP_Query, со следующими параметрами:
- showposts – количество выводимых записей, в нашем случае 5
- meta_key — название произвольного поля
- meta_value – значение произвольного поля
В результате цикла у нас выводятся пять записей, с заголовком, цитатой и ссылкой «читать далее». Обратите внимание, что каждая запись обернута в индивидуальный блок с классом feature-item, а все эти блоки содержаться внутри блока feature-posts. Такая разметка необходима для правильной работы яваскрипт-слайдера.
Осталось совсем немного — сделать для записей красивую обертку.
3. Выбор слайдера
Слайдеров на яваскрипте написано бесчисленное множество, можно выбрать на любой вкус. Я предпочитаю jQuery Cycle Plugin, поскольку он не требователен к разметке, а также имеет множество настроек.
Для начала необходимо убедиться, что к вашей теме подключен jQuery, и если его еще нет, необходимо это исправить. В моей теме jQuery уже используется, поэтому мне остается только подключить сам плагин. Скачиваем полную версию плагина с официальной страницы, сохраняем в папку js внутри шаблона, и подключаем на страницу header.php сразу после функции wp_head().
Далее, здесь же вставляем вызов слайдера, перед тегом body
jQuery(document).ready(function()< jQuery(«#feature-posts») .after(‘) >)
Теперь наш блок выглядит вот так:
4. Настройка стилей
Я не буду подробно останавливаться на каждом стиле, думаю любой человек знакомый с CSS все поймет. Единственное, что следует отметить, html-разметка была немного изменена. В частности, был добавлен еще один оборачивающий контейнер и заголовок h2:
Интересные статьи have_posts()): $feature_posts->the_post(); ?> Читать далее.
Это не обязательные дополнения, так что без них вполне можно обойтись. Вот такие стили я использовала для нашего слайдера:
*Feature Articles*/ #feature-container < margin-bottom: 15px; width: 620px; color: #fff; position: relative; >#feature-container a < color: #fff; >#feature-container h2 < color: #90CACC; font-weight: normal; background: #444444; margin-bottom: 0; padding: 10px 20px; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; border-top-left-radius: 15px; border-top-right-radius: 15px; >#feature-posts < width: 600px; height: 100px; padding: 10px; background: #444444; >.feature-item < padding: 0 20px; overflow: hidden; >#feature-container #nav < font-family: Verdana; >#feature-container #nav a < color: #fff; background: #666666; padding: 7px 10px; text-align: center; margin-right: 1px; >#feature-container #nav a.activeSlide
В результате блок выглядит вот так:
5. Сокращение длины цитаты
Уже под конец написания статьи, я вспомнила об одной возможной проблеме. Дело в том, что анонс статьи в блоке выводится с помощью темлейтного тэга the_excerpt() (цитата). По умолчанию, если вы специально не указали отдельную цитату для записи, его длина равна 55 символам, что в моем примере не очень удобно, поскольку блок по высоте не рассчитан на такой объем текста. Решение довольно простое, можно изменить дефолтную длину цитаты, на нужное количество символов, для этого вставьте следующий код в functions.php:
function new_excerpt_length($length) < return 20; >add_filter(‘excerpt_length’, ‘new_excerpt_length’);
Строчка return возвращает количество символов цитаты, в моем случае 20.
Вот собственно и все, надеюсь приведенный пример будет вам полезен.
Архив с примером.
14 комментариев
Слишком длинный способ=))
этот плагин давно модифицировали и он сам себя настраивает..так что мануал теряет всякий смысл
> мануал теряет всякий смысл / Влад в 29-07-2011 Слишком категорично. Мне, например, пригодится оформление произвольных полей. Стоял такой вопросик в очереди. До вникания/разбора/поиска еще не дошло. А тут уже есть от чего отталкиваться.
Спасибо автору. Кому-то пригодится другая часть поста. Так что за весь мануал не скажу, а какой-то смысл останется. Вообще, мне блог нравится. Зацепил разбор шаблона а-ля Апле. Сохранил в избранном. В свободное время почитаю. Сейчас перевод про таксономию в жилу (закрою вопросик).
Человек делится своим опытом. Не гуру. Но мне по уровню подходит. Все вполне обстоятельно. Хоть и простыни, а привлекают.
Источник: dreamhelg.ru