Содержание
Scroll to Top / Back to Top Кнопка внизу страницы иногда очень важна, особенно если у вас длинные сообщения . Здесь, на Crunchify, у нас есть большинство уроков по Java и советы по ведению блогов, и они очень длинные.
В этом уроке мы рассмотрим шаги по добавлению простых Scroll to Top button в нижнем колонтитуле WordPress без какой-либо загрузки JavaScript .
Если у вас есть ниже других вопросов, то вы находитесь в правильном месте:
- Как добавить кнопку наверх без JQuery
- Не плавающая кнопка прокрутки вверх
- Прокрутка вверх без какого-либо влияния на производительность
- Genesis Framework — как добавить пользовательский атрибут ID?
Another similar tutorial: Если ты хочешь Sticky Кнопка «Вверх», которая использует Javascript , а затем следуйте этому руководству .
Давайте начнем:
Шаг 1
На Crunchify мы используем Genesis Framework . По умолчанию моя тема Eleven40 не содержит никаких атрибутов ID в заголовке или теле.
Итак, нам нужно добавить ID называется content вручную с помощью крючка genesis_attr_content , Я собираюсь перечислить все пользовательские атрибуты для платформы Genesis в следующем посте.
Шаг 2
Поместите приведенный ниже код в файл functions.php вашей дочерней темы.
|
1
2
3
4
5
6
|
add_filter ( 'genesis_attr_content' , 'custom_attributes_content' ) ;
функция custom_attributes_content ( $ атрибуты ) {
$ attribute [ 'id' ] знак равно «содержание» ;
вернуть $ атрибуты ;
}
|
Это добавит кастом id="content" приписать в HTML тело. Посмотрите на скриншот ниже.
Шаг 3
Теперь нам нужно разместить arrow element (↑) в нижний колонтитул. Добавьте приведенный ниже код в свой пользовательский раздел нижнего колонтитула functions.php файл
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
// Настройка всего нижнего колонтитула
remove_action ( 'genesis_footer' , 'genesis_do_footer' ) ;
add_action ( 'genesis_footer' , 'custom_footer' ) ;
функция custom_footer ( ) {
? >
< div class = creds-left >
< p > & copy; 2012 — 16 < а href = https://crunchify.com target = _blank > Crunchify . com < / a > . & NBSP; & # 149; & NBSP; Все права защищены . < / p >
< / div >
< р class = crunchify-top > < a href = #content > ↑ < / a > < / p >
< div style = clear: both > < / div >
< ? PHP
}
|
В основном посмотрите на выделенные line 11 ,
Шаг 4
Теперь нам нужно украсить значок стрелки и поместить его в середину нижнего колонтитула. Просто поместите ниже CSS-код в вашу платформу Genesis Child's style.css файл
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
, crunchify — верх {
ясно : оба ;
слева : 50 % ;
поле — снизу : 20px ! важно ;
поле — верх : 20px ! важно ;
}
, crunchify — верх {
цвет : #fff;
цвет фона : # 333;
граница — радиус : 50 % ;
курсор : указатель ;
набивка : 10 пикселей ;
}
, crunchify — верх а : зависать {
цвет : #fff;
цвет фона : # 999;
}
|
Измените цвет CSS в соответствии с потребностями вашей темы.
Шаг 5
Очистите кеш сайта и, если вы используете MaxCDN или другого провайдера CDN, то тоже очистите кеш CDN. Обновите свою страницу, и вы должны прокрутить до верхней кнопки в разделе нижнего колонтитула точно так же, как вы видите это в Crunchify.
НОТА:
- Снова следуйте этому уроку, если вам нужна кнопка Sticky Scroll to Top ..
- Приведенные выше советы будут работать для Genesis Framework, но не ограничиваются и другими платформами WordPress. Надеюсь, это работает. Продолжайте посещать и счастливого ведения блога.
0.00 (0%) 0 votes
