3일 만에 마스터! Elementor 사용법과 전문 기술 7선

우웹 사이트를 쉽게 아름답게 만드는 방법을 알고 싶습니까? 그것도 코드 지식없이! 나 자신도 그 고민을 안고, 시행착오를 거듭한 결과, 드디어 발견한 것이 Elementor였습니다. 이 놀라운 도구를 사용하면 누구나 전문적인 웹 사이트를 쉽게 만들 수 있습니다.

Elementor를 발견하는 것 : 웹 디자인의 치트 코드를 찾은 것 같습니다!

처음 Elementor를 사용했을 때 마치 마법을 사용하는 것 같은 감각이었습니다. 클릭하면 디자인이 바뀌고 몇 분 안에 멋진 페이지가 완성됩니다. 이 기사에서는 이러한 Elementor의 기본 사용법부터 고급 사용자 정의 방법, 심지어 실제 프로젝트 예제까지 다룹니다. 초보자라도 안심하고 사용할 수 있도록, 스텝 바이 스텝으로 해설하고 있으므로, 꼭 마지막까지 읽어 주세요.

이 가이드를 읽으면 당신도 분명히 "이렇게 쉽게 할 수 있습니까?"라고 놀랄 것입니다. 실제로 Elementor를 사용해 보고 그 매력을 체감해 보세요. 웹 디자인의 세계가 훨씬 가까워집니다!

여기를 읽었습니까?
초보자라도 알 수 있다! WooCommerce 사용법 전체 가이드

Elementor 사용법 완전 가이드: 초보자부터 프로까지

Elementor란?

Elementor 개요
Elementor는 WordPress 용 드래그 앤 드롭 페이지 빌더입니다. 코드를 작성하지 않고 직관적인 조작으로 웹페이지를 디자인할 수 있습니다.

왜 Elementor를 사용하는가?
Elementor를 사용하면 전문적인 웹사이트를 쉽게 만들 수 있습니다. 다양한 디자인 옵션과 실시간 미리보기를 통해 효율적으로 페이지를 만들 수 있습니다.

Elementor의 주요 기능과 이점

드래그 앤 드롭 편집기: 코딩없이 디자인 가능
실시간 편집: 즉시 편집 내용을 확인할 수 있습니다.
풍부한 위젯: 다양한 콘텐츠 요소 제공
템플릿 라이브러리: 사용하기 쉬운 템플릿이 풍부
반응형 디자인: 모바일 지원 디자인을 쉽게 만들 수 있습니다.

Elementor 설치 및 설정

Elementor 설치 방법

WordPress 대시보드에 로그인
플러그인 > 새로 추가를 클릭합니다.
"Elementor"를 검색하여 설치
설치 후 "사용"을 클릭하십시오.

플러그인 활성화
Elementor를 활성화하면 WordPress 대시보드에 Elementor 메뉴가 추가됩니다.

Elementor의 기본 설정

Elementor 메뉴 > 설정 열기
기본 편집기 설정 및 스타일 옵션 조정
변경사항 저장을 클릭하여 설정 저장

기본 사용법

Elementor의 인터페이스 소개
Elementor 에디터에는 왼쪽에 위젯 패널이 있고 오른쪽에는 라이브 미리보기가 있습니다. 위젯을 드래그 앤 드롭으로 추가할 수 있습니다.

섹션, 열, 위젯 사용 방법

섹션: 페이지의 주요 구성 블록
컬럼: 섹션의 수직 분할
위젯: 텍스트, 이미지, 버튼 등의 요소

기본 페이지 작성 단계별 안내

새 페이지를 만들고 Elementor에서 편집을 클릭합니다.
섹션을 추가하고 열 설정
위젯을 드래그 앤 드롭으로 배치
각 위젯의 설정 조정
게시를 클릭하여 페이지 저장

고급 사용법 및 팁

맞춤 디자인 만들기
Elementor에서 사용자 지정 CSS를 사용하여 자체 디자인을 만들 수 있습니다. 어드밴스 설정으로 마진이나 패딩을 조정 가능합니다.

템플릿 사용 방법
템플릿 라이브러리에서 템플릿을 가져오고 사용자 정의하여 신속하게 디자인을 완성합니다.

반응형 디자인 만들기
데스크톱, 태블릿 및 모바일 보기를 개별적으로 조정할 수 있습니다. 장치 아이콘을 클릭하여 각 장치에 맞는 디자인을 확인하고 편집합니다.

