WordPress 페이지에 팝업을 삽입합니다. WordPress에서 팝업 창을 만드는 방법은 무엇입니까? 섹션 통합 팝업 플러그인 WordPress

안녕하세요 친구! 나는 우리가 이야기를 나누는 것을 제안한다 WordPress에서 모달 창 만들기. 팝업(모달) 창은 사이트의 기능을 크게 확장합니다. 모든 웹사이트 방문자가 봐야 할 메시지나 광고가 있나요? 캠페인을 공개해야 합니까? 웹사이트에 팝업 등록 양식을 만들고 싶나요, 아니면 소셜 네트워크에서 콘텐츠를 공유하기 위한 양식을 만들고 싶나요? 모달 창을 만들어보세요!

팝업 모달은 관심을 끌도록 설계되었습니다. 페이지에 표시되면 주요 콘텐츠를 차단하고 사용자가 콘텐츠(텍스트, 비디오, 클릭 유도 문구 등)에 익숙해지도록 합니다.

주목!이 강의가 길다고 해서 겁먹지 마세요. 모달 창을 만드는 데 어려움이 없습니다(직접 읽고 확인하세요). 각 단계를 자세히 설명하겠습니다.

WordPress에서 모달 창을 생성하는 알고리즘

WordPress에는 팝업 작업을 위한 내장 도구가 없습니다. 플러그인을 사용하여 디자인하고 사용자 정의합니다. 팝업 메이커. 예를 들어 비디오가 포함된 모달 창을 만들어 보겠습니다. 버튼 클릭시 팝업(나중에 구성할 수 있습니다. 자동적 인모습).

설치하다팝업 메이커 플러그인. 활성화그의. 상기시켜 드리겠습니다. 플러그인 설치 방법을 배웠습니다.
관리자 패널 왼쪽의 사이드 메뉴에서 섹션을 찾으세요. 팝업 메이커하위 섹션으로 이동하세요. 팝업 추가.
모달 창 편집기가 열립니다. 페이지 상단의 필드에 창 이름을 입력합니다(이름은 관리자 패널에만 표시되며 사용자에게는 표시되지 않습니다).
생각해 내다 창 제목(사용자에게 표시됨) 버튼 위의 필드에 입력하세요. 미디어 파일 추가.
블록에서 정황드롭다운 메뉴에서 창이 나타날 페이지(카테고리)를 선택합니다. 플러그인이 작동해야 하는 경우 사이트의 모든 페이지에서, 선택하다 형식:모두.
도구 모음 아래의 큰 필드에 추가 텍스트, 이미지, 비디오 또는 오디오– 팝업 창에 표시될 모든 콘텐츠. 고려 중인 예에서는 YouTube의 동영상에 대한 코드를 추가했습니다(WordPress 사이트에 동영상을 추가하는 방법을 연구했습니다).
블록에서 트리거팝업 창을 수동 또는 자동으로 열기(자체 활성화)에 대한 설정이 있습니다. 이 예에서는 값을 선택했습니다. 열기를 클릭하세요.
아래에 표시해 주세요 팝업 크기(픽셀 또는 백분율). 옵션을 선택할 때 자동플러그인은 모달 창의 크기를 자동으로 조정합니다.
해당 줄의 확인란을 선택하세요. 배경 비활성화사이트 페이지가 팝업 창 뒤에 표시되도록 합니다(권장).
설정 애니메이션 유형 및 속도(필요하지 않음: 최적의 값은 기본적으로 이미 설정되어 있음)
화면에서 창의 위치를 조정합니다. 처음에는 플러그인이 이를 상단 중앙에 배치합니다.
자산 가치 Z-색인는 기본적으로 설정되어 있으며 일반적으로 변경할 필요가 없습니다.
팝업 창을 닫으려면 옵션을 선택하세요. "새"가 있는 줄의 확인란을 선택합니다. 닫으려면 오버레이를 클릭하세요.(주변의 배경을 클릭하면 창이 닫힙니다.) 닫으려면 F4를 누르세요.(창은 열쇠로 닫힙니다 F4), 닫으려면 ESC를 누르세요(창은 열쇠로 닫힙니다 ESC). 모달 창을 닫는 문제로 인해 사이트 방문자를 괴롭히지 않도록 모든 확인란을 선택하는 것이 좋습니다.
딸깍 하는 소리 게시.축하합니다. 모달 창이 생성되었습니다!

