Сегодня мы запустили новый Home Page Layout на Crunchify. Это основано на Grid Layout , Этот учебник поможет вам создать макет Grid с темами Genesis.
Как вы видите на домашней странице, он имеет только 1st post as a featured post с длиной контента 300. Оставшиеся 8 постов на домашней странице находятся в Grid Layout. Этот урок поможет вам достичь того же макета для вашей дочерней темы . Вы сможете добавить Grid View на HomePage в Genesis Framework .
Давайте начнем:
Шаг 1
- открыто
text editorи поместите ниже код. - Сохранить файл как home.php или
front-page.php, Для меня это front-page.php.
|
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
|
< ? PHP
/ **
* Этот файл добавляет домашнюю страницу в тему Бытия.
*
* @author Crunchify
* @package crunchify
* @authorUrl https://crunchify.com
* /
remove_action ( 'genesis_loop' , 'genesis_do_loop' ) ;
add_action ( 'genesis_loop' , 'crunchify_grid_loop_helper' ) ;
функция crunchify_grid_loop_helper ( ) {
если ( function_exists ( 'genesis_grid_loop' ) ) {
genesis_grid_loop ( массив (
'функции' = > 1 ,
'feature_image_size' = > 'crunchify-признак' ,
'feature_image_class' = > 'crunchify-img' ,
'feature_content_limit' = > 300 ,
'grid_image_size' = > 'crunchify-признак' ,
'grid_image_class' = > 'crunchify-img' ,
'grid_content_limit' = > 250 ,
'Больше' = > __ ( «[Продолжить чтение]» , 'crunchify' ) ,
) ) ;
} еще {
genesis_standard_loop ( ) ;
}
}
// * Запустить цикл Genesis
генезис ( ) ;
|
Шаг 2
Поместите файл в корневую папку вашей дочерней темы в том же месте, что и ваши файлы style.css и functions.php .
Шаг 3
открыто style.css файл и добавьте ниже 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
|
@ мультимедийный экран и ( мин — ширина : 1025 пикселей ) {
, сетка — признакам {
поле : 0px — 30 пикселей ;
max — ширина : 349 пикселей ;
}
}
@ СМИ только экран и ( максимальная ширина : 480 пикселей ) {
, Бытие — сетка — даже ,
, генезис — сетка — странно {
ширина : 100 %
}
}
, Бытие — сетка — даже ,
, генезис — сетка — странно {
поле — снизу : 20 пикселей ;
ширина : 48 %
}
, содержание — боковая панель — боковая панель , боковая панель — вторичная ,
, генезис — сетка — даже {
плавать : право
}
, генезис — сетка — странно {
ясно : оба ;
плавать : оставил
}
, генезис — сетка , запись — название ,
, генезис — сетка , запись — название {
размер шрифта : 22 пикселя ;
линия — высота : 1.4 ! важно ;
переполнение : скрытый
}
, генезис — сетка {
размер шрифта : 16 пикселей ;
переполнение : скрытый ;
линия — высота : 30 пикселей ;
набивка : 30 пикселей ;
}
, запись — мета ,
, генезис — сетка , запись — мета {
размер шрифта : 12px
}
, crunchify — лучшее {
поле : 0px — 30 пикселей ;
max — ширина : 350px ;
}
, crunchify — img {
обивка — снизу : 20 пикселей ;
граница : 1px твердый # f0f0f0;
граница — радиус : 2 пикселя ;
}
|
Этот CSS добавит Grid layout на вашу домашнюю страницу .
Шаг 4
Очистите кеш сайта и кеш браузера и перезагрузите страницу, чтобы увидеть обновленный макет для вашего сайта Genesis WordPress Theme.
Вот скриншот макета.
Дайте мне знать, если у вас есть какие-либо вопросы и вы столкнетесь с любой проблемой, связанной с этим Помощь — это просто сообщение.
0.00 (0%) 0 votes