일반적인 문제 해결 방법

페이지가 표시되지 않는 경우: 캐시 지우기 또는 플러그인 충돌 확인
디자인이 무너지는 경우: 위젯 설정 및 맞춤 CSS 확인

실용적인 예

홈페이지 작성 예

영웅 섹션에 전체 화면 이미지 및 잡기 사본 추가
서비스 섹션에 아이콘 상자 배치
고객의 음성 섹션에 테스트 모니얼 위젯 사용

문의 양식 작성 예

새 섹션으로 양식 위젯을 드래그
필요한 필드(이름, 메일, 메시지) 추가
제출 버튼 설정을 조정하고 스타일 맞춤설정

블로그 페이지 작성 예

포스트그리드 위젯을 사용하여 최신 블로그 게시물 보기
카테고리별 필터링 설정
각 게시물의 스타일을 조정하여 디자인을 통일

자주 묻는 질문(FAQ)

Q: Elementor는 무료로 사용할 수 있습니까?
A : 네, Elementor에는 무료 버전이 있지만 Pro 버전은 더 많은 기능을 제공합니다.

Q: Elementor는 어떤 테마와 호환됩니까?
A: Elementor는 대부분의 WordPress 테마와 호환됩니다. 특히 Elementor 전용 테마에서 사용하는 것이 좋습니다.

추가 리소스 및 참조 링크

Elementor 사용법 완전 가이드: 보충 사항

前술의 기사에서는, Elementor의 기본적인 사용법부터 고급 기술까지를 커버했습니다. 여기에서는 더 나은 품질을 향상시키기 위한 보충 정보를 제공합니다. 이를 통해 독자는 Elementor의 활용법을 더 깊이 이해하고 실천에 도움을 줄 수 있습니다.

실용적인 프로젝트 예

홈페이지 맞춤설정

Elementor를 사용한 구체적인 홈페이지 작성의 예를 소개합니다.

1단계: 영웅 섹션 만들기

배경 이미지 설정: 섹션을 추가하고 배경 이미지를 전체 화면으로 설정합니다.
잡기 사본 추가: 제목 위젯을 추가하고 잡기 사본을 입력합니다.
행동을 유도하는 버튼: 버튼 위젯을 추가하고 '지금 시작하기'와 같은 액션 버튼을 설정합니다.

2단계: 서비스 소개 섹션

아이콘 상자 사용: 3 열의 레이아웃을 만들고 각각에 아이콘 상자를 추가하여 서비스 설명을 설명합니다.
맞춤 CSS 활용: 각 아이콘 상자에 맞춤 CSS를 적용하여 디자인을 통합합니다.

3단계: 고객 음성 섹션

테스트 모니얼 위젯 사용: 테스트 모니얼 위젯을 추가하고 고객의 목소리를 입력합니다.
회전 목마 설정: 테스트 모니얼을 회전 목마 표시로 설정하고 여러 리뷰를 슬라이드 표시합니다.

트라 불 슈팅

흔한 문제와 해결 방법

페이지가 제대로 표시되지 않음

캐시 지우기: Elementor 편집 내용이 반영되지 않으면 브라우저 캐시를 지 웁니다.
플러그인 충돌: 다른 플러그인이 간섭했을 수 있으므로 일시적으로 비활성화하여 문제를 확인합니다.

디자인이 무너진다

맞춤 CSS 확인: 적용한 사용자 지정 CSS가 올바르게 반영되었는지 확인하고 필요에 따라 수정합니다.
반응형 설정 조정: 각 장치의 표시를 확인하고 장치별로 적절한 조정을 수행합니다.

고급 사용자 정의 방법

맞춤 CSS 및 JavaScript 활용

맞춤 CSS를 추가하는 방법

섹션별 CSS: 특정 섹션에 맞춤 CSS를 적용하여 디자인을 미세 조정합니다.
위젯당 CSS: 각 위젯에 개별적으로 CSS를 추가하고 스타일을 사용자 정의합니다.

JavaScript를 추가하는 방법

애니메이션 추가: 자바스크립트를 사용하여 스크롤 시 실행되는 애니메이션을 추가합니다.
대화형 요소: 버튼을 클릭할 때 작동하는 대화형 요소를 구현합니다.

Elementor Pro의 추가 활용

Pro 버전의 특수 위젯

포트폴리오 위젯 활용