팝업 창 디자인 사용자 정의 정보

생성된 모달 창의 디자인을 변경하려면 하위 섹션으로 이동하세요. 주제부분 팝업 메이커관리자 패널의 사이드 메뉴(왼쪽).

열리는 편집기에서 구성 원하는 창 배경, 색상그리고 글꼴 크기, 패딩, 그림자, 버튼 이름폐쇄. 맛이나 색상은.... 팝업창 디자인 커스터마이징에 대해서는 자세히 설명하지 않겠습니다. 궁금한 점이 있으면 댓글로 질문하세요.

팝업 창을 설정하는 방법

플러그인 설정에서 모달 창을 자동으로 여는 기능을 활성화하지 않았다는 것을 기억하십니까? 그러므로 우리는 창문이 어떻게 열리는지 알아내야 합니다. 링크, 사진, 버튼을 클릭하면 팝업창이 나타나도록 설정해 보겠습니다.

Popup Make 플러그인은 각 창을 할당합니다. 두 개의 고유한 CSS 클래스. 이러한 클래스 중 하나를 웹 페이지 요소에 추가한 다음 이 요소를 클릭하면 모달 창이 열립니다.

Instagram 댓글을 강화하는 위치와 방법 – 모든 방법. 가격mm.com 포털은 더 저렴하고 더 나은 것이 무엇인지 알아냈습니다. 프로그램을 사용하여 Instagram에서 직접 댓글을 늘리고, 대가로 받거나 SMM 서비스에서 서비스를 주문하는 것입니다. 각 방법의 장단점.

링크, 이미지, 버튼에 모달 창 CSS 코드를 추가하는 예:

< a href = "#" class = >모달 창 열기< / a >

이미지를 클릭하면 모달 창이 나타납니다

< img src = "popup-primer.jpg" class = "popmake-obrazets-modalnogo-okna"/ >

버튼 클릭 후 모달 창이 활성화됩니다.

< button class = "popmake-obrazets-modalnogo-okna"> 모달 창 열기< / button >

CSS 클래스를 추가한 후 HTML 요소를 클릭하세요. popmake-obrazets-modalnogo-okna. 다음과 유사한 모달 창이 나타납니다.

나타났나요? 엄청난! 이제 팝업 창을 구성할 수 있습니다. 창이 열리지 않으면 댓글로 문제를 설명해 주세요. 함께 실행해 보겠습니다!

안녕하세요, 블로그 사이트 독자 여러분. 일부 웹사이트에서 팝업이 나타나는 것을 보셨나요? 질문이 생겼습니다. 어떻게 만들어지며 왜 필요한가요? 나는 그렇습니다.

그러니 친구 여러분, 오늘은 그들에 대해 정확하게 말씀 드리겠습니다. 하지만! 먼저 왜 필요한지 알아 보겠습니다. 그들로부터 무엇을 얻을 수 있으며 그 결과는 무엇입니까? 나는 대답한다.

이러한 팝업을 통한 파급효과는 매우 크다. 가끔 구독자가 4배로 늘어나는 경우도 있다고 하네요. 시원한! 안 그래? 팝업 창(팝언더)을 사용하는 것은 수많은 방문자를 유치하는 데 매우 효과적인 방법입니다. 일반적으로 다음 용도로 사용됩니다.

뉴스 레터;
유료 교육 과정 홍보
소셜 네트워크에서 그룹 홍보 네트워크;

