wordcamp 2012 seoul - plugin

WordPress Plugin

By 임민형 @ssamturessamture@gmail.com

http://ssamture.net

WordCamp Seoul 2012Seoul, South Korea - May 26Track3 – 13:30

미리보기

• 플러그인 이란 ?

• 플러그인 설치

• 플러그인 개발

• 모바일웹 개발 가이드

WordCamp Seoul 2012 @ssamture

플러그인이란 ?

플러그인이란 ?

• 워드프레스에 여러가지 새로운 기능을 추가• 관련 전문가가 아니더라도 쉽게 적용• 수만개의 다양한 플러그인 존재

WordCamp Seoul 2012 @ssamture

WordPress

WordCamp Seoul 2012

WordPress

WordCamp Seoul 2012

WordPress

WordCamp Seoul 2012

WordPress

WordCamp Seoul 2012

WordPress

WordCamp Seoul 2012

WordPress

WordCamp Seoul 2012

WordPress

WordCamp Seoul 2012

플러그인 설치

• 관리자 화면에서 설치• 직접 다운로드 후 설치

플러그인 설치

• Dashboard 를 통한 자동 설치

WordCamp Seoul 2012

플러그인 설치

• Dashboard 를 통한 자동 설치

WordCamp Seoul 2012

플러그인 설치

• WordPress.org 또는 기타 웹을 통한 수동설치

WordCamp Seoul 2012

플러그인 설치

• WordPress.org 또는 기타 웹을 통한 수동설치

/wp-content/plugins/

WordCamp Seoul 2012

플러그인 적용

• 설치한 플러그인의 적용

WordCamp Seoul 2012

플러그인 개발

플러그인 개발

• Hooks(Hooking)• Actions• Filiters

WordCamp Seoul 2012

• Hooks 란 ?– 사전적 정의 : ( 갈 ) 고리 , 걸이 ; ( 낚싯바늘로 ) 낚다 등– S/W 관점 : 각종 프로그램에서 발생하는 기능호출 ,

메시지 , 이벤트 등을 중간에서 바꾸거나 가로채는 기술 .– 주로 크래킹의 관점에서 사용 . ( 예 ) 키로거

플러그인 개발

WordCamp Seoul 2012

[ 21 ]

플러그인 개발

WordCamp Seoul 2012

• Anctions 란 ?– 사전적 정의 : 행동 , 조치 , 동작– Actions 는 워드프레스가 동작할 때 후킹을 지원하는

Action API 를 이용하여 직접 만든 PHP function 들을 원하는 부분에서 실행이 되도록 함 .

– Actions Functions(has_action, add_action 등 )

플러그인 개발

WordCamp Seoul 2012

• Filters 란 ?– 사전적 정의 : 여과 , 필터 ( 특정정보차단 ) 등– Filters 는 워드프레스가 동작할 때 후킹을 지원하는 Fil-

ter API 를 이용하여 어떤 값이 데이터베이스 또는 브라우저에 보내어 지기 전에 수정하도록 함 .

– Filter Functions(has_filter, add_filter 등 )

플러그인 개발

WordCamp Seoul 2012

• 플러그인 개발 기본 구조/*Plugin Name : 플러그인 이름Plugin URI : 플러그인 홈페이지Description: 플러그인 설명Author : 개발자Version : 버전Author URI : 개발자 홈페이지*/function 사용자정의함수 (){

}

플러그인 API 함수 (‘hook_name’,’ 사용자정의함수’ );

플러그인 개발

WordCamp Seoul 2012

• 워드프레스 함수의 이용– DB 에 저장된 관리자 이메일을 블로그 메인 상단에

출력하는 플러그인

플러그인 개발

[ 25 ] WordCamp Seoul 2012

[ 26 ]

모바일웹 개발 가이드

• 테마• 플러그인

모바일웹 개발 가이드• 모바일웹 테마 개발 준비

– WP_ROOT/wp-content/themes/ 사용자테마디렉토리– style.css 생성– 테마 정보 주석 삽입

