WordPress 용 간단한 FAQ 플러그인을 만드는 방법

우리는 많은 블로깅 팁과 도구를 보았습니다. 자, 오늘 우리는 블로그를위한 좋은 도구 인 FAQ 페이지 플러그인을 만드는 법을 배웁니다. 그러나 가장 중요한 것은 플러그인 자체뿐만 아니라이 원칙으로 할 수있는 일입니다. WP 사이트에 모든 유형의 데이터를 저장하는 방법과 외부 라이브러리 (jQuery UI와 같은)를 통합하여 사이트에 대한 사용자 정의 컴포넌트를 작성하는 방법에 대해 학습합니다. 시작하자!


아이디어, 데모 & 다운로드

데모

우리의 목표는 많은 것들에 사용할 수 있지만 FAQ 페이지에 잘 맞는 플러그인을 만드는 것입니다..

그러나 우리의 주요 성과는 WordPress 사용자 정의 게시물 유형, 짧은 코드, 외부 JS / jQuery 플러그인과의 상호 작용에 대한 이해입니다. 이 아이디어로 당신은 당신이 거기에서 찾을 수있는 다른 미친 플러그인을 기반으로 많은 것들을 만들 수 있습니다. 이것은 당신을위한 시작점입니다..

여기에서 사용할 컴포넌트에 대한 jQuery API 데모를 찾을 수 있습니다. 그러나 정말 멋진 것은 해당 컴포넌트 (PHP)를 생성하는 데 사용하는 코드입니다..

예열 – 플러그인 파일 및 사용자 정의 게시물 유형

우선 데이터를 저장하기 위해 맞춤 게시물 유형을 만들어야합니다.

커스텀 포스트 유형은 WP의 마법의 큰 부분으로, WP의 기능을 사용하여 호출하고 조작 할 수있는 새로운 데이터 유형 (게시물, 페이지, 첨부 파일 등)을 만들 수 있습니다. 초보자에게는 간단 해 보일 수 있지만, 구식 PHP 프로그래머 (아직도 문제가되지 않습니까?)만이 DB에 데이터를 연결하고 저장하는 것이 얼마나 어려운지를 알고 있습니다. 새로운 데이터 유형을 동적으로 생성하는 것은 물론 미묘하지만 코드에 큰 유연성을 제공합니다..

이를 위해서는 플러그인이 필요하지만 이미이 개념에 익숙 할 것입니다. 플러그인은 워드 프레스 용 레고 블록과 유사하며, 쉽게 연결 (duh!)하거나 원하는 경우 분리 할 수있는 일부 코드를 사용하여 현재 기능을 추가하거나 변형합니다..

WP가 인식하는 방식으로 플러그인을 만들려면 다음 두 가지가 필요합니다.

  1. wp-content / plugins / 안에 파일을 만듭니다
  2. WP가 해당 파일의 내용을 이해할 수 있도록 해당 파일의 시작 부분에 메타 데이터를 추가하십시오.

파일 이름은 고유해야하므로 누군가 플러그인을 설치할 때 (현재의 플러그인도) 현재 플러그인과 충돌하지 않습니다. 더 나은 조직을 위해 faq-whsr라는 이름의 새 폴더를 추가하고 그 안에 faq-whsr.php라는 파일을 추가합니다.

이제 메타 데이터의 경우 플러그인 파일의 시작 부분에 다음과 같은 것을 추가하십시오. <?PHP) :

meta_01

다음을 의미합니다.

  • 플러그인 이름 : wp-admin에 표시 될 좋은 이름 > 플러그인 인터페이스
  • 플러그인 URI : 플러그인 페이지 (문서, 예제, 판매 페이지)에 링크를 추가하려는 경우
  • 설명 : 이것은 wp-admin에 표시된 작은 단락입니다. > 플러그인 인터페이스. 사용자가 무엇을 기억하는지 간단하게 유지하십시오.
  • 작성자 / 저자 URI : 플러그인을 작성한 사람 / 회사 및 크레딧 링크
  • 라이센스 : 따라서 사용자는 플러그인으로 할 수 있거나 할 수없는 것을 알 수 있습니다

