WordPress Hooks의 강력한 기능 활용: 작업 및 필터 설명

게시 됨: 2022-07-22

여느 CMS와 마찬가지로 WordPress가 항상 모든 요구 사항을 즉시 충족하는 것은 아닙니다. 오픈 소스이므로 비즈니스 요구 사항에 맞게 해킹할 수 있지만 대신 WordPress의 후크를 사용하여 목표를 달성할 수 있습니다. 후크를 사용하여 구축하는 것은 WordPress 개발자가 상상할 수 있는 거의 모든 웹사이트 기능을 구축할 수 있도록 하는 성공적인 전략입니다.

WordPress Hooks: 작업 및 필터

WordPress 후크는 강력한 사용자 지정 도구일 뿐만 아니라 WordPress 구성 요소가 서로 상호 작용하는 방식입니다. 후크 함수는 페이지에 스타일이나 스크립트를 추가하거나 바닥글 텍스트를 HTML 요소로 둘러싸는 것과 같이 WordPress의 일부로 간주되는 많은 일상적인 작업을 관리합니다. WordPress Core의 코드베이스를 검색하면 700개 이상의 위치에서 수천 개의 후크가 나타납니다. WordPress 테마 및 플러그인에는 더 많은 후크가 포함되어 있습니다.

후크에 뛰어들어 액션 후크와 필터 후크의 차이점을 살펴보기 전에 WordPress 아키텍처 내에서 이들이 어디에 적합한지 이해해 보겠습니다.

워드프레스 인프라

WordPress의 모듈식 요소는 서로 쉽게 통합되므로 쉽게 혼합, 일치 및 결합할 수 있습니다.

WordPress Core: WordPress가 작동하는 데 필요한 파일입니다. WordPress Core는 일반화된 아키텍처, WP 관리 대시보드, 데이터베이스 쿼리, 보안 등을 제공합니다. WordPress Core는 PHP로 작성되었으며 MySQL 데이터베이스를 사용합니다.
테마(또는 상위 테마): 테마는 웹사이트의 기본 레이아웃과 디자인을 정의합니다. PHP, HTML, JavaScript 및 CSS 파일로 구동되는 테마는 WordPress MySQL 데이터베이스를 읽어 브라우저에서 렌더링되는 HTML 코드를 생성하는 기능을 합니다. 예를 들어 테마의 후크는 스타일시트, 스크립트, 글꼴 또는 사용자 정의 게시물 유형을 추가할 수 있습니다.
자식 테마: 부모 테마가 제공하는 기본 레이아웃과 디자인을 미세 조정하기 위해 자식 테마를 직접 만듭니다. 자식 테마는 상속된 기능을 수정하거나 게시물 유형을 추가 또는 제거하기 위해 스타일시트와 스크립트를 정의할 수 있습니다. 자식 테마 지침은 항상 부모 테마 지침을 대체합니다.
플러그인: WordPress의 백엔드 기능을 확장하기 위해 수천 개의 타사 플러그인 중에서 선택할 수 있습니다. 예를 들어 플러그인의 후크는 게시물이 게시될 때 이메일로 알려주거나 금지된 언어가 포함된 사용자 제출 댓글을 숨길 수 있습니다.
사용자 정의 플러그인: 타사 플러그인이 비즈니스 요구 사항을 완전히 충족하지 못하는 경우 PHP로 사용자 정의 플러그인을 작성하여 이를 대폭 강화할 수 있습니다. 또는 처음부터 새 플러그인을 작성할 수 있습니다. 두 경우 모두 기존 기능을 확장하기 위해 후크를 추가합니다.

(1) WordPress Core, (2) Theme, (3) Child Theme, (4) Plugins, (5) Custom Plugins의 5가지 수준을 기본에서 상단으로 보여주는 피라미드. — WordPress 인프라 계층

5개 레이어 모두의 소스에 액세스할 수 있다고 가정할 때 WordPress에 후크가 필요한 이유는 무엇입니까?

코드 안전

진화하는 기술을 따라잡기 위해 WordPress Core, 상위 테마 및 플러그인의 기여자는 보안 취약성을 완화하고, 버그를 수정하고, 비호환성을 해결하거나, 새로운 기능을 제공하기 위한 업데이트를 자주 릴리스합니다. 비상 경험이 있는 컨설턴트라면 누구나 알고 있듯이 WordPress 구성 요소를 최신 상태로 유지하지 못하면 사이트가 손상되거나 비활성화될 수도 있습니다.

