WordPress 등록 양식에 WYSIWYG 필드를 추가하는 방법은 무엇입니까?

게시 됨: 2023-04-03

WordPress 등록 양식에 WYSIWYG 필드를 추가하는 방법을 알고 싶습니까? 방법을 알려드리겠습니다!

WYSIWYG(wiz-ee-wig로 발음)는 'What You See Is What You Get'의 약어입니다.

간단히 말해 최종 사용자에게 표시되는 것과 동일한 인터페이스에서 콘텐츠를 편집할 수 있는 편집 시스템입니다.

사용자로부터 올바른 형식의 콘텐츠를 수집하려는 경우 등록 양식에 WYSIWYG 필드를 추가하는 것이 좋습니다. 단일 영역 내에서 텍스트와 멀티미디어를 편집하고 스타일을 지정하고 제출할 수 있습니다.

따라서 WordPress 등록 양식에 WYSIWYG 필드를 포함하려면 끝까지 함께 해주세요. 이 자습서를 통해 추가하는 방법을 보여드리겠습니다.

목차

WYSIWYG 필드란 무엇입니까? 양식에 추가하면 어떤 이점이 있습니까?

우리는 이미 WYSIWYG 필드가 무엇인지 간단히 논의했습니다. 사용자가 워드 프로세서와 유사한 시각적 편집기를 사용하여 텍스트를 입력하고 서식을 지정할 수 있는 양식 필드입니다.

웹사이트의 WYSIWYG 편집기는 WordPress에서 블로그 게시물/페이지를 만들 때 사용되는 텍스트 편집기일 수 있습니다. 예를 들어 WordPress의 클래식 편집기입니다.

클래식 편집기 WordPress

편집기를 사용하면 텍스트 서식을 지정하고 이미지 및 기타 미디어 요소를 시각적으로 추가할 수 있습니다.

따라서 사용자가 WYSIWYG 필드에 텍스트나 이미지를 입력하면 서식이 지정된 텍스트를 실시간으로 볼 수 있습니다.

이제 사용자 등록 양식의 WYSIWYG 필드가 어떻게 도움이 될 수 있는지 궁금할 것입니다.

다음은 몇 가지 주요 이점입니다.

  • 웹사이트 소유자는 사용자로부터 미리 형식이 지정된 콘텐츠를 수집할 수 있습니다. 예를 들어 사용자 약력을 수집할 수 있습니다.
  • 사용자가 코딩 없이 한 곳에서 이미지, 목록, 링크 등을 사용할 수 있습니다. 따라서 자유롭게 아이디어를 제출할 수 있습니다.
  • 기술 전문성 수준이 다른 여러 사용자가 WordPress 양식에 액세스할 수 있습니다.

WordPress 등록 양식에 WYSIWYG 필드를 추가하는 가장 좋은 방법은 무엇입니까?

이제 작업을 도와줄 플러그인만 있으면 됩니다. 이를 위해 궁극의 WordPress 등록 플러그인인 사용자 등록을 제안합니다.

이 놀라운 플러그인을 사용하면 번거로움 없이 많은 아름다운 사용자 지정 등록 양식을 만들 수 있습니다.

마찬가지로 WYSIWYG 필드를 포함하여 양식에 다양한 필드를 추가할 수 있습니다. Advanced Fields 확장 프로그램만 있으면 준비가 완료됩니다.

고급 필드 추가 기능

사용자 등록 플러그인의 WYSIWYG 필드를 사용하면 사용자가 두 가지 모드 사이를 전환할 수 있습니다.

  • Visual : 텍스트 편집기에 이미지와 텍스트가 표시됩니다.
비주얼 또는 텍스트
  • 텍스트 : 이미지와 텍스트가 HTML 형식으로 표시됩니다.
비주얼 또는 텍스트

다음으로 시각적 모드에서 찾을 수 있는 도구 모음 옵션 목록이 표시됩니다.

  • 용감한
  • 이탤릭체
  • 글머리 기호 목록
  • 번호 매기기 목록
  • 인용구
  • 오른쪽 정렬
  • 중앙 정렬
  • 왼쪽 정렬
  • 링크 삽입/수정
  • 자세히 알아보기 태그 삽입
  • 전체 화면
  • 도구 모음 토글

마찬가지로 도구 모음 토글 아이콘에서 취소선 , 가로선 , 텍스트 색상 , 텍스트로 붙여넣기 , 서식 지우기 , 특수 문자 , 들여쓰기 감소들여쓰기 증가 와 같은 더 많은 옵션을 얻을 수 있습니다.

툴바 토글 아이콘

이제 더 이상 지체하지 않고 바로 내용으로 들어가 보겠습니다.

WordPress 등록 양식에 WYSIWYG 필드를 추가하는 방법은 무엇입니까?

사용자 등록과 같은 좋은 도구는 설명이 필요 없고 사용하기 매우 쉽습니다. 그러나이 튜토리얼을 진행하는 것은 확실한 이해를 보장하는 것이 현명합니다.

