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

  • 워드 프레스
  • 업데이트 : 2 월 09, 2017

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

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

데모

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

그러나 우리의 주요 업적은 WordPress에 대한 이해 사용자 정의 게시물 유형, 단축 코드, 외부 JS / jQuery 플러그인과의 상호 작용. 이 아이디어를 사용하면 다른 미친 플러그인을 기반으로 많은 물건을 만들 수 있습니다.이 플러그인은 당신을위한 출발점 일뿐입니다.

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

아, 그리고 물론 당신은 여기에서 다운로드 할 수있는 플러그인 파일 뿐만 아니라 WP 사이트에 설치할 수 있습니다.

예열 - 플러그인 파일 및 맞춤 게시물 유형

먼저 데이터를 저장하기 위해 사용자 정의 게시 유형을 작성해야합니다.

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

우리에게이 플러그인이 필요하지만 이미이 개념을 이미 잘 알고있을 것입니다. 플러그인은 WordPress의 레고 블록과 비슷합니다. 플러그를 쉽게 꽂을 수있는 코드를 사용하여 현재 기능을 추가하거나 변환 할 수 있습니다. 원하는 경우 플러그를 뽑아도됩니다.

WP가 인식하는 방식으로 플러그인을 생성하려면 2 항목이 필요합니다.

  1. wp-content / plugins / 안에 파일 만들기
  2. 해당 파일의 시작 부분에 메타 데이터를 추가하면 WP가 그 내용을 이해할 수 있습니다.

파일 이름은 고유해야하므로 다른 사람이 플러그인을 설치하더라도 (현재까지도) 현재 플러그인과 충돌이 없어야합니다. 더 나은 조직을 위해 우리는 이름이 faq-whsr 인 새 폴더를 추가하고 그 안에 faq-whsr.php라는 파일을 추가합니다.

이제 metada를 위해 플러그인 파일의 시작 부분에 다음과 같이 추가하십시오 (<? php 바로 다음에).

meta_01

어떤 의미입니까?

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

01- 플러그인 생성됨

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

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

잠깐, 아무것도? 글쎄, 좋은 일 이네. 지금 뭔가 잘못 됐으면 잘못 보일거야. 이제 맞춤형 게시물 유형 생성으로 넘어 갑시다.

우리의 경우 CPT는 FAQ 항목이지만 책, 비디오, 고객 후기 등을 만들 수 있습니다. 여기에서 유의해야 할 중요한 점은 함수 이름이 고유해야한다는 것입니다. 지금 나와 함께 반복 : 함수 이름은 고유해야하며 함수 이름은 고유해야합니다. 알았다? OOP (다음 튜토리얼에서)를 사용할 때까지는 많은 문제를 해결할 수 있습니다.

마법사는 다음 코드로 완료됩니다.

CPT

그리고 이것은 관련된 부분들이 의미하는 것입니다 :

  • $ labels - wp-admin 영역의 여러 섹션에 대한 레이블과 텍스트가있는 배열입니다. 그래서 WP는 우리의 아이템을 호출하는 적절한 방법을 알게 될 것입니다.
  • 지원 – 이것은 wp-admin> FAQ> 새 화면에서 볼 수있는 내용을 알려줍니다. 이 경우 제목, 편집기 (주 내용 상자), 작성자, 개정 및 사용자 정의 필드 (원하는 경우)가 있습니다.
  • 분류 (taxonomy) - 여기서 WP에 어떤 분류가 허용되는지 (카테고리, 태그 또는 맞춤 분류)
  • register_post_type ( 'faq_whsr', $ args) – 이것은 WP를 알려줍니다 "이봐, $ args의 인수를 사용하여 faq_whsr이라는 ID를 가진 새로운 커스텀 포스트 타입을 만든다".

admin-faq

그것을 저장하고 숨을 멈추십시오. 기본 wp-admin 메뉴에 새 섹션이 표시됩니다.

잠깐, 그게 다야? 네. 이 스 니펫은 전체 CPT 기능을 만듭니다. 이 항목이 마음에 들지 않으면 다음 섹션에서 더 빨리 냉각 될 것입니다.

wp-admin을 떠나기 전에 더미 데이터 (최소한 2 카테고리가있는 몇 가지 질문)를 추가하십시오.