프로젝트 전시: 프로젝트의 미리보기 이미지를 갤러리 형식으로 표시하고 세부 정보 페이지로 연결합니다.
필터링 기능: 프로젝트를 카테고리별로 필터링하여 사용자가 쉽게 검색할 수 있도록 합니다.

애니메이션 제목 설정

움직임이 있는 제목: 제목 위젯에 애니메이션을 추가하고 관심을 끌 수 있습니다.
타이밍과 효과 조정: 애니메이션의 시작 타이밍과 효과를 조정하여 페이지 전체의 디자인에 통일감을 갖게합니다.

꼭 이러한 기법을 사용해보십시오.

Elementor 사용법 인포 그래픽

이 인포 그래픽은 표준 웹 페이지의 크기에 적합한 깔끔한 레이아웃과 읽기 쉬운 텍스트로, 외형이 매력적이고 전문적인 디자인으로 되어 있습니다. 초보자와 숙련 된 사용자 모두 Elementor의 이점과 설정 프로세스를 쉽게 이해할 수 있습니다.

Elementor 사용에 유용한 표

다음 표는 Elementor의 기본 기능과 Pro 기능을 비교하고 설치 및 설정 절차를 보여줍니다. 이를 통해 Elementor의 특징과 사용 방법을 간결하게 이해할 수 있습니다.

Elementor 기능 비교 및 설정 절차

기능/항목	무료 버전	Pro 버전	주석
기본 위젯	✔️ 텍스트, 이미지, 동영상 등	✔️ 고급 위젯 (슬라이더, 폼, 팝업)	Pro 버전은 추가 위젯이 풍부
템플릿	✔️ 일부 템플릿 사용 가능	✔️ 프리미엄 템플릿 사용 가능	템플릿 수와 품질 향상
맞춤 CSS	❌	✔️ 커스텀 CSS로 디자인을 자유롭게 변경	디자인의 자유도 향상
팝업 빌더	❌	✔️ 팝업 만들기 및 사용자 정의	리드 생성 및 마케팅에 편리
지원	❌ 기본 지원만	✔️ 우선 지원	문제 해결이 신속하게

Elementor 설치 및 설정 절차

단계	詳細	주석
1. 설치	WordPress 대시보드 → 플러그인 → 새로 추가 → "Elementor" 검색 → 설치	플러그인 설치는 몇 번의 클릭으로 완료
2. 활성화	설치 후 "사용"을 클릭하십시오.	플러그인 사용으로 사용 가능
3. 기본 설정	Elementor → 설정 → 기본 설정 확인 및 변경	사이트에 맞게 설정 조정
4. 페이지 만들기	신규 페이지 작성 → 「Elementor로 편집」을 클릭	첫 페이지 작성은 간단한 레이아웃으로 시작하면 좋다.

이 표를 블로그 기사에 붙여넣으면 독자는 Elementor의 기본 기능과 설정 절차를 쉽게 파악할 수 있습니다. 표 디자인은 간단하고 전문적이며 보기 쉽고 정리되어 있습니다.

Elementor 사용에 도움이 되는 자주 묻는 질문(FAQ)

Elementor에 대한 Q & A : 프로도 처음에는 초보자였습니다!

Q: Elementor는 무료로 사용할 수 있습니까?

A: 네, Elementor에는 무료 버전이 있습니다! 하지만 조심하십시오. Pro판으로 업그레이드하고 싶어지는 「Pro페셔널한 유혹」이 기다리고 있습니다. Pro 버전에는 더 많은 기능이 있으며 디자인을 레벨 업하기위한 도구가 가득합니다.

Q: Elementor는 어떤 테마와 호환됩니까?

A: Elementor는 대부분의 WordPress 테마와 호환됩니다. 하지만 완벽한 궁합을 원한다면,안녕 엘리 멘터"나"Astra'등의 Elementor 대응 테마를 선택하면 좋을 것입니다. 마치 「궁합 점」이 100% 맞은 것 같은 완벽한 피트감이에요!

Q: Elementor에서 사이트를 만들 때 주의해야 할 포인트는?

A: Elementor에서 사이트를 만들 때 디자인의 일관성을 유지하는 것이 중요합니다. 예를 들어 글꼴과 색상을 통일하면 전체 사이트가 '실사 흐트러지지 않는' 아름다움을 유지합니다. 디자인이 무너지면, 마치 퍼즐의 조각이 흩어져있는 것 같은 느낌이 버리니까요.

