Оптимизация сайта на WordPress является ключевой целью для меня и всех нас в Crunchify. Ускоренная загрузка сайта является ключевым фактором для ранжирования на странице результатов поиска Google (SERP).
Некоторое время назад я получил письмо от Sreehari Sree спрашивая о создании Follow Sidebar Widget как у нас на Crunchify. Вот краткая информация о нашей конверсии
Как и было обещано в электронном письме, здесь приведены подробные инструкции о том, как создать виджет Nice & Stunning Follow с использованием пользовательских CSS и HTML- кода
Шаг 1
Включают Font Awesome к вашей теме. Я использую плагин All in One Webmaster Плагин WordPress для добавления FontAwesome в заголовочный раздел моей темы.
- Скачать все в одном для веб-мастеров .
- Активируйте это.
- Идти к
AIO Webmaster-> Раздел верхнего / нижнего колонтитула - Добавьте ниже URL в раздел заголовка
- Нажмите на
Update options,
Шаг 2
Поместите ниже HTML-код в область текстового виджета .
- Идти к
Appearance-> Раздел виджетов. - Положил
Custom HTMLвиджет для вашей боковой панели. - Поместите ниже код для вашего виджета.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
< div class = crunchify-follower >
< div class = widgetheading >
Над 16 миллион читателей <Бр>
< / div >
< div class = crunchify-social-share-sidebar > < a class = crunchify-social-icon-rss crunchify-social-icon href = https://feeds.feedburner.com/Crunchify target = _blank rel = noopener >
< я class = fas fa-rss fa-2x > < / i > < / a > < a class = crunchify-social-icon-twitter crunchify-social-icon href = https://twitter.com/crunchify target = _blank rel = noopener >
< я class = fab fa-twitter fa-2x > < / i > < / a > < a class = crunchify-social-icon-googleplus crunchify-social-icon href = https://www.google.com/+CrunchifyDotCom target = _blank rel = noopener >
< я class = fab fa-google-plus fa-2x > < / i > < / a > < a class = crunchify-social-icon-facebook crunchify-social-icon href = https://www.facebook.com/Crunchify target = _blank rel = noopener >
< я class = fab fa-facebook fa-2x > < / i > < / a > < a class = crunchify-social-icon-youtube crunchify-social-icon href = https://www.youtube.com/c/CrunchifyDotCom target = _blank rel = noopener >
< я class = fab fa-youtube fa-2x > < / i > < / a > < a class = crunchify-social-icon-wordpress crunchify-social-icon href = https://profiles.wordpress.org/crunchify target = _blank rel = noopener >
< я class = fab fa-wordpress fa-2x > < / i > < / a > < a class = crunchify-social-icon-pinterest crunchify-social-icon href = https://www.pinterest.com/Crunchify/crunchify-articles/ target = _blank rel = noopener >
< я class = fab fa-pinterest-p fa-2x > < / i > < / a >
< / div >
< / div >
< div style = clear: both; > < / div >
|
Не забудьте изменить текст выше и переходить по ссылкам в социальных сетях
Шаг 3
Следующее, что вам нужно, это добавить код ниже на ваш сайт style.css файл для украшения внешнего вида.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
, crunchify — последователь {
фон : #fff;
поле : 30px 0 10 пикселей ;
граница — радиус : 3 пикселя ;
коробка — тень : 0 0 2px 0 RGBA (0, 0, 0,. 12), 0 2px 2px 0 RGBA (0, 0, 0, 24) . ;
дисплей : inline — блок ;
набивка : 20px 5 пикселей ;
текст — выровнять : центр ;
min — ширина : 302px ;
max — ширина : 340px
}
, widgetheading {
размер шрифта : 18 пикселей ;
шрифт — вес : 600 ;
набивка : 0 0 25 пикселей ;
цвет : # 444
}
, widgetheading п {
размер шрифта : 15 пикселей ;
цвет : # 999;
шрифт — вес : 400 ;
набивка : 3px 0 0
}
, crunchify — социальные — icon {
поле : 1px 5 пикселей ;
размер шрифта : 13 пикселей ! важный
}
, crunchify — социальные — icon — главная {
поле : 1px 6px
}
, crunchify — social — поделиться — sidebar {
поле — снизу : 5px
}
, crunchify — социальные — icon — rss {
цвет : # f26522 важно!
}
, crunchify — социальные — icon — твиттер {
цвет : # 00aced важно!
}
, crunchify — социальные сети — icon — facebook {
цвет : # 3b5998 важно!
}
, crunchify — social — icon — pinterest {
цвет : # cb2027 важно!
}
, crunchify — социальные — icon — wordpress {
цвет : # 21759b важно!
}
, crunchify — социальные сети — icon — googleplus {
цвет : # dd4b39 важно!
}
, crunchify — социальные — icon — электронная почта {
цвет : # 666 важно!
}
, crunchify — социальные — icon — youtube {
цвет : # b00 важно!
}
, crunchify — социальные — icon — linkedin {
цвет : # 0074a1 важно!
}
|
Шаг 4
Очистите кеш сайта, и все готово.
Я надеюсь, что теперь вы можете увидеть хороший виджет на вашем сайте. Дайте мне знать, если у вас возникнут проблемы.
0.00 (0%) 0 votes