업스트림 WordPress 구성 요소의 로컬 복사본을 직접 수정하면 문제가 발생합니다. 업데이트가 사용자 정의를 덮어씁니다. WordPress를 사용자 정의할 때 이를 어떻게 우회할 수 있습니까? 후크를 통해 하위 테마 및 사용자 정의 플러그인에서.

우리 아이 테마의 코딩

자식 테마는 설치된 테마의 모양과 느낌을 사용자 지정할 수 있는 안전한 공간입니다. 여기에 추가된 모든 코드는 업데이트로 덮어쓸 위험 없이 상위 항목의 비교 가능한 코드를 재정의합니다.

자식 테마가 활성화되면 비활성화된 부모에 연결되어 부모의 업데이트에 영향을 받지 않고 부모의 특성을 상속 및 표시합니다. 테마를 수정하려는 유혹에 빠지지 않도록 모범 사례에서는 설정의 일부로 자식 테마를 활성화하는 것이 좋습니다.

사용자 정의 플러그인 작성

플러그인이 활성화되면 해당 functions.php 파일이 서버에서 각 호출과 함께 실행됩니다. WordPress는 차례로 모든 활성 플러그인의 후크를 우선 순위에 따라 로드 및 정렬하고 순차적으로 실행합니다. 타사 플러그인의 기능을 확장하기 위해 자체 WordPress 사용자 정의 플러그인을 작성할 수 있습니다.

WordPress에서 후크를 배치할 위치

목표	예시	어디에?
		어린이 테마 PHP	커스텀 플러그인 PHP
웹 페이지의 구조를 수정하려면	웹 사이트 요소의 색상과 글꼴을 변경하는 사용자 정의 스타일시트 추가
다른 플러그인의 기능을 수정하려면(예: 타사 플러그인의 기능을 향상시키기 위해 플러그인 생성)	맞춤 게시물 유형에 부제목(예: "뉴스") 추가
WordPress Core 이상의 새로운 기능을 추가하려면	데이터베이스의 카운터 업데이트를 포함하도록 게시물을 방문할 때 발생하는 워크플로 수정

다이빙 전 준비: 정의

용어 혼동을 피하기 위해 다음 용어를 사용합니다.

후크 는 기능이 실행되도록 등록되는 WordPress의 스위트 스팟입니다. 우리는 우리의 기능을 WordPress 및 그 구성 요소의 많은 후크 중 하나에 연결하거나 자체적으로 만들 수 있습니다.
- 액션 후크 는 액션을 실행합니다.
- 필터 후크 는 필터를 실행합니다.
후크 함수 는 WordPress 후크 위치에 "후크"한 사용자 정의 PHP 콜백 함수입니다. 사용할 유형은 후크가 함수 외부의 변경(예: 웹 페이지 출력에 직접 추가, 데이터베이스 수정 또는 이메일 전송)을 허용하는지 여부에 따라 다릅니다. 이것들은 부작용 으로 알려져 있습니다.
- 필터 (또는 필터 함수 )는 전달된 데이터에 대해서만 작업한 다음 수정된 복사본을 반환함으로써 부작용을 피해야 합니다.
- 반면에 action (또는 action function )은 부작용을 일으키기 위한 것입니다. 반환 값이 없습니다.

호환 가능한 후크와 쌍을 이루는 기능을 보여주는 다이어그램. 필터 후크에는 필터 기능이 연결되어 있고 작업 후크에는 작업 기능이 연결되어 있습니다. — WordPress 후크에는 여러 콜백 함수가 있을 수 있지만 모든 콜백 함수는 등록된 후크 유형과 일치해야 합니다.

이러한 구분을 염두에 두고 후크 탐색을 시작할 수 있습니다.

추상화 및 클린 코드

필요에 따라 작업이나 필터가 후크에 통합되면 작업당 하나의 기능만 작성하고 프로젝트 내에서 코드 중복을 방지한다는 목표를 달성합니다. 예를 들어 테마의 세 페이지 템플릿(아카이브, 단일 페이지 및 사용자 정의 게시물)에 동일한 스타일시트를 추가한다고 가정해 보겠습니다. 부모의 각 템플릿을 재정의한 다음 자식 테마에서 각 템플릿을 다시 만든 다음 개별 헤드 섹션에 스타일시트를 추가하는 대신 단일 함수로 코드를 작성하고 wp_head 후크로 연결할 수 있습니다.

사려 깊은 명명법

