Иконки для рубрик в сайдбаре без плагина | Заметки вебмастера






Иконки для рубрик без плагина? — Легко!

иконки для рубрик блогаВсем привет, ребята!

Рад видеть вас снова на своем блоге. Недавно я пошаманил над дизайном главной страницы блога. Захотелось сделать ее привлекательнее.

Как-то раз я зашел на один сайт и увидел на его главной странице в сайдбаре возле списка рубрик красивые иконки. Эти маленькие изображения выводились рядом с названием каждой из рубрик.

Мне эта идея понравилась, и я захотел добавить такой же элемент дизайна к своему веб-ресурсу. А что? Мне кажется, с ними главная страница смотрится намного привлекательнее, чем без них. Ну, так вот.

Естественно первый делом начал искать в интернете информацию о том, как это можно осуществить на блоге под управлением системы WordPress.

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

Итак. Я думаю вы знаете поговорку — Кто ищет тот всегда найдет.

Я отыскал в инете отличный способ для вывода иконок для рубрик на главной странице блога в сайдбаре.

И для осуществления задуманного не нужно устанавливать плагины. Достаточно просто прописать небольшой код в таблице стилей style.css.

Я прописал его в style.css и вуаля, — на моем блоге появились изображения к каждой рубрике. Ну а теперь обо всем по порядку.

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

Как установить иконки для рубрик

Если вы хотите такие же одинаковые иконки для всех своих рубрик, то читайте дальше.

Как я уже сказал все, что необходимо будет сделать, то это отредактировать файл вашей темы — style.css.

Обычно для списков рубрик в сайдбаре используются свои стили. В моей теме они выводятся следующим образом:

 .sidebar ul li li, .sidebar ul li ul li {
 font-size: 15px;
 font-family: Arial;
 text-transform: none;
 margin-left: 20px;
 }

Как у вас не знаю. Поэтому зайдите в админпанель и проследуете Внешний вид—>Редактор—> style.php. Нашли похожую конструкцию списка для рубрик? Если отыскали, то добавляйте сразу после неё вот этот код:

 .sidebar li.cat-item {
 list-style-image:url("images/ваш файл.png");
 }

Единственное, что нужно сделать после вставки этого кода, то это закачать свою иконку на сервер в папку images с вашим шаблоном, указать путь до неё в коде, ну и не забыть сохранить изменения в файле style.php.

Вот и всё. Если всё сделали правильно, то можно любоваться иконками для рубрик.

Если вы хотите сделать  каждой рубрики свою уникальную иконку, то читайте дальше эту статью.

Первым делом вам нужно узнать id каждой рубрики на вашем блоге. Сделать это достаточно просто.

Для того чтобы вычислить id рубрики зайдите в панель администрирования. Затем проследуйте по вкладкам Записи—>Рубрики. Откроется страница со списком всех ваших рубрик. Наведите курсор на любую рубрику и узнаете её id:

id узнать рубрики в админпанели

Запишите id всех рубрик.

Еще проще id рубрик можно вычислить с помощью браузера. Все современные браузеры, такие как Google Chrome, Mozilla FireFox или Яндекс имеют в себе встроенную функцию просмотра кода элемента.

У меня установлен Яндекс браузер, поэтому я буду показывать с его помощью. Нажмите правой кнопкой мыши на любую рубрику в боковой панели, а затем из выпадающего списка выберите «Просмотр кода элемента»:

просмотр кода элемента в рубриках

Так вы сразу узнаете id всех своих рубрик:

id рубрики при просмотре кода элемента

Теперь для каждой рубрики нужно будет прописать в style.php свой код с уникальными id рубрик и ссылками на разные иконки:

 .sidebar li.cat-item-id рубрики{
 list-style-image:url("images/ваш файл.png");
 }
.sidebar li.cat-item-id рубрики{
 list-style-image:url("images/ваш файл.png");
 }
.sidebar li.cat-item-id рубрики{
 list-style-image:url("images/ваш файл.png");
 }
 и т.д.

Я не стал загоняться и сделал одинаковую иконку для всех рубрик.

Да, кстати, подобные иконки вы сможете найти на сервисах иконок, например, iconsearch.ru.

Кроме того, вы можете еще пошаманить и добавить стили, чтобы при наведении курсора на название рубрики она подсвечивалась другим цветом или  подчеркивалась снизу. Или изменялся фон.

Короче все зависит от вашей фантазии. Я сделал так, как я хотел. Вы делайте на свое усмотрение. Ну, вот и в принципе и все.

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

