Ajax в WordPress во фронт-энде (лицевой части сайта) – полное руководство по Ajax в WordPress

안녕, 친구들 이제 AJAX 쿼리를 수행하는 방법에 대해 이야기 해 보겠습니다

프론트 엔드 자료 WordPress 사이트 이전 수업에서 우리는 admin-ajaxphp 파일에 대해 이야기했습니다 그리고 admin 패널에서 ajax 요청을 만드는 방법 오늘이 정보가 필요할 것입니다

아직 그 교훈을 보지 못했습니다 배워야합니다 사실 admin 패널에서 Ajax 요청을 생성하고 사이트의 앞 부분에별로 다르지 않습니다 수업 자체를 시작하기 전에 다음과 같이 말할 것입니다 친구, 나는 초 압축 최소값을 줄 계획이 없습니다

이미 추천 한 기사에서 가져올 수 있습니다 너는 치트 시트를 좋아한다 내 임무는 정원과 정원의 영향으로부터 당신을 구하는 것입니다 코드를 작성할 때의 도구이며, 또한 에 사용 된 장치의 사용 근골격계 기능의 침해 그러므로 나는 아직도 어떤 순간을 씹을 것이다

자, 가자 지금은 지난 강의의 코드를 살펴보십시오 기억하십시오, WordPress에서 Ajax 요청을 성공적으로 수행하려면 무엇이 필요합니까? 적어도 세 가지 조건 : • 첫 번째 – 정확한 주소 admin-ajaxphp 파일로 옮긴다 • 두 번째는 액션이다

• 세 번째는 처리 될 후크 및 기능입니다 우리의 문의 • 넷째, 선택 사항 – 추가 특정 문제를 해결하는 데 도움이되는 데이터입니다 예를 들어 게시물 또는 루 브릭의 ID입니다 이전 코드를 수정 해 봅시다 admin 패널에서 JS 스크립트를 출력하기 위해 admin_print_footer_scripts 훅을 사용했습니다

우리는 항상 그것을 해결할 갈고리로 바꿀 수 있습니다 바깥 쪽 부분에는 예를 들어 wp_head 또는 wp_footer가 있습니다 글쎄, 그 주제가 정확하게 쓰여진다면 물론 그러나 스크립트를 이러한 훅에 넣으면 발생할 수 있습니다 문제

우리 코드는 jQuery 라이브러리의 기능을 사용합니다 그것은 그것에 달려 있으며, 만약 우리 코드를 철회한다면 브라우저는 무엇을해야하는지 이해하지 못할 것이며, 우리는 오류 가장 불쾌한 태도는 우리가 언제 있을지 모른다는 것입니다 jQuery가 출력되고 일반적으로 모든 주제가 끝난 후 개발자는 다양한 방식으로 그리고 다양한 정도의 혐오감으로 글을 씁니다 따라서 wp_head 훅이 트리거 될 때 스크립트를 인쇄하면, 즉, 사이트의 헤더에 이러한 위험 요소가 발생할 수 있습니다

이 옵션은 버려지기 때입니다 wp_footer 후크가있는 옵션이 남아 있으면 코드가 바닥 글에 표시됩니다 위험이 이미 작고, 또한 우선 순위를두면 높으면 코드는 전체 행성의 끝에서 출력되고 위험은 최소가 될 것입니다 테마 나 플러그인을 직접 만들 때, 아는 순간, 어떻게 배열하고,이 방법은 좋아 보인다

그러나 이것은 논쟁의 여지가 있습니다! js 스크립트가 수천 줄 이상 있다고 가정 해보십시오 페이지에서 페이지로의 사용자는 끊임없이해야 할 것입니다 HTML 코드의 나머지 부분과 함께로드하십시오 또한이 코드는 더 많은 코드가있는 환경에서 편집해야합니다 PHP 코드가 작성됩니다

멋지지 않아 또 다른 문제 – jQuery가 항상 연결되어 있는지 확인하십시오 예, 우리는 수표를 발행 할 수 있지만, 그렇지 않다면 대본 모든 일의 의미를 이해하지 못하는 것일까 요? 그건 그렇고, 우리는 사용에 의지 할 수 없습니다 후크 (Hooks)를하고 우리의 코드를 테마 파일에 직접 넣는다 예를 들어, 끝에있는 footer

php에서 그러나 일반적인 사용을 위해 플러그인을 작성하는 경우, 이 작업을 수행하는 것은 단순히 불가능합니다 나는 너에게 그 길에 대해 이야기하게한다 문제를 해결합니다 이렇게하려면 JS 코드를 별도의 파일로 이동하십시오

이제 우리는 별도로 PHP 코드를 가지고 있으며 JavaScript는 분리되어 있으며 처음 사이트를 방문하면 브라우저에 캐시됩니다 그러나 그러한 분리는 그 자체의 규칙을 규정한다 즉, 파일에 대해 엔진에 알려야합니다 페이지 코드에 포함됩니다 이를 위해 우리는 wp_enqueue_script () 함수를 사용하는데,이 함수는 사이트의 페이지에 스크립트를 표시합니다