1단계: 사용자 등록 Pro 설치 및 활성화

무료 버전의 플러그인으로 간단한 양식을 쉽게 만들 수 있습니다. 그러나 WYSIWYG 필드는 고급 필드 섹션 아래에 있습니다.

그리고 이 필드의 잠금을 해제하려면 플러그인의 프리미엄 요금제에만 제공되는 고급 필드 추가 기능이 필요합니다.

플러그인의 공식 사이트를 방문하여 자신에게 적합한 계획을 구매하면 준비가 완료됩니다.

지금 사용자 등록을 받으세요!

그런 다음 이메일 링크를 받게 됩니다. 링크를 따라 계정 대시보드에 액세스하십시오.

사용자 등록 Pro 파일 다운로드

거기에서 플러그인의 프로 버전을 다운로드하고 라이센스 키 탭에서 라이센스 키를 얻을 수 있습니다.

사용자 등록 라이센스 키

그런 다음 WordPress 대시보드로 돌아가서 Plugins >> Add New 로 이동합니다. 플러그인 업로드 버튼을 클릭하기만 하면 됩니다.

다음으로 이전에 다운로드한 User Registration Pro zip 파일을 선택하고 지금 설치를 누르십시오.

프로 플러그인 업로드

이제 필요한 영역에 라이센스 키를 붙여넣고 사이트에서 플러그인을 활성화하십시오 .

사용자 등록 라이센스 키 입력

전체 설치 및 설정 프로세스가 자세히 필요한 경우 User Registration pro 설치 방법에 대한 이 링크를 따르십시오.

설정에 성공하면 다음 단계로 넘어갈 수 있습니다.


2단계: 고급 필드 추가 기능 설치

프리미엄 플랜을 구매한 후 고급 필드 추가 기능에 쉽게 액세스할 수 있습니다.

사용자 등록 >> 확장 으로 이동하여 고급 필드를 검색합니다.

고급 필드 애드온 설치

그런 다음 추가 기능 설치 버튼을 클릭하고 순차적으로 활성화를 누릅니다. 마찬가지로 Advanced Fields 애드온이 있습니다.

고급 필드 애드온 활성화

3단계: 새 양식 만들기

이제 다음 단계는 새 양식을 만드는 것입니다. 대시보드 내에서 사용자 등록 >> 새로 추가 로 이동합니다.

사용자 등록에 신규 추가

여기에서 수많은 무료 제작 템플릿과 양식을 제작할 수 있는 옵션을 볼 수 있습니다.

따라서 처음 부터 시작을 클릭하여 양식을 처음부터 시작하거나 미리 작성된 템플릿을 선택하여 시간을 절약하십시오.

이 자습서에서는 스피커 등록 양식을 처음부터 만들어 보겠습니다.

이 작업을 수행한 후 즉시 양식 이름을 지정하라는 메시지가 표시됩니다. 따라서 적절한 양식 이름을 입력하고 계속을 누릅니다.

연사 등록 양식

4단계: 양식에 WYSIWYG 필드 추가

양식에 WYSIWYG 필드를 추가하는 가장 중요한 단계가 있습니다.

따라서 양식에 필요한 모든 필드를 추가하십시오.

WYSIWYG 필드를 추가하려면 오른쪽의 고급 필드 에서 끌어서 왼쪽의 양식 작성기 캔버스에 놓습니다.

드래그 앤 드롭 WYSIWYG

동일한 프로세스에 따라 필요한 만큼 많은 필드를 추가할 수 있습니다.

필드를 선택하면 필드 옵션이 나타납니다. 이 섹션에서 각 양식 필드를 사용자 정의할 수 있습니다.

아래 설명된 대로 필드 옵션에서 변경할 수 있습니다.

  • 레이블 : 필드에 적합한 제목을 지정합니다. 메모, 요청 등
  • 설명 : 양식에 포함할 설명을 추가합니다.
  • Field Name : 이 영역에는 필드의 ID가 포함됩니다. 그대로 두거나 원하는 대로 변경할 수 있습니다.
  • 필수 : 드롭다운에서 간단히 WYSIWYG 필드를 필수로 표시할 수 있습니다.
  • 레이블 숨기기 : 드롭다운에서 필드 레이블을 숨길 수도 있습니다. 예 또는 아니오를 선택하기만 하면 됩니다.
  • 도구 설명 활성화 : 필드에 대한 정보를 사용자에게 표시하려면 도구 설명을 활성화합니다.
필드 옵션 사용자 정의

마찬가지로 나머지 필드에 대한 필드 옵션을 사용자 지정합니다.

참고: 대부분의 양식 필드에는 유사한 필드 옵션이 있습니다. 그러나 필드에 따라 몇 가지 옵션이 약간 다를 수 있습니다. 따라서 그에 따라 사용자 정의하십시오.

모든 변경을 완료한 후 상단의 양식 업데이트를 클릭하여 양식을 저장할 수 있습니다. 마찬가지로 프런트 엔드에서 양식이 어떻게 보이는지 보려면 미리 보기를 클릭합니다.

