인터넷, 웹 호스팅
사이트의 '위로'버튼 : 수행 방법
사이트의 "위로"버튼과 같은 이러한 기능은 인터넷 자원을 방문자에게보다 편리하게 만듭니다. 페이지의 아무 곳에서나 쉽게 이동할 수 있습니다. 이것은 온라인 상점 및 긴 기사를 내려야하는 대형 기사가있는 사이트에만 필요합니다.
그것을 위해 무엇입니까?
현재 대부분의 사이트에는 "위로"버튼과 같은 기능이 없으며 이에 대한 중요한 것은 없습니다. 그러나 그것의 사용은 인터넷 자원과 방문객 모두에게 많은 장점을 줄 수 있습니다.
방문자를위한 혜택
정보 기사가 많은 공간을 차지하고 마우스 휠로 페이지를 아래로 스크롤해야하는 경우 인터넷 리소스 페이지에 정보가 많이로드되는 경우가 종종 발생합니다. 이 외에도 기사 끝에는 많은 의견이있을 수 있습니다.
방문자가 기사를 읽으면 페이지를 스크롤하는 데 지루한 일은 없지만 텍스트가 끝나고 위쪽으로 이동할 필요가있을 때 약간 지친다. 대부분의 사람들은 단순히 길쭉한 길을 인도하기에는 너무 게을러 질 뿐이며, 그 곳을 아직도 걸어 다니는 대신 사이트를 닫을 것입니다.
버튼을 사용하여 페이지 상단으로 즉시 이동하면 사이트의 오락성이 더 편리해집니다.
인터넷 자원의 이점
리소스 자체에 대한 긍정적 측면은 과거 요인에 기반합니다. 왜냐하면 모든 방문자가 자신의 행동에 적극적으로 참여하고 다른 페이지로 이동하기 때문에 사이트의 단순화 된 움직임으로 인해 행동 요소가 개선되기 때문입니다.
따라서 이러한 행동 요소 는 사이트에 대한 모든 검색 엔진의 태도에 영향을 미치고 검색 결과의 위치가 향상됩니다.
사이트에서 버튼을 "위로"올리는 방법
우리는 더 깊이 이해합니다. 임의의 CMS에있는 사이트의 스크롤 업 버튼은 사용자가 직접 수행 할 수 있으며 몇 가지 간단한 단계 만 수행하면됩니다.
- 이미지 생성;
- 스크립트의 생성;
- 버튼 스타일 만들기;
- 사이트에 추가.
버튼 이미지
사이트에 "위로"단추를 추가하려면 먼저 사용자가 페이지 위로 이동할 위치를 클릭하여 아이콘 자체를 만들어야합니다. 이렇게하려면 기성품 옵션을 사용할 수 있으며 그 중에서도 항상 가장 적합한 것을 선택할 수 있습니다.
버튼의 모양을 개선하려면 CSS를 기반으로 배경 이미지를 결합하여 애니메이션을 생성 할 수있는 스프라이트를 만들기위한 몇 가지 개선이 필요합니다.
그래픽 작업의 경우 모든 편집기를 사용할 수 있습니다. 그러나 가장 편리한 옵션은 PIXLR 온라인 서비스입니다. 여기에서 다운로드 할 것이 없으므로 브라우저에서 직접 사용할 수 있습니다.
나타나는 편집기 창에서 작업을 시작하려면 "컴퓨터에서 이미지 업로드"필드를 선택하십시오. 예를 들어, 로켓의 이미지를 찍으십시오.
선택한 아이콘의 크기가 너무 큰 경우 치수를 약간 조정해야합니다. 이렇게하려면 최상위 메뉴로 이동하여 "편집"필드를 선택하고 "자유 변형 ..."
사진 옆에는 특수한 마커가 있으며, 움직이면 이미지의 크기를 변경할 수 있습니다. 비율을 저장하려면 파란색 마커를 이동해야하는 Shift 키를 사용할 수 있습니다. 이러한 행동이 끝나면 로켓의 이미지가 획득됩니다.
다음 단계는 레이어의 복사본을 만드는 것입니다.
이제 새로운 레이어의 로켓 사진을 조금씩 움직여야합니다. 이렇게하려면 왼쪽 메뉴의 두 번째 열에있는 이동 도구와 키보드의 "위로"화살표를 사용하면 편리합니다.
이제 상단 사진을 흑백으로 만들어야합니다. 이것은 최상위 메뉴의 "수정"- "색조 / 채도"항목을 사용하여 수행 할 수 있습니다. 완전히 탈색하려면 [채도] 슬라이더를 -100으로 설정해야합니다. 이 동작을 사용하면 "위로"단추를 가리키면 흑백에서 색상으로 바뀌면 효과가 적용됩니다.
마지막으로 터치하면 두 그림 주위의 여유 공간이 제거됩니다. 이렇게하려면 왼쪽 메뉴에서 "Crop"항목을 선택하고 직사각형에서 두 개의 미사일 만 선택하십시오. 자르기를 실행하려면 Enter 키를 누르십시오.
결과는 초과 공간이없는 이미지입니다. 이 데이터는 다음 단계에서 유용하므로 결과 이미지의 너비와 높이를 기록해야합니다.
저장하려면 "파일"- "저장"을 클릭해야합니다. 왼쪽 항목 "내 컴퓨터"에 이미지 이름 (영어 레이아웃 만)을 쓰고 형식 (이 경우 PNG)을 선택하고 "예"버튼을 클릭하십시오.
"위로"버튼 스크립트가있는 파일
이 경우 스크립트를 작성할 필요가 없습니다. public 옵션을 이용하여 완성 된 코드를 수정하는 것이 가능합니다.
이렇게하려면 코드 편집기를 다운로드해야합니다. 가장 인기 있고 무료 인 버전은 Notepad ++입니다. 설치 한 후에는 다음 코드를 모두 복사하여 붙여 넣어야합니다.
| $ (document) .ready (function () {$ (window) .scroll (function () {if ($ this .scrollTop ()> 0) {$ ( ' (function () {$ ( 'body, html'))을 클릭하면, FadeIn ()이 실행됩니다. Animate ({scrollTop : 0}, 400); false를 반환};}); |
그런 다음 상위 메뉴 "파일"- "다른 이름으로 저장 ..."을 클릭 한 다음 .js 형식으로 코드를 저장하십시오. 그런 다음 FTP 연결을 사용하여 사이트에이 코드를 사용하여 스크립트 파일과 이미지를 업로드 할 수 있습니다.
사이트에 설치
사이트의 스크롤 단추를 설정하려면 원하는 위치에 코드를 배치해야합니다. 태그 앞에 입력해야합니다 .
CSS에서 버튼 스타일 만들기
가장 자주 사이트의 '위로'버튼은 하단 ( '지하실')에 있습니다.
site.css 파일에서 다음 코드를 입력해야합니다.
"/ * 위로 버튼 * / .scrollTop { |
이 경우 이미지의 데이터 폭과 높이가 필요합니다. 코드에 데이터를 입력하기 만하면 사이트의 "위로"버튼이 준비됩니다! 또 뭐야?
Wordpress 사이트를위한 위로 버튼
이 CMS의 경우 "위로"버튼은 플러그인뿐만 아니라 독립적으로도 수행 할 수 있습니다.
플러그인을 사용하는 방법은 설치 버튼을 클릭하고 플러그인 메뉴의 모든 기능을 조정해야하기 때문에 가장 편리하고 쉽게 설치할 수 있습니다.
후자에 대한 선택은주의 깊게해야하며, 함께 사이트에서 쉽게 바이러스를 구입할 수 있습니다. 가장 인기 있고 입증 된 옵션은 Scroll Back To Top이라는 플러그인입니다. 표준 Wordpress 플러그인 검색을 사용하여 다운로드 할 수 있습니다.
이 확장 기능은 여러 기능을 가지고 있으며, WordPress 사이트의 "위로"버튼을 개별화하는 것은 매우 쉽습니다. 모든 값을 변경할 필요는 없으며 사이트 페이지에서 버튼의 모양과 위치 만 구성하면됩니다.
보시다시피, 플러그인을 사용하여 "위로"버튼을 설정하는 것은 매우 간단합니다. 그러나 하나의 중요한 뉘앙스가 있습니다. 각각의 설치된 플러그인이 CMS를로드합니다. 이것은 인터넷 자원의 속도에 영향을 줄 수 있습니다. 따라서 대부분의 사이트 소유자는 타사 확장 기능을 사용하지 않고 코드에서 직접 모든 변경 사항을 실행하려고합니다. HTML의 사이트에 대해 버튼을 "위로"만들면 소비되는 자원을 최소화 할 수 있습니다.
WordPress는 모든 시스템 파일을 변경하기 전에 백업 복사본을 만들어야합니다. 그런 다음 위에서 설명한 모든 단계를 수행하여 자신 만의 버튼을 만들 수 있습니다.
Joomla에 대한 Knoka "최대"
CMS Joomla는 Wordpress와 같은 플러그인 설치도 지원합니다. Joomla 3 사이트의 "up"버튼 중 가장 성공적인 버전은 Top of Page라고 불리는 확장 기능입니다.
이 CMS에서 모든 플러그인은 "Extension Manager"를 통해 설치할 수 있습니다. 이를 위해서는 다음이 필요합니다.
- 인터넷에서 플러그인을 다운로드하십시오.
- Extension Manager에서 "찾아보기"버튼을 클릭하십시오.
- 다운로드 한 아카이브를 선택하십시오.
- "다운로드"를 클릭하여 설치하십시오.
이제 "플러그인 관리자"에서 활성화해야합니다. 이렇게하려면이 섹션으로 이동하여 플러그인을 찾아서 상태를 "켜기"로 전환하십시오.
그런 다음 오른쪽에이 플러그인의 "기본 매개 변수"를 찾아야하는 곳과 동일한 섹션을 사용하여 확장 프로그램의 모든 설정을 구성합니다.
페이지 상단에는 다음과 같은 기능이 있습니다.
- in / administrator - 인터넷 리소스뿐 아니라 CMS Joomla 자체에서도 옵션을 활성화하십시오.
- 버튼 밝기 위치 - "위로"버튼이 표시되도록 사용자가 되감기해야하는 픽셀 수입니다.
- 생략 버튼 텍스트 - 버튼의 텍스트입니다.
- 항상 상단 - 사이트의 페이지가 처음부터 항상 표시됩니다. "앵커"를 사용하여 페이지의 특정 위치로 스크롤 할 때이 옵션을 활성화하지 않아도됩니다.
- Smooth Scroll - 페이지를 부드럽게 스크롤합니다.
- 스크롤 지속 시간 - 페이지가 처음으로 완전히 이동하는 시간입니다.
- 스크롤 전환 - 큰 시각 효과를위한 스크롤을 추가합니다.
- 전환 완화 - 페이지 상단으로 이동을 "완화"합니다.
- 링크 위치 - 아이콘의 위치입니다. 표준에 따라 버튼은 오른쪽 아래 구석에 있습니다.
- 스타일 사용 - 버튼의 개별 스타일로서 아래 필드에 설정할 수 있습니다. 음수 값으로 전환하면 모든 스타일 설정이 활성 사이트 테마에서 가져옵니다.
- 링크 스타일 - 버튼 스타일 설정을 입력하기위한 필드입니다.
"위로"버튼의 스타일을 사용자 정의하려면 CCS에 대한 최소한의 지식이 있어야합니다. 그렇지 않으면 마지막에서 두 번째 매개 변수의 값을 "아니요"로 전환해야합니다.
또 다른 중요한 차이점은 아이콘의 일반적인 비문에는 영문 텍스트가 포함되어 있다는 점입니다. 러시아어 사이트에서는 이러한 텍스트를 표시 할 수 없으므로 플러그인 설정에서 해제하거나 러시아어로 변경하면됩니다.
이 비문을 변경하려면 FTP 또는 기본 제공 호스팅 파일 관리자를 사용하여 사이트 서버로 이동해야합니다. 그런 다음 "/ administrator / language / en-GB /"디렉토리에서 "en-GB.plg_system_topofthepage.ini"라는 파일을 찾아야합니다.
텍스트를 변경하기 전에이 문서의 인코딩을 UTF-8로 변경해야합니다. 그러면 러시아어 편지가 정상적으로 표시됩니다.
다음 줄을 찾는다.
| "PLG_SYS_TOPOFTHEPAGE_GOTOTOP ="맨 위로 돌아 가기 "" |
따옴표로 된 구를 러시아어로 변경하십시오. "Up!", "In the beginning!"또는 "Up!"과 같은 문구를 사용할 수 있습니다.
결국, 당신은 수정 된 파일을 저장하고 Joomla에서 사이트에 대한 "위로"버튼을 확인해야합니다.
Ucoz의 위로 버튼
이 CMS의 플러그인을 연결할 수 없기 때문에 Ucoz의 사이트에 대한 "up"버튼은 코드의 도입으로 완료해야합니다. 그러나 이렇게하려면 오랜 시간 동안 시스템 파일을 연구 할 필요가없고 필요한 줄을 찾으려면 원하는 위치에 작은 코드를 삽입하기 만하면됩니다.
설치하려면 다음이 필요합니다.
- "제어판 -> 디자인 -> 디자인 관리 (템플릿) -> 사이트 하단으로 이동하십시오.
- 스크립트 (프로젝트 및 타사 리소스의 공식 웹 사이트에서 찾을 수 있음)를 삽입하십시오.
결론
그런 다음 오른쪽 하단 모서리에 아이콘이 표시되어 사용자가 페이지 맨 위로 이동합니다.
보시다시피, CMS의 "Up"버튼 설정은 특별히 어렵지 않습니다. 자동 설치 방법 (플러그인)과 수동 모두를 사용할 수 있습니다. 그러나 사이트의 성능에 나쁜 영향을 미치지 않으므로 후자의 옵션이 가장 적합합니다.
많은 수의 확장이 리소스의 성능에 부정적인 영향을 미칠 수 있으므로 HTML의 사이트에 대해 '위로'버튼을 사용하여 사이트 리소스 사용을 최소화 할 수 있습니다. 하나의 플러그인 버튼을 "위로"올려 놓으면 사이트의 페이지로드 시간에 크게 영향을 줄 수 없지만 대부분의 경우 사용자에게는 CMS에 적어도 12 개의 플러그인이 설치되어 있습니다. 이 경우 모든 플러그인이 사이트 페이지의 성능에 부정적인 영향을 미칠 수 있습니다.
Similar articles
Trending Now