WordPress 튜토리얼 : 굉장한 페이지 뒤집기 플러그인을 만드는 방법

  • 인바운드 마케팅
  • 업데이트 : 9 월 15, 2014

참고 : 작성자가 지금 우리를 위해 작성하지 않으므로이 WP 플러그인을 더 이상 지원하지 않습니다.

오늘부터 매주 우리는 기초부터 고급에 이르기까지 WordPress를 사용하여 맞춤식 작업을 수행하는 방법을 가르치는 훌륭한 코딩 자습서를 제공 할 것입니다. 오늘 우리는 JS를 사용하여 "페이지 뒤집기"갤러리를 생성하는 플러그인을 작성합니다 (기본 단계를 배우게됩니다).

나는 당신이 초기 웹 시절에 그 중 하나를 본 것이 틀림 없다고 생각하지만, 플래시를 사용하여 대부분 완료되었지만, 현재는 더 이상 사용되지 않습니다 (여전히 가치가 있지만, 더 이상 이런 종류의 옵션이 아닙니다).

기본 기능은 새로운 갤러리 유형 짧은 이미지를 통해 몇 개의 이미지와 크기를 기반으로합니다.

시작하자!

우편 및 설치

작동 중임을 확인하는 가장 좋은 방법은 직접 설치하는 것입니다. 너는 할 수있다. 여기에서 다운로드. 플러그인을 설치하고 활성화하십시오. 다음과 같이 단축 코드를 페이지에 추가하기 만하면됩니다.

[flip_book ids = "78 79 78 79 79 78 78 79 79"width = "78"height = "300"display = "double"]

빠른 미리보기

그리고 이것은 여러분이 얻을 수있는 결과입니다 :

플립 북 효과

그러나 어떤 종류의 까만 마술이 거기에 계속됩니까? 음, 실제로는 아주 간단합니다. 이런 식으로 만드는 법을 배우자.

헤더

우선 새로운 폴더와 새로운 .php 파일을 만들어야합니다. 이 시점에서 테스트 환경을 가지고 있다면 정말 좋을 것입니다. 따라서 테스트를 중단하고 테스트 할 수 있습니다.

파일과 폴더는 간단하고 고유 한 이름이어야하므로 기존 플러그인과의 충돌을 피할 수 있습니다. 그러면 우리 파일의 기본 내용은 다음과 같습니다.

/ * 플러그인 이름 : FlipBook 갤러리 설명 : 플립 북 갤러리에 대한 단축 코드를 만듭니다. 버전 : 1.0 저자 : 웹 수익 블로그 라이센스 : GPL2 * /

아주 간단 하죠? 이 파일을 생성하면 WP 관리> 플러그인 아래 목록에 플러그인이 표시되며 활성화 할 수 있습니다.하지만 파일에이 콘텐츠 만 있으면 사이트가 많이 변경되지는 않습니다.

스크립트 호출

이제 중요한 외부 자산을 여기에 포함시켜야합니다. 기본 기능에 필요한 외부 파일은 다음과 같습니다.

  • jQuery (1.9 +)
  • Turn.js 스크립트
  • 기본 스타일링하기

스크립트 및 스타일 태그를 추가하기 만하면 몇 가지 문제가 발생합니다. 예를 들어, double jQuery 호출은 아마도 사이트를 손상시킬 것입니다. 또한 WordPress 자체에서는 해당 항목을 만들었다는 사실을 "알지 못합니다."다른 플러그인이 turn.js를 다시 호출하거나 다른 스타일을 사용하면 사이트가 손상 될 수 있습니다.

그래서 우리는 항상 wp_enqueue_script 및 wp_enqueue_style 함수를 사용해야합니다. 다음은 기본적인 사용법입니다.

function plugin_scripts () {wp_enqueue_script ( 'jquery'); wp_enqueue_script ( 'turn', plugins_url ( 'js / turn.js', __FILE__), 배열 ( 'jquery'), '1.3', false); wp_enqueue_style ( 'turnCSS', plugins_url ( 'css / style.css', __FILE__), false, '1.3', 'all'); }

우리는 3에서 외부 항목을 다른 방식으로 호출합니다. 여기에는 다음과 같습니다.

  • 기존 항목 호출 : jQuery - WordPress가 이미이 스크립트를로드했음을 알고 있다면 많은 매개 변수를 전달할 필요가 없습니다. 단지 "이 스크립트는 여기에 있어야합니다. 그렇지 않으면 코드가 작업"
  • 새 스크립트 만들기 - 이름, 파일 위치, 필요한 항목 (이 경우에는 jQuery가 필요함), 버전 및 바닥 글이나 머리글 (false = header, true = footer)에로드 된 경우와 같은 일부 속성을 전달해야합니다.
  • 새 스타일 만들기 - 이전 스타일과 거의 비슷하지만 마지막 속성의 약간의 차이가 있습니다.

