Akismet을 통한 스팸 방지. WordPress에서 연락처 피드백 양식을 만드는 방법
안녕하세요, 친구들. 오늘의 튜토리얼은 귀하의 WordPress 사이트가 훌륭하고 기능적인 피드백 양식을 갖는 데 도움이 될 것입니다. 우리는 Contact Form 7 플러그인을 사용하여 이를 수행할 것입니다. 한때 저는 일반적인 문의 양식을 찾는 데 많은 시간을 보냈지만 이 플러그인에 대한 가치 있는 대안을 찾지 못했습니다.
플러그인 기능플러그인을 사용하여 작업할 예정이므로 플러그인 없이 피드백이 필요한 경우 다음 기사를 참조하는 것이 좋습니다. 설정은 좀 더 복잡하지만 옵션은 더 보편적입니다(다음에 적합). 모든 사이트) 서버에 부하를 덜 줍니다.
Contact Form 7의 문의 양식의 가장 큰 장점은 사용자 정의가 쉽고 거의 무제한의 기능이 있으며 모든 WordPress 템플릿에 대한 자동 디자인 조정이 가능하다는 것입니다. 도움을 받으면 사이트에서 메시지를 보내는 양식을 만들 수 있습니다. 플러그인을 사용하여 주문 버튼, 콜백 또는 체크박스와 드롭다운 목록이 포함된 복잡한 설문지를 만들 수 있습니다. 전송할 파일을 첨부하는 것도 가능합니다.
한마디로 플러그인은 엄청난 기능을 가지고 있습니다.
아직도 “문의 양식을 할 것인가, 말 것인가?”라는 질문이 고민된다면? (필요한 페이지에 연락처 정보를 입력하면 됩니다.) 그런 다음 분명히 말할 가치가 있습니다.
첫째, 사이트에서 직접 메시지를 보내는 것이 이메일 프로그램을 열고 모든 것을 수동으로 작성하는 것보다 더 편리합니다. 시간을 절약하는 것은 누구에게도 해를 끼치지 않습니다.
둘째, 문의 양식을 사용자 정의할 수 있으며 이를 통해 표준 형식의 편지를 받을 수 있어 탐색이 더 쉬워집니다. 예를 들어 "주문" 메시지에 대한 표준 헤더를 설정할 수 있으며 주문 페이지의 모든 이메일은 이 헤더와 함께 도착합니다.
셋째, 문의 양식을 사용하면 이메일 주소를 숨길 수 있으므로 이메일 상자가 공개될 때 필연적으로 나타나는 스팸 가능성을 제거할 수 있습니다.
넷째, 스타일리쉬하고 모던하다.
문의 양식 7 플러그인 설치 및 구성플러그인은 일반 WordPress 데이터베이스에 있으므로 어딘가에서 해당 파일을 검색하여 직접 다운로드한 다음 호스팅에 업로드할 필요가 없습니다. 모든 것이 더 간단해졌습니다. WordPress 관리자를 통해 플러그인 섹션에 들어가서 검색 필드에 "문의 양식 7"을 입력하고 설치하세요. 플러그인을 설치한 적이 없다면 여기에서 플러그인 설치 방법에 대한 자세한 지침을 확인하세요.
플러그인 설정은 두 단계로 구성됩니다.
첫 번째는 특정 양식을 설정하는 것입니다. 다양한 양식이 있을 수 있으며 각 양식에는 고유한 필드 집합이 포함될 수 있습니다. 한마디로, 사이트의 각 작업과 각 페이지에 대해 별도로 피드백 양식을 만들 수 있으며 Wordpress에서는 이를 허용합니다. 해당 목록은 플러그인 데이터베이스에 저장됩니다.
두 번째 단계는 사이트 페이지에 양식을 삽입하는 것입니다. 플러그인 내에서 생성하는 각 양식에는 고유한 단축 코드가 있습니다. 페이지에 삽입하려면 삽입하기만 하면 됩니다.
자, 가자.
시작하려면 관리 패널의 왼쪽 메뉴에서 문의 양식 7 탭을 찾으세요. 그 아래에 "양식"과 "새 항목 추가"라는 두 가지 항목이 있는 메뉴가 나타납니다.
아직 기성 양식이 없으므로 '새로 추가' 섹션으로 이동하겠습니다. 언어를 선택하라는 페이지가 열리고 기본 언어도 여기에 나열됩니다. 파란색 "새로 추가" 버튼을 클릭하세요.
양식 설정은 별도의 블록으로 구분됩니다. 순서대로 고려해 보겠습니다.
'양식 이름' 차단첫 번째 블록은 양식 이름을 담당합니다. "제목 없음"이라는 문구에 커서를 놓고 필요한 이름을 입력하십시오. 이 이름은 플러그인의 문의 양식 목록에만 표시되므로 나중에 모든 종류로 인해 혼동되지 않도록 명확하게 알려주십시오.
처음에 이 블록에는 표준 필드 구성이 포함되어 있습니다. 여기에는 편지를 보낸 사람의 이름, 이메일 주소, 편지 제목, 편지 내용 및 보내기 버튼이 포함됩니다.
필수 입력란에는 별표가 표시되어 있습니다. 이 필드를 비워두면 메시지가 전송되지 않습니다.
필드의 위치는 일반 HTML 마크업을 사용하여 사용자 정의할 수 있습니다.
필드 자체를 설정하는 경우 불필요한 필드를 제거하고 필요한 필드를 추가할 수 있습니다. 문자 제목을 수동으로 입력하고 싶지 않은 경우 해당 블록을 삭제하면 됩니다.
필드를 추가하는 것도 매우 쉽습니다. 오른쪽에는 태그를 생성하는 버튼이 있습니다. 버튼을 클릭하면 이 플러그인이 지원하는 가능한 모든 필드 목록이 표시됩니다.
원하는 항목을 선택하고 설정을 구성하세요. 플러그인은 러시아어로 되어 있어 모든 설정이 직관적입니다.
첫 번째 확인란은 해당 필드가 필수인지 선택인지 여부를 나타냅니다(별표가 추가됨).
필드를 설정하면 다음과 같은 2개의 단축 코드가 생성됩니다.
- “이 코드를 복사하여 왼쪽의 양식 템플릿에 붙여넣으세요.” – 이 코드는 다른 모든 코드와 동일한 방식으로 양식 코드에 삽입됩니다.
- "다음 코드를 아래 문자 템플릿에 붙여넣으세요." - 다음 블록에서 문자 형식을 지정하려면 이 코드가 필요합니다.
이 방법으로 양식에 필드, 확인란, 드롭다운 목록, 파일 첨부 요소 등을 원하는 만큼 추가할 수 있습니다.
"편지" 차단이제 우리의 임무는 우리가 받게 될 편지를 맞춤화하는 것입니다. 편지는 피드백 양식의 기능에 어떤 방식으로도 영향을 미치지 않으며 양식에 입력된 정보를 전달하는 역할만 합니다.
우리의 임무는 편지에 모든 정보를 포함하는 것입니다.
첫 번째 단계는 메시지를 보낼 이메일 주소를 지정하는 것입니다(무엇이든 가능).
두 번째 항목은 편지가 귀하에게 전송될 이메일 주소를 나타냅니다. 여기서는 아무것도 변경하지 않겠습니다. 기본값은 블로그의 받은 편지함이며 메시지를 보내는 사람의 이름이 포함된 태그가 여기에 추가됩니다.
다음으로 편지의 제목을 나타냅니다. 주제는 양식에 기재되는 항목을 기준으로 합니다. 하지만 양식에서 이 요소를 제거하고 각 문자에 자동으로 설정되는 특정 주제를 필드에 입력할 수 있습니다. 서비스 및 광고에 관한 페이지의 피드백 양식에 대해 이 작업을 수행했습니다. 거기에서 오는 메시지에는 항상 "서비스 주문" 또는 "광고 주문"이라는 동일한 제목이 포함되어 간단하고 명확합니다.
추가 헤더 필드에는 "답장:" 태그가 포함되어 있어 블로그에서 받은 편지에 응답할 때 메시지를 블로그와 편지 보낸 사람이 양식 필드에 지정한 주소로 보낼 수 있습니다. 이 필드를 변경할 필요는 없습니다.
"편지 템플릿" 필드는 귀하가 받은 메시지의 내부 내용을 담당합니다. 기본적으로 필드에 입력한 보낸 사람, 제목 및 메시지 텍스트에 대한 정보가 포함됩니다.
마지막에는 편지를 보낸 사이트가 표시됩니다.
기본적으로 설치되지 않은 추가 필드를 양식에 추가한 경우 편지 템플릿에 해당 태그를 추가하는 것을 잊지 마십시오. 이는 해당 태그를 생성한 "양식 템플릿" 블록에서 제공됩니다("다음 코드를 아래 이메일 템플릿에 붙여넣기" 필드).
이 블록의 모든 텍스트 정보(태그 제외)는 원하는 대로 변경할 수 있습니다. 설명을 추가하고 태그를 교체하여 자신에게 맞는 순서로 정렬할 수도 있습니다.
"편지 2" 차단내가 보낸 메시지를 다른 사람이 받기를 원할 경우 이 확인란을 선택하세요.
이 블록은 이전 블록과 유사하게 구성됩니다. 기본적으로 양식을 작성한 사람에게 편지가 전달되도록 양식의 모든 필드가 채워져 있습니다(분명히 잊지 않도록).
예를 들어 관리자나 회계사에게 사본을 보내도록 설정할 수 있습니다.
'양식 제출 시 알림' 차단이 블록에서는 사용자가 메시지 보내기 버튼을 클릭한 후 표시되는 메시지를 구성할 수 있습니다. 혹시 바꾸고 싶은 게 있으시면 말씀해 주세요. 저는 모든 것을 그대로 두었습니다.
양식 활성화모든 필드를 작성한 후 "양식 이름" 블록의 시작 부분으로 돌아가 오른쪽에 있는 "저장" 버튼을 클릭하세요.
플러그인은 생성한 양식을 활성 양식 목록에 배치하고 다음과 같은 특수 코드를 할당합니다.
[ 연락처 - 양식 - 7 id = "5464" title = "인증" ] !} |
웹사이트 어디든 이 코드를 삽입하면 잠재 고객과 소통하기 위한 미리 만들어진 양식을 얻게 됩니다.
스팸 방지 – Akismet 및 Captcha스팸 발송자는 웹사이트 소유자에게 많은 문제를 일으키며, 무언가를 작성할 수 있는 새로운 양식이 나올 때마다 스팸 봇의 수가 늘어납니다.
문의 양식 플러그인을 기본 버전으로 남겨두면 잠시 후 비어 있고 무의미한 메시지가 많이 쏟아지게 됩니다.
스팸 발송자를 제거하는 방법에는 두 가지가 있습니다.
첫 번째 옵션은 방문자가 추가 문자를 수동으로 입력해야 하기 때문에 불편합니다. 그렇게 어렵지는 않지만 어떤 사람들은 그것을 좋아하지 않습니다.
Akismet 플러그인을 사용하면 입력된 데이터(이름, 이메일 주소, 링크)를 독립적으로 분석하고 축적된 데이터베이스를 기반으로 메시지가 스팸인지 여부에 대한 결론을 도출할 수 있기 때문에 더 편리합니다.
또한 대부분의 WordPress 사이트에는 기사 댓글의 스팸을 방지하기 위해 akismet이 설치되어 있습니다. 이는 이를 사용할 때 추가 플러그인을 설치하거나 사이트에 불필요한 로드를 생성할 필요가 없음을 의미합니다.
Akismet을 통한 스팸 방지1. 귀하의 사이트에 Akismet 플러그인을 설치하고 활성화하십시오.
2. 연락처 양식 태그에 추가 데이터를 추가합니다.
- 작성자 이름이 있는 필드에 akismet:author를 추가합니다.
- akismet:author_email 편지를 보낸 사람과 함께 현장에서
- 사이트 주소 akismet:author_url 필드에
다음과 같아야 합니다.
일단 저장되면 문의 양식은 스패머가 보낸 모든 메시지를 차단해야 합니다. 특수 테스트명 “viagra-test-123?”을 이용하여 필터의 작동을 확인할 수 있습니다. – 입력하면 오류 메시지가 나타납니다.
확인을 덜 엄격하게 하려면 이름, 이메일 등 일부 필드만 선택하고 웹사이트 주소는 선택하지 않은 상태로 둘 수 있습니다. 이렇게 하면 스팸 메시지가 통과될 가능성이 높아지지만 필요한 메시지를 잃을 가능성은 줄어듭니다.
정말 간단한 CAPTCHA를 통한 스팸 방지Akismet이 귀하에게 적합하지 않다고 판단되면(많은 스팸을 통과시키거나 필요한 메시지를 차단함) 보안 문자를 활성화할 수 있습니다. 이렇게 하려면 Really Simple CAPTCHA 플러그인을 설치하세요.
편집을 위해 원하는 문의 양식을 엽니다.
태그 목록에서 보안문자를 선택하세요. 태그 설정에서 기호를 사용하여 이미지 크기를 선택할 수 있습니다. 그렇지 않으면 아무것도 변경할 필요가 없습니다. 설정 창 하단에는 2개의 태그가 나타납니다. 하나는 이미지 표시를 담당하고, 두 번째는 이 이미지의 데이터를 입력하는 필드를 표시합니다.
보안 문자가 작동하려면 이 두 태그를 모두 복사하여 양식 템플릿의 왼쪽 창에 붙여넣은 다음 변경 사항을 저장해야 합니다.
팝업 창에 피드백 양식 배치문의 양식이 항상 사이트의 특정 섹션에 있을 필요는 없습니다. 클라이언트가 리소스의 모든 페이지에서 액세스할 수 있어야 하는 경우도 있습니다.
이러한 경우 전체 양식을 게시하는 것이 항상 편리한 것은 아닙니다. 주의를 끌 수 있는 눈에 잘 띄는 곳에 버튼을 배치하는 것이 훨씬 쉽습니다. 이 버튼을 클릭하면 이미 양식이 열립니다.
따라서 사람은 필요한 페이지를 떠나지 않고도 사이트에서 메시지를 보낼 수 있습니다.
이 작업은 다른 플러그인인 Easy FancyBox를 사용하여 수행됩니다.
1. 플러그인 설치
우선, 플러그인 자체를 설치합니다. 이는 일반 플러그인 데이터베이스에 있으므로 귀하가 해야 할 일은 블로그의 관리 패널에서 플러그인 검색 시 해당 이름을 입력하는 것뿐입니다. 플러그인을 설치하면 "설정" 섹션에 "미디어 파일" 탭이 나타납니다.
이 탭에서는 팝업 창에 표시되어야 하는 콘텐츠 유형 목록을 찾아야 합니다. 기본적으로 이미지만 있으므로 인라인 콘텐츠를 추가해야 합니다.
이제 플러그인 설정이 완료되었으니 피드백 버튼 설정으로 넘어가겠습니다.
2. 사이트에 코드를 붙여넣으세요.원칙적으로는 일반 텍스트 링크를 사용해도 되지만 이미지 버튼을 사용하는 것이 더 보기 좋습니다.
연락처 양식(머리글, 바닥글 또는 사이드바)에 대한 버튼을 표시하려는 사이트에 다음 코드를 삽입하세요.
< a href = "#contact_form_pop" class = "fancybox-inline" > < img title = "문의 양식" alt = "문의 양식" src = "http://ссылка на картинку" > < / a > < div style = "display:none" class = "fancybox-hidden" > < div id = "contact_form_pop" > [ contact - form - 7 id = "양식 ID" title = "양식 이름" ] !} < / div > < / div > |
코드에는 피드백 버튼으로 사용할 이미지의 주소를 표시하고 양식 자체의 단축 코드를 편집해야 합니다. ID와 제목을 입력하세요.
3. 사이드바 단축코드 제한 제거사이드바에 버튼을 설치하려면 이 항목이 필요합니다. WordPress의 사이드바가 항상 단축 코드를 허용하는 것은 아닙니다.
이 기능을 활성화하려면 편집을 위해 function.php 파일을 열고(WordPress 관리 영역에서 직접) 닫는 괄호 “?>” 앞에 다음 코드를 삽입해야 합니다.
add_filter("widget_text", "do_shortcode");
add_filter("widget_text" , "do_shortcode" ) ; |
사이드바에 있는 모든 단축 코드를 실행할 수 있는 기능을 제공합니다.
나는 다음과 같은 멋진 팝업 양식을 완성했습니다.
때로는 설정과 필드가 다른 웹사이트에 여러 양식을 배치해야 하는 경우가 있습니다.
예를 들어, 하나의 버튼은 이름과 전화번호가 포함된 양식으로 연결되고 사이트에서 콜백을 주문하는 데 사용되며, 두 번째 버튼은 자세한 주문 신청서(주소, 설명 필드, 파일 첨부 기능 등). Contact Form 7 플러그인 자체에서는 수많은 양식 옵션을 생성할 수 있지만, 이를 동일한 페이지의 다양한 버튼에 어떻게 맞출 수 있을까요?
이렇게 하려면 이전 단락의 버튼 코드를 조정해야 합니다. 첫 번째 버튼은 위에 제시된 옵션을 사용합니다. 두 번째에서는 두 가지 값이 변경됩니다.
피드백 양식을 작성하고 숨겨야 하는 경우가 많습니다. 이 양식은 라이트박스 팝업 창에서 사이트의 버튼이나 비문을 클릭할 때 나타나야 합니다. 이 기사에서는 WordPress의 팝업 창에서 피드백 양식을 만드는 방법을 설명합니다. Feedburner 구독 양식 출력. 한 페이지에서 여러 양식을 호출하는 방법. 전송 후 피드백 양식(fancybox) 창을 닫는 방법과 가능한 모든 오류와 해결 방법을 분석해 보겠습니다.
CMS WP에서 웹사이트에 대한 피드백 양식이나 기타 양식을 만들려면 디자인 스튜디오 "Engine"에서는 Contact Form 7 플러그인을 권장하고, 라이트박스 효과가 있는 팝업 창에는 Easy FancyBox를 사용합니다.
가장 인기 있고 고품질이며 구성 및 사용이 쉬운 플러그인은 Contact Form 7입니다. 이 플러그인을 사용하면 모든 연락처 양식 등을 만들 수 있습니다. 플러그인에는 다양한 양식과 필드가 있으므로 다양한 작업에 사용할 수 있습니다.
이 경우 여러 양식을 호출하려면 코드의 다음 부분에 주의하세요.
6. Feedburner 구독 양식 출력
구독하다
구독하다:
피드 주소 https://feedburner.google.com/fb/a/mailverify?uri=Cms-info를 자신의 주소로 변경하기만 하면 구독 양식에 이 코드를 사용할 수 있습니다.
Easy Fancybox와 같은 fancybox와 함께 플러그인을 사용하는 경우 이 코드를 추가하세요.
on_sent_ok: $.fancybox.close();
양식의 추가 설정 섹션에서
이 오류는 최신 버전의 WordPress 엔진에서 발생할 수 있습니다. 링크에서 클래스를 변경하는 것이 좋습니다.
피드백
로 변경:
피드백
fancybox를 fancybox-inline으로 변경했습니다.
발생한 문제 및 해결 방법:1. 링크를 클릭했는데 양식에 아무 일도 일어나지 않았습니다. - 주소 표시줄에 http://site/#contact_form_pop이 나타났습니다.
Easy FancyBox 플러그인을 WordPress용 FancyBox로 교체하여 문제가 해결되었습니다.
2. 갤러리(예: NextGEN 갤러리)가 연결되어 있거나 "라이트박스" 효과가 이미 설치된 테마가 있는 경우 다음과 같은 일이 발생합니다. 내장된 라이트박스와 EasyFancy Box의 라이트박스를 사용하여 사진이 열립니다. 즉, 두 번 닫아야 합니다.
이를 방지하려면 EasyFancy Box 설정에서 이미지 확인란을 선택 취소하고 팝업 양식 코드 상단에서 fancybox 클래스를 fancybox-inline으로 바꾸세요. 귀하의 코드는 다음과 같습니다.
피드백
그게 전부입니다. 우리에게 "감사"하고 싶다면 다음 기회가 있습니다. 오른쪽에는 포털 개발을 위한 기부 옵션이 있습니다. 또는 아래 서비스를 사용하여 소셜 미디어에 기사를 공유하세요.
안녕하세요. 이번 강의에서는 본격적인 피드백 양식을 만들어 보겠습니다. 페이지의 버튼을 클릭하면 모달 창에 표시됩니다. 저는 처음부터 jQuery 프레임워크와 하나의 작은 JavaScript만 사용하여 이 강의를 직접 진행했습니다. 강의는 매우 흥미롭기 때문에 놓치지 마세요. 아래에서 제가 만든 양식의 데모를 볼 수 있고 다운로드할 수도 있습니다. 업무에 필요한 파일:
1단계. 피드백 양식의 일반적인 설명 및 작동:
먼저 우리에게 필요한 파일이 무엇인지, 실제로 필요한 이유를 알려 드리겠습니다.
- 이미지 - 양식의 모든 이미지가 저장되는 폴더입니다.
- index.html - 피드백 양식을 호출하기 위한 버튼이 위치할 기본 "색인" 파일입니다.
- contact.html은 양식 자체가 포함된 파일입니다. 모달 창에 포함될 파일은 바로 이 파일입니다.
- send.php - 편지 전송을 담당하는 핸들러 파일입니다.
- jquery.js - 주요 jQuery 프레임워크.
- style.css는 양식에 대한 계단식 스타일 시트가 포함된 파일입니다.
이제 순서대로 진행하겠습니다... 양식은 다음과 같이 작동합니다. 사용자가 모달 창을 호출하는 버튼이 있는 페이지로 이동하여 이를 누르면 방문자가 모든 항목을 입력하는 양식이 나타납니다. 메시지의 데이터와 텍스트를 입력하고 보낸 다음 편지 전송 성공 또는 실패에 대한 메시지가 있는 페이지로 리디렉션됩니다. 그게 다입니다. 이제 양식 레이아웃을 시작해 보겠습니다.
Step 2. 양식을 호출하는 버튼입니다.
따라서 양식이 포함된 모달 창이 나타나도록 하려면 어떻게든 강제로 이를 수행해야 합니다. 이렇게 하려면 페이지에 일반 버튼을 배치하기만 하면 됩니다. 이러한 버튼에 대한 코드는 적용된 스타일과 함께 아래에 표시됩니다.
관리자에게 메시지를 작성하세요
3단계. 양식 자체 + 양식 설정
이제 피드백 양식이 어디에 있는지 알아 보겠습니다. 그리고 이는 이미 수업의 소스 코드에 있는 contact.html 파일에 있습니다. 이 양식은 매우 작으므로 아래에 코드를 배치하겠습니다.
관리팀에 메시지 보내기:
보시다시피, 코드를 살펴보면 육안으로도 폼을 더 잘 표시하기 위해 테이블 레이아웃을 사용했음을 알 수 있습니다. 이는 모든 양식 필드를 균등화하는 데 매우 유용했습니다.
4단계. 편지 발송을 담당하는 처리자
여기서는 편지를 보내는 메인 프로세서에 대해 빠르게 설명하겠습니다. 소스 코드에 있기 때문에 여기서는 코드를 제공하지 않겠습니다. 해당 내용을 다운로드하여 보십시오. 나처럼 PHP를 중급 수준으로 알고 있다면 이 핸들러의 전체 코드를 직접 쉽게 구문 분석할 수 있습니다. 모든 것이 준비되었으면 다음으로 넘어가세요...
5단계. 기본 jQuery 프레임워크 "조립"
이제 다른 jQuery 강의에서와 마찬가지로 기본 jQuery 프레임워크를 "조립"해야 합니다. 이를 위해 버튼이 있는 위치와 태그 사이로 조금 돌아가서 다음 코드를 삽입해 보겠습니다.
6단계: 양식 스타일 지정
보시다시피 양식의 스타일은 너무 많은 공간을 차지하므로 style.css 파일에 별도로 배치됩니다. 아래 코드를 인덱스 파일에 연결하기만 하면 됩니다.
7단계. jQuery 개선
이제 양식 모달 창이 완전히 작동하려면 다음 jQuery 코드를 삽입해야 합니다.
$(function() ( $("a").overlay(function() ( var Wrap = this.getContent().find("div.wrap"); if (wrap.is(":empty")) ( Wrap.load(this.getTrigger().attr("href"));
결론.
흥미로운 피드백 양식이 준비되었습니다. 길이 멀고 힘들었기 때문에 혹시 이해가 안 되는 분이 계시다면 이번 레슨에 대한 댓글로 여러분의 질문을 들어보겠습니다. 그게 저를 위한 전부입니다. 또 만나요, 친구들!
진심으로 존경하는 마음을 담아 jQuery 가이드 - M.K.
(최종 업데이트 날짜: 2016년 7월 8일)
여러분, 안녕하세요! WordPress 사용자뿐만 아니라 초보자에게도 유용한 게시물인 WordPress 팝업을 가지고 다시 왔습니다. 모달 창 플러그인이라고도 불리는 WordPress 팝업 플러그인에 관심이 있다면 제대로 찾아오셨습니다.
아래에 제시할 플러그인은 다음 용도로 사용할 수 있습니다. 모달 창에서 양식 7에 문의하세요. 모달(팝업) 창의 모든 문의(피드백) 양식 모달 창의 비디오; 팝업 창의 사진; 링크와 함께 유용한 정보 게시 모달 창의 새 기사에 대한 메일 구독 양식등등, 모두 나열할 수는 없습니다. 플러그인은 복잡한 설정 없이 매우 간단하며 사이트에 추가 부하를 거의 생성하지 않습니다.
쉬운 모달 플러그인 - WordPress용 팝업/모달 창
WordPress용 모달 창 플러그인 - Easy Modal 관리자 패널 - 플러그인 - 새로 추가를 통해 표준 방식으로 이 플러그인을 설치할 수 있으며 플러그인 검색 필드에 Easy Modal이라는 이름을 입력하고 Enter 키를 누릅니다. 목록의 첫 번째에 있어야 합니다. 평소처럼 설치하고 활성화하세요. 그런 다음 새 모달 창 만들기로 넘어갈 수 있습니다.
이렇게 하려면 나타나는 새로운 Easy Modal 섹션을 클릭하고 Modals를 선택하십시오.
Easy Modal - 새 모달 창 만들기 그런 다음 페이지 상단에서 새로 추가 버튼을 클릭하세요.
새 창 추가 그리고 여기에서는 모든 것이 간단합니다.
비디오 팝업 만들기 일반 설정(일반 탭)에서 새 창의 이름을 지정합니다(예를 들어 여러 개의 모달 창을 만드는 경우에는 표시되지 않습니다). 로드 유형 사이트 전체 로드(전체 사이트용) 창 제목을 입력하고 마지막으로 필요한 코드를 편집기(텍스트 모드)에 붙여넣습니다. 내 예에서는 YouTube의 비디오 코드를 삽입했습니다.
모달 창 설정 매개변수에서 창 크기를 선택할 수 있습니다. 배경을 사용할지 여부; 모달/팝업 창의 애니메이션 유형; 창의 위치를 지정하고 창을 고정할 수도 있습니다(상자를 선택하고 화면 상단으로부터의 거리를 표시).
예제 탭에는 WordPress에서 팝업을 표시하기 위한 코드 예제가 있습니다.
WordPress에 모달 창을 표시하는 코드 여기에서 간단한 텍스트 링크, 버튼 또는 아이콘을 선택할 수 있습니다. 새로 생성된 각 창에는 eModal 클래스가 할당됩니다. 생성된 첫 번째 창의 클래스는 eModal - 1, 두 번째 eModal - 2 등입니다. - 기호 뒤의 숫자를 직접 대체하면 됩니다. 이 코드는 기사의 어느 곳에나 붙여넣을 수 있습니다. 당연히 코드에는 어떤 텍스트라도 쓸 수 있습니다. 네, 페이지 오른쪽에 모달 창을 만든 후 게시 버튼을 클릭하는 것을 잊지 마세요.
사이드바에 비디오가 있는 모달 창의 코드를 버튼으로 삽입했습니다.
블로그 사이드바 버튼 방문자가 이를 클릭하면 비디오가 포함된 창이 열립니다.
비디오가 포함된 모달 창 친구와 동지 여러분, Easy Modal 플러그인을 사용하는 일반적인 원칙이 여러분에게 분명하기를 바랍니다. 테마 항목을 클릭하여 모달 창의 모양을 즉시 사용자 정의할 수 있다는 점을 추가하겠습니다. 안타깝게도 무료 버전의 플러그인에는 디자인 테마가 하나만 있지만 원하는 대로 디자인할 수 있으며 설정도 충분합니다. 모달 창의 모양을 사용자 정의할 때 오른쪽에서 디자인 미리보기를 즉시 볼 수 있습니다.
테마 편집 - 모달/팝업 창 디자인 창 모양에 대한 모든 설정을 마친 후 오른쪽의 저장 버튼을 클릭합니다. 그리고 마지막으로 신사 숙녀 여러분, 모달 창에 Contact Form 7 문의 양식을 표시하는 예를 보여 드리겠습니다.
위와 같이 새 모달 창을 생성하고 텍스트 편집기에서 Contact Form 7 단축 코드를 붙여넣기만 하면 됩니다(이 플러그인이 설치되어 있는 경우, 설치되어 있지 않은 경우).
팝업 창에서 문의 양식 7 만들기 
메시지 뒤에 작성자에게 글을 쓰는 버튼 독자가 귀하에게 연락하려는 경우 버튼을 클릭하면 모달 창에서 문의 양식이 열립니다.
모달 창에서 작성자에게 연락하기 위한 양식 그런 것. 또한 생성된 모든 팝업 창이 페이지(모달 항목)에 표시되며, 각 모달 창의 클래스가 표시됩니다.
WordPress에 모달 창 생성 독자 여러분, 안녕하세요. 이 기사에서는 WordPress 사이트에서 팝업 문의 양식을 만드는 방법을 보여 드리겠습니다. 자신의 웹사이트나 블로그를 개발할 때 인터넷 리소스 방문자와 신속하게 소통할 수 있는 기능을 구축해야 하는 경우가 많습니다. 이 경우 사용자와 빠르게 연락하는 데 도움이 되는 WordPress용 팝업 피드백 양식이 유용할 것입니다.
WordPress에 팝업 피드백 양식이 필요한 이유는 무엇입니까?이 양식이 필요한 이유를 살펴 보겠습니다.
추가 보너스: 양식은 사이트의 요구 사항에 맞게 쉽게 수정하고 사용자 정의할 수 있습니다. WordPress에 대한 팝업 피드백 양식은 통화, 서비스 또는 제품 주문 또는 구독을 위한 시작 창 형태로 표시될 수 있습니다. 원하는 경우 시각 효과, 다양한 이미지 등을 추가할 수 있습니다.
팝업 양식 설치용 플러그인웹사이트 개발 및 제작을 위한 특수 애플리케이션인 Wordpress에서 팝업 창을 개발하는 데 필요한 도구를 살펴보겠습니다.
문의 양식 7이 플러그인은 양식을 디자인하는 데 직접 사용됩니다. 설치하려면 다음 단계를 따르세요.
이지 팬시박스 이 플러그인은 팝업 창 효과를 개발하는 데 적합합니다. Easy FancyBox 설치 순서는 이전 플러그인 설치와 유사합니다.
미디어 파일을 통해 Easy FancyBox 추가 기능의 설정을 구성할 수 있습니다. 메뉴 옵션 “설정” -> “미디어 파일”을 사용하세요.
열리는 블록의 표준 설정 바로 아래에 플러그인 자체의 매개변수가 위치합니다. 일반적으로 "이미지" 항목 옆에는 확인 표시가 있는데, 이는 이미지를 클릭할 때 팝업 창이 활성화된다는 것을 나타냅니다. 팝업 애니메이션을 만들기 위한 다른 추가 도구가 있는 경우 이미지가 두 번 열리므로 제거하는 것이 좋습니다.
그러나 그것이 전부는 아닙니다. '인라인 콘텐츠' 옆의 확인란을 선택하세요.
누구나 플러그인 설정을 더 자세히 살펴보고 자신의 재량에 따라 설정할 수 있습니다.
팁: 양식이 항상 열려 있도록 하려면 Easy FancyBox 설정에서 “오버레이를 클릭할 때 FancyBox 닫기” 옵션을 선택 취소하세요. 그러면 창 외부를 클릭하면 창이 닫힙니다.
단계별 지침글쎄, "지루한"사전 준비는 끝났습니다. 이제 "맛있는"부분으로 넘어 갑시다. 실제로 WordPress 팝업 피드백 양식이 어떻게 개발되는지 살펴 보겠습니다.
양식 창 처리어디서부터 시작할까요? 물론 양식 자체의 예비 구성이 포함됩니다. 오른쪽 메뉴에서 "문의 양식 7"을 선택한 다음 "새로 추가" 옵션을 선택하세요.
예를 들어 "실험"과 같은 양식의 새 이름을 생각해 내고 "제목"이라는 텍스트가 있는 열린 창의 입력 필드에 입력한 다음 "저장" 버튼을 클릭합니다. 양식 템플릿 자체를 포함하여 다른 매개 변수를 변경할 수 있지만 여기서는 다루지 않습니다. 이제 우리의 주요 목표는 팝업 양식을 만드는 방법을 배우는 것입니다.
결과를 살펴보세요. 보시다시피 플러그인은 이후에 양식을 표시하는 데 사용되는 특수 단축 코드를 생성했습니다. 복사해야합니다.
이제 프로그래밍을 시작하겠습니다. 새 프로그램 코드는 "연락처" 등 사이트의 어느 곳에나 삽입할 수 있습니다. 이 예에서는 새 양식이 위젯에 표시됩니다. 메뉴에서 "모양"을 선택한 다음 "위젯"을 클릭하고 열리는 창에서 "텍스트" 옵션을 클릭합니다.
이제 '위젯 추가' 버튼을 클릭하세요.
콘텐츠 입력 필드에 다음 코드를 붙여넣습니다.
편지 쓰기 시작 텍스트 끝 텍스트
결과는 다음과 같습니다.
예제에 지정된 단축 코드 대신 새 양식을 생성하여 생성된 단축 코드를 지정해야 합니다.
또한 양식을 편집할 수 있습니다. 입력 필드를 추가 또는 제거하고, 양식 앞뒤에 초기 및/또는 종료 텍스트를 입력하고, 텍스트를 제목으로 변환하거나 별도의 블록으로 표시하고, 다른 스타일, 자리 표시자 등을 사용합니다. 시간과 욕구만 있었다면!
링크 스타일링또한 시각적인 모양을 개선하기 위해 링크를 버튼으로 변환하는 두 가지 방법을 살펴보겠습니다.
방법 1: 추가 테마 스타일 사용.
다음 코드는 다음과 같이 삽입할 수 있습니다.
프로그램 코드 자체는 다음과 같습니다.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | /***버튼 형태로 링크 표시****/ .contact-us a( margin:auto; /*블록 중앙 정렬*/ display:block; width:199px; /*버튼 크기*/ padding:11px 22px ; /*내부 패딩*/ border:1px 테두리 음영*/ background:#3399ff; /*배경 패턴*/ text-align:center; 캡션 중앙에 맞추기*/ color:#ffffff; /*캡션 색상*/ -moz-transition: 모두 0.6초 용이성; -webkit-transition: 모두 0.6초 용이성) /**변경 커서를 가리키면 색상 링크**/ .contact-us a:hover( -moz-box-shadow: 0 0 7px #111; -webkit-box-shadow: 0 0 7px #111; box-shadow:0 0 7px #111 ; -moz-transition: 모두 0.6초 용이성; -webkit-transition: 모두 0.6초 용이성; |
/***버튼 형태로 링크 표시****/ .contact-us a( margin:auto; /*블록 중앙 정렬*/ display:block; width:199px; /*버튼 크기*/ padding:11px 22px ; /*내부 패딩*/ border:1px 테두리 음영*/ background:#3399ff; /*배경 패턴*/ text-align:center; 캡션 중앙에 맞추기*/ color:#ffffff; /*캡션 색상*/ -moz-transition: 모두 0.6초 용이성; -webkit-transition: 모두 0.6초 용이성) /**변경 커서를 가리키면 색상 링크**/ .contact-us a:hover( -moz-box-shadow: 0 0 7px #111; -webkit-box-shadow: 0 0 7px #111; box-shadow:0 0 7px #111 ; -moz-transition: 모두 0.6초 용이성; -webkit-transition: 모두 0.6초 용이성;
결과는 다음과 같은 버튼입니다.
코드에는 이미 어떤 매개변수가 무엇을 담당하는지 나와 있습니다. 이제 누구나 원하는 대로 코드를 편집하고 다양한 스타일과 색상을 실험하고 팝업에 가장 적합한 링크를 만들 수 있습니다.
방법 2 - 이미지를 버튼으로 사용합니다. 먼저, 필요한 이미지를 사이트에 업로드합니다(원하는 이미지라면 무엇이든, 반드시 버튼 형태일 필요는 없습니다. 실제로는 중요하지 않습니다). 이렇게 하려면 "미디어" -> "새로 추가"를 클릭하고 원하는 사진을 선택하세요. 파일에 대한 영구 링크가 이미지 오른쪽에 나타납니다(이 예에서는 http://www.sait.ru/wp-content/uploads/2017/04/depositphotos_2169498-E-mail-internet-icon.jpg). , 복사하여 코드에 추가합니다(따옴표를 제거하지 마세요).
"Write a letter"라는 텍스트 대신 결과 코드를 양식의 기본 출력 코드에 추가합니다.
| 1 | 
|
내 웹 사이트에는 아래 스크린샷에 표시된 버튼이 표시되었습니다.
첫 번째 방법에서 설명한 추가 스타일을 그대로 두면 버튼의 모양은 다음과 같습니다.
WordPress에 대한 팝업 피드백 양식을 메뉴에서 직접 호출할 수 있도록 다음 코드를 사용해야 합니다.
| 1 2 3 | |
먼저 이 코드를 정확히 어디에 삽입해야 하는지 파악해야 합니다. "Appearance"를 통해 "Editor"로 이동하고 템플릿 중에서 "Header(header.php)"를 선택합니다.
이제 메뉴코드가 있는 곳을 찾아보세요. 다음 정보를 찾으십시오.
| 1 2 |
아래에서 닫는 태그 바로 앞에 코드를 붙여넣으세요.
일반적으로 웹 사이트에 문의 양식을 추가하는 데는 어렵지 않습니다. 가장 중요한 것은 자유 시간을 갖고 모든 측면을 철저히 연구하려는 욕구입니다. 이제 문의 양식이 무엇인지, 용도가 무엇인지, 사이트에서 사용하는 방법, 팝업 효과가 있는 창을 열기 위해 링크를 처리하는 방법을 알았습니다. 어렵지만 흥미진진한 웹사이트 구축 사업에서 행운과 성공을 빕니다.