일반적으로이 함수는 직접 호출 할 수 있지만 좋음 실천이 촉발되었을 때 연습이 필요하다 wp_enqueue_scripts 즉, 우리는 wp_enqueue_scripts 훅에 연결하고 함수를 참조하고 함수를 참조하는 함수 핸들러 wp_enqueue_script () 이것은 WordPress에서 권장되는 접근 방식입니다 플러그인에서와 마찬가지로 js 스크립트 및 스타일, 그리고 주제에서

이제 wp_enqueue_script () 함수는 여러 개를 전달해야합니다 매개 변수 첫째, 스크립트 이름은 라틴 문자로 공백없이 사용합니다 두 번째는 스크립트에 대한 링크입니다 이러한 링크를 동적으로 검색하려면 다음을 사용하십시오

그 함수 get_template_directory_uri ()와 플러그인 (plugins_url ())에 대해 완료 내가 사용하고있는 테마에서 스타일 전환 메커니즘을 비활성화 할 것입니다 어떻게 작동하는지 보여주는 스크립트 등이 있습니다 페이지의 소스 코드를 살펴 보겠습니다

다음은 스크립트에 대한 링크입니다 그러나 그는 jQuery에 의존하고 있지만 냄새는 맡지 않는다는 것을 잊지 마십시오 WordPress에서는 jQuery가 이미 등록되어 있습니다 wp_enqueue_scripts ()를 가리키면 그녀의 이름 – 곧 연결하겠습니다 문제는 "누가 첫 번째 사람은 일어 났고 운동화는 "즉, 코드에서 연결이 jQuery가 첫 번째이며, 첫 번째로 표시되며, 장소를 변경하려면 스크립트가 먼저 표시됩니다

주문하지 마! 그리고 여기서 우리는 요점을 이해하게됩니다 wp_enqueue_scripts ()에서 세 번째 매개 변수는 배열을 전달할 수 있습니다 의존성 즉, 우리는 스크립트의 이름을 나열합니다 우리의 대본에 의존하고 그들 모두는 우리의 스크립트

jQuery 커넥션을 제거 할 수도 있습니다 여전히 연결됩니다 이제는 명시된 의존성 때문입니다 이 메커니즘은 대형 쓰기를 할 때 매우 편리합니다 플러그인 또는 테마를 추가하거나 추가 할 수 있습니다

스크립트 및 스타일은 다른 파일에서 발생합니다 즉, 스크립트의 출력 순서를 결정할 수는 없습니다 줄의 일반적인 움직임 그리고 그는 누가 누구에 의존하고 엔진 자체에 의존 하는지를 지적했다 정렬하여 원하는 순서로 출력합니다

또한 wp_enqueue_scripts () 함수를 사용하면 엔진을 사용할 수 있습니다 페이지가 표시되지 않도록합니다 몇 가지 동일한 스크립트 예를 들어, 우리는 jQuery의 의존성에서 지적했다 다른 플러그인이 동일한 작업을 수행하면 연결됩니다

의심의 여지없이 플러스 인 jQuery가 하나뿐입니다 그러니 이젤에서 조금 벗어나 우리를 평가 해보십시오 그림 외과 적으로 JS 코드를 제거하고 그것은 별도의 파일로 이제 플러그인 파일에서 PHP 코드 만 작성하고 custom

js 파일에만 자바 스크립트 코드가 있습니다 지배하고 공유하십시오! 스크립트와 테마 스타일을 사이트에 반환하고 페이지를 업데이트합니다 아이디어에 따르면 아약스 요청을 보내고 응답을 반환해야합니다 "Hello, Dmitry"라는 줄의 형태로 나타납니다 그러나 대신 우리는 우리에게 말하는 오류를 얻습니다

변수 ajaxurl은 정의되지 않았다 관리자 패널에서 아약스 쿼리에 대한 강의에서 알 수 있듯이 변수는 관리자 패널의 모든 페이지에 정의됩니다 자동으로 WordPress 그러나 프런트 엔드에서는 엔진이 불필요하다고하지 않습니다 우리는 수동으로해야 할 것입니다

우리는 스크립트를 연결하는 권장 방법을 사용 했으므로, 그러면 우리도 풍수에서이 일을 할 것입니다 여기에서는 wp_localize_script () 함수를 사용할 수 있습니다 이미 연결된 데이터를 출력한다 스크립트 주로 동적 데이터를 출력하는 데 사용되며, 왜냐하면 정적 js 파일에서이 작업을 수행 할 수 없기 때문입니다

의사가 처방 한 것! 첫 번째 매개 변수는 해당 스크립트의 이름입니다 추가 데이터를 생성 할 것입니다 두 번째 매개 변수는 자바 스크립트의 이름을 지정하는 것입니다 변수, 예를 들어 myPlugin으로 지정하십시오 배열 형태의 세 번째 매개 변수는 매개 변수입니다