외부 스크립트를 호출 할 때 고려해야 할 중요한 사항 중 하나는이 플러그인에 의존하는 코드가 더 많은지 여부입니다. 기본적으로 파일이 머리글이나 바닥 글에서 호출되는 경우 정의됩니다.

우리의 경우에는 HTML이 생성 될 때만 갤러리를 설정하기위한 추가 스크립트가 있으며 이는 본문에 추가됩니다. 따라서 머리에이 스크립트를 추가해야합니다. 그렇지 않으면 코드가 호출 될 때 "회전"기능이 아직 없습니다.

이 좋은 코드를 WordPress에 스크립트로로드하도록 지시해야 할 때 "wp_enqueue_scripts"작업이이를 수행합니다.

add_action ( 'wp_enqueue_scripts', 'plugin_scripts');

쇼트 코드

단축 코드를 만드는 작업부터 시작하겠습니다. 이것은 매우 간단합니다. 단축 코드 트리거와 실행될 함수를 추가하기 만하면됩니다.

add_shortcode ( "flip_book", "create_flip_book");

이제 함수를 만들고 속성을 얻어야합니다. 그러나 일부 속성은 선택 사항 일 수 있습니다. 즉, 속성의 기본값을 만들어야합니다. 속성이 비어있는 경우 테스트를 많이 생성 할 수 있지만이 경우는 일반 호출보다 3 진 연산이 더 나은 경우 중 하나입니다.

삼항 연산은 변수의 값에 직접적으로 if 문입니다. 다음 구조를 따르는 경우 :

$ 변수 = (조건)? "조건이 참인 경우 값": "조건이 거짓 인 경우 값";

우리 함수의 첫 번째 부분에서 동작을 볼 수 있습니다.

함수 create_flip_book ($ attr) {// 처리 할 ID 준비하기 $ array ['ids '] = explode ( "", $ attr ['ids']); // display mode $ array [ 'display'] = empty ($ attr [ 'display'])? "single": $ attr [ 'display']; // 표준값 // width $ array [ 'width'] = empty ($ attr [ 'width'])? 400 : $ attr [ 'width']; // 높이 $ array [ 'height'] = empty ($ attr [ 'height'])? 300 : $ attr [ 'height'];
    // HTML과 나머지 코드가 여기에옵니다}

그런 다음 HTML과 이미지의 기본 호출을 작성해야합니다. 여기서 또 다른 중요한 점은 잡지 스타일을 사용하는 경우 크기를 조정하는 것입니다 (하나가 아닌 2 이미지가 있기 때문에 너비가 2x 여야 함).

<? php if ($ array [ 'display'] == "double") {$ array [ 'width'] = $ array [ 'width'] * 2; } // HTML, JS 및 Black Magic?> <div id = "flipbook"> <? php for ($ i = 0; $ i <sizeof ($ array ['ids ']); $ i ++) {?> < div> <? php echo wp_get_attachment_image ($ array [ 'ids'] [$ i], 'full'); if ($ array [ 'display'] == "single") {?> <span> <? = "". ($ i + 1)?> / <? echo "".sizeof ($ array ['ids '])?> <? php} else {?> <spanright ":"left " i + 1)?> / <? echo "".sizeof ($ array [ 'ids']); (# width) : <? php?> <? php?> </ div> <script type = "text / javascript"> jQuery ( "# flipbook" ? PHP echo $ array [ 'height'];?>, autoCenter : true, display : '<? php echo $ array ['display ']; ?> ', // 단일 페이지 또는 이중 페이지 가속 : true, gradients :! jQuery.isTouch,}); </ script>

당신은 어떻게 생각하십니까?

이제는 원하는대로이 옵션을 조정하고 수정할 수 있으며 더 많은 옵션을 추가하거나 (더 많은 영감을 얻기 위해 멋진 예제를 확인하십시오.) 효과가없는 것을 조정하거나 다른 플러그인과 결합 할 수 있습니다.

조금 더 배우고 싶은 WordPress의 개념이 있습니까? 어쩌면 당신이 어떻게 배우고 싶습니까? 의견을 통해 알려주십시오. 향후 게시물에이를 포함 시키도록하겠습니다.

로체스터 올리베이라에 대하여

나는 웹 디자이너이자 기업가 인 Itajubá (MG), Brasil입니다. 나는 모호한 주제에 대해 쓰고 멋진 것들을하는 것을 좋아합니다.