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



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

#1 TimurR
TimurR
  • Пользователь PRO
  • 1 165 сообщений
  • Репутация: 288
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

Рекомендую биржу фриланса: FreelanceHunt



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

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

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


  • 0




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

Пользователь месяца
BLIK BLIK 1-й за Июль
Очков активности: 81 0 тем, 27 сообщений, 2 балла репутации
ТОП самых активных за этот месяц
  • Фотография sws
    #1

    sws
    Очков активности: 6 0 тем, 4 сообщения, 1 балл репутации

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

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

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

    Chaser (majento.ru)
    Очков активности: 4.5 1 тема, 0 сообщений, 1 балл репутации

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

    kuprum
    Очков активности: 4.5 1 тема, 0 сообщений, 1 балл репутации

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

    Cpatoday
    Очков активности: 4.5 1 тема, 0 сообщений, 1 балл репутации

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

    kartuzzz
    Очков активности: 4.5 1 тема, 0 сообщений, 1 балл репутации

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

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

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

    zyzy
    Очков активности: 3 0 тем, 2 сообщения, 1 балл репутации

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

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

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

    itservice (wpgrabber-tune.blogspot.com)
    Очков активности: 1.5 0 тем, 1 сообщение, 1 балл репутации

  • Показать весь ТОП 10

Поддержите форум! =)
Топ 5 участников по репутации

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