Q: Elementor로 만든 페이지가 표시되지 않을 때는 어떻게 해야 합니까?

A: 먼저 캐시를 지웁시다. 브라우저 캐시로 인해 최신 변경 사항이 반영되지 않을 수 있습니다. 그래도 괜찮다면 다른 플러그인과의 "소경쟁"을 의심하십시오. 플러그인을 하나씩 비활성화하여 원인을 확인하세요. 마치 명탐정처럼 원인을 밝혀주세요!

Q: Elementor에서 반응형 디자인을 만드는 방법은?

A: Elementor의 '응답 모드'를 사용하면 데스크톱, 태블릿 및 스마트폰에서 디스플레이를 개별적으로 조정할 수 있습니다. 디바이스 아이콘을 클릭할 때마다 표시가 바뀌므로, 마치 디자인의 「변신 쇼」를 즐기는 것 같습니다. 각 장치에 맞는 최적의 디자인을 만드세요!

Q: Elementor에서 맞춤 CSS를 추가하는 방법은 무엇입니까?

A: Elementor에서는 각 위젯과 섹션에 대해 맞춤 CSS를 추가할 수 있습니다. 위젯의 "고급 설정"에서 CSS 탭으로 이동하여 코드를 입력하기 만하면됩니다. 이제 당신의 디자인이 마치 "마법의 지팡이"를 흔든 것처럼 바뀝니다!

이 FAQ를 사용하면 Elementor 경험이 더욱 즐겁고 효율적일 수 있기를 바랍니다. 아무쪼록 즐기고 웹 디자인을 배우십시오!

일반적인 문제 해결

1. 페이지가 제대로 표시되지 않음

증상: Elementor에서 편집한 페이지가 게시 후 제대로 표시되지 않거나 일부 변경사항이 반영되지 않습니다.

해결책:

브라우저 캐시 지우기: 페이지 표시가 오래된 캐시의 영향을 받을 수 있습니다. Ctrl+F5(Windows) 또는 Command+Shift+R(Mac)로 캐시를 지우고 다시 로드합니다.
Elementor 캐시 지우기: Elementor 설정으로 이동하여 도구 탭에서 캐시 지우기를 실행합니다.
플러그인 충돌 점검: 다른 플러그인이 Elementor와 충돌할 수 있습니다. 모든 플러그인을 일시적으로 비활성화하고 문제가 해결되는지 확인합니다. 그런 다음 하나씩 플러그인을 활성화하여 충돌을 확인합니다.
테마 확인: 사용중인 테마가 Elementor와 호환되는지 확인합니다. 호환되는 테마(예: Hello Elementor, Astra)로 전환해 보세요.

2. 편집 화면이 로드되지 않음

증상: Elementor 편집 화면이 올바르게 로드되지 않거나 흰색 화면이 표시됩니다.

해결책:

서버 리소스 확인: 서버의 메모리 제한이나 PHP 버전이 낮으면 Elementor의 동작에 지장을 초래할 수 있습니다. 최소한 PHP 7.0 이상, 메모리 제한은 256MB 이상으로 설정하십시오.
안전 모드 활성화: Elementor 설정에서 "안전 모드"를 활성화하면 테마나 플러그인의 영향을 받지 않고 편집 화면을 열 수 있습니다.
플러그인 충돌 점검: 다른 플러그인으로 인해 로딩이 느려질 수 있습니다. 모든 플러그인을 일시적으로 비활성화하고 문제가 해결되는지 확인합니다.

3. 위젯이 표시되지 않음

증상: 추가한 위젯이 페이지에 표시되지 않습니다.

해결책:

위젯 설정 확인: 위젯 표시 설정이 올바르게 수행되었는지 확인합니다. 특정 조건에서 표시되도록 설정되어 있지 않은지 확인하십시오.
CSS 확인: 사용자 정의 CSS가 위젯 표시에 영향을 미칠 수 있습니다. 맞춤 CSS를 일시적으로 사용 중지하여 문제가 해결되는지 확인합니다.
디버그 모드 활성화: Elementor 디버그 모드를 활성화하여 자세한 오류 메시지를 확인합니다.

4. 반응형 디자인이 무너진다

증상: 모바일이나 태블릿에서의 표시가 무너진다.

해결책:

