WordPress Carousel 플러그인 구축 : Part 3

키 테이크 아웃

회전 목마 화살표를 기능하게 만들려면 wp_enqueue_script () 함수를 사용하여 wp_enqueue_script () 함수를 사용하여 javaScript 파일이 작성되어 링크 _carousel () 함수 조건을 사용하여 회전 목마가 표시 될 때만 포함되도록하십시오. > 회전 목마의 UL 블록은 마진 왼쪽 CSS 속성을 조정하여 다른 항목을 표시하기 위해 수평으로 이동됩니다. 음의 왼쪽 여백은 다음 항목의 왼쪽을 회전식 블록의 왼쪽과 정렬합니다. carousel_show_another_link () 함수는 방향 매개 변수 (이전 항목의 경우 -1, 다음 항목의 경우 1)를 기반으로 다른 항목을 표시하도록 만들어졌습니다. 표시 할 새 항목의 인덱스를 계산하고 UL 블록을 이동하기 전에 존재하는지 확인합니다. > Carousel_previous_link () 및 Carousel_next_link ()의 ​​두 가지 함수는 각 화살표 이벤트에 생성되어 첨부되어 적절한 매개 변수로 carousel_show_another_link () 함수를 호출합니다. 문서가 준비된 경우 UL 블록의 마진 왼쪽 속성을 0으로 초기화하여 버그가 방지됩니다.

스타일이 없으면이 튜토리얼의 첫 번째 부분에서 우리가 만든 WordPress 회전 목마는 항목 목록 일 뿐이지 만 모두 눈에 잘 띄는 의미에서는 적어도 유용합니다. 이 튜토리얼의 2 부에 추가 한 CSS는 회전 목마의 표시를 향상 시켰지만 이제는 첫 번째 항목 만 사용자에게 표시되며 나머지 항목을 표시 할 방법이 없다는 것입니다.

. 우리는 회전 목마에 화살표를 추가하여 사용자가 다른 항목들 사이를 탐색 할 수 있도록 이제 약간의 JavaScript를 사용하여 사용할 수 있도록 할 차례입니다.

