티스토리 뷰
워드프레스 메인 슬라이드 배너 만들기 - MetaSlider
오늘은 쇼핑몰 메인페이지 중간에 슬라이드 배너를 만드는 방법에 대해서 알아 보겠습니다.
메인 슬라이드 배너는 홈페이지를 방문했을때 전체적인 분위기를 좌우하는 중요한 역할을 합니다.
슬라이드 배너를 만들기 위해서 MetaSlider 플러그인을 사용합니다.
먼저 워드프레스 관리자 페이지에서 '플러그인' > '새로추가' 메뉴로 이동을 합니다.
검색 폼에 meta slider 라고 입력하고 검색하면 아래와 같은 검색 결과를 볼수 있습니다.
첫번째로 검색된 MetaSlider 플러그인의 '지금설치' 버튼을 눌러 설치하도록 하겠습니다.
설치가 완료되면 '지금설치' 버튼이 '활성화' 버튼으로 변경이 됩니다.
플러그인을 적용하기 위해서 활성화 버튼을 클릭하도록 하겠습니다.
활성화가 완료되면,
좌측에 'MetaSlider' 메뉴가 추가가 됩니다. 해당 메뉴를 클릭하면 아래와 같은 페이지가 나옵니다.
여기서새로운 슬라이드 배너를 만들기 위해서 New 버튼을 클릭합니다.
그런 다음, 우측에 있는 'Add Slide' 버튼을 클릭합니다.
그럼 이미지를 설택하는 미디어 라이브러리 팝업이 뜨는데,
여기서 배너로 만들 이미지를 선택을 합니다.
저는 기존에 업로드 되어 있는 토마토 이미지를 선택하도록 하겠습니다.
그리고 'Add to slideshow' 버튼을 클릭합니다.
그럼 아래와 같이 이미지가 하나 추가된 것을 확인할 수 있습니다.
슬러이드 배너를 만들 이미지를 하나 더 추가해 보도록 하겠습니다.
우측에 있는 'Add Slide' 버튼을 다시 클릭합니다.
'미디어 라이브러리' 팝업이 뜨면 원하는 다른 이미지를 하나 더 선택을 합니다.
그리고 'Add to slideshow' 버튼을 클릭합니다.
이번에는 두번째로 추가된 이미지에 링크를 하나 추가해 보도록 하겠습니다.
이미지를 클릭했을때 네이버 홈페이지가 뜨도록 주소에 네이버 홈페이지 주소를 입력하고,
우측에 Open in a new window 항목에 체크를 합니다.
그리고 Save 버튼으로 저장을 합니다.
이제 우리가 만든 슬라이드 배너를 메인페이지에 적용해 보도록 하겠습니다.
'페이지' 메뉴로 이동을 합니다.
그럼 우리가 만들어 둔 '메인페이지' 라는 페이지가 있는데 클릭을 해서 편집 화면으로 들어 갑니다.
여기서 제목과 본문내용을 모두 지웁니다.
그리고 중간에 있는 'Add slider' 버튼을 클릭합니다.
그럼 슬러이드 선택 팝업이 뜨는데,
우리가 만들어둔 'New Slideshow' 를 선택하고 'Insert slideshow' 버튼을 클릭합니다.
그러 본문에 해당 코드가 입력되는데, 업데이트를 눌러서 저장을 합니다.
홈페이지를 확인해 보면,
아래와 같이 메인페이지에 슬라이드 배너가 적용된 것을 확인할 수 있습니다.
두번째 이미지를 클릭하면 네이버가 새창으로 열리는 것도 확인할 수 있습니다.
이상 워드프레스 메인페이지에 슬라이드 배너를 삽입하는 방법에 대해서 알아봤습니다.
수고 많으셨습니다.
< 기타 도움이 되는 플러그인 >
'워드프레스' 카테고리의 다른 글
| 워드프레스 우커머스 결제 플러그인 - PGALL (0) | 2018.09.04 |
|---|---|
| 워드프레스 우커머스 플러그인 설정 (0) | 2018.09.03 |
| 우커머스 오류 - Warning: sprintf(): Too few arguments in .../class-wc-admin-help.php on line 55 (0) | 2018.09.02 |
| 워드프레스 쇼핑몰 테마 Storefront 설치 (0) | 2018.08.31 |
| 워드프레스 자식테마 만들기 (2) | 2018.08.30 |