업데이트 양식 미리보기 버튼

필드 사용자 지정 부분은 여기까지입니다. 프로세스를 진행할 수 있습니다.


4단계: 양식 설정 구성

양식 필드를 사용자 정의한 후에는 양식 설정을 구성해야 합니다.

필드 옵션 옆에 양식 설정 옵션이 있습니다. 여기에서 일반 설정 및 추가 설정을 구성할 수 있습니다.

일반 설정에서 사용자 승인 및 로그인 옵션을 변경할 수 있습니다. 드롭다운의 옵션 중에서 사용자에 대한 사용자 정의 승인 및 로그인 기준을 설정할 수 있습니다.

양식 설정 일반

그런 다음 양식에 등록하는 사용자의 역할을 설정하는 기본 사용자 역할이 있습니다. 여섯 가지 기본 사용자 역할 중에서 선택할 수 있습니다.

마찬가지로 Captcha 지원 옵션을 활성화하여 봇과 스팸으로부터 양식을 보호할 수 있습니다.

게다가 Submit Button Class , Submit Button Text , Success message position 등과 같은 몇 가지 다른 옵션이 있습니다.

이제 일반 설정과 마찬가지로 양식의 추가 설정을 구성할 수 있습니다.

양식 설정 추가

다음과 같은 다양한 중요한 보호 옵션을 찾을 수 있습니다.

  • 사용자를 위해 자동 생성된 암호 활성화
  • HoneyPot으로 스팸 방지 활성화
  • 화이트리스트/블랙리스트 도메인 활성화

마찬가지로 우수한 사용자 경험을 위해 키보드 친화적 양식을 활성화 하고 재설정 버튼을 활성화 할 수 있습니다.

Form Reset Button Label 에서 재설정 버튼의 레이블을 변경할 수도 있습니다.

또한 추가 필드로 양식 필드 매핑을 활성화하여 사용자 등록 플러그인이 외부 플러그인과 호환되도록 할 수 있습니다.

바로 설정 부분입니다. 다시 양식 업데이트를 클릭하여 모든 변경 사항을 저장합니다.


5단계: 사이트에 양식 표시

마지막으로 사용자가 사이트에 입력할 수 있도록 WYSIWYG 필드가 포함된 등록 양식을 게시할 차례입니다.

사이트에 양식을 임베드하려면 Post/Pages >> Add New 로 이동하십시오.

페이지 새로 추가

그런 다음 블록 추가 ( + ) 버튼을 클릭하고 사용자 등록 블록을 검색합니다. 그런 다음 클릭하여 페이지에 추가합니다.

사용자 등록 차단 선택

그런 다음 드롭다운 메뉴에서 WordPress 스피커 등록 양식을 선택합니다.

WYSIWYG WordPress 등록 양식

상단의 미리보기 버튼으로 양식의 최종 미리보기를 볼 수 있습니다.

최종 양식 미리보기

아래는 양식이 어떻게 보일지에 대한 이미지입니다.

미리보기 WordPress 양식 WYSIWYG 필드

마지막으로 양식이 완전히 준비되었다고 생각되면 게시를 누를 수 있습니다.


마지막 생각들!

WordPress 등록 양식에 WYSIWYG 필드를 추가하는 방법에 대한 기사입니다.

이 가이드가 WYSIWYG가 무엇이고 사용자 등록 플러그인에서 어떻게 작동하는지 이해하는 데 도움이 되었기를 바랍니다.

사용자 등록은 귀하의 웹 사이트를 독점적으로 만들 때 가장 좋은 선택입니다. 등록 플러그인이 갖추어야 할 모든 필수 기능이 탑재되어 있습니다.

사용자 등록에는 더 많은 고유 기능이 있으며 그 중 일부는 다음과 같습니다.

  • 리디렉션 및 콘텐츠 제한
  • 독점 초대용 초대 코드
  • 안전한 보안 공간을 위한 스팸 방지 기능
  • 결제 게이트웨이 통합
  • 맞춤 이메일 템플릿

그것은 그 기능 중 일부일뿐입니다. 게다가 이 플러그인의 적용 범위는 무한합니다. 이 플러그인에 대해 자세히 알아보려면 공식 사이트를 방문하세요.

다음으로 WordPress 등록 양식에 비밀번호 필드를 설정하려면 WordPress 등록 양식에 비밀번호 필드를 추가하는 방법 가이드를 확인하십시오.

마찬가지로 프런트 엔드 등록 후 WordPress에서 사용자를 승인할 수도 있습니다.

우리 블로그에서 이 강력한 플러그인에 대한 더 많은 경이로움을 읽을 수 있습니다. 쉬운 비디오 자습서를 보려면 YouTube 채널을 구독할 수 있습니다.

플러그인에 대한 제안이나 질문이 있으면 소셜 미디어를 통해 문의하십시오. 우리는 Facebook과 Twitter에서 사용할 수 있습니다.