페이지를 스크롤할 때 고정 메뉴를 만듭니다. 페이지를 스크롤할 때 메뉴가 수정되었습니다. WordPress의 상단 메뉴를 수정하는 방법

블로그 및 기타 리소스 페이지에서 점점 더 자주 발견됩니다. 이러한 탐색 표시줄을 사용하는 것은 상당히 정당합니다. 이러한 jQuery 플러그인을 적극적으로 사용하는 주요 이유 중 하나는 메뉴가 페이지 하단에 있더라도 항상 방문자의 손끝에 있다는 것입니다. 또한 고정 메뉴는 공간을 거의 차지하지 않으며 주요 콘텐츠에 집중하는 데 방해가 되지 않습니다. 일반적으로 고정 메뉴는 사이트의 유용성을 향상시킵니다.
제 생각에는 고정 메뉴 구현을 위한 최고의 무료 jQuery 플러그인 컬렉션을 모았습니다. 저는 각 플러그인이 어떤 방식으로든 고유한지 확인하여 선택한 플러그인을 프로젝트에서 구체적으로 사용할 수 있도록 노력했습니다. 컬렉션에서는 애니메이션 등이 포함된 간단하고 복잡한 플러그인을 모두 찾을 수 있습니다.
소셜 버튼이 있는 고정 패널을 구현한 방법과 같이 매우 간단한 고정 메뉴가 필요한 경우 jQuery 플러그인 없이도 수행할 수 있습니다. 스크립트로 페이지를 로드하는 것은 그리 좋지 않기 때문입니다. 그러나 이에 대해서는 다음 기사에서 설명하겠습니다. 흥미로운 자료를 놓치지 않으려면 채널이나 페이지를 구독하세요.
그래서. 고정 메뉴를 생성하기 위한 6개의 jQuery 플러그인은 다음과 같습니다.

Auto-Hide Sticky HeaderjQuery 고정 탐색 플러그인은 위의 스크립트와 비슷한 원리로 작동하지만 덜 부드럽지만 언뜻 보기에는 조금 더 쉽습니다. 불행하게도 내비게이션이 완전히 적응적이라고 말할 수는 없습니다. 작은 화면에서는 메뉴 항목이 숫자로만 표시되기 때문에 매우 이상합니다.

스크롤 헤더 효과 고정 탐색 표시줄을 위한 강력한 jQuery 플러그인입니다. 스크롤할 때 페이지에 특정 세그먼트를 설정할 수 있으며, 이에 도달하면 패널이 변환되어 완전히 변경될 수 있습니다. 모습. 페이지에는 그러한 세그먼트가 얼마든지 있을 수 있습니다.

On-Scroll Animated Header 고정 탐색 표시줄을 구현하는 데 유용한 플러그인입니다. 작동 방식은 다음과 같습니다. 페이지 맨 시작 부분에 로고와 메뉴가 포함된 긴 헤더가 표시됩니다. 스크롤 시 로고, 내비게이션 등 모든 요소가 포함된 헤더 영역이 속성을 사용하여 부드럽게 줄어들고 화면 상단에 붙어 있는 좁은 띠가 됩니다.

안녕하세요, 블로그 사이트 독자 여러분. 이것은 모든 것을 되돌리고 싶을 때 정확히 무엇을 했는지 잊지 않기 위해 나 자신을 위한 메모에 가깝습니다. 이 모든 것은 독자 중 한 명이 Q2W3 고정 위젯(Sticky Widget)이라는 WordPress용 플러그인에 대해 글을 쓰자고 제안했을 때 시작되었습니다. 이 플러그인은 사이드바에 있는 모든 위젯을 부동 또는 고정으로 만들 수 있습니다.

저것들. 페이지를 스크롤하면 사이드바의 주요 부분이 위로 올라가는 것을 볼 수 있지만, 맨 아래에 위치하게 될 위젯은 텍스트를 얼마나 아래로 움직여도 보기 영역에 남아 있습니다. 무슨 포스팅할지 바로 말씀드릴게요 문맥 광고이는 금지되어 있으며 이에 대해 처벌을 받을 수 있습니다(댓글에서 밝혀진 바와 같이 - YAN은 이를 허용하지만 Adsense는 이를 금지합니다).

플러그인은 훌륭하지만 내 테마에서 위젯이 비활성화되어 있어서 결정했습니다. 이 작업인터넷에서 찾은 몇 줄의 JavaScript 코드를 사용합니다.

결과적으로 내 최상위 메뉴는 뷰포트 맨 위에 고정되어 있습니다. (사실 CSS 코드만으로도 충분했지만 쉬운 방법을 찾고 있지 않습니다.) 하단 부분페이지를 스크롤하는 동안 사이드바에 도달하면 화면 오른쪽 상단에 고정됩니다. 이것이 도움이 될지는 모르겠지만 해결책은 정말 간단합니다.

메뉴를 수정하고 플로팅 사이드바를 만드는 이유는 무엇입니까?

상단 메뉴를 왜 수정하냐고 물으시나요? 글쎄, 일반적으로 이것은 개선 주제에 대한 작은 실험입니다. 순전히 가정적으로, 이로 인해 사용자가 본 페이지 수와 사이트에서 보내는 시간이 증가할 수 있다고 가정할 수 있습니다.