때로는 이러한 팝업 광고가 사이트에 해를 끼칠 수 있다는 점을 상기시켜 드리고 싶습니다. 이는 일부 사용자가 매우 짜증스럽다고 생각하기 때문입니다. 뭐랄까, 나 역시 그런 방식으로 관심을 끄는 방식에 매우 화가 난다. 이 모든 것에 대응하여 사이트에서 100% 실패율이 증가하고 있으며 이는 유해합니다.

하지만! 팝업 창이 올바르게 구성되면 이러한 모든 문제를 피할 수 있습니다.

그럼 우리의 주요 질문으로 돌아가 보겠습니다.

WordPress의 팝업

1.WP-MK

우연히 발견한 멋진 플러그인입니다. 설정이 쉽고 러시아어 인터페이스와 전체 도구 세트가 있습니다. 다음과 같은 경우에 적합합니다.

광고(예: Google Adsense)
소셜 미디어에서 그룹을 홍보하세요. 네트워크;
간단한 가입 양식입니다.

에서 플러그인을 다운로드할 수 있습니다. 그런 다음 일반적인 방법으로 설치하고 활성화합니다. 왼쪽의 설정으로 이동하시겠습니까? 팝업창그리고 우리는 다음을 봅니다:

제 생각에는 여기에서는 모든 것이 간단하므로 모든 것을 별도로 분해하는 것이 의미가 없습니다. 질문이 있으시면 댓글로 질문하실 수 있습니다.

2. 닌자 팝업.

사용자가 귀하의 사이트를 방문하고 팝업 창을 볼 때 "와우"하게 만들고 싶다면 이 멋진 플러그인을 설치하세요. Ninja Popups는 의 팝업 몬스터입니다. WP-MK와 비교하면 기능성 면에서 훨씬 뛰어납니다. 나는 Ninja Popups가 그들의 기술의 대가들에 의해 사용된다는 것을 알았습니다. 왜? 플러그인은 유료이며 모든 사람이 이를 감당할 수 있는 것은 아닙니다. 나는 그들의 가격이 합리적이고 많은 것을 요구하지 않는다고 스스로 말할 수 있습니다. 비용에 대해 자세히 알아볼 수 있습니다. 여기.

자, 이 플러그인에서 정확히 무엇을 얻는지 알아봅시다:

설정 용이성;
구독 및 기타 유형의 광고(대회, 판촉, 교육 과정 등)를 위한 100개 이상의 기성 템플릿;
통계;
팝업창의 모바일 버전;
표시 시간의 고급 설정;
그리고 훨씬 더.

플러그인의 모든 이점에 대해 알아보려면 다음으로 이동하세요. 이것링크.

플러그인을 직접 사용자 정의하는 방법은 무엇입니까?나는 다음을 제안합니다... 성가신 텍스트 대신 교육 비디오를 시청하는 것이 좋습니다.

친구 여러분, 설정에 관한 한 그게 전부입니다. 그래도 궁금한 점이 있으면 댓글로 질문해 주세요.

3. 팝업 메이커(모달 창)

모달 팝업창을 생성하는 기능을 가진 플러그인입니다. 우리의 경우 다음을 클릭하면 팝업이 표시됩니다.

링크;
단추;
그림.

그럼 어떻게 설정하나요?

1. 다운로드플러그인;

2. 설치 및 활성화;

3. 메뉴 왼쪽에서 다음을 찾습니다. Pupup Maker -> 새로 추가합니다.

4. 다음과 같은 페이지가 우리 앞에 나타납니다.

아무것도 생각나지 않나요? 이 페이지는 WordPress에 기사를 게시하는 양식과 완전히 동일합니다. 보시다시피 여기에 몇 가지 추가 기능(설정)이 추가되었습니다.

좀 더 자세히 살펴보겠습니다.

