WordPress에서 고정 헤더를 만드는 방법

지난 10여 년 동안 웹사이트 탐색에 대한 강조가 계속해서 높아져 왔습니다. 이는 기존 데스크톱 인터페이스에 비해 탐색 옵션이 제한된 스마트폰이 널리 보급된 것과 일치합니다. 웹사이트 디자인의 차이는 2011년의 사이트와 지금 만들어진 사이트의 비교를 보면 더 분명합니다.

사이트 레이아웃을 재구성하는 데 사용된 주요 방법 중 하나는 고정 요소였습니다. 적절하게 명명된 이러한 요소는 페이지 주위를 이동할 때 페이지의 테두리에 달라붙습니다. 즉, 원래 위치를 유지합니다(Excel의 고정 창을 생각하면 작동 방식을 잘 알 수 있습니다).

위, 아래, 왼쪽, 오른쪽

고정 요소는 일반적으로 메뉴, 헤더 및/또는 상태 표시줄용으로 예약되어 있습니다. 방문자는 역추적할 필요 없이 한 페이지에서 다음 페이지로 즉시 전환할 수 있기 때문에 방문자에게 큰 유연성을 제공합니다. 또한, 이들 모두는 시작하기 위해 상단 및 하단 페이지 테두리에 배치되어 전체 전제와 잘 어울립니다. 페이지 중앙에 위치한 고정 요소 주위에 페이지를 구축하는 것은 매우 어려울 것입니다.

드물게 그들은 왼쪽과 오른쪽 테두리에서 같은 기능을 하고 레이아웃만 다른 경우를 볼 수 있습니다. 이러한 경우 커서로 마우스를 가져가거나 화면에서 터치할 때까지 숨겨집니다.

공간 절약

고정 요소의 흥미로운 점은 페이지와 사이트 전체의 공간을 절약할 수 있다는 것입니다. 실제로 전체 페이지를 대체하는 데 사용할 수 있습니다. 사이트의 본문을 그대로 두고 테두리를 페이지의 많은 기능을 자체적으로 수행하는 다기능 도구로 만들기 때문입니다. 잠시 동안 평균적인 사이트 레이아웃에 대해 생각해 보십시오.

상단은 지정된 범주와 검색 표시줄을 통해 정렬된 페이지를 수반하는 메뉴를 위해 예약되어 있습니다. 스크롤하는 동안 막대 뒤에 숨겨지고 필요할 때 확장됩니다. 그렇지 않은 경우 메뉴 트리만 페이지의 전체 상단 섹션을 차지하고 아래로 스크롤할 때 "팔로우"하지 않으므로 방문자는 페이지를 탐색하기 위해 계속 위아래로 움직여야 합니다. .

반면에 하단 고정 요소는 전체 지원 페이지를 매우 쉽게 대체할 수 있습니다. 채팅 버튼과 함께 이메일 및/또는 번호를 추가하기만 하면 됩니다. 방문자에게 지속적으로 현재 연락할 수 있는 방법을 제공하고 있습니다. 다시 한 번, 실제 응용 프로그램은 환상적입니다. 고객이 제품 페이지를 스크롤하고 질문이 있으며 채팅 버튼을 클릭하여 필요한 것이 무엇인지 즉시 찾을 수 있습니다.

끈적한 요소 만들기

우리가 WordPress에 대해 이야기할 때 생각할 수 있는 모든 것에 대해 갈 수 있는 방법은 항상 많고 여기에서도 마찬가지입니다. 기본 편집기 내에서 수동으로 고정 요소를 만들거나 코딩의 필요성을 초보자 친화적인 인터페이스로 대체하는 플러그인을 사용할 수 있습니다. 최종 결과 간의 대비는 최소화되지만 도달하는 방식이 모든 차이를 만듭니다. 이 예에서는 고정 헤더가 가장 일반적인 요소이므로 고정 헤더를 사용할 것입니다.

수동으로 고정 헤더 만들기

WordPress에서 수동으로 고정 헤더를 만들려면 CSS 코드를 사용해야 합니다. 너무 기술적이지 않으면 CSS 코드는 속성을 변경하기 위해 페이지의 거의 모든 요소에 추가할 수 있는 것입니다. 수동으로 코딩할 때 이것이 우리의 주요 사용자 정의 방법입니다. CSS를 먼저 사용하려면 헤더가 페이지에 있어야 하므로 처음에 사용자 정의할 항목이 있는지 확인하십시오. WordPress는 기본 편집기에서도 클릭으로 추가할 수 있는 옵션을 제공하기 때문에 이 프로세스를 단순화합니다.

작업할 헤더가 있으면 콘솔에 액세스해야 합니다. 대시보드 왼쪽에 있는 모양 섹션으로 이동하여 "사용자 지정"을 선택한 다음 "추가 CSS"를 클릭하기만 하면 됩니다. 이제 콘솔이 열리면 헤더를 고정시키는 코드를 입력해야 합니다.

 #website-navigation { background:#fff; height:60px; z-index:170; margin:0 auto; border-bottom:1px solid #dadada; width:100%; position:fixed; top:0; left:0; right:0; text-align: center; }

