Оформление виджетов wordpress. Разные стили CSS

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

Возможно в моем случае – это не более, чем каприз и интерес. А вы взгляните на некоторые блоги, где настолько большие объемы данных и , соответственно, информации на сайдбарах, что все сливается и теряется. Не буду тыкать носом, но недавно торчал на одном очень популярном сео блоге, так там глаза в кучу от взгляда на сайд бар :cool:

Как прописать отдельный стиль для виджета?

Я прекрасно понимаю, что у каждого разные темы и я не могу испробовать свой способ на всех (поэтому если вам инструкция не помогла, то пишите в комментариях – буду разбираться).

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

Для работы мне потребуется браузер google chrome (мне удобен для просмотра кода элементов страницы), вы можете пользоваться аналогом, удобным для вас.

Давайте посмотрим как у вас организована система присвоения классов и id для div блоков виджетов.

Они бывают статическими (пример):

 одинаковые классы для всех виджетов

а бывают "динамические", т.е. для каждого виджета свой id и class:

разный id и class для каждого виджета wordpress

Ну и разумеется фифти-фифти, где у всех виджетов одинаковый класс и разные id (что можно наблюдать у меня на блоге):

разные id и одинаковый class у виджетов

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

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

Как добавить уникальный ID к каждому виджету?

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

Заходим в "внешний вид->редактор->functions.php"

И ищем:

register_sidebar

Абзацев начинающихся на эту фразу будет столько, сколько сайдбаров у вас предусмотрено в теме (в шапке, боковые, в футере)

редактируем id и class для виджетов

Теперь вам надо определить, в каком из сайдбаров у вас находятся виджеты, которым вы хотите присвоить уникальные id или же проделать эту процедуру с каждым абзацем.

Попробовать определить нужный можно так:

определить название id блока div

При наведении на выделенную в прямоугольную область строку у меня выделяется синим цветом весь сайдбар, значит этот div блок и есть искомый, и, соответственно, его id мы нашли. Ищем совпадение в funsctions.php и редактируем абзац (добавляем уникальный id для каждого виджета).

Учтите, что строка:

'before_widget' => '<div class="infobox">',

У вас может иметь немного другой вид, например, вместо div может быть aside и так далее. Наше дело – впихнуть id:

добавляем id для виджета в wordpress

 

Выделенный в синюю рамку код и есть результат доработки.

Сохранив изменения, мы получим с вами тот самый комбинированный вариант, где один класс и разный id.

Уникальный стиль для каждого виджета в WordPress

Теперь нам нужно, например, один из блоков сделать другого цвета (background), давайте расскажу на примере как это сделать.

Для того, чтобы добавить стиль для блока, узнаем его id:

Как узнать id class блока div

 

При наведении на строку кода целиком подсвечивается наш виджет – значит мы нашли нужную строку. Копируем ID блока.

Идем в "Внешний вид -> Редактор -> style.css" и добавляем новый стиль для нашего виджета (для ID его блока):

Добавляем в css стиль для виджета wordepress

 

Все дальнейшие телодвижения уже зависят от вас. Изучайте CSS и делайте рамки, фоны и так далее.

Напоминаю, если у вас случай, который не описан тут или есть что сказать, то встретимся в комментариях :idea:

Подписывайтесь на обновления, если вам нравится материал блога!


Ваш голос важен!
Вам нравится дизайн блога?

vsepro100.net был атакован и восстановлен недавно!
У вас быстро открывается сайт vsepro100.net

Добавить статью в соц сеть