팝업창(이름)- 어디에도 표시되지 않습니다. 여기에서는 플러그인의 팝언더에 이름을 지정합니다.

여기에 창 제목을 입력하세요.- 이름을 적습니다(예: 뉴스 구독).

타겟팅 조건- 창이 표시될 상자를 선택하십시오.

테마 설정 - 아직 옵션이 없습니다. 기본적으로 선택하세요. 친구 여러분, 앞으로는 자신만의 템플릿을 만들어 모달 창을 디자인할 수 있습니다. 그런데 기능이 아주 멋지네요. 당신은 그것을 찾을 수 있습니다 : Pupup Maker -> 모든 테마.

코드 - 창에 표시되는 내용입니다. 우리의 경우 YouTube의 비디오는 다음과 같습니다.

아래에는 다른 설정(창 크기, 투명도, 표시 시간 등)이 있습니다. 거기에는 복잡한 것이 없습니다. 당신이 그것을 처리할 수 있기를 바랍니다. 궁금한 점이 있으면 댓글로 질문해 주세요.

모든 설정이 완료되면 팝업창을 게시하기만 하면 됩니다.

하지만 친구가 전부는 아니다. 섹션으로 이동 강아지 메이커 -> 모든 팝업. 우리는 CSS 클래스를 찾고 있습니다. 우리는 popmake-xxx와 같은 코드에 관심이 있습니다.

링크, 사진 또는 버튼을 클릭할 때 창을 표시하려면 이 코드가 필요합니다(처음에 말함).

이미지를 클릭하면 창이 열립니다.

버튼을 눌러 열기:

< button class = "popmake-xxx" >창 열기

이 코드는 어디에든 삽입할 수 있습니다(예: 기사나 위젯). 차이 없음. 문제나 질문이 있는 경우 댓글로 문의해 주시면 기꺼이 도와드리겠습니다.

이 유쾌한 메모로 WordPress용 팝업 플러그인 목록이 끝납니다. 이 세 가지 중에서 마음에 드는 것을 찾으시길 바랍니다. 끝까지 함께해주셔서 감사합니다.

업데이트를 받으려면 에 참여하세요. 곧 봐요. 모두들 안녕!

감사합니다, Mogish Ivan

팝업창은 어떤 작업을 수행한 결과 컴퓨터 화면에 열리는 창임을 알 수 있습니다.

이 기사에서는 WordPress용 PopUP 팝업 창을 만드는 방법을 살펴보겠습니다.

이러한 종류의 팝업 창은 다양한 목적으로 사용될 수 있습니다. 구독 양식, 일종의 정보 메시지, 사진, 연락처 양식 등을 이 창에 삽입할 수 있습니다.

이 기사에서는 팝업 창을 생성하는 도구로 WordPress용 특수 플러그인인 워드프레스 팝업.

팝업 생성을 위한 WordPress PopUp 플러그인

이 플러그인은 WordPress 관리 영역의 플러그인 디렉토리에 있으므로 설치가 쉽습니다.

검색창을 통해 찾아 클릭하세요 설치하다:

관리 메뉴에서 새 항목을 사용할 수 있게 됩니다. 팝업:

이 항목을 사용하면 플러그인을 구성하고 해당 기능을 관리할 수 있습니다. 위의 모든 내용을 더 자세히 고려해 보겠습니다.

하위 단락에서 팝 업가리키다 팝업기존의 모든 팝업창과 관리가 가능합니다. 아직 창이 생성되지 않았으므로 항목이 비어 있습니다.

이 상황을 수정하고 첫 번째 팝업 창을 만들어 보겠습니다. 이를 위해 하위 항목으로 이동합니다. 새로운 걸 더하다같은 이름의 버튼을 누릅니다.

새로운 창이 생성되었습니다. 이 창의 내용이 무엇인지 즉시 결정해 보겠습니다(예: 구독 양식).