하위 테마 또는 사용자 정의 플러그인 후크의 이름을 고유하게 지정하여 사전에 충돌을 방지합니다. 단일 사이트에 동일한 이름의 후크가 있으면 의도하지 않은 코드 동작이 발생합니다. 모범 사례에서는 후크 이름을 고유하고 짧은 접두사(예: 작성자, 프로젝트 또는 회사의 이니셜)로 시작하고 그 뒤에 설명적인 후크 이름을 지정하도록 규정합니다. 예를 들어 프로젝트 Tahir의 Fabulous Plugin에 대해 "프로젝트 이니셜 플러스 후크 이름" 패턴을 사용하여 후크 이름을 tfp-upload-document 또는 tfp-create-post-news .

동시 개발 및 디버깅

단일 후크는 둘 이상의 작업 또는 필터를 트리거할 수 있습니다. 예를 들어, 여러 스크립트를 포함하는 웹 페이지를 작성할 수 있으며, 모두 wp_head 작업 후크를 사용하여 페이지 프런트 엔드의 <head> 섹션 내에서 HTML(예: <style> 또는 <script> 섹션)을 인쇄합니다.

따라서 여러 플러그인 개발자는 단일 플러그인에서 여러 목표를 동시에 진행하거나 플러그인을 여러 개의 간단한 개별 플러그인으로 나눌 수 있습니다. 기능이 제대로 작동하지 않으면 전체 프로젝트를 검색할 필요 없이 후크 기능을 직접 조사하고 디버그할 수 있습니다.

행위

작업은 WordPress에서 이벤트가 발생할 때 코드를 실행합니다. 작업은 다음과 같은 작업을 수행할 수 있습니다.

데이터 생성.
데이터를 읽고 있습니다.
데이터 수정.
데이터를 삭제 중입니다.
로그인한 사용자의 권한을 기록합니다.
위치를 추적하고 데이터베이스에 저장합니다.

작업이 트리거될 수 있는 이벤트의 예는 다음과 같습니다.

init , WordPress가 로드된 후 헤더를 출력 스트림으로 보내기 전에.
save_post , 게시물이 저장되었을 때.
wp_create_nav_menu , 탐색 메뉴가 성공적으로 생성된 직후.

작업은 API와 상호 작용하여 데이터(예: 소셜 미디어의 게시물 링크)를 전송할 수 있지만 호출 후크에 데이터를 반환하지 않습니다.

소셜 미디어를 통해 사이트의 모든 새 게시물 공유를 자동화하고 싶다고 가정해 보겠습니다. 게시물이 게시될 때마다 트리거될 수 있는 후크에 대한 WordPress 문서를 살펴보는 것으로 시작하십시오.

우리의 후크를 찾는 지름길은 없습니다. 우리는 경험을 통해 배우거나 나열된 작업을 통해 가능성 있는 후보자를 찾을 것입니다. save_post 후보를 고려할 수 있지만 단일 편집 세션 동안 여러 번 트리거되므로 빠르게 제외합니다. 더 나은 선택은 게시물 상태가 변경된 경우에만 트리거되는 transition_post_status 입니다(예: draft 에서 publish 로, publish 에서 trash 으로).

