Tùy chỉnh số cột trong footer widgets Genesis Famework

10/15/2017

Tùy chỉnh số cột trong footer widgets Genesis Famework

Genesis Framework hiện nay rất được các webmaster ưu chuộng bởi sự đơn giản, nhẹ nhàng và chuẩn SEO của nó. Theo mặc định cũng giống như thêm logo cho Genesis child theme, thì có theme đã hỗ trợ sẵn cho bạn các footer widgets với số lượng các cột được hiển thị, nhưng có theme sẽ chỉ hỗ trợ 1 hoặc không hỗ trợ. Chính vì trong bài viết này mình sẽ chia sẻ với 3 bước đơn để thêm 3 cột trong footer widgets Genesis Famework.

Bước 1: Để tạo thêm 3 cột trong footer widgets Genesis Famework, bạn thêm dòng sau vào tập tin functions.php trong theme.

//* Add support for 3-column footer widgetsadd_theme_support( 'genesis-footer-widgets', 3 );

1

2

//* Add support for 3-column footer widgets

add_theme_support( 'genesis-footer-widgets', 3 );

P/s: Mặc định là mình để 3 cột, các bạn có thể chỉnh sửa bên trên.

Bước 2: Bước tiếp theo bạn sẽ cần phải thêm CSS tương ứng với số cột bạn muốn vào style.css trong theme bạn đang sử dụng.

2 cột footer widgets

/* 2-column Footer Widgets--------------------------------------------- */ .footer-widgets-1,.footer-widgets-2 { width: 47.5%; /* 570px / 1200px */ float: left;} .footer-widgets-1 { margin-right: 5%; /* 60px / 1200px */} @media only screen and (max-width: 768px) { .footer-widgets-1, .footer-widgets-2 { width: 100%; } .footer-widgets-1 { margin-right: 0; } }

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

/* 2-column Footer Widgets

--------------------------------------------- */

.footer-widgets-1,

.footer-widgets-2 {

        width: 47.5%; /* 570px / 1200px */

        float: left;

}

.footer-widgets-1 {

        margin-right: 5%; /* 60px / 1200px */

}

@media only screen and (max-width: 768px) {

        .footer-widgets-1,

        .footer-widgets-2 {

                width: 100%;

        }

        .footer-widgets-1 {

                margin-right: 0;

        }

}

 3 cột footer widgets

/* 3-column Footer Widgets--------------------------------------------- */ .footer-widgets-1,.footer-widgets-2,.footer-widgets-3 { width: 30%; /* 360px / 1200px */ float: left;} .footer-widgets-1,.footer-widgets-2 { margin-right: 5%; /* 60px / 1200px */} @media only screen and (max-width: 768px) { .footer-widgets-1, .footer-widgets-2, .footer-widgets-3 { width: 100%; } .footer-widgets-1, .footer-widgets-2 { margin-right: 0; } }

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

/* 3-column Footer Widgets

--------------------------------------------- */

.footer-widgets-1,

.footer-widgets-2,

.footer-widgets-3 {

        width: 30%; /* 360px / 1200px */

        float: left;

}

.footer-widgets-1,

.footer-widgets-2 {

        margin-right: 5%; /* 60px / 1200px */

}

@media only screen and (max-width: 768px) {

        .footer-widgets-1,

        .footer-widgets-2,

        .footer-widgets-3 {

                width: 100%;

        }

        

        .footer-widgets-1,

        .footer-widgets-2 {

                margin-right: 0;

        }

}

 4 cột footer widgets

/* 4-column Footer Widgets--------------------------------------------- */ .footer-widgets-1,.footer-widgets-2,.footer-widgets-3,.footer-widgets-4 { width: 22%; /* 264px / 1200px */ float: left;} .footer-widgets-1,.footer-widgets-2,.footer-widgets-3 { margin-right: 4%; /* 48px / 1200px */} @media only screen and (max-width: 1024px) { .footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .footer-widgets-4 { width: 47.5%; /* 456px / 960px */ } .footer-widgets-1, .footer-widgets-3 { margin-right: 5%; /* 48px / 960px */ } .footer-widgets-2, .footer-widgets-4 { margin-right: 0; } } @media only screen and (max-width: 568px) { .footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .footer-widgets-4 { width: 100%; } .footer-widgets-1, .footer-widgets-2, .footer-widgets-3 { margin-right: 0; } }

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