생성된 팝업 창의 이름을 기록하거나 다른 창 중에서 이 창을 찾을 수 있는 특정 식별자를 기록하여 설정을 시작해 보겠습니다.

이 식별자는 열에 기록됩니다. 팝업 이름(팝업에 표시되지 않음), 그리고 러시아어로 번역하면 이 열의 이름을 추측하기 어렵지 않기 때문에 팝업 창 자체에는 표시되지 않습니다.

이러한 제목과 부제목은 팝업 창 맨 위에 표시됩니다.

바로 아래에 있는 지역에 메인 팝업 콘텐츠팝업의 주요 콘텐츠를 배치해야 합니다. 이 창에 구독 양식을 배치하기로 결정했기 때문에 텍스트 편집기 모드의 이 영역에서 구독 양식에 대한 코드를 정확하게 작성합니다.

여기, 조금 오른쪽 섹션에서 팝업 기능 이미지(선택사항)팝업 창에 이미지 삽입을 구현할 수 있습니다.

이미지는 넣지 않겠습니다.

조금 더 낮은 섹션에서 행동 유도 버튼(선택 사항)생성된 창에 일부 작업을 호출하는 버튼을 추가하는 것이 가능합니다.

이러한 버튼을 만드는 것은 매우 간단합니다. 열에 버튼 이름을 적어야 합니다. 버튼 라벨, 그리고 그래프에서 버튼 링크필요한 작업을 활성화하는 링크를 배치합니다.

생성된 일부 매개변수를 결정하는 것이 남아 있습니다. 팝업창문. 좀 더 자세히 살펴보겠습니다.

팝업 옵션 설정

실제로 무료 버전의 플러그인에서는 모든 설정을 사용할 수 있는 것은 아니며 모든 사용자가 유료 버전의 플러그인에 자신의 돈을 쓰고 싶어하는 것은 아니므로 먼저 무료 버전의 플러그인에서 사용할 수 있는 기본 설정을 살펴보겠습니다. 플러그인.

섹션부터 순서대로 시작합시다 모습:

이 항목 이름을 문자 그대로 번역하면 "외모"를 의미합니다. 이 섹션의 설정이 팝업 창의 속성을 결정한다는 것을 추측하는 것은 어렵지 않습니다.

무료 버전에서 사용할 수 있는 플러그인 중 여기에는 확인란만 있습니다. 둥근 모서리 없음, 기본적으로 사용자 정의 창의 모서리를 둥근 대신 직선으로 활성화하고 항목에서 사용자 정의 창의 크기를 수동으로 결정하는 기능을 활성화하는 체크 표시입니다. 맞춤 크기 사용(해당 확인란을 선택하면 창의 너비와 높이를 픽셀 단위로 지정할 수 있습니다.)

이제 섹션을 살펴보겠습니다. 행동, 팝업 창의 동작을 결정하는 설정:

무료 버전의 플러그인에 사용할 수 있는 설정은 다음과 같습니다.

팝업을 표시하는 경우:— 사이트 페이지가 열린 순간부터 팝업 창이 나타날 때까지의 시간(초 또는 분, 선택 사항)
"이 메시지를 다시 표시하지 않음" 설정:— 방문자가 나중에 이 리소스의 페이지를 열 때 팝업 창 표시를 차단하기 위해 특수 버튼을 클릭할 수 있도록 하는 설정입니다. 여기서는 확인란만 사용할 수 있습니다. "이 메시지를 다시는 보지 마세요" 링크를 추가하세요, 앵커가 있는 링크 모양을 활성화하는 체크 표시 이 메시지를 다시는 보지 마세요.을 클릭하면 이 리소스의 페이지에서 해당 사용자에게 팝업 창이 추가로 표시되는 것을 차단합니다.

설정 섹션으로 이동하겠습니다. 조건 표시(선택 사항)사용자 정의 팝업 창을 표시하기 위한 조건을 담당합니다.