위의 코드는 일반적으로 어떻게 보여야 하는지에 대한 예일 뿐이며 모든 것을 다 갖춘 최종 명령은 아닙니다. 첫 번째 줄은 항상 각 사이트마다 다릅니다. 페이지 편집기로 돌아가기 전에 #website-navigation을 CSS 클래스 또는 탐색 헤더의 ID로 바꾸세요.

페이지/게시물 미리보기 창에서 기능을 확인한 후 게시하기만 하면 고정 헤더가 생성됩니다. 우리는 아마도 CSS 코드를 확장하여 이와 같은 헤더에 대한 "sticky" 속성 이상을 포함하고 싶을 것이라는 점을 지적해야 합니다. 색상 글꼴, 크기, 들여쓰기 등. 페이지에 영구적인 고정물이기 때문에 쉽게 간과될 수 있으므로 눈에 띄도록 노력해야 합니다.

플러그인으로 고정 헤더 만들기

비즈니스나 블로그를 위한 웹사이트가 필요한 사람들과 전문적으로 보이고 느껴지는 무언가를 구축할 지식이 없는 사람들 사이에는 엄청난 겹침이 있습니다. 운 좋게도 WordPress에는 모든 사람의 삶을 더 쉽게 만들어주는 많은 플러그인이 있습니다. 목표를 달성하기 위해 기본 소프트웨어 지식 이상을 소유할 필요가 거의 없습니다. WP Sticky는 위에서 다룬 모든 코딩을 누구나 빠르게 사용할 수 있는 사용자 친화적인 인터페이스로 대체하는 플러그인의 좋은 예입니다. 동시에 고정 헤더를 수동으로 생성할 때와 동일한 양의 기능을 제공합니다. 분해해 봅시다.

요소 만들기

CSS를 사용할 때 헤더가 있어야 하는 것처럼, 고정 속성을 추가할 요소를 생성해야 합니다.

요소를 선택하는 두 가지 뚜렷한 방법이 있습니다. 필수 필드에 지정을 입력하거나, 미리보기 창을 통해 클릭하여 요소를 선택할 수 있습니다(지정을 파악하는 데 문제가 있는 경우 이 방법이 효과적입니다). . 미리보기 창에서 요소를 선택하면 화면 상단에 변경되는 명칭이 표시됩니다.

한동안 플러그인으로 작업한 후에는 시각적 선택 도구를 거의 사용하지 않을 정도로 플러그인에 익숙해질 것입니다. 지정이 익숙해지면 간단하고 수동으로 입력하여 시간을 절약할 수 있습니다. 그 정도에 익숙해지기 전까지는 시각적 선택 도구가 가장 친한 친구가 될 것입니다. 궁극적으로 두 방법 모두 프론트엔드의 고정 헤더와 같은 동일한 위치로 이동합니다.

보기 좋게 만들어

모든 끈적한 요소가 동일하게 생성되는 것은 아니며 귀하의 것도 평범한 예가 되어서는 안 됩니다. 시각적 설정 섹션에서는 모든 면에서 고유한 고정 헤더를 만들기 위해 사용할 수 있는 다양한 사용자 지정 옵션을 제공합니다.

가장 먼저 고려해야 할 것은 요소의 위치입니다. 헤더를 만들고 있기 때문에 이것은 쉬운 결정이 될 것입니다. 우리는 그것을 페이지 상단에 붙일 것입니다. 위치 지정은 좋은 헤더의 핵심입니다. 따라서 페이지 맨 위를 차지하지 않으려면 헤더를 몇 픽셀 아래로 이동하여 더 잘 맞을 수 있습니다. 또한 사이트에서 등록된 사용자를 위한 관리 도구 모음을 사용하는 경우 플러그인이 자동으로 확인하도록 하고 그에 따라 헤더를 조정할 수 있습니다.

잠재적인 방문자가 웹을 탐색해야 하는 방법이 너무 많기 때문에 사이트가 완전히 반응해야 하는 필요성에 대해 약간 설명했습니다. 사이트를 완전히 적응형으로 만들기 위해 헤더를 고정할 화면을 선택할 수 있습니다.

일반적으로 더 작은 화면은 고정 헤더를 최대한 활용할 수 있는 반면, 더 많은 탐색 옵션이 있는 기존 데스크탑에 사용되는 더 큰 화면은 헤더 없이도 괜찮습니다. 크기는 모든 주요 화면 크기를 포괄하는 네 그룹으로 나뉩니다.

Z-색인은 언뜻 보기에 많은 사람들을 혼동시킬 수 있는 선택적 설정입니다. 이것과 그것이 선택적인 기능이라는 사실 때문에 많은 사람들이 아마도 그것을 무시하고 무시할 것입니다. 모든 것이 제대로 작동한다면 아마도 뒤돌아보지도 않을 것입니다. 그러나 디스플레이에 문제가 있는 경우 Z-색인이 잠재적으로 빠른 수정 솔루션이 될 수 있습니다. 기본적으로 페이지를 맨 위에 있는 스택이 맨 아래에 있는 것보다 더 높은 숫자를 갖는 스택의 모음이라고 생각하십시오. 따라서 고정 헤더를 가리는 것이 있으면 Z-색인을 높이십시오(99999가 작동하는 값으로 제안됨).