. 이 튜토리얼의 연속에서 우리는 스크립트를 올바르게 포함시키는 방법을 배웁니다. 그러면 사용자가 화살표에 부딪 칠 때 항목을 애니메이션하는 함수를 시작하는 스크립트를 작성합니다. javaScript 파일을 연결합니다 여기서는 JavaScript를 사용하여 화살표를 유용하게합니다. CSS 부분은 새 파일을 만듭니다. 나는 그것을 carousel.js라고 불렀고 플러그인 폴더의 루트에 배치했습니다. 우리는 JavaScript 파일을 사용하고 있음을 WordPress에 표시해야합니다. 이렇게하려면 wp_enqueue_script () 함수를 사용합니다
• 첫 두 매개 변수는 wp_enqueue_style ()과 동일합니다. 그런 다음 배열을 찾습니다. 이 배열에는 스크립트가 작동하는 데 필요한 스크립트의 종속성을 나열합니다. 브라우저 호환성 문제를 해결하기 위해 jQuery를 사용하기로 결정 했으므로 WordPress를 사용하고 싶은 것을 나타냅니다. WordPress의 스크립트를 포함하여 올바르게 설명하는 것처럼 'jQuery'는 WordPress에서 인정 된 가치입니다.
. 네 번째 매개 변수는 스크립트의 버전 번호입니다. 여기서는 그다지 중요하지 않습니다 (이전에 링크 된 기사를 참조하십시오. 자세한 정보는 이전에 링크 된 기사를 참조하십시오). 마지막 매개 변수를 사용하여 스크립트가 바닥 글에 포함되도록 true로 설정해야했습니다.
• . 헤더 대신 바닥 글을 선택하는 이점은 원하는 곳에 WP_ENQUEUE_SCRIPT ()를 사용할 수 있다는 것입니다. WP_ENQUEUE_STYLE ()과 마찬가지로 WP_HEAD () 이전에 사용한다는 제약이 없습니다. 그런 다음 필요한 경우에만 스크립트를 포함시킬 수 있습니다. 회전 목마를 표시하는 경우에만. wp_enqueue_script ()를 넣을 수있는 가장 좋은 장소는 display_carousel () 함수의 조건에 있습니다. 우리는 표시 할 항목이있는 경우에만 회전 목마를 표시하므로 동일한 조건으로 스크립트를 포함시킬 것입니다.

  이제 우리는 JavaScript 파일을 편집 할 준비가되었습니다 우리는 무엇을하고 싶습니까? 먼저 우리는 모든 코드를 함수에서 캡슐화합니다. 다른 라이브러리와의 충돌을 방지하기 위해 WordPress는 jQuery에서 $를 사용하지 않습니다. 이 기능으로 다시 활성화 할 수 있습니다

  HTML 코드를 수정하지 않아도 회전 목마를 만드는 방법에는 여러 가지가 있습니다. 여기서 UL 블록을 이동하는 것이 좋습니다. 여기에는 모든 항목이 연속으로 포함되어있어 위치를 설정하여 하나 또는 다른 항목을 표시하도록 가로로 이동할 수 있습니다. 이 튜토리얼의 이전 부분에서 이미 볼 수있는 아래 스키마를 참조하여 우리가하고 싶은 일을 확인하십시오.

  이동하기 위해 우리는 마진 왼쪽 CSS 속성과 함께 플레이 할 것입니다. 기본적으로 0으로 설정되어 첫 번째 항목을 "표시"합니다. 첫 번째 항목은 회전 목마 블록을 채울만큼 충분히 큽니다. 옆에있는 두 번째 항목은 오버플로 속성 덕분에 볼 수 없습니다. 두 번째 항목을 표시하려면 두 번째 항목의 왼쪽을 회전식 블록의 왼쪽과 정렬하려면 UL 블록을 왼쪽으로 이동해야합니다. 이것은 음의 왼쪽 마진으로 달성 할 수 있습니다. 사용해야 할 가치를 테스트하기 위해 일부 CSS 코드를 실험 할 수 있습니다 (필요하지 않은 바로 직후 제거).

  이 간단한 선은 설명이 필요합니다. 테스트하면 첫 번째 항목이 표시되지 않으면 두 번째 항목이 표시됩니다. 다른 값을 테스트하여 무슨 일이 있었는지 더 잘 이해할 수 있습니다. -50px를 사용하면 UL 블록 50 픽셀을 예를 들어 왼쪽으로 이동합니다. 회전 목마의 너비는 900 픽셀의 값을 가지므로 위의 CSS에서 보여준 값을 사용하면 -900px의 값으로 두 번째 항목을 표시 할 수 있습니다.

  <span>wp_enqueue_script('carousel', plugin_dir_url(__FILE__) . 'carousel.js', array('jquery'), '1.0', true);</span>

  . 그러나 대신 백분율을 사용할 수 있습니다. 장점은이 비율이 컨테이너와 관련이 있다는 것입니다. 여기서 "100%"는 "900 픽셀"과 같으므로 -100%의 값을 제공하면 첫 번째 항목을 숨기고 두 번째 항목을 표시합니다. 백분율을 사용하여 마진 왼쪽 속성의 값을 수정하지 않고 컨테이너의 너비를 수정할 수 있습니다. 다른 항목을 표시하는 함수 먼저, 다른 항목을 표시하는 함수를 작성합니다. 이것은 하나의 매개 변수, 방향을 받아 들일 것입니다. 이전 항목을 표시하려면이 방향이 -1로 설정되어야하며 다음 항목을 표시하려면 1으로 설정해야합니다. 우리는 어디로 가나 요?

  왼쪽 왼쪽에 할당 될 값을 결정하려면 우리가 어디에 있는지 알아야합니다. 이를 달성 할 수있는 여러 가지 방법이 있으며, 왼쪽 왼쪽 속성의 현재 값 만 사용하는 것을 선택했습니다.

  .

  <span>wp_enqueue_script('carousel', plugin_dir_url(__FILE__) . 'carousel.js', array('jquery'), '1.0', true);</span>

  첫 번째 줄은 UL 블록을 검색합니다. 나중에 재사용 할 때 변수에 저장하는 것이 좋습니다. 두 번째 줄은 조금 이상하게 보일 수 있습니다. 목표는 현재 표시된 항목을 나타내는 정수를 저장하는 것입니다. 첫 번째 항목은 0으로, 두 번째는 1 등으로 표시됩니다.

  이를 달성하기 위해 우리는 마진 왼쪽 속성의 현재 값을 얻습니다. 문제는이 값이 -200%와 같은 숫자를 원한다는 것입니다.“%”를 제거하려면 값을 정수로 변환하는 parseint () 함수를 사용합니다 (예 : '-200%'는 -200이됩니다). 우리는 양의 정수를 원하기 때문에“마이너스”부호를 추가하고 (예 : -200에서 200을 얻기 위해) 100으로 나누어 원하는 값을 얻습니다 (예 : 200이 아닌 2). 왜 우리가 UL.CSS ( 'margin-left')를 사용하여 마진 왼쪽 속성의 가치를 얻지 못한 이유가 궁금 할 것입니다. 실제로 .css ()는 jQuery 방법이며 우리의 맥락에서 더 나은 아이디어 인 것 같습니다. 문제는이 방법이 우리에게 백분율을주지 않는다는 것입니다. 위와 동일한 값을 사용하면 현재 항목이 세 번째 항목 인 경우 마진 왼쪽 속성은 -200%로 설정되고 .css () 메소드는 -1800px를 반환합니다. 이 값을 픽셀로 사용하여 현재 항목을 계산하려면 큰 컨테이너의 너비를 사용해야하며 UL 블록 만 사용하는 것이 좋습니다.

  . 이제 우리는 기능의 인수에 주어진 방향 덕분에 표시 할 항목의 색인을 계산할 수 있습니다.

  새 항목이 존재합니까? 새 항목을 표시하기 전에 존재하는지 여부를 테스트해야합니다. 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 () 함수로 회전 목마를 자동으로 애니메이션하려고 시도 할 수 있습니다. 완성 된 코드를 보거나 플러그인을 직접 시도하려면 여기에서 다운로드 할 수 있습니다.

위 내용은 WordPress Carousel 플러그인 구축 : Part 3의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!