워드프레스 | 자바스크립트와 제이쿼리 AJAX

 

 

로드

 

1 | function.php

사이트 전체에 걸쳐 적용. wp_head와 wp_footer 훅 제공

 

wp_deregister_script — 스크립트 파일 해제 

wp_register_script — 스크립트의 존재를 코어에게 알리고 등록하며 스크립트 의존성을 안전하게 처리합니다.

wp_enqueue_script — 페이지를 연결합니다.

• get_template_directory_url() : 부모테마
• get_stylesheet_directory_url() : 자식테마

wp_enqueue_style — 사용자 css 로드 

• get_stylesheet_uri () : 
• get_theme_file_uri () : 

wp_localize_script — 

admin_enqueue_scripts — 

plugin_dir_url(__file__)

 — 플러그인에서 로드하는 경우 

is_page('페이지명')

 — 특정페이지에서만 로드 

 

 

 

자바스크립트

 

1 | 사이트 전체 적용

1. header.php와 footer.php에 직접 호출하는 방법이 있지만 권장되지 않습니다.
2. function.php에 wp_head, wp_footer 훅 사용하는 방법
3. 플러그인을 사용하는 방법

 

2 | 사이트 페이지 적용

1. 에디터에서 자바스크립트 코드 직접 입력 -> 권장하지 않습니다.
2. 플러그인 : scripts n styles, shortcode emd

 

 

제이쿼리

 

사용법

$ 사용불가 -> jQuery로 써야합니다.

 

 

 

 

 

 

 

 

 

AJAX

 

폼 요청처리

admin-post.php

 — 웹 요청을 처리하기 위한 endpoint로, 폼에서 action을 admin-post.php로 설정합니다.

 

jQuery를 이용한 Ajax 호출 

admin-ajax.php

— 거의 모든 AJAX요청을 처리

 

흐름 

php

 — wp-content/plugins/ 안에 임의의 파일명으로 저장

function.php

— add_action 추가 (ajax hook 설정하여 ajax 요청을 서버에서 인식하도록)

• wp_ajax_ : 로그인 사용자
• wp_ajax_nopriv_ : 비로그인 사용자

 

파일 업로드 위치

 — wp-content/uploads

 

 

 

 

 

 

 

관련포스트

• 워드프레스 | 개념 구조 용어
• 워드프레스 | WAMP 설치
• 워드프레스 | MAMP 설치
• 워드프레스 | 사이트 만들기
• 워드프레스 | 테마 AVADA
• 워드프레스 | 관리자 화면 간단하게 정리