WordCamp Seoul 2012

모바일웹 개발 가이드

[ 29 ]

• 임의의 내용으로 index.php 생성 후 테마 확인

WordCamp Seoul 2012

모바일웹 개발 가이드

[ 30 ]

• Headers and Footers– header.php 와 footer.php 파일을 생성

– 각각의 파일은 theme API 인 get_header() 와 get_footer() 에 의해 사용

<header.php>

<footer.php>

WordCamp Seoul 2012

모바일웹 개발 가이드

[ 31 ]

• Theme API 를 이용하여 index.php 에서 in-clude

get_header() -> header.php

get_footer() -> footer.php

모바일웹 개발 가이드

[ 32 ]

• header 에 hook(“wp_head”) 삽입

Function Refrence / wp_head-</head> 전에 삽입-사이트의 styles, scripts 그리고 meta tags-Plugin 에서 “ wp_head” hook tag 를 사용하고 있다면 이 부분에 적용-do_action(‘wp_head’);

WordCamp Seoul 2012

모바일웹 개발 가이드• footer 에 hook(“wp_footer”) 삽입

WordCamp Seoul 2012

모바일웹 개발 가이드• 테마 stylesheet 를 문서에 적용

WordCamp Seoul 2012

모바일웹 개발 가이드• Post Lists

– 모든 요청은 별도의 파일이 없는 한 index.php 을 통해 콘텐츠 제공

– 요청 콘텐츠의 종류에 따라 계층 구조의 파일을 통해 콘텐츠 제공

– 예를 들어 , 특정 카테고리의 게시물을 보는 사용자가 있다면 “ category.php” 파일을 통해 콘텐츠를 제공하며 , 해당 파일이 존재하지 않으면 “ archive.php” 파일을 통해 콘텐츠를 제공

WordCamp Seoul 2012

모바일웹 개발 가이드• Post Lists

< 워드프레스 테마 주요파일 요청 구조 >

WordCamp Seoul 2012

모바일웹 개발 가이드

[ 37 ]

• Post Lists

WordCamp Seoul 2012

모바일웹 개발 가이드• Post Lists – thumbnail 추가

– functions.php 파일 생성– functions.php -> 사용자 정의 함수 정의

WordCamp Seoul 2012

모바일웹 개발 가이드• Post Lists – thumbnail 추가

WordCamp Seoul 2012

모바일웹 개발 가이드• Pagenavition 추가

WordCamp Seoul 2012

모바일웹 개발 가이드• Post and Page Detail

– Post 상세페이지를 위한 single.php 생성

모바일웹 개발 가이드• Post and Page Detail

– page 상세페이지를 위한 page.php 생성

모바일웹 개발 가이드• Comments

– single.php 에서 comments_template() 삽입– comments.php 파일 생성

WordCamp Seoul 2012

모바일웹 개발 가이드• Menu and Navigation

– functions.php 에서 메뉴 활성화– 원하는 위치에 theme API 를 통해 메뉴 표시

WordCamp Seoul 2012

모바일웹 개발 가이드• Using WordPress Hooks and Filters

– PC 와 모바일 환경에 따라 맞는 웹페이지 표현– 플러그인을 이용– /wp-content/plugins 에 적절한 폴더와 파일을 생성

(ex) /wp-content/plugins/meetup /wp-content/plugins/meetup/meet-

up.php– 플러그인 정보 삽입

WordCamp Seoul 2012

모바일웹 개발 가이드• Theme Selection

– Plugin API 인 add_filter 를 이용

WordCamp Seoul 2012

모바일웹 개발 가이드

[ 47 ]

• Theme Selection

WordCamp Seoul 2012

모바일웹 개발 가이드• Content 다듬기

– 사용자가 콘텐츠를 꾸미거나 , 플러그인에 의해서 추가된 불필요한 태그 제거

– 이미지 리사이즈– Plugin API 인 filter 를 이용

WordCamp Seoul 2012

끝 , 감사합니다 .^^