이제 플러그인을 만들고 관련 메타 데이터를 추가했습니다. 플러그인 파일을 저장하자마자 wp-admin 인터페이스에서 볼 수 있습니다

활성화하고 어떻게되는지 보자.

잠깐만 요? 글쎄요, 지금 당장 문제가 있다면 오류가 발생합니다. 이제 맞춤 게시물 유형 작성으로 넘어 갑시다..

이 경우 CPT는 FAQ 항목이지만 책, 비디오, 회원 평가 등을 만들 수 있습니다. 여기서 명심해야 할 중요한 점은 함수 이름이 고유해야한다는 것입니다. 나와 함께 반복하십시오 : 함수 이름은 고유해야하며 함수 이름은 고유해야합니다. 알았다? OOP를 사용할 수있을 때까지 많은 문제를 해결합니다 (다음 자습서에서)..

마법사는 다음 코드로 수행됩니다.

cpt

그리고 이것은 관련 부분이 의미하는 바입니다.

  • $ labels – wp-admin 영역의 다른 섹션에 대한 레이블과 텍스트가있는 배열입니다. WP는 상품을 호출하는 올바른 방법을 알게됩니다
  • 지원 – 이것은 wp-admin에서 볼 수있는 것을 알려줍니다. > 자주하는 질문 > 새 화면. 이 경우 제목, 편집기 (주 내용 상자), 작성자, 개정 및 사용자 정의 필드가 있습니다 (원하는 경우)..
  • 분류법 – 여기에서 분류법이 허용되는 분류법 (카테고리, 태그 또는 사용자 정의 분류법)을 WP에 알려줍니다.
  • register_post_type (‘faq_whsr ‘, $ args) – 이것은 WP에게“$ args의 인수를 사용하여 ID가 ​​faq_whsr 인 새 사용자 정의 게시물 유형을 만듭니다”라고 알려줍니다..

저장하고 숨을 참으십시오. 기본 wp-admin 메뉴에 새로운 섹션이 나타납니다.

잠깐만 요? 네. 이 스 니펫은 전체 CPT 기능을 생성합니다. 이 시원함을 찾지 못하면 다음 섹션에서 시원해질 때까지 기다리십시오..

wp-admin을 떠나기 전에 더미 데이터를 추가하십시오 (2 개 이상의 카테고리가있는 몇 가지 FAQ)..

프론트 엔드 – WP x jQuery 상호 작용

이제 조치를 취할 차례입니다. 이제 jQuery UI Accordion 요소를 사용하겠습니다..

jQuery UI에는 jQuery 자체와 거의 동일한 장점이 있습니다.

  • 많은 개발자들이 작업하고 있습니다.
  • 크로스 브라우저 및 모바일 지원 코드
  • 잘 기록 된
  • WP와 잘 어울립니다 (WP 자체에서 사용)

이제 문제는 : 어떻게 부르는가?

이에 대한 두 가지 접근 방식이 있습니다.

  1. wp_head의 잘못된 순수 / 태그
  2. 좋은 wp_enqueue

우리는 오늘날 잘못된 접근 방식으로 너무 많은 시간을 허비하지는 않지만 좋은 방법은 기본적으로 WP에게“이봐 친구, 코드의 어느 시점에서 jQuery UI가 필요합니다. 페이지에 포함 시키십시오”라고 말합니다. 이 방법으로 WP는 다른 사람이 이미 포함했는지 또는 다른 버전을 포함했는지 확인하고 중복 된 라이브러리에서 많은 문제를 피할 수 있습니다. 좋아, 채팅을 코드로 번역하는 방법?

인큐 기능 사용하기 :

enqueue_02

단축

이제 wp-admin으로 돌아갑니다. FAQ 항목이 있으며 원하는대로 항목의 스타일을 지정할 수있는 라이브러리가 있습니다. 글쎄, 우리는 항목을 호출해야합니다!