한편, 이러한 고정된 패널의 과도한 침해성은 독자들로부터 부정적인 반응을 유발할 수 있으므로 이 조치의 유용성에 대한 의문은 여전히 ​​열려 있습니다. 일주일 후에 결과를 확인해야 합니다. 메뉴가 더 이상 고정되지 않으면(보기 영역의 상단 가장자리에 못 박혀 있음) 실험이 실패한 것입니다. 만약을 대비해, 이 모든 일이 어떻게 일어났는지 스크린샷으로 찍어두겠습니다.

WordPress의 플로팅 사이드바는 약간 다른 이유로 만들어졌습니다. 즉, 무언가에 더 많은 관심을 끌기 위한 것입니다. 원칙적으로 여기에는 카테고리 목록과 인기 게시물 또는 최근 게시물 목록을 모두 삽입할 수 있으며, 이는 행동 개선 작업을 다시 시도합니다. 그러나 대부분의 경우 광고는 플로팅 블록(이미 언급한 것처럼 문맥 광고는 허용되지 않음)에 배치되며 이는 순전히 가정적으로 웹마스터의 수입을 늘려야 합니다. 일주일 후에 결과를 보자.

WordPress의 상단 메뉴를 수정하는 방법

나는 이 페이지에서 웹사이트의 블록이나 메뉴를 수정하는 방법에 대한 해결책을 찾았습니다. 사용하기위한 이 방법연결되어야 합니다 jQuery 라이브러리. 이를 수행하는 방법은 콘텐츠 로드에 대한 기사에 자세히 설명되어 있습니다.

기억하신다면 페이지 로딩 속도 최적화에 대한 기사에서 모든 CSS와 JS를 하나의 공통된 것으로 결합해야 합니다(두 가지 의미에서 하나는 스타일용이고 다른 하나는 스크립트용). 그래서 실제로 저는 그러한 파일 바로 아래에 제공된 코드 줄을 추가했습니다. 직접 추가할 수도 있지만 HTML 코드, 스크립트 태그로 둘러싸여 있습니다. 예를 들어, head 태그 내부의 header.php 템플릿에서 이 작업을 수행할 수 있습니다.

다음을 사용하여 상단 메뉴를 수정할 수도 있습니다. 순수 CSS- 우리를 돕기 위해서요. 실제로 여기서도 이것을 이용하여 포지셔닝을 사용하고 있습니다. CSS 속성, 그러나 고정 메뉴 표시를 즉시 시작하는 것이 아니라 스크롤이 시작된 후 어느 정도 시간이 지나면(상단에서 일정 거리) 표시를 시작하는 것도 가능해집니다.

제 경우에는 상단 메뉴를 수정하는 코드는 다음과 같습니다.

$(function())( $(window).scroll(function() ( var top = $(document).scrollTop(); if (top< 10) $("#navi").css({top: "0", position: "relative"}); else $("#navi").css({top: "0px", width: "100%", position: "fixed"}); }); });

이 코드를 다음 위치에 붙여넣을 수 있다는 점을 상기시켜 드리겠습니다.

  • 사용 중인 테마가 있는 폴더(/wp-content/themes/theme)에 있는 .js 확장자를 가진 파일입니다. 사이트의 웹 페이지와 함께 로드하기 위해 header.php 파일에 다음과 같은 줄이 작성된 경우에만 적합합니다.
  • header.php 파일 자체를 사용하여 결론을 내릴 수 있습니다. 이 코드여는 헤드 태그와 닫는 헤드 태그 사이에 스크립트 태그로 래핑합니다. 예를 들어 다음과 같습니다. $(function())( $(window).scroll(function() ( var top = $(document).scrollTop(); if (맨 위< 10) $("#navi").css({top: "0", position: "relative"}); else $("#navi").css({top: "0px", width: "100%", position: "fixed"}); }); });
  • 다른 위치에서 스크립트 태그에 이 코드를 작성할 수도 있습니다. 가장 중요한 것은 그것이로드된다는 것입니다 올바른 페이지블로그. 예를 들어, footer.php에서 body 태그를 닫기 전에 이 작업을 수행할 수 있습니다.

    • 이제 이 코드를 직접 살펴보겠습니다. 위에서 10픽셀 떨어진 곳에 있는 것으로 나타났습니다. 상대 위치 지정고정된 것으로 대체됩니다(바로 위에 제공된 링크의 기사 참조). 필요한 경우 else 행에서 상단 값으로 0이 아닌 값을 선택할 수 있으며, 상단에 고정된 메뉴는 다음과 같이 뷰포트의 상단 가장자리에서 물러납니다. 주어진 값픽셀(제 생각에는 이것은 불필요합니다).

    원래 코드와 달리 width: "100%"도 추가해야 했습니다. 그렇지 않으면 메뉴 크기가 너비가 줄어들어 전체 그림이 망가질 수 있기 때문입니다.

    명확성을 위해 상위 메뉴를 구성하는 데 사용되는 HTML 코드를 제공하겠습니다. 워드프레스 템플릿블로그(내 header.php 파일에 있음):

    템플릿에서는 메뉴 항목 표시가 예를 들어 이러한 구성(함수)을 사용하여 지정될 가능성이 높지만 이는 중요하지 않습니다.