wordcamp 2012 seoul - plugin

WordPress Plugin

By 임민형 @[email protected]

http://ssamture.net

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

미리보기

• 플러그인 이란 ?

• 플러그인 설치

• 플러그인 개발

• 모바일웹 개발 가이드

WordCamp Seoul 2012 @ssamture

플러그인이란 ?

플러그인이란 ?

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

WordCamp Seoul 2012 @ssamture

WordPress

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

끝 , 감사합니다 .^^

wordcamp 2012 seoul - plugin

Automotive