여기에는 상당한 수의 요점이 있습니다. 순서대로 살펴보겠습니다.

방문자가 로그인되었습니다— 사이트에서 인증된 사용자에게 팝업 창 표시(해당 옵션의 사용 가능 여부에 따라 다름)
방문자가 로그인되어 있지 않습니다— 사이트에서 인증되지 않은 사용자에게 팝업 창을 표시합니다.
팝업이 다음보다 적게 표시됨— 사용자가 특정 횟수만큼 볼 때까지 팝업 창을 표시합니다(열에 설정됨). 팝업을 자주 표시하십시오.);
모바일 기기에서만— 모바일 장치 방문자에게만 팝업 창을 표시합니다.
모바일 장치에는 없습니다— 컴퓨터나 노트북(모바일 장치가 아닌) 방문자에게만 팝업 창을 표시합니다.
특정 추천인으로부터— 사용자가 특별한 방법을 사용하여 온 경우 팝업 창을 표시합니다. 추천인
특정 추천인이 아닌— 사용자가 특별한 방법을 사용하여 온 경우 팝업 창 숨기기 추천인(참조자는 여기에서 설정됩니다)
내부 링크가 아닌— 사용자가 동일한 리소스의 다른 페이지에서 내부 링크를 통해 온 경우 팝업 창이 표시되지 않습니다.
검색 엔진에서— 검색 엔진을 통해 사이트를 방문한 방문자를 위한 팝업 창 표시
특정 URL에서— 특정 위치에 있는 방문자에게 팝업 창을 표시합니다. URL 전체 URL;
특정 URL에 없음— 특정 사이트를 제외하고 방문자에게 팝업 창을 표시합니다. URL, 그 목록은 여기 열에 지정되어 있습니다. 전체 URL;
방문자가 이전에 댓글을 남겼습니다.— 사이트에 댓글을 남긴 사용자에게 팝업 창을 표시합니다. 이 조건은 조건과 결합될 수 있습니다. 방문자가 로그인되었습니다또는 방문자가 로그인되어 있지 않습니다;
방문자가 댓글을 단 적이 없습니다.— 사이트에 댓글을 남기지 않은 사용자에게 팝업 창을 표시합니다. 이 조건은 조건과 결합될 수 있습니다. 방문자가 로그인되었습니다또는 방문자가 로그인되어 있지 않습니다.

무료 버전의 플러그인에서 사용할 수 있는 모든 설정을 살펴보았습니다. 이제 유료 버전의 플러그인에서만 사용할 수 있는 설정에 대해 간단히 살펴보겠습니다. 워드프레스 팝업:

이것은 문제의 플러그인의 유료 버전과 함께 제공되는 보너스로, 19달러에 제공됩니다.

팝업 창을 생성하고 구성하는 데 필요한 모든 단계를 완료한 후에는 결과를 저장해야 합니다(버튼 구하다) 미리보기(버튼)를 사용하여 무슨 일이 일어났는지 확인하세요. 팝업 미리보기):

결과가 적합하면 팝업 창(슬라이더)을 활성화할 수 있습니다. 상태위치로 이동 활성).

결국 위의 모든 단계를 거쳐 다음과 같은 결과를 얻었습니다.

이는 플러그인에 대한 상당히 포괄적인 검토로 밝혀졌습니다. 워드프레스 팝업, WordPress 엔진을 사용하여 인터넷 리소스에 대한 팝업 창을 만들 수 있습니다.

기사를 읽은 후에는 귀하의 웹사이트에서 플러그인의 기능을 쉽게 활용할 수 있습니다.