프런트 엔드 - WP x jQuery 상호 작용

마침내 몇 가지 조치를 취할 시간입니다. jQuery UI 아코디언 요소 이합니다.

jQuery UI는 jQuery와 거의 같은 장점을 가지고 있습니다.

  • 그것에 종사하는 많은 개발자
  • 크로스 브라우저 및 모바일 지원 코드
  • 잘 문서화
  • WP와 좋은 연주 (WP 자체에서 사용)

이제 문제는 어떻게 호출할까요?

이에 대한 2 접근 방식이 있습니다.

  1. wp_head의 잘못된 순수한 <script> / <style> 태그
  2. 좋은 wp_enqueue

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

enqueue 함수 사용 :

enqueue_02

쇼트 코드

이제 wp-admin으로 돌아갑니다. 우리는 FAQ 항목을 가지고 있고 우리는 원하는대로 항목을 스타일 화하기위한 라이브러리를 가지고 있습니다. 무엇이 누락 되었습니까? 글쎄, 우리는 그 물건들을 불러야 해!

우리에게는 이것에 대한 많은 옵션이 있지만,이 경우에 가장 쉬운 방법은 단축 코드를 만드는 것입니다. 단축 코드는 내용 필드 (페이지, 게시물, CPT ...)에 추가하는 것이고 WP는 실제로 실행될 함수를 검색합니다. 2 유형의 단축 코드가 있습니다.

  1. [self-enclosing] - 태그 <hr /> 또는 <br />처럼 이런 종류의 짧은 코드는 어떤 시점에서 함수를 호출합니다. 이것은 우리의 녀석입니다.
  2. [wrapped] Content [/ wrapped] - 이것은 <p> </ p> 태그 또는 <div> </ div> 태그와 같으며 실제로 내용을 변형하거나 내용을 인수로 사용할 수 있습니다.

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

[faq-whsr]

저장하고 해당 페이지를 방문하여 어떤 일이 발생하는지 확인하십시오.

농담하는 거 맞지 않을거야? 우리가 아직 기능을 만들지 않았기 때문입니다.

플러그인 파일에 다음을 추가하십시오.

shortcode_02

이제 귀하의 페이지를 새로 고침하고 정말 멋진 일이 일어날 것을 약속드립니다.

멋지다, 응? 이제 당신은 그것이 달리고 하늘이 지금 당신을위한 한계임을 알 수 있습니다. 그 코드가하는 것은 WP에 [faq-whsr]이라고하는 짧은 코드가 있다는 것을 알려주는 것이고, WP가 발견하면 WP는 페이지의 해당 지점에서 기능을 실행해야합니다.

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

api_02

그리고 그것을 위해 우리는 WP 질의FAQ 항목과 그 내용을로드하십시오. shortcode 함수를 다음 코드로 바꿉니다.

shortcode-basic_02

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

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

shortcode-final_02

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

  • 고양이 - 카테고리 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 항목에는 사용자 정의 필드와 값이있는 항목을로드하는 데 사용할 수있는 항목이 있으므로)

이제 네 차례 야

보시다시피 이것은 단지 출발점 일뿐입니다. 우리 모두는이 간단한 플러그인을 개선하기 위해 많은 멋진 것들을 배울 수 있습니다. 여기에 더 깊이 파고들 수있는 몇 가지 제안이 있습니다.

  • 응답 디자인
  • 위젯 생성
  • 플러그인 활성화 / 비활성화 후크
  • 국제화
  • OOP
  • 필요한 경우에만 대기열에 포함 (특정 페이지의 경우)

의견에 의견을 남기는 것을 잊지 마십시오! 그리고 여기 당신을위한 우리의 도전이 있습니다 : 단축 코드에 "기본 항목"옵션을 적용 할 수 있습니까 (따라서 페이지가로드 될 때 다른 항목이 열릴 것입니다, 첫 번째 항목이 아님)? 어떻게 하시겠습니까?

로체스터 올리베이라에 대하여

나는 웹 디자이너이자 기업가 인 Itajubá (MG), Brasil입니다. 나는 모호한 주제에 대해 쓰고 멋진 것들을하는 것을 좋아합니다.