반응형 모드 확인: Elementor의 반응형 모드를 사용하여 각 장치의 표시를 확인하고 필요에 따라 디자인을 조정합니다.
컬럼 폭 조정: 모바일 장치의 열 너비를 적절하게 설정합니다. 예를 들어, 데스크톱에서는 3열로 나뉘어 있던 것을 모바일에서는 1컬럼으로 설정하는 등의 궁리가 필요합니다.
CSS 조정: 모바일 전용 맞춤 CSS를 추가하여 디자인이 무너지지 않도록 합니다.

5. 업데이트가 반영되지 않음

증상: 편집 내용이 공개 페이지에 반영되지 않습니다.

해결책:

캐시 지우기: 브라우저 캐시, Elementor 캐시 및 서버 캐시를 모두 지 웁니다.
라이브 미리보기 확인: Elementor의 라이브 미리보기에서 변경 사항이 반영되는지 확인합니다. 미리보기에 문제가 없으면 공개 페이지의 캐시 지우기를 시도합니다.

6. 글로벌 위젯을 편집할 수 없음

증상: 글로벌 위젯 변경이 반영되지 않습니다.

해결책:

글로벌 위젯 재설정: 해당 위젯을 글로벌 위젯으로 재구성하고 다시 변경합니다.
캐시 지우기: 글로벌 위젯 변경 사항이 반영되지 않으면 브라우저 캐시 또는 Elementor 캐시를 지 웁니다.

이러한 문제 해결 방법을 참고하여 Elementor에서 사이트 제작을 원활하게 진행하세요. 어려움을 겪을 때 이러한 방법을 시도하면 해결책에 대한 실마리를 찾을 수 있습니다.

알아두고 싶은 Elementor 전문 기술: 귀하의 사이트를 다음 레벨로!

Elementor는 다기능으로 사용하기 쉬운 페이지 빌더입니다만, 약간의 궁리로 한층 더 그 매력을 끌어낼 수 있습니다. 여기에서는 다른 사이트에서는 별로 언급되지 않은 자신의 정보와 기법을 소개합니다. 독자 여러분이 즐겁게 배울 수 있도록 유머를 섞어 전달합니다.

1. 프리셋 활용술

Elementor는 많은 디자인 프리셋을 제공하지만, 이것을 자신의 취향에 맞게 커스터마이징하고 재사용하는 방법을 알고 있습니까?

예를 들어, 자주 사용하는 버튼의 디자인이나 섹션의 레이아웃을 프리셋으로 저장해 두면 다음 번부터 순식간에 사용할 수 있게 됩니다. 마치 자신 전용의 "디자인 옷장"을 할 수있는 것입니다.

번호:

모든 위젯과 섹션을 디자인합니다.
위젯 또는 섹션의 오른쪽 클릭 메뉴에서 '프리셋으로 저장'을 선택합니다.
다음 번부터 같은 디자인을 호출하는 것만으로 단번에 프로 같은 사이트를 만들 수 있습니다.

2. 미래를 바라본 반응형 디자인

Elementor의 반응형 모드에서 디바이스별로 디자인을 조정하는 것은 기본이지만 미래의 디바이스를 응시하고 디자인하는 것은 어떻습니까? 예를 들어, 접이식 스마트폰이나 AR 안경에서의 표시를 상상해, 조금 미래적인 디자인 요소를 도입해 봅시다. 이것으로 당신의 사이트는 「시대의 앞을 간다」디자인에!

実例:

전체 화면 동영상 배경을 도입하여 미래적인 이미지를 연출.
음성 내비게이션 대응 메뉴를 추가. Alexa와 Siri에 지지 않는 조작성을 목표로합시다!

3. 사용자 정의 아이콘 만들기

Elementor에는 수많은 아이콘이 준비되어 있습니다만, 자신만의 오리지널 아이콘을 사용하고 싶은 적이 있습니까?

그럴 때는 커스텀 아이콘을 만들어 추가합시다. 예를 들어 자신의 브랜드 로고를 아이콘으로 사용하면 사이트 전체의 통일감이 훨씬 높아집니다. 이것은 마치 "주문 제작 정장"을 입는 것 같은 감각입니다.

번호:

SVG 형식으로 원본 아이콘을 만듭니다.
Elementor 설정에서 SVG 업로드를 활성화합니다.
위젯에서 아이콘을 선택하고 자신의 SVG 파일을 업로드.

4. Elementor와 연계할 수 있는 숨겨진 보석