최근 한 사이트의 경우 모달 창에서 WordPress에 대한 피드백 양식을 작성해 달라는 요청을 받았습니다. 즉, "write to us" 링크를 클릭하면 해당 페이지로 이동하는 대신 메시지 보내기 기능이 있는 새 팝업 창을 열어야 합니다. 모든 사람이 좋아하는 것은 아니지만 이는 보다 대화형 솔루션입니다. 저는 개인적으로 연락처 페이지를 사용한 클래식 구현을 선호하지만 사이트의 양식이 다르기 때문에 이 문제에 대한 해결책을 고려하는 것이 유용할 것입니다. 내 작업에서는 잘 알려진 Contact Form 7과 Easy Modal 모듈이라는 2개의 플러그인을 사용하여 WordPress에서 모달 창을 만들었습니다.

2017년 5월 18일 업데이트: 저장소의 최신 리뷰로 판단하면 경우에 따라 작업에 문제가 있을 수 있습니다. 귀하도 이 문제의 영향을 받는 경우 Popup Maker라는 개발자의 새로운 솔루션을 사용해 보십시오. 또 다른 대안을 고려할 수 있습니다.

Contact Form 7의 설치 및 구성에 대해서는 자세히 설명하지 않겠습니다. 이에 대한 모든 정보는 여기에 있습니다. 블로그에는 무엇이 유용할지에 대한 기사도 있었습니다.

Easy Modal 모듈로 바로 이동해 보겠습니다.. 당신은 그를 찾을 것입니다. 개발자들은 이것이 콘텐츠 표시를 위한 다양하고 흥미로운 옵션을 갖춘 웹사이트에 모달 창을 만드는 최고의 솔루션이라고 주장합니다.

다운로드 수 10,000회 이상, 평점 4.6. 3.4의 유효한 버전은 4.0.8이지만 WP 4.3.1에서 성공적으로 실행했습니다. 이제 플러그인이 새로운 Popup Maker 솔루션으로 변환되었음에도 불구하고 웹사이트 wordpress.org에서 관리 패널 내에서 플러그인을 검색할 때 여전히 일반적인 Easy Modal 버전 2.0.17을 찾을 수 있습니다. 그의 예를 사용하여 WordPress에서 모달 피드백 창을 만드는 방법에 대해 설명하겠습니다.

설치 후에는 여러 항목이 있는 동일한 이름의 섹션이 나타납니다. 우리는 그중 첫 번째가 필요합니다 - 모달. 거기서 새로 추가 버튼을 클릭하세요.

이 작업을 수행하면 WordPress 사이트에 대한 새 모달 창이 생성됩니다. 요소 설정에는 4개의 탭이 있습니다.

일반 - 일반 매개변수입니다.
표시 옵션 - 표시 옵션입니다.
닫기 옵션 - 창 닫기 설정(클릭 또는 Esc 버튼 사용)
예제 - 사용할 코드의 예입니다.

일반 설정에는 창 이름(사이트에 표시되지 않음), 제목, 콘텐츠 및 다운로드 유형이 포함됩니다. 콘텐츠 블록에서 HTML 모드로 전환하고 모달 창에 피드백 양식의 단축 코드를 추가하세요.

로드 유형에는 2가지 옵션이 있습니다.

사이트 전체를 로드합니다(전체 사이트에 대해).
페이지/게시물 기준(특정 게시물 및 페이지의 경우).

매우 흥미로운 옵션입니다. 사이트의 모든 페이지에 표시되는 팝업 창이 필요한 경우(예: 링크는 사이드바에 있음) 첫 번째 옵션을 선택하세요. 두 번째 경우에는 편집 시 사이트의 페이지/게시물에 해당 설정 블록이 나타납니다.

특정 페이지에 대한 팝업 창을 활성화하고 선택할 수 있습니다. 확인란을 선택하지 않으면 해당 요소가 사이트에 로드되지 않습니다.

모듈 매개변수의 두 번째 탭은 다음과 같습니다. 디스플레이 옵션.

여기서는 다음을 나타냅니다.