"스택 상단"에 고정 헤더를 사용하면 아래로 스크롤하면서 효과를 추가하여 더욱 창의적으로 작업할 수 있습니다. 두 옵션을 모두 비활성화하면 머리글은 원래 페이지의 잘라낸 부분처럼 맨 위에 위치를 유지합니다. 페이드 인 또는 슬라이드 다운과 같은 효과로 더 많은 플레어를 추가할 수 있습니다. 이러한 유형의 효과를 선택하기 전에 사이트의 전반적인 시각적 디자인을 고려하십시오. 그러나 – 종종 적은 것이 더 많습니다.

시각 효과는 움직임과 관련된 것에만 국한되지 않습니다. 헤더 자체를 사용자 정의할 수도 있습니다(헤더를 생성하는 동안 수행한 이동 외에도). 불투명도는 헤더가 페이지의 다른 콘텐츠를 가리지 않도록 하려는 경우에 유용합니다. 약 50%로 설정하면 헤더와 그 아래의 내용이 상대적으로 표시됩니다.

불투명도보다 훨씬 더 유용한 기능은 스크롤 범위를 조정하는 것입니다. 일반적으로 블로그와 같이 매우 긴 페이지가 있는 경우 고정 헤더가 더 이상 의미가 없는 곳으로 이동하는 데 특정 지점이 있습니다. 방문자가 충분히 아래로 스크롤한 후 헤더를 고정 해제하는 것이 좋은 경우입니다.

마지막으로, 헤더가 끈적거릴 때 헤더의 배경색을 변경하여 더 눈에 띄게 만드는 옵션이 있지만 헤더가 더 이상 끈적이지 않으면 원래 값으로 반전됩니다.

시각적 편집의 가장 마지막 부분은 CSS를 통해 고정 헤더를 수동으로 편집할 수 있는 완전한 원으로 돌아갑니다.

WP Sticky를 성공적으로 사용하기 위해 이전 코딩 지식이 필요하지 않더라도 사용하면 작업 수준을 높일 수 있습니다. 이 기능은 선택 사항이므로 사용 여부와 범위는 전적으로 귀하에게 달려 있습니다.

고급 옵션

고급 옵션 섹션은 제외에 대한 거의 모든 것입니다.

머리글이 고정되지 않는 화면 크기를 수동으로 설정하는 것은 시각적 설정 섹션에 표시되는 네 가지 기본 크기보다 한 단계 높아졌습니다. 여기에서 원하는 만큼 구체적으로 설정하게 되므로 미리 결정된 크기에 맞지 않는 와일드 스크린이 앞으로 있을 경우 적절한 규칙을 만들 수 있습니다.

헤더가 고정되지 않도록 하는 것은 화면 크기의 전부가 아니라 사이트의 콘텐츠, 보다 구체적으로 분류에 관한 것입니다. 헤더가 지정된 페이지, 게시물 및 게시물 유형, 특정 카테고리 또는 특정 태그가 있는 콘텐츠에 붙지 않도록 할 수 있습니다. 이러한 모든 조건은 스티키 헤더가 사용될 때와 그렇지 않을 때 완벽한 개요를 만들기 위해 혼합되고 일치될 수 있습니다.

맨 처음에 고정 요소(이 경우 머리글)를 다시 선택한 방식과 유사하게 페이지에서 머리글을 밀어 올리려는 아래쪽 밀어넣기 요소를 선택할 수도 있습니다. 이렇게 하면 본질적으로 헤더가 패딩이나 공백 없이 이 요소의 바로 경계로 이동합니다.

모든 것을 끝내기 위해, 당신이 질려서 끈적한 요소를 더 이상 원하지 않을 때, 항상 그것을 완전히 삭제하는 마지막 옵션이 있습니다. 이것은 영구적인 작업이며 요소(이 경우 헤더)에 대해 수행한 모든 사용자 정의가 손실된다는 점에 유의하십시오.

요약

어떤 방식이 더 낫다고 말하기는 어렵습니다. CSS를 사용하면 더 많은 옵션을 사용할 수 있지만 전반적으로 소수의 사람들에게만 해당되는 솔루션입니다. 반면에 WP Sticky와 같은 플러그인은 사용 용이성과 여전히 강력한 기능을 결합하여 초보자나 처음부터 코딩에 대해 확신이 없는 사람들에게 완벽한 선택이 됩니다. 아마도 끈적하고 작동하는 헤더를 만드는 가장 좋은 방법은 후자로 시작하여 전자까지 스스로 작업하는 것입니다.

저자: Matej Milohnoja

일반적으로 게임과 게임에 대해 글을 쓰곤 했으나 웹 개발 소프트웨어에 대한 테스트와 글을 쓰기로 전환했습니다. 여전히 재미를 위해 많은 게임을 합니다.