워드프레스 - 홈 페이지에 슬라이더 만들기

반응형


워드프레스에서 제공하는 Accelerate 테마를 가지고 만든 Home 페이지에 슬라이더를 만들어 보겠습니다. 그러기 위해서는 슬라이더에 필요한 이미지가 준비되어 있어야 합니다. 시간에 필수 무료 이미지 온라인 편집 사이트 대해서 소개했으니 필요하신 분은 참고하기 바랍니다.

 

워드프레스 관리자 메뉴에서 '외모 > 사용자 정의하기' 들어갑니다.

 

'사용자 정의하기' 메뉴에서 좌측에 보면 슬라이더 항목이 있는데 이것을 선택해 줍니다.

 

슬라이더를 활성화시키기 위해서 'Activate slider' 눌러서 체크표시를 주고 다시 뒤로 갑니다.

 

슬라이더 리스트 중에서 'Slider #1'을 선택해서 속성으로 들어갑니다. '이미지를 선택하세요' 버튼을 누르면 이미지를 선택할 있는 팝업창이 열립니다.

 

'파일 업로드'를 선택하고 '파일을 선택하세요' 버튼을 눌러서 내 컴퓨터에 준비해 놓은 슬라이더 이미지를 선택해서 이미지를 업로드 합니다.

 

이렇게 슬라이더가 좌측에 들어가게 되면 title, description, redirect link를 작성해 주고 슬라이더 텍스트 위치도 지정해 주어야 됩니다.

 

1번)에 타이틀을 넣고 그 하단에 2번)은 설명을 넣습니다. 3번)은 지금 슬라이더에서 텍스트 위치를 말하는데 첫번째 슬라이더에서는 우측으로 배치했습니다. 슬라이더에 있는 타이틀 항목을 클릭하면 링크로 연결된 사이트 주소로 연결됩니다. 저는 아직 슬라이더에 연결된 페이지를 만들지 않았기 때문에 일단은 링크주소를 임시로 #으로 걸어 놓았습니다. 이렇게 모두 입력했으면 '저장 & 발행' 버튼을 누르면 첫번째 슬라이더가 완성된 것입니다.

 

첫 번째 슬라이더를 만들고 난 다음, 두 번째 부터는 첫 번째 슬라이더 만든 대로 반복 저장해 주면 됩니다. 단, 슬라이더에서 타이틀 텍스트 위치에 변화를 주기 위해서 두번째 슬라이더는 Left side를 체크해서 텍스트가 왼쪽으로 위치하게 배치했습니다.

 

이제 사이트 보기에서 새로 고침하고 Home 페이지에서 확인해보면 슬라이더가 만들어진 것을 확인할 수 있습니다.

 

지금까지 워드프레스에서 제공하는 Accelerate 테마에서 Home 페이지에 슬라이더를 만들어 보았습니다.



반응형

이 글을 공유하기

댓글

Designed by JB FACTORY