Как добавить дополнительный sidebar для виджетов в WordPress
Очень простой в использовании плагин Newpost Catch, который позволяет отобразить в сайдбаре виджет с последними записями. При этом он отображает миниатюры, либо первую картинку из текста. Настроек практически нет, что и делает его популярным. Однако я дам несколько советов, как усовершенствовать данный плагин.
Установка подобного плагина немного украсит "скучные и серые" сайты.
После установки в админке сайта идем Внешний вид Виджеты и находим одноименный виджет Newpost Catch . Размещаем его в нужном месте сайдбара и видим такие настройки:
Не обращаем внимания на группу , а сразу переходим к настройкам:
- Width - ширина картинки/миниатюры;
- Height - высота картинки/миниатюры;
- Showposts - количество записей, которые будут отображаться в виджете;
- Display date - отображать или нет дату публикации.
Настройка плагина Newpost Catch
"Допиливать" будем при помощи редактирования файла стилей плагина (style.css в папке с плагином на хостинге). Если еще не используете Notepad++, то советую, т.к. с ним редактировать файлы намного удобнее.
Если начинаете редактировать файлы движка или шаблона/плагинов, то не забывайте делать резервные копии файлов на всякий случай.Итак. Открываем файл style.css плагина и редактируем:
- #npcatch li
Добавляем следующие строки (по желанию):
border-bottom: 1px dotted #888888; padding: 2px;
border-bottom : 1px dotted #888888 ;
padding : 2px ;
Здесь: border-bottom - нижнее подчеркивание элемента толщиной 1px, пунктиром (dotted) и цветом #888888 (можно указать любой цвет, а поможет пипетка FastStone Capture). padding - это внутренний отступ (сверху справа снизу слева) в 2px (написано один раз, т.к. со всех сторон одинаковый отступ). В результате между элементами списка появится пунктирная линия, которая будет разделять их между собой. Должно выглядеть красиво. Главное подберите цвета правильно.
- #npcatch img
Здесь мы добавляем стили для самой картинки:
border : 1px solid #FB9F77 ;
margin : 2px 5px 2px 0 ;
padding : 5px ;
Поясню. С border мы уже разобрались - это рамка вокруг всей картинки. Свойства аналогичны border-bottom из предыдущего пункта, только здесь линия непрерывна (solid). margin - внешний отступ картинки, который позволит сделать промежуток между ней и другими элементами (текстом, элементами меню, нижним подчеркиванием). padding - уже разбирали выше.
В данном случае сочетание border и padding сделают красивый эффект - внутри картинка, снаружи рамка выбранного цвета, а между ними задний фон сайдбара. Если не поняли о чем речь, то посмотрите у меня в сайдбаре на последние комментарии и аватарки: у них белая рамка вокруг картинки. На своем сайте вы сами подберете отступ (padding) и цвет.
- #npcatch .title
Здесь мы можем задать ширину самого виджета. Дело в том, что он по-умолчанию идет в 135px. Если у вас сайдбар шире, то остается много неиспользованного пространства. В параметре width можно поменять цифры на нужные. Данный шаг сделает виджет более привлекательным для клика со стороны посетителя сайта.
- #npcatch li:hover {background:#F6F6F6;}
Данного параметра нет в файле стилей по-умолчанию. Вам следует его добавить, чтобы сделать эффект при наведении курсора на какой-либо из пунктов данного виджета. Попробуйте предложенный мною вариант и увидите, что при наведении мышки фон меняется на серый. Далее цвет подберите сами, исходя из дизайна. Добавив в эту строку параметр color:#000000; , можно изменять цвет шрифта при наведении (цвет так же сами подберите). Сочетание меняющегося фона и цвета шрифта будет смотреться отлично, а так же придаст ненавязчивую динамики сайту.
Если у вас шаблон не поддерживает миниатюры
Как уже говорилось в начале статьи, плагин Newpost Catch отображает как миниатюры, так и первую картинку из записи. Если Ваш шаблон WordPress не поддерживает возможность загрузки миниатюры, то необходимо немного "пошаманить".
Возвращаясь к миниатюрам. В большинстве шаблонов они поддерживаются. Достаточно загрузить картинку в нужную форму. В админке при написании поста справа снизу есть такая кнопка:
Нажав на нее добавляем картинку как обычно, только в конце нужно нажать следующее:
Нажимаем "Использовать как миниатюру", а затем "Сохранить изменения". После этого нажимаем крестик в правом верхнем углу (нажимать "Вставить в запись" НЕ НУЖНО!).
Иногда миниатюры уже "вшиты" в шаблон, однако не отображаются по-умолчанию. Их нужно просто-напросто включить. В форме редактирования записи идем в самый верхний правый угол и нажимаем:
В появившемся меню поставьте галочку напротив нужного пункта.
Прежде чем сказать как добавлять миниатюры, хочу объяснить что именно нужно добавлять в миниатюры.
Микроразметка Schema.org/BlogPosting
Чтобы ваш сайт на базе темы дизайна занимал более высокие позиции в поисковой выдаче, в тему дизайна внедрена микрозаметка формата schema.org.
У данной микроразметки есть определённые обязательные требования, за соблюдением которых следит Google.
Одно из обязательных требований – наличие изображений для каждой записи блога.
Но не просто изображений, а также мета-данных об этом изображении – высоте и ширине изображения.
Приблизительно так должен выглядеть код изображений для записи блога:
Куда вставлять данный код
Данный код нужно вставить в дополнительные параметры записи в приложении Блог.
Чтобы их найти нужно открыть редактор записи и в правом сайдбаре нажать на кнопку "редактировать" под заголовком Мета
Вот в данное поле и нужно вставить код.
Как вставлять код
Дополнительные параметры Webasyst устроены таким образом, что там новая строка равняется новому параметру. И если вставить туда код в читаемом виде, то это может вызвать ошибки.
Поэтому вставлять код нужно следующим образом:
Копируете код:
И вставляете его в поле "Дополнительные параметры".
Затем указываете ссылку на ваше изображение в атрибуте src, меняете alt на свой, а также указываете размеры изображения в мета-тегах.
Затем в самом начале кода вам нужно указать имя параметра и знак равно: g_thumb=
И после этого избавится от всех переносов строк. Т.е. чтобы эти три строки читались как одна.
Пускай они будут для вас не читаемыми, но чтобы между ними не было никаких пробелов.
Вот как это приблизительно должно выглядеть:
Изображение во всю ширину
При добавлении данного кода, ваше изображение будет ужато до размеров 250px в ширину и обведено рамкой.
Если вы хотите, отображать изображение во всю ширину блока, то вам нужно удалить из кода изображения class="post-thumb". То есть код с изображением должен выглядеть так:
Как и куда загружать изображения
О том куда и как загружать изображения можно прочитать в .
Для добавления необходимых плагинов и дополнений на страницу в WordPress необходимо просто перетащить в админке интересующий вас виджет на sidebar. Таким образом, даже новички в движке WordPress могут без осложнений видоизменить свою боковую панель (и не только её).
Порой разработчики темы предоставляют на выбор несколько возможных сайдбаров, куда вы можете перетащить widget . Но бывают и темы, где сайдбаров 1-2, и они используются чисто для нужд самой темы (то есть новые виджеты вы туда запихнуть не сможете).
Да и даже бывает, что вам просто захотелось добавить новый сайдбар для разграничения логики или с другим оформлением.
Для начала необходимо зарегистрировать ваш сайдбар. Это можно сделать в файле functions.php в папке с шаблоном. Некоторые разработчики шаблонов создают спец. функцию по регистрации сайдбаров. К примеру, function twentyten_widgets_init() {} . Это не принципиально. Просто найди то место в коде, где происходит регистрация. Выглядит это примерно так:
Register_sidebar(array("name"=>"Site description", "before_widget" => "
Как добавить свой сайдбар?
Когда найдётся участок кода, где регятся сайдбары, можете по аналогии зарегистрировать свой. Как пример:
Register_sidebar(array("name" =>"Second sidebar", "id" => "secondary-widget-area", "before_widget" => "
", "after_title" => "
",));Name — название вашего sidebar. оно будет отображаться в админке.
id — уникальный идентификатор. Он вам понадобиться при добавлении на страницу (об этом ниже).
before_widget — код/текст, который будет вставлен перед каждый виджетом.
after_widget — соответственно, код/текст, который будет вставлен после каждого виджеа.
before_title — код/текст, который будет вставлен перед заголовком виджетов.
after_title — код/текст, который будет вставлен после заголовком виджетов.
После добавления выше приведённого кода в файл, сохраните его и зайдите на страницу виджетов в административной панели. Теперь точно так же, как и с остальными сайдбарами, вы можете перетаскивать на новый необходимые виджеты. Чтобы этот сайдбар отобразился на вашем веб-сайте, вам нужно открыть соответствующий файл шаблона, а именно sidebar.php , и найти код:
Вам необходимо в том месте, где вы хотите видеть свой сайдбар, добавить его между открывающим и закрывающими тегами. Будет примерно так:
Для красивого вывода, можете включить этот код в блок:
Как вы уже наверно заметили secondary-widget-area при выводе на странице — это имя сайдбара. Оно должно быть точно таким же, как имя указанное при регистрации в файле functions.php . Теперь, редактируя файл style.css придать сайдбару нужный вид.
Я обещала рассказать Вам про виджет для боковой колонки, который успешно снизил на моем сайте.
«Все придумано и все продумано».
Мне очень нравится этот слоган шведского магазина «Икеа».
Он всеобъемлющ.
Потому что это действительно так и есть.
Люди уже давно придумали и создали множество замечательных вещей и программ.
Но очень многие из нас не знают, чего они хотят, пока им этого не предложат.
Вот так и я довольно долго существовала, имея на своем сайте совершенно скучный серый виджет «Свежие публикации». Некоторые называют его «Последние записи». И выглядел он примерно так.
Понятно, что простое перечисление заголовков новых статей, привлекало, разве что, постоянных посетителей, которые мне доверяют.
Те же, кто попадал на мой блог впервые, вряд ли переходили по представленным там ссылкам.
И совсем другой эффект получился, когда я развернула этот виджет, добавив туда красочные и привлекательные картинки.
Оказывается, уже давно созданы специальные плагины WordPress, которые позволяют иллюстрировать виджет «Свежие (последние) записи».
Просто у меня до этого руки не доходили.
А может, я просто не встречала на других блогах подходящих вдохновляющих примеров.
Как организовать виджет Свежие записи с картинками для WordPress.
Я перепробовала несколько плагинов:
Recent Posts Widget Extended;
Recent Posts Widget With Thumbnails;
Newpost Catch.
Есть и другие.
Но больше всего мне приглянулся последний — Newpost Catch. Кстати, не только мне.
Этот плагин позволяет добавлять в указанный виджет, как миниатюру записи, так и просто первое встречное изображение из статьи.
Если, кто-то еще не знает, что такое миниатюра, то расскажу немного подробнее.
В каждой статье есть возможность создать такую миниатюру — специальную картинку-заставку указанного размера, которую обычно используют в начале публикации. Если Ваша тема (шаблон) Вордпресс это предусматривает. А если не предусматривает, то стоит позаботиться, чтобы эту функцию добавить.
Я сама не так давно обратила внимание на такую возможность, но с тех пор регулярно создаю миниатюры для каждой новой записи (статьи). И хочу отредактировать таким образом и другие записи на моем блоге, где я раньше этого не делала. Миниатюры можно будет потом использовать в разных местах, а не только в статье.
Но это уже совсем другая история.
Вернемся к виджету Свежие публикации (Последние записи с картинками).
Если у Вас узкая боковая колонка (сайдбар), то его можно организовать в таком виде, как у меня. Я поставила большую картинку, а название статьи разместила под ней.
А в случае широкого сайдбара, можно расположить небольшую иллюстрацию слева, а само описание статьи рядом справа.
Все настройки проводятся непосредственно в самом виджете, который организуется с помощью плагина.
У меня это выглядит так.
Можно организовать виджет «Свежие записи с картинками» и без всяких плагинов. Такую информацию тоже легко отыскать в интернете. Но корректировать код самостоятельно намного сложнее. И вероятность ошибок больше.
К тому же он позволяет дополнительно организовать виджеты еще и для определенной категории, если указать ее числовой идентификатор ID.
Как определить такой идентификатор для каждой рубрики можно посмотреть . Или установить плагин Reveal IDs , который это показывает.
Есть еще одна замечательная возможность. Плагин Newpost Catch предлагает использовать так называемый короткий код — shortcode в квадратных скобках. Размещают такой код в обычном текстовом виджете.
Задавая в шорткоде определенные параметры и атрибуты можно получить интересные комбинации для организации разных блоков. Их можно сделать несколько по своему усмотрению. Больший простор для фантазии.
Например, показывать при просмотре статьи рядом в сайдбаре последние записи с картинками именно из этой текущей рубрики.
Код будет выглядеть примерно так.
шорткод Свежие записи с картинками из текущей рубрики
[ npc width = "170" height = "150" posts_per_page = "2" dynamic = "1" ] |
Где:
width=170 – ширина картинки;
height=150 – высота картинки;
posts_per_page=2 — количество записей в виджете;
dynamic=1 – вывод статей из текущей категории.
Все числовые значения, кроме последней строки (dynamic=1), можно менять по своему усмотрению.
Но надо сказать, что на тренировочном блоге, организованный таким образом виджет, у меня прекрасно заработал, а на основном сайте мне сделать это почему-то не удалось. Буду разбираться.
Хотя идея показалась мне очень заманчивой!
Представляете, отрывает читатель любую статью, а в боковой колонке автоматически появляется блок, предлагающий свежие публикации с картинками именно из той рубрики, которая его заинтересовала.
И все это можно сделать только с помощью одного единственного текстового виджета!
Здорово! Люблю я такие нестандартные решения.
У меня, как Вы помните, если читали предыдущую статью, уже есть блоки, где показываются наиболее интересные (на мой взгляд) статьи из каждой рубрики.
Но виджет с иллюстрациями и последними публикациями из текущей категории я бы тоже добавила.
Дерзайте! Может у Вас сразу все получится!
Вот такие интересные возможности иногда почему-то скрываются от наших глаз.
А всего-то и надо, что проявлять постоянную любознательность.
Увидел на дружественном сайте интересную находку, открой код страницы по Ctrl + U.
Посмотри, с помощью какого плагина это организовано.
Просто задай, открыв окошко для поиска с помощью Ctrl + F, там слово plugins, и увидишь все плагины WordPress, которые использует автор на этой странице.
Все просто.
Ну, а на моем сайте можно даже и не утруждать себя поиском, а перейти на страницу « «, где в самом низу есть таблица со всеми установленными у меня плагинами и их подробным описанием.
Я специально собираю такую информацию для удобства читателей блога.
Самые Свежие Публикации с Картинками.
Свежее не бывает! Попробуйте!
Всем привет! Прошла уже неделя с тех пор, как мы уехали из Питера и поселились в деревушке Хиккадува на Шри-Ланке. Чуть подробнее об этом в конце поста.
Сегодня вы узнаете, как создавать, добавлять и редактировать миниатюры к записям в Вордпресс. Разберемся, для чего они нужны, а также с тем, как можно добавить превью на блог автоматически.
Как используют миниатюры на WordPress-блоге?
Миниатюры картинок в WordPress чаще всего используются в анонсах к записям на блоге. Анонсы выводятся на главной или в рубриках. Как правило, иллюстрация анонса, это уменьшенная копия картинки в самой статье. Также эти превьюшки будут появляться при выводе похожих записей под статьей, если ваша тема предполагает такую опцию, или у вас установлен соответствующий плагин. Это также актуально для последних и популярных записей в сайдбаре, если они у вас предусмотрены.
Очень важно, чтобы в каждом месте отображения миниатюр, они были сжаты до того размера, в котором мы их видим на сайте. Конечно, можно было бы выводить полноразмерные картинки и просто задавать им маленькие размеры средствами CSS-стилей. Но тогда браузеру каждый раз придется загружать множество больших тяжелых изображений, от чего сайт начнет грузиться очень медленно. К счастью есть возможность автоматически сжимать картинки до нужного размера.
Теперь перейдем к тому, как выводить миниатюры на WordPress-блоге и их настройкам.
Вывод превью к записи в WordPress
Чтобы проверить, поддерживает ли ваш шаблон WordPress вывод миниатюр, нужно зайти в редактор записей или страниц. Если поддерживает, вы должны увидеть следующее:
У меня эта опция находится в правом нижнем углу на странице редактирования.
Теперь, чтобы создать превьюшку для статьи, нажимаем «Задать миниатюру».
Вы можете выбрать уже загруженные картинки из библиотеки файлов, или загрузить новую. Поскольку миниатюра задается уже после того, как статья написана и оформлена, скорее всего, нужное фото будет в библиотеке. Вам остается только его выбрать, а далее в зависимости от вашего шаблона, будет сформирована превьюшка нужного вам размера.
Если вас по каким-то причинам не устраивает размер или стиль картинки, вы можете зайти в редактор фото и задать необходимые параметры вручную.
Задать размеры миниатюры к записям в WordPress можно в админке: «Настройки» — «Медиафайлы»:
Что же делать, если вывод миниатюр не предусмотрен в вашей теме, а вам они нужны?
Для этого можно использовать следующую функцию в файл functions.php вашей темы:
add_theme_support (‘post-thumbnails’); ?>
Авто миниатюры в Вордпресс с помощью плагина
Хорошо, если вы исправно добавляли миниатюры к каждой записи во время их создания. Но что делать, если на вашем блоге уже есть множество постов без превью? Или как изменить размеры всех миниатюр в WordPress, после смены дизайна блога? Вновь открывать каждую запись и редактировать ее слишком трудоемко.
К счастью, для того, чтобы упростить нам жизнь, созданы плагины для автоматической генерации миниатюр к записям в WordPress.
Для того чтобы найти подходящий плагин, введем в строке их поиска thumbnails (с англ. – эскизы).
Таким образом, мы отыщем наиболее актуальные и популярные плагины для нашей задачи.
Один из часто используемых и простых плагинов для изменения размеров всех миниатюр в WordPress – Regenerate Thumbnails:
После установки, заходим «Инструменты» — «Regen.Thumbnails»:
В появившемся окне нажимаем кнопку «Regenerate All Thumbnails», если вы хотите подогнать все превью к заданному в настройках блога размеру.
Ждем, пока закончится процесс:
Один из самых простых плагинов по вставке авто миниатюр ко всем записям на Вордпресс — Easy Add Thumbnail.
Он автоматически создает превьюшку на основе первой картинки в посте. Для этого вам достаточно просто его активировать, ничего настраивать не нужно.
Еще один плагин для создания миниатюр к записям в WordPress – Generate Post Thumbnails. Он позволяет задать номер картинки в записи, по которой будет формироваться превью.
Как видите, вывести миниатюры в WordPress и даже их автоматически генерировать очень просто.
P.S. Хиккадува — замечательное туристическое местечко на юго-восточном побережье Шри-Ланки. Здесь нам нравится: буйная сочная растительность, чистый бушующий океан с большущими волнами, много кокосов и прочих фруктов, доброжелательные местные жители. Снимаем домик за 45000 рупий (21000 рублей). Сезон дождей сейчас заканчивается и в ближайшие несколько месяцев погода должна быть прекрасной! Приезжайте в гости:)