Elementor와 함께 사용하면 편리한 플러그인을 몇 가지 소개합니다. 이들은 다른 사이트에서 덜 접할 수 있지만, 디자인을 더욱 돋보이게하는 "숨겨진 보석"입니다.

Elementor 용 동적 콘텐츠: 사용자 정의 필드와 동적 콘텐츠를 쉽게 표시할 수 있는 플러그인입니다. 이제 사이트 업데이트 작업도 "마법처럼"편해집니다.
해피 애드온: Elementor의 기능을 강화하기 위한 애드온집입니다. 사용성이 향상되어 디자인의 폭도 넓어집니다.

5. Elementor에서 SEO의 극의

마지막으로, Elementor를 사용한 SEO 대책을 살펴보겠습니다. 디자인뿐만 아니라 검색 엔진에서의 표시도 중요하네요. Elementor에는 SEO에 유용한 기능이 많이 있습니다.

SEO 대책의 포인트:

경량 코드: 쓸데없는 코드를 줄이면 페이지 로딩 속도가 향상됩니다. Elementor의 "코드 청소"기능을 활용합시다.
메타데이터 최적화: 각 페이지의 메타 데이터를 설정하고 검색 엔진에 중요한 정보를 제공합니다.
내부 링크 활용: 인페이지 링크를 올바르게 설정하면 사이트 탐색이 원활해지고 SEO 효과가 높아집니다.

이러한 기술을 통합하면 귀하의 사이트는 다른 사이트보다 한 걸음 더 나아가 매력적이고 전문적인 것이 될 것입니다. 꼭 즐기면서 시도해보세요!

관련 링크:

이제 당신의 Elementor 마스터로가는 길은 점점 넓어집니다. 다음 프로젝트에서이 지식을 최대한 활용해보십시오!

음성 내비게이션 대응 메뉴를 만드는 방법: 초보자용 가이드

안녕하세요! WordPress를 사용하기 시작한 3일째에 당신도 괜찮습니다. 이번에는, 음성 내비게이션 대응의 메뉴를 Elementor로 작성하는 방법을, 초보자용으로 알기 쉽게 설명합니다. 안심하고 함께 진행합시다!

1. Elementor로 메뉴 만들기

먼저 Elementor에서 기본 메뉴를 만듭니다.

1 단계: WordPress 대시보드에 로그인하여 Elementor를 사용하려는 페이지를 엽니다.

2 단계: Elementor에서 편집을 클릭하여 편집기 화면을 엽니다.

3 단계: 왼쪽 위젯 패널에서 내비게이션 메뉴 위젯을 드래그 앤 드롭하여 페이지에 추가합니다.

4 단계: 메뉴 위젯 설정을 열고 사용할 메뉴를 선택합니다. 메뉴 설정은 WordPress 대시보드의 "외관"→ "메뉴"에서 미리 작성해 두십시오.

2. ARIA 속성 추가

그런 다음 메뉴에 ARIA 속성을 추가하여 화면 판독기가 정확하게 읽을 수 있도록 합니다.

1 단계: Elementor에서 메뉴 위젯을 선택하고 고급 설정 → 사용자 정의 속성을 엽니다.

2 단계: 사용자 정의 속성 필드에 다음을 입력합니다 (각 항목에 적절한 레이블을 설정합니다).

role="menubar" aria-label="Main Navigation"

각 메뉴 항목에도 ARIA 레이블을 추가합니다. 마찬가지로 각 메뉴 항목의 사용자 지정 속성을 다음과 같이 설정합니다.

role="menuitem" aria-label="Home"

3. 음성 인식 스크립트 추가

음성 인식을 사용하여 메뉴를 조작하기 위한 간단한 JavaScript를 추가합니다. 조금 기술적인 부분도 있습니다만, 순서를 따라 설명합니다.

1 단계: WordPress 대시보드의 '외관' → '테마 파일 편집기'로 이동합니다.

2 단계: 테마functions.php파일을 열고 다음 코드를 추가합니다.

