impress.js를 WordPress에 넣기

원문 링크

번역중입니다.

워드프레스에 impress.js를 넣어보자.

온라인 프리젠테이션 도구들이 데스크탑에서 쓰던 프리젠테이션을 넘어 급격하게 성장하고 있습니다.
Impress.js는 CSS 변화, 변환을 이용하여 놀라운 프리젠테이션 만드는 용도를 지닌 오픈 소스 라이브러리 중에서도 가장 인기가 있습니다. 비록 엄청난 인기있는 라이브러리라 해도 많은 도구들이 동적인 컨텐츠를 가진 프리젠테이션을 생성할 수는 없습니다. 그래서 여기서 우리는 프리젠테이션 만드는 것을 자동화할 수 있는 워드프레스 안으로 Impress.js를 넣어보고자 합니다. 이 두 개의 사용지침서를 통해서 Impress.js 프리젠테이션을 구축하는 동안, 내 맘대로 주물를 수 있는 고도의 플러그인을 개발할 것입니다.

그럼 시작해 볼까요?

쩔어주시는 Impress.js 프리젠테이션

플러그인을 구현하는 엄청난 삽질에 앞서서, 아마 이 강력한 라이브러리가 만들어내는 놀라운 프리젠테이션이 어떤게 있는지 보고 싶을 것이다. Impress.js의 창조적인 사용을 몇가지 살펴 보자.

Great Wall of Tees
Building a Personal Website with Impress.js
jgog.in Website/Portfolio
Pongoweb.it from creators of PongoCMS

이런 프리젠테이션과 웹사이트는 이 놀라운 도구에 대해서 더욱 배우고 싶은 영감을 줄 것이다. 그래서 워드프레스에 합치는 삽질을 하기 전에 Impress.js의 기본이 대는 몇가지 사용지침서를 추천하고 싶다.

Impress.js source
Creating Stunning Visualizations with Impress.js
Building Impressive Presentations with Impress.js

기본 지식을 확보하여 이 글을 완료하는 것으로 이제 워드프레스와 실제로 통합하는 것으로 이동할 수 있다.

플러그인을 계획하는 것

먼저 플러그인 개발하기 전에, 프리젠테이션을 만드는 것을 위하여 주요 요구사항을 확인할 필요가 있다. 일반적인 프리젠테이션의 특징을 고려하여 작업을 나열해 보자.

– 우리는 특별한 디자인을 가진 슬라이드를 만들수 있어야 한다.
– 각각의 슬라이드는 변화 효과가 필요하다.
– 슬라이드는 프리젠테이션을 만들기 위하여 함께 그룹화 되어야 한다.
– 프리젠테이션은 입맛에 맛게 설정 되어야 한다.

이번 파트에서는 우리가 언급한 첫번째 3가지 작업을 구현할 것입니다. 프리젠테이션 사용자 정의 설정과 플러그인 사용 기술은 두번째와 마지막 부분에서 논의될 것입니다. 그럼 시작해 볼까요.

플러그인 만들기

우리는 wp-content/plugins 디렉토리 안에 있는 wimpress라 부르는 플러그인 폴더에 만듬으로써 구현을 시작할수 있다. 모든 플러그인들은 코드 주석을 이용하여 플러그인에 대한 정보를 정의하고 있는 메인 파일을 가진다. wimplress.php처럼 다음의 코드를 포함하는 메인 플러그인 파일을 만들어 보자.

이 플러그인은 객체 지향 접근를 사용할 것이고, 따라서 우리는 메인 파일 안에다가 메인 플러그인 클래스를 넣는다. 모든 플러그인의 기능과 관련된 구현은 데모 목적의 이 클래스 안에 넣습니다.

플러그인 초기화

워드프레스가 코어내에서는 기능의 절차적 스타일을 사용하더라도, 대부분의 개발자들은 플러그인을 생성하기 위하여 객체지향프로그래밍 스타일을 사용하는 것을 선호합니다. 이 기술에서, 대부분의 기능을 제공하는 메인 클래스를 가집니다. 그러한 플러그인들의 초기 구현을 위하여 다음의 코드를 고려해 봅시다.

class WImpress {
public function __construct() {
 
    }
}
 
$wimpress = new WImpress();

정의 후, 우리는 메인 클래스의 객체를 초기화 합니다. 워드프레스의 핵심 기능의 대부분을 제공하는 액션과 필터를 사용합니다. 그러므로 우리는 워드프레스에 필요한 액션을 정의하기 위하여 WImpress 클래스 생성자를 사용합니다. 이러한 액션과 필터의 기능 구현은 대부분의 시나리오에서 같은 클래스 안에 정의됩니다. Wimpress 플러그인의 첫번째 액션을 생성하여 액션 정의해 봅시다.

프레젠테이션 및 슬라이드 정의

class WImpress {
private $presentation_type;
    private $step_type;
 
    public function __construct() {
            $this->presentation_type = "wpresentations";
            $this->step_type = "wsteps";
 
            add_action('init', array($this, 'wimpr_generate_post_types'));
 
        }
}