이제 우리는 기능의 인수에 주어진 방향 덕분에 표시 할 항목의 색인을 계산할 수 있습니다.
- 새 항목이 존재합니까?
새 항목을 표시하기 전에 존재하는지 여부를 테스트해야합니다. New_Link가 -1보다 작거나 동일하거나 총 항목 수와 같은 경우 존재하지 않으며 표시 할 수 없으므로 UL 블록을 이동하는 것은 좋은 생각이 아닙니다. 더 이상 갈 수 없을 때 화살표가 표시되지 않기 때문에이 테스트는 중복 될 수 있지만 실제로 무언가를 할 수 있도록하는 것은 항상 좋은 생각입니다.
.
<span>function display_carousel() {
</span> <span>// …
</span> <span>// Here we retrieve the links
</span> <span>// …
</span>
<span>if (!empty($links)) {
</span> <span>wp_enqueue_script(/* parameters listed above */);
</span>
<span>// …
</span> <span>// Display
</span> <span>// …
</span> <span>}
</span><span>}</span>
먼저 우리는 총 항목 수를 얻습니다. 이는 목록의 LI 태그 수입니다. 이 숫자는 항목 수보다 크거나 같지 않은 양수 정수를 원하기 때문에 위에서 설명한 조건에 유용합니다 (1이 아닌 0으로 시작한다는 것을 잊지 마십시오).
새 항목 표시
마지막으로, 블록 이동은 한 줄로 달성 할 수 있습니다. 우리는 왼쪽의 새로운 값을 계산해야합니다. 그렇게하려면 생각해 봅시다. 모든 "통과 된"품목에 대해 여행하는 데 폭은 100%입니다. 이렇게하면 왼쪽의 새로운 값은 방금 계산 한 새 항목 위치의 100 배입니다. 왼쪽으로 마이너스 부호가 있습니다.
나는 여기서 jQuery 애니메이션을 사용하기 위해 여기서 선택했지만 나만의 애니메이션을 만들거나 이것의 설정을 수정할 수도 있습니다.
보다 실용적인 사용을위한 일부 별칭
이제 사용자가 화살표를 클릭 할 때마다 호출되는 함수를 생성합니다. 이러한 기능에는 엄청난 양의 코드가 필요하지 않습니다. 그들이하는 유일한 일은 Carousel_show_another_link () 함수를 올바른 매개 변수로 호출하는 것입니다. 아래는 "이전"화살표를 클릭 할 때 호출되는 함수에 대한 코드입니다.
return false에 주목하십시오. 화살표의 기본 동작을 방지하기 위해 (링크임을 잊지 마십시오). 이렇게하면 사용자가 화살표를 클릭하면 URL이 변경되지 않습니다. <span>wp_enqueue_script('carousel', plugin_dir_url(__FILE__) . 'carousel.js', array('jquery'), '1.0', true);</span>
"다음"항목을 표시하는 함수는 정확히 동일하지만 1은 carousel_show_another_link ()의 매개 변수입니다. 나는 그것을 carousel_next_link ()라고 부르기로 결정했습니다
이벤트 첨부
마지막으로 올바른 이벤트를 올바른 요소에 첨부하여 이러한 기능을 유용하게 만들어야합니다. 우리는 요소가 만들어 졌는지 확인할 수있을 때 호출되는 새로운 기능으로 다음을 수행 할 것입니다. 문서가로드 될 때.
우리는 Carousel_previous_link () 함수를 모든 "이전"화살표에 첨부하려고합니다. 우리의 회전 목마의 돔 트리를 사용하여 CSS에서 스타일을 지정하고 싶을 때와 같은 방식으로 쉽게 검색 할 수 있습니다.
그런 다음 Carousel_next_link () 함수를 오른쪽 화살표 (#carousel ul li a.carousel-next)에 첨부 할 수 있습니다.
당신은이 코드를 테스트 할 수 있지만 버그는 나타나야합니다. 처음으로 carousel_show_another_link () 함수가 호출되면 UL 블록의 CSS 속성 마진 왼쪽이 존재하지 않으므로 검색하려고 할 때 오류가 발생합니다. 그 가치.
이 버그를 방지하기 위해이 속성의 값을 초기화 할 수 있습니다. 문서가 준비되었을 때 (예 : 이벤트를 첨부하기 전에) 다음 줄을 추가하십시오. .
이것은 UL 블록의 마진 왼쪽 속성을 기본값으로 0으로 설정합니다. 이 속성은 이제 블록을 움직이지 않고 존재합니다. <span>function display_carousel() {
</span> <span>// …
</span> <span>// Here we retrieve the links
</span> <span>// …
</span>
<span>if (!empty($links)) {
</span> <span>wp_enqueue_script(/* parameters listed above */);
</span>
<span>// …
</span> <span>// Display
</span> <span>// …
</span> <span>}
</span><span>}</span>
이제 화살표를 클릭하고 회전 목마가 완성되고 작동합니다!
결론에서
이 튜토리얼에서 우리는 WordPress Links Manager API를 사용하여 회전 목마 플러그인 구축을 걸었습니다. 이 API 사용의 좋은 예 였지만 WordPress 플러그인에서 PHP, HTML, CSS 및 JavaScript를 결합하는 방법을 볼 수있는 좋은 방법이었습니다. 닫기에서, 나는 우리가 생성 한 HTML 코드를 유지하더라도 회전 목마를 구축하는 방법이 여러 가지가 있다고 말할 것입니다. 다른 스타일 또는 스크립트를 작성하는 다른 방법을 선택할 수 있습니다. 사실, 우리가 여기에 쓴 스크립트는 단지 예일 뿐이며 같은 결과를 가진 완전히 다른 것을 쓸 수 있습니다. .
우리가 여기에서 사용한 코드가 마음에 드는 경우 직접 결정할 수 있습니다. 그렇지 않다면 주저하지 말고 편집하십시오!
우리가 여기서 한 일을 좋아하더라도 결과를 향상시킬 수 있습니다. 예를 들어, 방문자는 다른 항목을보기 위해 화살표를 치야합니다. settimeout () 함수로 회전 목마를 자동으로 애니메이션하려고 시도 할 수 있습니다.
완성 된 코드를 보거나 플러그인을 직접 시도하려면 여기에서 다운로드 할 수 있습니다.