우리의 경우, 주 파일은 파일에 대한 링크가 될 것입니다 admin-ajaxphp 우리의 변수는 객체가 될 것이므로, 그런 다음 배열에서 셀 키는 속성이됩니다 object이며, 배열 셀의 값은 속성의 값입니다 개체

우리는 속성 ajaxurl을 호출하고 그 값을 정의합니다 admin_url () 함수를 사용하여 동적으로 페이지 코드를 살펴 보겠습니다 보시다시피 변수는 직전에 정의되어 있습니다 우리 스크립트의 출력

그녀는 아무리 천박하게 들리더라도! 콘솔을 살펴 봅시다 스크립트가 시도하기 때문에 오류는 물론 사라지지 않았습니다 변수 ajaxurl 및 우리에게 지금 주소를 지정하려면 개체의 속성 변수에 무엇이 들어 있는지 봅시다 모든 것이 꽤 표준입니다 변수에는 하나의 속성 ajaxurl 만 포함됩니다

그리고 이름을 추가합시다! 배열에 다른 키 – 값 쌍을 만듭니다 키 이름은 이름이어야하며 키 값 – 이름 인가 된 사용자 사용자가 권한이 없으면 빈 문자열이 표시됩니다 우리의 PHP 스크립트는 이번에 깨질 것입니다 콘솔에 돌아 왔을 때, 필요한 모든 속성이 훌륭했습니다

이제 js 스크립트를 약간 수정해야합니다 변수 ajaxurl 대신에 우리는 속성을 참조한다 myPlugin 객체의 ajaxurl 및 "Dmitry"문자열 대신 전송 된 데이터에서 myPlugin 객체와 해당 name 속성을 다시 참조하십시오 러닝! 오, 예, 꿈이 이루어집니다 Razavtorizuyus

달리기 그리고 모든 것이 좋습니다! 언뜻보기에이 스크립트는 유용하지 않습니다 우리는 페이지의 어떤 것과도 상호 작용하지 않지만 그렇지 않습니다 비슷한 방법으로, 예를 들어, 플러그인 카운팅 기사보기의 수 사용자가 페이지로 이동하여 요청 및 강타로 이동했습니다

– 더하기 하나 그리고 페이지 캐시는 끔찍한 것이 아닙니다! 공과를 요약하십시오 프런트 엔드에서 아약스 쿼리를 만드는 것은 사실상입니다 관리 패널에서 동일한 요청과 다르지 않습니다 사이트

추기경의 차이는 단지 몇 순간 만에 이루어집니다 첫 번째 순간 관리 영역에서 주소가있는 변수 admin-ajaxphp 파일을 작성하십시오 그러나 앞에는 no가 있으며 생성해야합니다

수동으로 두 번째 요점 관리자 패널에서는 wp_ajax_ {name 후크}, 물론, 요청한 요청에 관한 것이라면 등록 된 사용자 만 사용할 수 있습니다 관리자 패널에 들어갈 수 없습니다 프런트 엔드에서는 대부분의 경우 등록 된 사용자와 승인되지 않은 즉, 다른 후크 추가 wp_ajax_nopriv_ {name huka}

후크에 대해서 – 이것은 일반적인 권장 사항이며 모두 다릅니다 결국, 당신의 필요와 구현으로부터 응용 프로그램 우리가했던 모든 것, 즉 우리는 js 코드를 견뎌 냈습니다 별도의 파일에 보관하는 것은 장기간의 편의를위한 것입니다 관점과 가장 중요한 것은, 다양한 제거 주어진 상황에서 발생할 수있는 버그

이 방법은 플러그인을 만들 때와 같이 널리 실행됩니다 그래서 우리가 배운 관리자 패널과 앞에서 Ajax 요청을하는 법 그들은 매우 간단했습니다 다음 단원에서는 약간 더 복잡한 예제를 제공하겠습니다

그리고 긴장하지 말고, 우리는 앞으로의 수업에서 필요합니다 아약스 요청에 대한 보안 문제를 계속 탐구 할 것입니다 WordPress에서 디버깅과 관련된 순간을 언급합니다 요청 및 버그 잡기 수업을 통해 나는 부분적으로 당신을 보여주었습니다

그것을하는 방법 그러나 그것은 모두가 아니다 일반적으로 우리는 많은 흥미로운 것을 기다리고 있습니다 채널에 가입하는 것을 잊지 마세요 잊지 마세요 동영상 설명에서 항상 발견 할 수 있습니다

주제 및 정보에 대한 추가 자료, 도움을주는 방법 채널 그리고 비디오와 그 설명 사이에는 가파른 "finger up" 그리고 덜 가파른 "손가락 아래로",지나 가지 않아야합니다 – 투표하십시오, 당신은 수업을 좋아 하던가하지 않았습니까? 음, 물론, 의견에 오신 것을 환영합니다! 이것에 나는 너에게 작별 인사를하지만, 다음 비디오 튜토리얼까지만 WordPress에 관하여 당신이 드미트리 였을 때, wp-plus 채널 성공적인 개발, 당분간!