창 크기 - 자동, 중간, 적응형, 소형, 대형 등
배경 - 양식의 배경을 사용하거나 배경 없이 표시할 수 있습니다.
팝업창 애니메이션;
위치(위치) - 상단 중앙, 하단 오른쪽 등; 고정 여부;
화면 상단의 들여쓰기.

Easy Modal 플러그인을 사용하여 WordPress에서 모달 창의 출력을 표시하는 예는 마지막 탭에서 찾을 수 있습니다.

사이드바의 위젯이나 텍스트 편집기를 통해 이 코드를 삽입해야 합니다. 다른 HTML 코드와 다르지 않습니다. 유일한 것은 특정 모달 창(eModal-1)의 클래스가 여기에 표시된다는 것입니다. 생성한 두 번째 요소의 경우 클래스는 eModal-2 등이 됩니다. 코드를 삽입할 때 실수를 방지하려면 이 페이지에서 코드를 복사하는 것이 가장 쉬운 방법입니다.

모달 창 테마 편집

Easy Modal 플러그인에서는 특정 요소에 대한 설정 외에도 팝업 창에 대한 테마(테마)를 정의할 수 있습니다. 모듈의 기본 무료 버전에는 템플릿이 하나만 있지만 이것으로 충분합니다.

이 도구에는 6개의 탭이 있습니다.

일반 - 주제의 이름을 나타냅니다.
오버레이 — 배경(여기서 양식 배경의 색상과 투명도를 선택할 수 있습니다)
컨테이너 - 모달 창 자체의 다양한 설정(패딩, 프레임, 그림자)
제목 - 팝업 창 제목 매개변수(글꼴, 그림자)
내용 - 블록 내 텍스트의 글꼴 및 색상
닫기 - 양식 닫기 요소(텍스트 및 디자인)입니다.

보시다시피, 외관은 필요에 맞게 사용자 정의할 수 있습니다. 나는 모달 창에서 다음과 같은 간단한 WordPress 양식을 작성했습니다.

모든 설정을 완료한 후 저장하는 것을 잊지 마세요(저장 버튼 클릭).

Easy Modal 팝업에 Contact Form 7을 추가하는 영상

그건 그렇고, WordPress에서 모달 피드백 창을 만드는 과정을 보여주는 Easy Modal 플러그인 작업에 대한 비디오를 찾았습니다. 모듈 인터페이스는 약간 구식이지만(일부 설정이 다르게 보임) 일반적인 본질을 얻을 수 있습니다. 아마도 누군가가 비디오의 도움으로 이 문제를 이해하는 것이 더 쉬울 것입니다.

WordPress의 모달 창에 대한 총계

위에서 언급했듯이 이제 Easy Modal 플러그인(공식 페이지로 판단)이 Popup Maker로 변환되었습니다. 저장소에서 같은 이름의 모듈을 찾았지만 테스트하지는 않았습니다. 후속 버전의 WordPress에서 Easy Modal이 갑자기 작동하지 않는 경우 무엇을 찾아야 하는지 알 수 있도록 이에 대해 설명합니다.

유료 추가 기능이 있지만 두 솔루션 모두 무료입니다. 이를 통해 타겟팅을 사용자 정의하고, 더 많은 디자인 테마를 추가하고, 분석 및 기타 기능을 포함할 수 있습니다. 고급 모달 창 메커니즘이 필요한 경우 이러한 확장을 자세히 살펴볼 수 있습니다.

팝업 창에서 Contact Form 7 피드백 양식을 여는 작업은 Easy Modal의 기본 기능으로 충분합니다. 또한 이 솔루션은 WordPress의 다른 모달 창(유용한 팁, 추가 정보 등)을 표시하는 데에도 사용할 수 있습니다. HTML 코드 삽입용 편집기가 있으면 팝업 창에 비디오, 양식 등을 표시할 수 있습니다. 전반적으로 유용한 플러그인입니다. 이에 관해 궁금한 점이 있으면 댓글에 적어주세요.

안녕하세요 여러분!