Успехов Вам и Удачи
С Уважением,


Книга о заработке в интернете:
Книга о заработке в интернете

Комментариев к статье: 29

  1. Юрий Йосифович:

    А как иконки построить в два ряда (как и сами рубрики)? Только в виде таблички, или можно как-то список так в стилях отформатировать?

    Ответить

    • Сергей Саранчин:

      Мне кажется проще будет сделать через табличку в виджетах в две колонки. Хотя может и через CSS возможно это осуществить. Надо поработать над этим моментом…

      Ответить

      • Юрий Йосифович:

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

        Ответить

  2. Максим:

    Спасибо за статью, именно то, что я искал! Все получилось, нужно только со стилями поработать. Пока в процессе доработки и стилизации. Игра «Поймай кота» понравилась, с 4-го раза только сумел окружить его.

    Ответить

    • Сергей Саранчин:

      Очень рад, что помогла моя информация!

      Ответить

      • Алексей Иванов:

        Сергей, все пишут про кота, но кота то нет..Он убежал куда-то, точнее я этой игры не вижу на блоге!

        Ответить

        • Сергей Саранчин:

          Алексей, она есть на блоге. Вот ссылка на мою статью по установке этой игры:
          http://saranchinsergey.ru/saitostroenie/kak-ustanovit-na-svoyom-bloge-onlayn-igru-poymay-kota/ :cry:
          Просто раньше она была установлена после каждой статьи, а теперь осталась после одной. Кстати, можете в неё и поиграть :smile:

          Ответить

          • Алексей Иванов:

            Всё посмотрел статью, вот значит где он последнее время находится..А так бы не нашёл, спасибо что подсказали!
            Ловить его обязательно продолжу.

            Ответить

          • Сергей Саранчин:

            Алексей, почему не нашли бы? Ввели бы в поисковую строку моего блога «Поймать кота» и вуаля…перед вами статья! :oops:

            Ответить

          • Алексей Иванов:

            Как говориться. Умная мысля приходит опосля..Вот тут так и получилось, что не сразу дошло.

            Ответить

  3. Aleksandr:

    А картинки можно ставить разные, просто у вас в примере все одинаковы!

    Ответить

    • Сергей Саранчин:

      Александр, так я и написал в статье, что можно разные иконки установить, но я просто не стал заморачиваться…
      Мне нравится и так.

      Ответить

      • Aleksandr:

        Я попробовал на новом блоге и все успешно получилось :)

        Ответить

  4. Анютка Незабудка:

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

    Ответить

    • Юрий Йосифович:

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

      Ответить

      • Сергей Саранчин:

        Буду рад, если моя информация пригодится :oops:

        Ответить

        • Aleksandr:

          Информация пригодилась, на новом блоге уже реализовал! :)

          Ответить

  5. Alexandr:

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

    Ответить

  6. Виталий Охрименко:

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

    Ответить

    • Сергей Саранчин:

      Пожалуйста, Виталий! Рад был помочь! Действительно, я и сам раньше думал, что это не так просто сделать, а на самом деле всё элементарно! :arrow:

      Ответить

  7. Алексей Иванов:

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

    Ответить

    • Сергей Саранчин:

      Отлично, Алексей! Применяйте на здоровье :smile:

      Ответить

      • Алексей Иванов:

        Спасибо! Да, здоровье оно не кому не помешает, и Вам тоже не хворать!

        Ответить

        • Сергей Саранчин:

          Спасибо, будем стараться изо всех сил гнать хворь наружу! :cry:

          Ответить

          • Алексей Иванов:

            Вот это правильно, нечего ей у нас задерживаться :cry:

            Ответить

          • Алексей Иванов:

            Ладно Сергей, перейдём к более серьёзному делу, как почитание статей. А то уже тему о болезни начали развивать.. :cry:

            Ответить

    • Alexandr:

      Мне очень идея понравилась, но иконки возьму другие.

      Ответить

  8. Антон Сергеевич:

    На моём блоге не сработало!(Пока сижу без картинок!

    Ответить

    • Сергей Саранчин:

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

      Ответить


НАПИШИТЕ СВОЙ ПЕРВЫЙ КОММЕНТАРИЙ НА ЭТОМ БЛОГЕ И ПОЛУЧИТЕ ПОДАРКИ!

Нажимая кнопку "ОТПРАВИТЬ" комментарий, Вы принимаете пользовательское соглашение и подтверждаете, что ознакомлены и согласны с политикой конфиденциальности этого сайта.

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