여기에는 많은 옵션이 있지만이 경우 가장 쉬운 방법은 단축 코드를 작성하는 것입니다. 단축 코드는 콘텐츠 필드 (페이지, 게시물, CPT 등)에 추가하는 것으로, WP는 실제로 실행할 기능을 검색합니다. 단축 코드에는 두 가지 유형이 있습니다.

  1. [자기 포함] – 태그 또는
    이런 종류의 단축 코드는 어떤 시점에서 함수를 호출합니다 – 이것은 우리의 사람입니다
  2. [wrapped] 내용 [/ wrapped] – 이것은 태그와 같습니다

    실제로 내용을 변형하거나 내용을 인수로 사용할 수 있습니다.

어떻게 작동하는지 봅시다. wp-admin에서 새 페이지를 작성하고 여기에이 코드를 추가하십시오.

[faq-whsr]

저장하고 해당 페이지를 방문하여 어떻게되는지 확인하십시오…

농담이야, 옳은 일이 아니야? 글쎄요, 아직 기능을 만들지 않았기 때문입니다.

플러그인 파일에 이것을 추가하십시오 :

shortcode_02

이제 페이지를 새로 고치면 정말 멋진 일이 일어날 것이라고 약속합니다..

시원 해요? 이제 당신은 그것이 달리고 있고 하늘이 당신을위한 한계라는 것을 알 수 있습니다. 그 코드가하는 것은 WP에 [faq-whsr]이라는 단축 코드가 있다고 WP에 알려주는 것이며 WP가 발견하면 WP는 페이지의 해당 지점에서 함수를 실행해야합니다.

이 경우 jQuery UI 패널을 만들려면이 구조를 달성해야합니다.

api_02

이를 위해 WP Query를 만들고 FAQ 항목과 내용을로드합니다. 단축 코드 기능을 다음과 같이 바꾸십시오.

shortcode-basic_02

이제 FAQ 항목이 호출됩니다. 우리가 한 일은 wp_query를 호출하여 사용자 정의 게시물 유형을 호출 한 다음 단축 코드 리턴에 전달하여 WP가 원하는 구조를 따라 모든 항목을 표시하도록하는 것입니다..

그것은 좋지만 무언가가 빠졌습니다. 어떤 옵션이 있습니까? 단축 코드에 대한 옵션을 추가 할 수 있습니다. 단축 코드에서 몇 가지 WP_Query 인수를 작성하는 방법을 살펴 보겠습니다.

shortcode-final_02

이 방법으로 다음 인수를 사용하여 항목을 호출 할 수 있습니다 (원하는만큼 결합 할 수 있음).

  • cat – 카테고리 ID (배열로 여러 개 추가) [faq-whsr cat = 1]
  • category_name – 카테고리 이름 [faq-whsr category_name =”food”]
  • 주문 – ASC 또는 DESC (DESC가 기본값 임) [faq-whsr order =”ASC”]
  • orderby – 품목 주문 기준을 변경합니다. [faq-whsr orderby =”title”]
  • posts_per_page –로드 된 항목 수 변경 [faq-whsr posts_per_page = 5]

그러나 내가 말했듯이 하늘은 내 친구의 한계입니다. 구현하고 사용할 수있는 WP_Query에 대한 몇 가지 옵션은 다음과 같습니다.

  • 저자
  • 카테고리 (not_in에 제외 옵션 추가)
  • 검색 (사용자에게 검색 기능을 제공하려는 경우 멋지다)
  • 사용자 정의 필드 (FAQ 항목에는 특정 사용자 정의 필드 및 값이있는 항목을로드하는 데 사용할 수 있으므로)

이제 네 차례 야

당신이 볼 수 있듯이 이것은 당신을위한 시작점입니다. 우리는 모두이 간단한 플러그인을 개선하기 위해 다른 멋진 것들을 많이 배울 수 있습니다.

  • 반응 형 디자인
  • 위젯 생성
  • 플러그인 활성화 / 비활성화 후크
  • 국제화
  • 죄송합니다
  • 필요한 경우에만 큐잉 (특정 페이지)

의견에 의견을 남기는 것을 잊지 마십시오! 그리고 여기 당신을위한 우리의 도전이 있습니다 : 단축 코드에“기본 아이템”옵션을 적용 할 수 있습니까? 어떻게 하시겠습니까??

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me