Перейти к содержимому



Несколько лайфхаков для кастомизации тем WordPress

#1 TimurR
TimurR
  • Пользователь PRO
  • 1 157 сообщений
  • Репутация: 283
0

Отправлено 14 Декабрь 2019 - 19:26

Частенько готовый шаблон не отвечает моим требованиям касаемо внешки. Хочется прикручивать иконки, выделять цветом определенные элементы меню и т.д. В простых шаблонах такая функциональность редкость, но зато они поддерживают возможность вставлять кастомный CSS код, а этого в 90% случаев достаточно.

 

Допустим, наша тема на главной странице выводит посты поверх превьюшек которых выводятся рубрики, как тут:

Tl-F-rz-IHgs-A.jpg

 

Мне кажется это выглядит слишком просто и скучно, я люблю разные цвета и хочу кастомизировать цвет фона каждой отдельной рубрики. Чтобы сделать это можно воспользоваться селекторами атрибута. Читать про этот тип селектора тут: http://htmlbook.ru/s...ktory-atributov

 

Вкратце мы обращаемся в CSS к элементу не по его классу или идентифкатору, а по определенному атрибуту и его значение. В моем случае это обычная <a> ссылка, а атрибут это href="http://site.ru/category-name". Конкретно в моем случае у этой ссылки есть еще родительский блок div.entry-category поэтому я обращаюсь к элементу по такой конструкции:

div.entry-category>a[href="https://site.ru/category/trends"] {
	background: #FF4500;
}
div.entry-category>a[href="https://site.ru/category/games"] {
	background: #EE7700;
}

получаем такой результат:

 

1g5-Yqm-NPu-Yc.jpg

 

 

и так можно применить определенные стили к каждому отдельно взятому элементу. Например, можно выделить элемент в меню.

 

 

Добавить иконки FA в кастомном меню или к заголовкам виджетов можно также без плагинов. Просто подключаете FA и в конструкторе меню прописываете код нужной иконки прямо в заголовке каждого элемента меню. Более того там же используя атрибут style можно задать стили для иконки:

<i class="fab fa-android" style="color: green;"></i>  

Внимание
Чтобы увидеть этот текст Вам необходимо авторизоваться

 

Результат получается такой

 

Nc-ZLq-Xv-Tgi-Q.jpg

 

 

С виджетами придется использовать псевдоэлементы :before и/или :after, то есть до или после элемента. Для этого просто находите и обращаетесь через айди родительского элемента к заголовку виджета и прописываете такой код в CSS: 

#revenue_pro-views-4>.widget-title:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f518";
    color: red;
    padding-right: 5px;
}

C5-Ll-Iax-BNn-A.jpg

 

Перед любыми махинациями делайте резервную копию. 


 

 

Сообщение отредактировал TimurR: 14 Декабрь 2019 - 19:27

  • 2

Мощный и недорогой хостинг - IHC

Пользователи в игнор листе: MattCutts 



#2 FIvYUr
FIvYUr
  • Пользователь
  • 450 сообщений
  • Репутация: 36

Отправлено 14 Декабрь 2019 - 22:01

Я тоже кстати стандартные элементы уникализирую если в этом нужна, либо что бы еще было интереснее. Но тут главное не переборщить :D


  • 0



Похожие темы
  Название темы Автор Статистика Последнее сообщение

Пользователь месяца
FIvYUr FIvYUr 1-й за Декабрь
Очков активности: 2 062 0 тем, 125 сообщений, 11 баллов репутации
Сайт: moy-evroopt.ru
ТОП самых активных за этот месяц
  • Фотография albedo
    #1

    albedo (online24news.ru)
    Очков активности: 756 5 тем, 69 сообщений, 6 баллов репутации

  • Фотография Totti
    #2

    Totti
    Очков активности: 325.5 2 темы, 25 сообщений, 7 баллов репутации

  • Фотография Bilish
    #3

    Bilish
    Очков активности: 147 20 тем, 38 сообщений, 1 балл репутации

  • Фотография BLIK
    #4

    BLIK
    Очков активности: 54 Вне конкурса за определение пользователя месяца

  • Фотография Vmir
    #5

    Vmir
    Очков активности: 51 0 тем, 17 сообщений, 2 балла репутации

  • Фотография ShowPrint
    #6

    ShowPrint (ShowPrint.ru)
    Очков активности: 48 0 тем, 8 сообщений, 4 балла репутации

  • Фотография Santey
    #7

    Santey
    Очков активности: 37.5 4 темы, 13 сообщений, 1 балл репутации

  • Фотография Megoydagi
    #8

    Megoydagi (24ho.ru)
    Очков активности: 33 3 темы, 13 сообщений, 1 балл репутации

  • Фотография NataliaAntalia
    #9

    NataliaAntalia (zdorovemedicina.ru)
    Очков активности: 28.5 Вне конкурса за определение пользователя месяца

  • Фотография MattCutts
    #10

    MattCutts (dmitrylee.ru)
    Очков активности: 24 Вне конкурса за определение пользователя месяца

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 27.12.2019
  • Яндекс выдача: 19.01.2020
Топ 5 участников по репутации

Оформление форума – IPBSkins.ru