WooCommerce: 코드베이스 탐색

게시 됨: 2021-09-15
WooCommerce 코드베이스

WooCommerce는 크고 복잡한 코드베이스를 가진 플러그인입니다.

개발자라면 기본 코드를 자세히 이해하는 것이 큰 도움이 되며 장기적으로 거의 확실하게 이익을 얻을 것입니다.

당신이 약간의 PHP를 작성할 수 있다면(대부분의 Business Bloomer는 PHP Snippet으로 만들어집니다), 당신은 확실히 때때로 핵심 을 검색할 필요가 있습니다. 그렇지 않으면 Stackoverflow 자체로는 충분하지 않습니다.

단일 제품 페이지에 대한 것과 같은 WooCommerce Visual Hook Guides를 보고 사용하는 경우에는 많은 PHP 검색을 실행하여 코드 자체에서 간단히 생성됩니다(수동으로…). 저는 개인적으로 최신 플러그인 파일의 사본을 PC 다운로드에 보관하여 훅이나 특정 기능을 찾을 때 항상 검색할 수 있습니다.

따라서 이 기사에서 저를 따라 WooCommerce 코드베이스, 구조화 방법 및 내부 비밀을 살펴보십시오!

코드를 찾을 수 있는 곳

WooCommerce 코드베이스를 탐색하려면 https://wordpress.org/plugins/woocommerce에서 플러그인 파일을 다운로드하는 것 외에 몇 가지 대안이 있습니다.

첫째, 가장 접근하기 쉬운 방법은 WordPress Trac을 통해 온라인으로 코드를 탐색하는 것 입니다. 항상 최신 상태로 즉시 사용할 수 있으므로 코드를 탐색하는 가장 편리한 방법입니다. 인터넷 연결과 브라우저 액세스만 있으면 됩니다.

이 방법은 빠른 코드 조회 및 나중에 참조할 수 있도록 코드 파일을 북마크하는 데 유용합니다. 특정 줄 번호를 북마크할 수도 있습니다. 예를 들어 Checkout Gutenberg 블록(66행에서 시작)의 렌더링 방법에 연결하려면 다음 URL을 사용할 수 있습니다. https://plugins.trac.wordpress.org/browser/woocommerce/trunk/packages/woocommerce-blocks/src /BlockTypes/Checkout.php#L66

코드를 보는 다른 옵션 은 공식 WooCommerce GitHub 리포지토리를 복제하는 것 입니다. 더 강력한 검색 도구에 액세스할 수 있으므로 선호하는 편집기를 통해 로컬에서 코드를 더 자세히 탐색해야 하는 경우 권장됩니다.

이렇게 하려면 명령줄을 사용하여 WooCommerce 리포지토리를 다운로드하고 관리해야 합니다. macOS 또는 Linux 운영 체제를 사용하는 경우 내장된 터미널 앱을 사용할 수 있습니다. Git Bash는 Windows 사용자에게 탁월한 선택입니다.

사용 중인 터미널 앱이 무엇이든 열고 다음 명령을 실행하여 WooCommerce를 컴퓨터의 로컬 디렉토리에 복제합니다.

 자식 클론 https://github.com/woocommerce/woocommerce.git

로컬 WordPress 플러그인 디렉토리(/wp-content/plugins/에 있음)에 직접 복제하거나 WooCommerce를 컴퓨터의 일반 폴더에 복제하고 로컬 WordPress 플러그인 폴더에 심볼릭 링크할 수 있습니다. 이 방법의 장점은 특정 로컬 WordPress 인스턴스에서 WooCommerce를 쉽게 추가/제거할 수 있다는 것입니다. 특정한 것에 얽매이지 않습니다.

저장소를 복제했으면 다음 명령도 실행하여 플러그인 종속성과 외부 패키지를 설치해야 합니다.

 npm 설치 및 작곡가 설치