/* 4-column Footer Widgets

--------------------------------------------- */

.footer-widgets-1,

.footer-widgets-2,

.footer-widgets-3,

.footer-widgets-4 {

        width: 22%; /* 264px / 1200px */

        float: left;

}

.footer-widgets-1,

.footer-widgets-2,

.footer-widgets-3 {

        margin-right: 4%; /* 48px / 1200px */

}

@media only screen and (max-width: 1024px) {

        .footer-widgets-1,

        .footer-widgets-2,

        .footer-widgets-3,

        .footer-widgets-4 {

                width: 47.5%; /* 456px / 960px */

        }

        .footer-widgets-1,

        .footer-widgets-3 {

                margin-right: 5%; /* 48px / 960px */

        }

        

        .footer-widgets-2,

        .footer-widgets-4 {

                margin-right: 0;

        }

}

@media only screen and (max-width: 568px) {

        .footer-widgets-1,

        .footer-widgets-2,

        .footer-widgets-3,

        .footer-widgets-4 {

                width: 100%;

        }

        

        .footer-widgets-1,

        .footer-widgets-2,

        .footer-widgets-3 {

                margin-right: 0;

        }

}

 5 cột footer widgets

/* 5-column Footer Widgets--------------------------------------------- */ .footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .footer-widgets-4,.footer-widgets-5 { width: 16.6666666667%; /* 200px / 1200px */ float: left;} .footer-widgets-1, .footer-widgets-2, .footer-widgets-3,.footer-widgets-4 { margin-right: 4.1666666667%; /* 50px / 1200px */} @media only screen and (max-width: 1024px) { .footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .footer-widgets-4, .footer-widgets-5 { width: 47.7083333333%; /* 458px / 960px */ } .footer-widgets-1, .footer-widgets-3 { margin-right: 4.5833333333%; /* 44px / 960px */ } .footer-widgets-2, .footer-widgets-4 { margin-right: 0; } } @media only screen and (max-width: 568px) { .footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .footer-widgets-4, .footer-widgets-5 { width: 100%; } .footer-widgets-1, .footer-widgets-3 { margin-right: 0; } }

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

/* 5-column Footer Widgets

--------------------------------------------- */

.footer-widgets-1,

.footer-widgets-2,

.footer-widgets-3,

.footer-widgets-4,

.footer-widgets-5 {

        width: 16.6666666667%; /* 200px / 1200px */

        float: left;

}

.footer-widgets-1,

.footer-widgets-2,

.footer-widgets-3,

.footer-widgets-4 {

        margin-right: 4.1666666667%; /* 50px / 1200px */

}

@media only screen and (max-width: 1024px) {

        .footer-widgets-1,

        .footer-widgets-2,

        .footer-widgets-3,

        .footer-widgets-4,

        .footer-widgets-5 {

                width: 47.7083333333%; /* 458px / 960px */

        }

        .footer-widgets-1,

        .footer-widgets-3 {

                margin-right: 4.5833333333%; /* 44px / 960px */

        }

        .footer-widgets-2,

        .footer-widgets-4 {

                margin-right: 0;

        }

}

@media only screen and (max-width: 568px) {

        .footer-widgets-1,

        .footer-widgets-2,

        .footer-widgets-3,

        .footer-widgets-4,

        .footer-widgets-5 {

                width: 100%;

        }

        .footer-widgets-1,

        .footer-widgets-3 {

                margin-right: 0;

        }

}

Bước 3: Khi thực hiện xong bạn lưu lại và điều hướng sang bảng điều khiển WordPress Dashboard -> Appearance -> Widgets để kiểm tra và sử dụng.

Chúc các bạn thành công!

Nguồn: Việt Hùng admin https://chiasewp.com/