Комментарии к: Оформление виджетов wordpress. Разные стили CSS

  1. Давно пытаюсь замутить такую штуку, но в инете не было информации, а сегодня наткнулся на ваш сайт.. БОЛЬШОЕ СПАСИБО!! Все очень подробно и понятно!!единственное по стилям пришлось прогуглить, но это самое простое из всей задачи

  2. Дело в том, что мне нужно изменить один блок – сделать выравнивание по центру, но после того как я прописал указанный вами код, у меня не проставляются отдельные ID к блокам.

    Может. я что то не правильно сделал?

    Если не трудно, посмотрите пожалуйста:

    код такой

    if ( function_exists('register_sidebar') )
        register_sidebar(array(
            'name' => 'Правый сайдбар',
            'before_title' => '<h4>',
            'after_title' => '</h4></div><div id="%1$s" class="blok">',
            'before_widget' => '<div class="title">',
            'after_widget' => '</div>',
        ));
    • Павел Гаврилин
      if ( function_exists('register_sidebar') )
          register_sidebar(array(
              'name' => 'Правый сайдбар',
              'before_title' => '<h4>',
              'after_title' => '</h4>',
              'before_widget' => '<div id="%1$s" class="blok">',
              'after_widget' => '</div>',
          ));

      попробуйте так.
      не забудьте забэкапить редактируемый файл.
      отпишитесь потом =)

      • Это помогло. Каждому виджету присвоился свой ID… Но почему то все дальнейшие манипуляции в файле CSS с добавлениями стилей терпят крах :?:
        В любом случае, СПАСИБО Вам! Буду копаться дальше. :o

        • Павел Гаврилин

          Алексей, о каком сайте идет речь?
          Тот что в поле url вы указали?
          Если да, то я не вижу уникального id у каждого блока виджетов..

          • Алексей

            Так я сначала на локальном хостинге всё тестирую. Пока не могу выровнять по центру этот блок с регистрацией.. :x

          • Павел Гаврилин

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

  3. Сделал… Рамки у заголовков виджетов пропали, остались только у тех, что были изначально прописаны в шаблоне.

    • Павел Гаврилин

      Алексей! вы все сделали верно!
      если вы хотите выровнять кнопки "войти" и "регистрация" по центру, то вам надо в css добавить:

      #widget-float-sign-form-2{
      text-align: center;
      }

  4. А как вернуть рамочки заголовков? как сейчас на виджетах "Комментарии" и "Архивы"? – они пропали после редактирования Function.php

  5. класс title нужно как то прописать?

  6. Здравствуйте! Искала информацию по решению своей проблемы, наткнулась на вашу статью – все подробно и доступно написано, но у меня немножко задача отличается. Может быть, вы мне подскажите. Ситуация такая: у меня тайтлы виджетов в h3, я хочу заменить на , но они теряют свой стиль в таком случае и нормально не отображаются. Тема у меня достаточно сложная, я сама не могу исправить :|
    В файле function имеем такой код:
    register_sidebar(array(
    ‘name’=>__(‘Правая боковая панель’,'zAlive’),
    ‘id’=>’sidebar’,
    ‘before_widget’ => ",
    ‘after_widget’ => ",
    ‘before_title’ => ",
    ‘after_title’ => "
    ));
    В файле стилей прописанно так:
    #sidebar .widget{margin:0 10px 17px;clear:both;}
    .widget h3{padding:7px 10px;margin:10px 0 15px;font-size:17.5px;line-height:20px;background:#73a53e;color:#fff;position:relative;font-weight:normal;}
    .widget h3 a{color:#fff;}
    .widget .caret{position:absolute;left:2em;bottom:-5px;border-top: 5px solid #73a53e;border-right: 5px solid transparent;border-left: 5px solid transparent;}
    .widget ul{margin:0 10px;}
    .widget ul>li{list-style:none;margin-bottom:5px;padding-bottom:5px;border-bottom:1px dashed #c9c9c9;}
    .widget a{color:#484848;}
    Как мне поправить заголовки виджетов и не потерять стиль,подскажите, пожалуйста!
    :|

    • Павел Гаврилин

      Продублируйте ваш комментарий мне на почту в разделе контакты. тут он не полностью отобразился!

  7. Здравствуйте! в function php имею такой код
    сайдбат тут не зареген!! вордпресс
    теме evolve , не пойму где найти вывод виджета спасибо! отличный блог

  8. Здравствуйте!
    Ситуация следующая: изменил тему wp c двумя боковыми колонками. Причем, в левой колонке был обычный сайдбар, а в правой – место под рекламу Ad Sense. Я вычистил рекламу, зарегистрировал второй сайдбар и впихнул его направо. Теперь в functions.php мы имеем следующее: http://joxi.ru/4wYoUxjKTJDGTvNlUkE Если вставлять id вот так http://joxi.ru/RwYoU_3JTJAWdIG-v3Q – не проходит.
    Задача – прописать свой стиль для заголовка каждого виджета – вот так: http://joxi.ru/IQgoU_3JTJD6c_wTVIA (заголовки выполнены картинками) Как я понял, у нас есть класс "widgettitle" – единый для всех заголовков, а нужны id…
    Еще пытался редактировать файл widgets.php в wp-includes Вот что сейчас там: http://joxi.ru/MAooU_3JTJAhdDjhrLE
    Если есть возможность подсказать, – заранее благодарен.

    • Павел Гаврилин

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

      • загадки.su

        • Павел Гаврилин

          на данный момент у вас прописано id="%1$s"? если ДА и при этом id не появляется, что странно, то пропишите вместо %1$s любой айдишник, например wgid. если ID не появится, то значит проблема в другом. отпишитесь потом

    • Good job manikg it appear easy.

  9. ID появились: http://joxi.ru/k4EpU_3JTJAedJFkQrA, но стилизуется не заголовок виджета, а поле выше заголовка…
    Стили: http://joxi.ru/9YEpU_3JTJAQdCHbHEk
    Результат: http://joxi.ru/M4IpUxjKTJAYNjP8YWk
    Возможно, все же не before_widget, а before_title :o

    • Павел Гаврилин

      у вас все работает, по добавлению ID. просто у вас дивы очень странно прописаны.
      если вам только цвет (картинку БГ) заголовка поменять нужно, то да, ID виджет тайтла пропишите, если для всего виджета, то нужно бефор виджет прописать открывающийся див с ID , а афтэ виджет закрывающий тэг блока, тогда можно будет задать, например, фон каждой области виджета

  10. Пытаюсь поменять цвет шрифта в одном из виджетов в сайдбаре. ID у каждого виджета есть. Конкретно хочу поменять цвет шрифта у text-4.
    Строка кода с ним из браузера:

    В css прописываю:
    #text-4 {color: #CD5C5C;}
    толку ноль.
    Как поменять цвет?

    • Павел Гаврилин

      Зашел на ваш сайт – все работает, цвет такой ,как вы написали.
      Иногда помогает дописать так:
      color: #CD5C5C !important

  11. А у меня все равно показываются одинаковые цвета во всех трех блоках сайдбара. Кэш вроде чистила – не помогает… Что это еще может быть? important тоже не помог..

  12. Александр Каратаев

    Спасибо за статью. Благодаря этой идее я без проблем настроил у себя виджет категорий по своему вкусу.
    :arrow:

  13. А у меня другая беда – в плагине wp-recall есть очень удобная форма входа, но при этом мне она нужна в шапке – я разобрался, как сделать отдельный сайдбар в шапке и впихнул туда виджет, который генерируется плагином wp-recall/ но при этом встает он в шапку в полный рост – мне бы сделать покрасивше=))

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

  15. Добрый день. Мне нужно, создать отдельный класс css и привязать его к моей записи? Но я ни как не могу это сделать. в самом браузере все изменила как мне надо, при помощи команды ctrl+shift+i, а куда вставить то что я на исправляла понять не могу(

  16. Александр

    Спасибо огромное Вам за информацию, очень информативно :idea:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Captcha Captcha Reload

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Подписаться, не оставляя комментарий