모든 WooCommerce 코드가 핵심 리포지토리에 포함되어 있지 않기 때문에 이것은 중요합니다. 예를 들어 Gutenberg 블록은 기본적으로 별도의 저장소에 포함됩니다. 코드베이스에 포함시키려면 위의 명령을 사용하여 구체적으로 설치해야 합니다.

모든 종속성과 외부 저장소가 설치되면 즉시 사용할 수 있습니다. 다음은 이전에 WordPress Trac에서 본 것과 동일한 Checkout 블록 코드이지만 이제 로컬에서 액세스할 수 있습니다.

코드 구조

WooCommerce 플러그인은 여러 최상위 폴더로 구성되어 있습니다.

  • /자산
  • /i18n
  • /포함
  • /lib
  • /패키지
  • /샘플 데이터
  • /src
  • /템플릿
  • /공급업체

자산 폴더에는 WordPress 관리자와 프런트엔드 모두에서 플러그인 미학과 상호 작용에 도움이 되는 스타일, 글꼴, 이미지 및 JavaScript의 대규모 컬렉션이 포함되어 있습니다.

i18n , sample-data 및 공급업체 와 같은 표준 플러그인 폴더에는 각각 국제화 기능, 샘플 제품 데이터 및 타사 라이브러리에 대한 기능이 포함되어 있습니다.

템플릿 폴더에는 장바구니, 결제, 이메일 등과 같은 다양한 WooCommerce 콘텐츠에 사용되는 모든 구조화된 PHP 템플릿이 포함되어 있습니다. 각 템플릿은 사용자 정의 테마(일반적으로 하위 테마)의 관련 위치에 복사하여 덮어쓸 수 있으므로 찾아볼 가치가 있습니다. 사용자 정의할 수 있는 모든 사용 가능한 템플릿을 보려면 이 폴더를 자세히 살펴보십시오. 참고: 스니펫을 통해 WooCommerce를 사용자 지정하는 것이 템플릿을 재정의하는 것보다 낫습니다.

플러그인 기능의 주요 핵심은 included , lib , packages 및 src 폴더에 포함되어 있습니다. 특히, 포함 폴더에는 다양한 WooCommerce 기능을 위한 PHP 플러그인 클래스의 기본 목록이 포함되어 있습니다.

또한 WooCommerce에서 사용할 수 있는 모든 Gutenberg 블록 정의는 packages 폴더에 있습니다.

코드 탐색

루트 폴더의 메인 플러그인 파일은 woocommerce.php 입니다. 이것은 오토로더와 패키지를 부트스트랩합니다.

자동 로더는 /src 디렉토리에 있는 패키지 및 클래스의 로드를 관리합니다. 패키지에는 편집기 블록과 같은 핵심 WooCommerce 플러그인 외부에서 개발된 코드가 포함됩니다.

자동 로드된 모든 코드가 로드되면 기본 WooCommerce 클래스가 다음을 통해 포함되고 인스턴스화됩니다.

 WooCommerce::인스턴스()

그러면 WooCommerce 클래스의 새 인스턴스가 생성되고 정적 클래스 변수 안에 저장됩니다. 그런 다음 이 새 인스턴스가 반환되고 전역 변수에 저장되므로 어디서나 액세스할 수 있습니다.

코드베이스 검색

대부분의 최신 코드 편집기는 코드베이스를 탐색할 수 있는 강력한 검색 기능을 제공합니다. 아래에 표시된 예에서는 VS Code를 사용하고 있지만 거의 모든 편집기가 유사한 검색 기능을 제공하므로 실제로는 그다지 중요하지 않습니다.

몇 가지 기본 검색을 수행하여 코드베이스에 대해 많은 것을 알 수 있습니다. 예를 들어 사용 가능한 후크를 찾은 다음 ' add_filter '를 검색하면 약 380개의 필터 후크가 반환됩니다!

검색어 ' add_action '에 대해 약 618개 일치 항목에서 훨씬 더 많은 결과를 반환하는 액션 후크와 비교하십시오.