Chia Sẻ :

Tweet

Bài viết liên quan

Genesis Framework hiện nay rất được các webmaster ưu chuộng bởi sự đơn giản, nhẹ nhàng và chuẩn SEO của nó. Theo mặc định cũng giống như thêm logo cho Genesis child theme, thì có theme đã hỗ trợ sẵn cho bạn các footer widgets với số lượng các cột được hiển thị, nhưng có theme sẽ chỉ hỗ trợ 1 hoặc không hỗ trợ. Chính vì trong bài viết này mình sẽ chia sẻ với 3 bước đơn để thêm 3 cột trong footer widgets Genesis Famework.

Bước 1: Để tạo thêm 3 cột trong footer widgets Genesis Famework, bạn thêm dòng sau vào tập tin functions.php trong theme.

//* Add support for 3-column footer widgetsadd_theme_support( 'genesis-footer-widgets', 3 );

1

2

//* Add support for 3-column footer widgets

add_theme_support( 'genesis-footer-widgets', 3 );

P/s: Mặc định là mình để 3 cột, các bạn có thể chỉnh sửa bên trên.

Bước 2: Bước tiếp theo bạn sẽ cần phải thêm CSS tương ứng với số cột bạn muốn vào style.css trong theme bạn đang sử dụng.

2 cột footer widgets

/* 2-column Footer Widgets--------------------------------------------- */ .footer-widgets-1,.footer-widgets-2 { width: 47.5%; /* 570px / 1200px */ float: left;} .footer-widgets-1 { margin-right: 5%; /* 60px / 1200px */} @media only screen and (max-width: 768px) { .footer-widgets-1, .footer-widgets-2 { width: 100%; } .footer-widgets-1 { margin-right: 0; } }

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

/* 2-column Footer Widgets

--------------------------------------------- */

.footer-widgets-1,

.footer-widgets-2 {

        width: 47.5%; /* 570px / 1200px */

        float: left;

}

.footer-widgets-1 {

        margin-right: 5%; /* 60px / 1200px */

}

@media only screen and (max-width: 768px) {

        .footer-widgets-1,

        .footer-widgets-2 {

                width: 100%;

        }

        .footer-widgets-1 {

                margin-right: 0;

        }

}

 3 cột footer widgets

/* 3-column Footer Widgets--------------------------------------------- */ .footer-widgets-1,.footer-widgets-2,.footer-widgets-3 { width: 30%; /* 360px / 1200px */ float: left;} .footer-widgets-1,.footer-widgets-2 { margin-right: 5%; /* 60px / 1200px */} @media only screen and (max-width: 768px) { .footer-widgets-1, .footer-widgets-2, .footer-widgets-3 { width: 100%; } .footer-widgets-1, .footer-widgets-2 { margin-right: 0; } }

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

/* 3-column Footer Widgets

--------------------------------------------- */

.footer-widgets-1,

.footer-widgets-2,

.footer-widgets-3 {

        width: 30%; /* 360px / 1200px */

        float: left;

}

.footer-widgets-1,

.footer-widgets-2 {

        margin-right: 5%; /* 60px / 1200px */

}

@media only screen and (max-width: 768px) {

        .footer-widgets-1,

        .footer-widgets-2,

        .footer-widgets-3 {

                width: 100%;

        }

        

        .footer-widgets-1,

        .footer-widgets-2 {

                margin-right: 0;

        }

}

 4 cột footer widgets

/* 4-column Footer Widgets--------------------------------------------- */ .footer-widgets-1,.footer-widgets-2,.footer-widgets-3,.footer-widgets-4 { width: 22%; /* 264px / 1200px */ float: left;} .footer-widgets-1,.footer-widgets-2,.footer-widgets-3 { margin-right: 4%; /* 48px / 1200px */} @media only screen and (max-width: 1024px) { .footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .footer-widgets-4 { width: 47.5%; /* 456px / 960px */ } .footer-widgets-1, .footer-widgets-3 { margin-right: 5%; /* 48px / 960px */ } .footer-widgets-2, .footer-widgets-4 { margin-right: 0; } } @media only screen and (max-width: 568px) { .footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .footer-widgets-4 { width: 100%; } .footer-widgets-1, .footer-widgets-2, .footer-widgets-3 { margin-right: 0; } }

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