function add_custom_script() {
    echo '<script>
        document.addEventListener("DOMContentLoaded", function() {
            if (!("webkitSpeechRecognition" in window)) {
                console.log("Speech recognition not supported");
                return;
            }

            var recognition = new webkitSpeechRecognition();
            recognition.continuous = false;
            recognition.interimResults = false;

            recognition.onresult = function(event) {
                var command = event.results[0][0].transcript.toLowerCase();
                var menuItems = document.querySelectorAll("[role=\'menuitem\']");

                menuItems.forEach(function(item) {
                    if (item.getAttribute("aria-label").toLowerCase() === command) {
                        item.querySelector("a").click();
                    }
                });
            };

            recognition.onend = function() {
                recognition.start();
            };

            recognition.start();
        });
    </script>';
}
add_action('wp_footer', 'add_custom_script');

이 스크립트는 음성 인식을 사용하여 메뉴 항목을 클릭할 수 있습니다.

4. 테스트 및 확인

마지막으로 음성 네비게이션이 제대로 작동하는지 테스트합니다.

1 단계: 사이트를 게시하여 실제로 음성 인식이 작동하는지 확인합니다. 마이크 사용을 허용해야 할 수도 있습니다.

2 단계: Start Voice Navigation 버튼을 클릭하여 메뉴 항목을 음성으로 표시합니다. 예를 들어, "Home"이라고 말해 보십시오. 해당 메뉴 항목을 클릭해야 합니다.

이것으로, 음성 내비게이션 대응의 메뉴가 완성입니다! 처음에는 조금 복잡하게 느낄지도 모릅니다만, 한 번 설정해 버리면 매우 편리합니다. 시도해보고 웹사이트의 접근성을 개선하세요!

그러나 「functions.php 공포증」의 분도 계실지도 모릅니다.
이전에 functions.php를 변경하면 화면이 새하얗게 되었고 머리 속도 새하얗게 되어 외상이 되었고, 저도 그런 경험을 한 적이 있습니다.
마지막으로, 그런 때를 위한 편리한 플러그인도 소개해 둡시다.

플러그인을 사용하여 음성 네비게이션 가능 메뉴를 만드는 방법

functions.php를 건드리지 않고 플러그인을 사용하여 쉽게 음성 탐색 가능 메뉴를 만드는 방법을 소개합니다. 다음 단계를 따르십시오.

1. 플러그인 설치

먼저 메뉴에 ARIA 속성을 추가하고 접근성을 향상시키는 플러그인을 설치합니다.

1 단계: WordPress 대시보드에 로그인하고 왼쪽 메뉴에서 플러그인 → 새로 추가를 클릭합니다.

2 단계: 검색창에 Accessible WP Menu를 입력하여 해당 플러그인을 설치하고 활성화합니다. 다음은 공식 링크입니다.

Accessible WP Menu

2. 메뉴 설정

그런 다음 플러그인을 사용하여 메뉴에 ARIA 속성을 추가하여 음성 내비게이션을 지원합니다.

1 단계: 워드프레스 대시보드의 왼쪽 메뉴에서 [모양] → [메뉴]를 클릭합니다.

2 단계: 기존 메뉴를 선택하고 각 메뉴 항목에 적절한 ARIA 속성이 자동으로 추가되었는지 확인합니다. 필요한 경우 메뉴 항목을 편집하고 레이블을 조정합니다.

3. 음성 인식 설정

플러그인을 사용하여 음성 인식 기능을 추가합니다. 다음 단계에 따라 음성 인식을 설정합니다.

1 단계: 플러그인 "Voice Control for WordPress"를 설치합니다. 이 플러그인은 쉽게 음성 인식 기능을 추가할 수 있습니다. 다음은 공식 링크입니다.

Voice Control for WordPress

2 단계: 플러그인을 활성화하고 설정 페이지로 이동합니다. 설정 페이지에서 음성 명령을 설정하고 메뉴 항목에 해당하는 명령을 추가합니다.

4. 테스트 및 확인

마지막으로 음성 네비게이션이 제대로 작동하는지 테스트합니다.

1 단계: 사이트를 게시하고 실제로 음성 인식이 작동하는지 확인합니다. 브라우저에 마이크 사용을 허용해야 합니다.

2 단계: 설정한 음성 명령을 사용하여 메뉴 항목을 조작합니다. 예를 들어, "Home"이라고 말해 보십시오. 해당 메뉴 항목을 클릭해야 합니다.

이제 functions.php를 건드리지 않고 플러그인을 사용하여 음성 네비게이션 지원 메뉴를 만들 수 있습니다. 시도해보고 웹사이트의 접근성을 개선하세요!

시간이 있으면 이쪽도 읽어보세요.

WPX-WordpressX - 모든 종류의 사이트를 구축할 수 있는 비법 공개