특정 파일 유형에 대해서만 검색을 수행하는 것과 같이 검색을 구체화할 수 있는 범위가 많고 검색어 대소문자와 특별히 일치하는 문자열이 전체 단어인 경우에 사용할 수 있습니다.

예를 들어 다음 검색 결과는 ' WooCommerce '에 대한 일치 항목을 표시합니다. 여기에서 전체 단어이고 대소문자를 구분하며 PHP 파일에만 있습니다(다른 파일 형식은 무시됨).

VS Code가 인기 있는 이유 중 하나는 사용할 수 있는 확장이 엄청나게 많고 코드 탐색에 도움이 될 수 있는 몇 가지가 있기 때문입니다. 눈에 띄는 특정 확장 기능은 책갈피입니다.

버튼을 클릭하면 관심 있는 특정 코드 섹션으로 돌아갈 수 있도록 코드의 위치를 ​​북마크에 추가할 수 있습니다. 특히 WooCommerce와 같은 대규모 코드베이스에 매우 유용합니다.

다음 스크린샷에서는 나중에 다시 보고 싶은 빠른 액세스를 위해 몇 가지 WooCommerce 작업 후크를 북마크했습니다.

탐색기 패널에서 북마크된 항목을 클릭하기만 하면 특정 코드 줄로 바로 이동합니다.

검색할 수 있는 다른 많은 용어가 있습니다. 아마도 어떤 WooCommerce 클래스를 사용할 수 있는지 살펴보고 싶을 것입니다. 이러한 유형의 검색은 Regex와 결합하면 더욱 강력해질 수 있습니다.

예를 들어, 시작 부분에 'WC'가 포함된 클래스 이름을 쉽게 검색할 수 있습니다(예: 'WC_Structured_Data'). 그러나 클래스 이름에 ' WC '가 포함된 클래스는 어떻습니까? 이를 위해서는 'class' 문자열을 검색하고 공백을 검색한 다음 내부에 'WC'가 포함된 문자열을 검색해야 하므로 Regex가 필요합니다.

Regex를 사용하면 독립 실행형 함수가 아닌 클래스의 메서드인 함수 이름(또는 이름의 일부) 검색과 같은 작업을 수행할 수도 있습니다. 가능성은 무한하므로 Regex에 대한 좋은 실무 지식을 적극 권장합니다.

빠른 WooCommerce 사용자 정의 예제

체크아웃 페이지를 사용자 정의해야 하고 특히 "결제 세부정보" 제목 아래에 자막을 표시해야 한다고 가정해 보겠습니다.

할 수 있는 일은 WooCommerce 플러그인 파일에서 ' Billing details ' 문자열을 검색하여 사용자 정의 코드에서 사용할 수 있는 "무언가"가 있는지 확인하는 것입니다. 이 경우 메모장++ 코드 편집기를 사용하여 소프트웨어가 유효한지 보여주기만 하면 됩니다.

검색 결과가 2개 있지만 결제 페이지와 관련된 결과는 하나만 있습니다. 그래서 특정 라인(28)에서 특정 파일(form-billing.php)을 엽니다.

... 그리고 제목 바로 뒤에 do_action() 이 있음을 주목하세요!

이렇게 하면 전체 템플릿 파일을 재정의하지 않고 일부 코드를 "주입"할 수 있습니다. 내 자식 테마의 functions.php로 이동하여 다음을 작성합니다. 

/**
 * @snippet       Add Subtitle Below Billing Heading @ Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 5
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
add_action( 'woocommerce_before_checkout_billing_form', 'bbloomer_billing_details_subtitle' );

function bbloomer_billing_details_subtitle() {
   echo '<h4>This is a subtitle</h4>';
}

다음은 "후"입니다.

계속 탐색하세요!

우리는 아주 솔직히 말하면 매우 큰 코드베이스의 표면만 긁었습니다. 코드의 모든 라인을 살펴보려면 오랜 시간이 걸리겠지만 매력적인 WooCommerce 코드베이스를 계속 파헤치고 더 많은 것을 배울 수 있을 만큼 충분히 식욕을 돋울 수 있기를 바랍니다!