WordPress에 간단한 CSS 그리드 레이아웃 통합하기

올바른 도구를 사용하면 WordPress에 일관되고 단단한 그리드 레이아웃을 만드는 것이 어려워 질 수 있습니다. 이 튜토리얼에서는 워드 프레스의 그리드 시스템을 매우 가볍고 쉽게 수정할 수있는 방법을 단계별로 설정하는 방법을 단계별로 학습합니다. 올바른 도구를 사용하여 그리드를 설정하는 데 주력 할 수 있도록 간단하게 디자인을 유지하지만 필요한 경우 그리드에 스타일을 지정할 수 있습니다.

이 튜토리얼에서는 WordPress의 기본 풀 테마를 사용하여 "처음부터 시작"방식으로 그리드를 올바르게 표시하는 방법을 보여줍니다..

1 단계 : 그리드 너비 결정

시작하기 전에 그리드가 얼마나 넓어야 하는지를 결정해야합니다. 내 WordPress 사이트의 경우 객체를 마우스 오른쪽 버튼으로 클릭 할 때 Google 크롬의 "요소 검사"기능을 사용하여 기본 열 너비가 450 픽셀임을 알 수 있습니다. 이 방법은 웹 페이지에서 객체의 너비와 높이를 신속하게 결정할 수있는 가장 빠른 방법입니다..

2 단계 : 그리드 디자이너

원하는 경우 할 수있는 그리드를 직접 작성하는 대신, 사용 가능한 그리드 생성기 도구 중 하나를 사용하는 것이 좋습니다. 이 자습서에서는 MindPlay에서 그리드 생성기를 사용합니다. 매우 간단하고 가벼운 그리드 생성기입니다..

3 열 디스플레이가 필요하고 픽셀이 450에 있는지 확인해야합니다. 따라서 적절하게 조정하고 '내보내기'탭으로 건너 뜁니다. 우리는 * 타이포그래피 이 튜토리얼의 기능들, 비록 이것이 당신 자신 만의 탐험 가치가 있지만.

내보내기 탭에서 가장 위에있는 "스타일 시트"프레임을 사용하고 "격자"주석이 나타날 때까지 아래로 스크롤하십시오. 댓글에서부터이 프레임의 하단까지 모든 것을 복사합니다. 그것은 단지 약 30 줄이어야합니다.

3 단계 : WordPress 스타일 시트 업데이트

WordPress 사이트에 로그인하고 모양> 편집기로 이동하십시오..

편집기 패널의 오른쪽 하단에 Styles.css 파일 (또는 귀하의 테마에 따라 유사). 열려면 클릭하십시오..

시트의 맨 아래로 스크롤하여 MindPlay.dk에서 pre를 붙여 넣습니다.

4 단계 : 그리드 구현하기

그리드를 사용하려면

클래스 "그리드". 그리드의 각 영역은 CSS에서 정의됩니다. 새 페이지 나 게시물을여십시오. 눈금 만들기를 시작하려면 HTML 탭으로 이동하십시오..

다음은 시작하기 위해 붙여 넣을 수있는 샘플 샘플입니다.

   왼쪽 열
  중간 열
  오른쪽 열

다음은 WordPress의 모습입니다.

페이지를 저장 / 업데이트하고 결과를 확인하십시오. 내 경우에는 사이트의 홈 페이지입니다.

위의 스크린 샷에서 볼 수 있듯이, 우리는 세 개의 기둥을 가지고 있으며 우리가 기대하는 모든 것이 바로 있습니다. 다음과 같이 간단히 시작하여 원하는만큼의 행을 추가 할 수 있습니다.

    왼쪽 열
  중간 열
  오른쪽 열
    왼쪽 행 # 2
  중간 행 # 2
  오른쪽 행 # 2

지금까지 보이는 모습은 다음과 같습니다.

이제 이미지 나 텍스트를 추가하고 원하는대로 각 행의 스타일을 지정할 수 있습니다..

조정 팁

행이 두 개 이상인 경우 일부 브라우저에서 문제가 발생할 수 있습니다. 이 문제를 해결하려면 맨 오른쪽 여백을 만들어야합니다 (.그리드 -m4, 우리의 경우) 각 행을 원하는 높이로 설정하십시오. 250x250 픽셀 크기의 이미지를 사용하는 경우 행 높이를 .그리드 -m4 250 픽셀 :

.grid-m4 부동 : 왼쪽; 너비 : 20px; 높이 : 250px;

이렇게하면 .그리드 -m1 다음 행의 왼쪽에있는 행은 그 행 위에 떠오르지 않습니다..

전체 눈금의 배경 스타일을 지정하려면 눈금 높이를 조정해야합니다. .그리드 수업. 이제 표에 4 개의 행이 있고 각 행은 250 픽셀이라고 가정 해 보겠습니다. 1000px에서 .grid 클래스에 높이를 추가하여 추가하는 모든 스타일 요소가 전체 격자 디자인을 포함하게됩니다..

.그리드 너비 : 450px; 높이 : 1000px; 여백 : 자동;

사용하는 MindPlay.dk 그리드 생성기의 버전에 따라 사이트에서 ".grid-m4"를 생성하지 않고 대신 .그리드 -m1 후 .그리드 -C3 그리드가 적절한 위치로 확장되도록하려면 :

  왼쪽 열
  중간 열
  오른쪽 열

최종 결과

다음은 두 행과 간단한 그래픽을 사용하여 최종 결과를 보여줍니다.

재미있는 디자인을하고 원하는 방식으로 그리드 스타일을 지정할 수 있다는 것을 기억하십시오..

편집자 주 : 이 게시물은에 의해 작성됩니다 타라 호 노르 Hongkiat.com. Tara는 영어로 학위를 갖고 마케팅, 광고, 브랜딩, 그래픽 디자인 및 데스크톱 출판에 대해 씁니다. 그녀의 작문 경력 외에도 Tara는 남편과 두 자녀와 함께 시간을 보내고 있습니다..