/* 4-column Footer Widgets

--------------------------------------------- */

.footer-widgets-1,

.footer-widgets-2,

.footer-widgets-3,

.footer-widgets-4 {

        width: 22%; /* 264px / 1200px */

        float: left;

}

.footer-widgets-1,

.footer-widgets-2,

.footer-widgets-3 {

        margin-right: 4%; /* 48px / 1200px */

}

@media only screen and (max-width: 1024px) {

        .footer-widgets-1,

        .footer-widgets-2,

        .footer-widgets-3,

        .footer-widgets-4 {

                width: 47.5%; /* 456px / 960px */

        }

        .footer-widgets-1,

        .footer-widgets-3 {

                margin-right: 5%; /* 48px / 960px */

        }

        

        .footer-widgets-2,

        .footer-widgets-4 {

                margin-right: 0;

        }

}

@media only screen and (max-width: 568px) {

        .footer-widgets-1,

        .footer-widgets-2,

        .footer-widgets-3,

        .footer-widgets-4 {

                width: 100%;

        }

        

        .footer-widgets-1,

        .footer-widgets-2,

        .footer-widgets-3 {

                margin-right: 0;

        }

}

 5 cột footer widgets

/* 5-column Footer Widgets--------------------------------------------- */ .footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .footer-widgets-4,.footer-widgets-5 { width: 16.6666666667%; /* 200px / 1200px */ float: left;} .footer-widgets-1, .footer-widgets-2, .footer-widgets-3,.footer-widgets-4 { margin-right: 4.1666666667%; /* 50px / 1200px */} @media only screen and (max-width: 1024px) { .footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .footer-widgets-4, .footer-widgets-5 { width: 47.7083333333%; /* 458px / 960px */ } .footer-widgets-1, .footer-widgets-3 { margin-right: 4.5833333333%; /* 44px / 960px */ } .footer-widgets-2, .footer-widgets-4 { margin-right: 0; } } @media only screen and (max-width: 568px) { .footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .footer-widgets-4, .footer-widgets-5 { width: 100%; } .footer-widgets-1, .footer-widgets-3 { margin-right: 0; } }

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

/* 5-column Footer Widgets

--------------------------------------------- */

.footer-widgets-1,

.footer-widgets-2,

.footer-widgets-3,

.footer-widgets-4,

.footer-widgets-5 {

        width: 16.6666666667%; /* 200px / 1200px */

        float: left;

}

.footer-widgets-1,

.footer-widgets-2,

.footer-widgets-3,

.footer-widgets-4 {

        margin-right: 4.1666666667%; /* 50px / 1200px */

}

@media only screen and (max-width: 1024px) {

        .footer-widgets-1,

        .footer-widgets-2,

        .footer-widgets-3,

        .footer-widgets-4,

        .footer-widgets-5 {

                width: 47.7083333333%; /* 458px / 960px */

        }

        .footer-widgets-1,

        .footer-widgets-3 {

                margin-right: 4.5833333333%; /* 44px / 960px */

        }

        .footer-widgets-2,

        .footer-widgets-4 {

                margin-right: 0;

        }

}

@media only screen and (max-width: 568px) {

        .footer-widgets-1,

        .footer-widgets-2,

        .footer-widgets-3,

        .footer-widgets-4,

        .footer-widgets-5 {

                width: 100%;

        }

        .footer-widgets-1,

        .footer-widgets-3 {

                margin-right: 0;

        }

}

Bước 3: Khi thực hiện xong bạn lưu lại và điều hướng sang bảng điều khiển WordPress Dashboard -> Appearance -> Widgets để kiểm tra và sử dụng.

Chúc các bạn thành công!

Nguồn: Việt Hùng admin https://chiasewp.com/

Thẻ : Wordpress