우리는 transition_post_status 를 사용할 것이지만 또한 post 상태가 publish 로 전환될 때만 실행되도록 작업을 구체화할 것입니다. 또한 다양한 소셜 미디어 플랫폼의 공식 문서 및 API를 따르면 게시물 콘텐츠와 추천 이미지를 통합하고 게시할 수 있습니다.

 <?php function publish_post_on_social_media ( $new_status = NULL, $old_status = NULL, $post_ID = NULL ) { if ( 'publish' == $new_status && 'publish' != $old_status ) { // build the logic to share on social media } } add_action( 'transition_post_status', 'publish_post_on_social_media', 10, 3 ); ?>

이제 액션 후크를 사용하는 방법을 알았으므로 특히 CSS와 관련하여 특히 유용한 것이 있습니다.

`wp_enqueue_scripts` 로 우선순위 지정하기

다른 모든 항목이 로드된 후 자식 테마의 스타일시트를 마지막에 추가하여 다른 곳에서 시작된 동일한 이름의 클래스가 자식 테마의 클래스에 의해 재정의되도록 하려고 한다고 가정해 보겠습니다.

WordPress는 기본 순서로 스타일시트를 로드합니다.

부모 테마의
자식 테마의
모든 플러그인

이 구성에서:

 add_action( string $hook_name, callable $callback, int $priority = 10, int $accepted_args = 1)

...추가된 작업의 priority 값은 실행 순서를 결정합니다.

wp_enqueue_scripts (또는 모든 작업)의 기본 priority 값은 "10"입니다.
priority 를 더 낮은 숫자로 재설정하면 함수가 더 일찍 실행됩니다.
priority 를 더 높은 숫자로 재설정하면 함수가 나중에 실행됩니다.

자식 테마의 스타일시트를 마지막으로 로드하려면 WordPress 테마 및 플러그인에서 일반적으로 사용되는 작업인 wp_enqueue_scripts 를 사용합니다. 자식 테마의 작업 wp_enqueue_scripts 의 우선 순위를 기본값인 "10"보다 높은 숫자로 변경하면 됩니다(예: "99").

 add_action( 'wp_enqueue_scripts', 'child_theme_styles', 99 );

일반적으로 반환 값을 찾지 않을 때 작업을 사용합니다. 호출 후크에 데이터를 반환하려면 필터를 살펴봐야 합니다.

필터

필터를 사용하면 브라우저에 표시하기 위해 처리되기 전에 데이터를 수정할 수 있습니다. 이를 위해 필터는 변수를 받아들이고 전달된 값을 수정하며 추가 처리를 위해 데이터를 반환합니다.

WordPress는 브라우저용 콘텐츠를 준비하기 전에 등록된 모든 필터를 확인하고 실행합니다. 이런 식으로 데이터를 브라우저나 데이터베이스에 적절하게 보내기 전에 조작할 수 있습니다.

내 고객 중 한 명은 고객이 제공한 이미지를 각인하여 판매하는 제품을 개인화합니다. 이 클라이언트는 WooCommerce 플러그인을 사용하여 전자 상거래를 관리합니다. WooCommerce는 기본적으로 이 기능을 지원하지 않습니다. 따라서 클라이언트의 functions.php 에 두 비트의 코드를 추가했습니다.

woocommerce_checkout_cart_item_quantity 문서에 나열된 woocommerce_checkout_cart_item_quantity 는 고객이 체크아웃 전에 외부 요소를 장바구니에 추가할 수 있도록 하는 필터 후크입니다.
my_customer_image_data_in_cart 는 WooCommerce가 표시할 장바구니를 준비할 때마다 woocommerce_checkout_cart_item_quantity 를 트리거하는 데 사용할 필터입니다.

다음 템플릿을 사용하여 필터를 추가하고 장바구니의 기본 동작을 수정할 수 있습니다.

 add_filter( 'woocommerce_checkout_cart_item_quantity', 'my_customer_image_data_in_cart', 1, 3 ); function my_customer_image_data_in_cart( $html, $cart_item, $cart_item_key ) { if ( !empty( $cart_item['images_data'] ) ) { // Store image // Get image URL // Modify $html } return $html; }

작업을 추가하는 것과 같은 방식으로 필터를 추가합니다. 필터는 우선 순위가 처리되는 방식을 포함하여 작업과 유사하게 작동합니다. 필터와 작업의 주요 차이점은 작업은 호출 후크에 데이터를 반환하지 않지만 필터는 데이터를 반환한다는 것입니다.

맞춤형 액션 후크 및 필터 후크

사용자 지정 작업 후크를 작성하는 것은 Wordpress Core를 확장하는 것이 아니라 우리 자신의 코드 내에 새로운 트리거 포인트를 생성할 뿐입니다.

사용자 지정 작업 후크 만들기

테마 또는 플러그인에 사용자 정의 후크를 추가하면 다른 개발자가 코드 기반을 수정하지 않고도 기능을 확장할 수 있습니다. 사용자 지정 후크를 추가하려면 WordPress Core 코드 기반 자체에서 사용하는 것과 동일한 기술을 사용합니다. 원하는 트리거 지점에서 새 후크의 이름으로 do_action 을 호출하기만 하면 선택적으로 콜백이 유용할 수 있는 만큼 많은 인수를 추가할 수 있습니다.

 do_action( 'myorg_hello_action', $arg1, $arg2 );

이 코드는 사용자 정의 후크에 연결된 모든 콜백 함수를 실행합니다. 네임스페이스는 전역적이므로 이전에 제안한 것처럼 사용자 정의 후크 이름 앞에 조직 이름(및 프로젝트도 가능)의 축약형을 사용하는 것이 좋습니다. 따라서 여기에서는 myorg_ 입니다.

이제 myorg_hello_action 을 정의했으므로 개발자는 내장 후크에 대해 이전에 다룬 것과 똑같은 방식으로 후크할 수 있습니다. 함수를 정의한 다음 add_action() 을 호출합니다.

새로운 후크를 내부적으로만 사용하고 싶지 않다면(결국 코드를 구조화하는 데 유용한 방법입니다) 명확한 문서를 통해 팀의 다른 구성원 또는 플러그인의 외부 사용자에게 가용성 다운스트림을 전달해야 합니다. .

사용자 정의 필터 후크 생성

커스텀 필터 후크에 대한 WordPress의 패턴은 apply_filters() do_action() 호출한다는 점을 제외하고 액션 후크의 패턴과 동일합니다.

이번에는 좀 더 구체적인 예를 들어 보겠습니다. 플러그인이 일반적으로 4개의 항목으로 구성된 사이드바 메뉴를 생성한다고 가정합니다. 우리(및 다운스트림 개발자)가 항목 목록을 다른 곳에서 수정할 수 있도록 사용자 지정 필터 후크를 추가합니다.

 // Text labels of sidebar menu $sidebar_menu = array( "Page One", "Page Two", "Page Three", "Page Four" ); $sidebar_menu = apply_filters( 'myorg_sidebar_menu', $sidebar_menu );

그게 다야. 이제 커스텀 필터 후크 myorg_sidebar_menu 가 나중에 로드되거나 이 플러그인의 다른 곳에서 로드될 수 있는 플러그인에서 사용할 준비가 되었습니다. 이를 통해 다운스트림 코드를 작성하는 모든 사용자가 사이드바를 사용자 지정할 수 있습니다.

우리 또는 다른 개발자는 내장 WordPress 후크를 사용할 때 동일한 패턴을 따릅니다. 즉, 전달된 데이터의 수정된 버전을 반환하는 몇 가지 콜백 함수를 정의하는 것으로 시작하겠습니다.

 function lowercase_sidebar_menu( $menu ) { $menu = array_map( 'strtolower', $menu ); return $menu; } function add_donate_item( $menu ) { $menu = array_push( $menu, 'Donate' ); return $menu; }

이전 예제와 마찬가지로 이제 필터 콜백 함수를 사용자 지정 후크에 연결할 준비가 되었습니다.

 add_filter( 'myorg_sidebar_menu', 'add_donate_item', 100 ); add_filter( 'myorg_sidebar_menu', 'lowercase_sidebar_menu' );

이를 통해 두 개의 예제 콜백 함수를 사용자 정의 필터 후크에 연결했습니다. 이제 둘 다 $the_sidebar_menu 의 원래 내용을 수정합니다. add_donate_item 에 더 높은 priority 값을 부여했기 때문에 lowercase_sidebar_menu 가 실행된 후 나중에 실행됩니다.

이 섹션에서 설명하는 필터 기능의 결과를 나타내는 세 개의 패널. 패널 1은 필터에 연결된 콜백이 없기 때문에 사이드바를 보여줍니다. 패널 2는 필터에 연결된 lowercase_sidebar_menu 콜백처럼 사이드바를 보여주며 4개의 항목 이름은 모두 소문자입니다. 패널 3은 필터에 연결된 donate_button 콜백과 같은 사이드바를 보여줍니다. 패널 2와 동일한 소문자 항목에 제목 케이스에 남겨진 다섯 번째 항목 "기부"입니다.

다운스트림 개발자는 항상 myorg_sidebar_menu 에 더 많은 콜백 함수를 자유롭게 연결할 수 있습니다. 그들이 할 때, 그들은 priority 매개변수를 사용하여 두 개의 예제 콜백 함수 이전, 이후 또는 사이에서 후크를 실행할 수 있습니다.

액션과 필터가 있는 하늘의 한계

작업, 필터 및 후크를 통해 WordPress 기능은 비약적으로 성장할 수 있습니다. 우리는 WordPress만큼 확장 가능한 우리 자신의 기여를 남겨두고 사이트에 대한 사용자 정의 기능을 개발할 수 있습니다. 후크를 사용하면 WordPress 사이트를 다음 단계로 끌어올릴 때 안전 및 모범 사례를 준수할 수 있습니다.

Toptal 엔지니어링 블로그는 이 기사의 전문 지식, 베타 테스트 및 기술 검토에 대해 Fahad Murtaza에게 감사를 표합니다.