[워드프레스] Functions파일 이용한 액션훅 필터훅 [펌]

워드프레스테마 Functions파일 이용하기

Functions.php 파일은 워드프레스테마를 만들때 테마를 위한 특정 기능을 추가 하는 파일입니다.

워드프레스가 실행 될때 이파일은 자동으로 인클루드 되기때문에 이 파일에 있는 함수는 모든 템플릿 파일에서 사용 할 수 있습니다.

 

우선 파일내의 함수를 만들기 전에 알아두어야 할 것이있습니다

훅(hook)입니다.

훅킹이라고도 합니다,  훅을 이용해 워드프레스가 실핼 되는 도중에 임의의 함수를 실행하여 기존의 함수나 출력을 변경 할 수 있습니다

훅에는 액션훅(add_action)과 필터훅(add_filter)이 있습니다

액션훅은 워드프레스에서 이벤트가 발생할때 실행하는것이며 필터훅은 콘텐츠의 내용을 변경할 때 사용하는 것입니다.

 

1	<?php add_action( $hook, $function_to_add, $priority, $accepted_args ); ?>

액션훅으로 처음 파라메터는 기존에 있는 훅입니다, 두번째는 추가할 함수, 세번째는 우선 순위이며 기본은 10입니다, 마지막으로 인수의 갯수이며 기본은 1입니다.

 

1	<?php add_filter( $tag, $function_to_add, $priority, $accepted_args ); ?>

필터훅이며 처음파라미터는 기존에 있는 필터이며 나머지 는 액션훅과 동일합니다.

 

이제 가장 많이 쓰이는 액션훅과 필터훅에 대해 알아봤으니 functions.php파일에 자주쓰이는 몇가지를 추가 하도록 하겠습니다

 

우선 도메인 이름이 자주쓰이니 이것을 정의 하도록 하겠습니다

1 2 3 4 5

define('THIS_DOMAIN', 'wpdev');   function this_get_domain() {  return constant('THIS_DOMAIN'); }

앞으로 제작하는 테마의 도메인은  tiis_get_domain()함수를 사용 하도록 하겠습니다.

차후 변경이 되면 define부분만 수정하면 됩니다.

 

 

워드프레스테마 셋업에 추가 함수

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

function wpdev_setup() {   add_theme_support( 'post-formats',                     array( 'aside', 'image', 'video', 'link', 'quote', 'status' ) );    register_nav_menus( array(  'primary' => __( 'Primary Menu', this_get_domain() ),  ) );    add_theme_support( 'post-thumbnails' );  set_post_thumbnail_size(720, 380, true);  add_image_size('article-box-thumbnail', 500, 200, true);\  add_image_size('article-list-thumbnail', 1024);   } add_action( 'after_setup_theme', 'wpdev_setup' );

3라인의 내용은 포스트 타입에 사용할 것을 정의 하는 것입니다, 글쓰기 할대 오른쪽에 글형식에서 선택하는 부분입니다.

 

6라인은 Primary Menu라는 메뉴를 선언하는 부분이며 선언 후에는 테마의 서브메뉴에 “메뉴” 항목이 나오게 됩니다.

배열로 선언하기 때문에 여러개의 메뉴 타입을 선언하여 사용 할 수 있습니다

 

 11라인은 기본 섬네일 사이즈를 선언합니다

 

 12,13라인은 특정 섬네일을 선언하고 첫번째 파라메타를 이용하여 출력시 사용합니다.

1 2 3

if ( has_post_thumbnail() ) {     the_post_thumbnail('article-box-thumbnail', array('class' => 'img-responsive')); }

위와 같이 사용하게 되면 500*200 사이즈에 크롭된 섬네일이 출력됩니다

 

마지막으로 16라인에서 after_setup_theme 훅에 만든 함수를 액션훅하게되면 완료됩니다.

 

 

 

자바스크립트와 CSS파일 추가하기

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

function wpdev_scripts_styles(){   // css wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/include/bootstrap/css/bootstrap.css', array(), null, 'all' );   wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/fonts/font-awesome-4.1.0/css/font-awesome.min.css', array(), null, 'all' );   wp_enqueue_style( 'googleapis-font1', 'http://fonts.googleapis.com/css?family=Oswald:400,700,300', array(), null, 'all' );       // js wp_enqueue_script( 'jquery-min', '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', array(), null, true );   wp_enqueue_script( 'jquery-ui', '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js', array(), null, true );   wp_enqueue_script( 'bootstrapjs', get_template_directory_uri() . '/include/bootstrap/js/bootstrap.min.js', array(), null, true );   wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/custom.js', array(), null, true );   }   add_action( 'wp_enqueue_scripts', 'wpdev_scripts_styles' );

자바스크립트 파일과 CSS파일을 테마 폴더의 특정 디렉토리에 만든 후 위와 같이 하면 모든페이지 로딩시 추가 됩니다

함수를 만들고 wp_enqueue_scripts에 액션훅을 추가하면 끝~~~

 

 

 

사이드바 위젯영역 셋팅

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

function wpdev_widgets_init() {   register_sidebar( array( 'name' => __( 'Primary Sidebar', this_get_domain() ), 'id' => 'sidebar-primary', 'description' => __( '기본 사이드바로 Single post의 좌측 영역에 위치', this_get_domain() ), 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => '</aside>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) );   register_sidebar( array( 'name' => __( 'Left Front Page Widget Area', this_get_domain() ), 'id' => 'sidebar-top-left', 'description' => __( '메인페이지 하단 왼쪽', this_get_domain() ), 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => '</aside>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) );   register_sidebar( array( 'name' => __( 'Center Front Page Widget Area', this_get_domain() ), 'id' => 'sidebar-top-center', 'description' => __( '메인페이지 하단 가운데', this_get_domain() ), 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => '</aside>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) );   register_sidebar( array( 'name' => __( 'Right Front Page Widget Area', this_get_domain() ), 'id' => 'sidebar-top-right', 'description' => __( '메인페이지 하단 오른쪽', this_get_domain() ), 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => '</aside>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) );   } add_action( 'widgets_init', 'wpdev_widgets_init' );

 

위와 같이 함수를 만든 후 widgets_init에 훅추가를 하면 사이드바 위젯영역이 테마 위젯메뉴에 나오게 됩니다

테마에서 사용할때는 아래와 같이 코딩합니다.

1 2 3 4 5

<?php if ( is_active_sidebar( 'sidebar-primary' ) ) : ?> <div id="sidebar-primary" class="widget-area col-md-3" role="complementary"> <?php dynamic_sidebar( 'sidebar-primary' ); ?> </div> <?php endif; ?>

 

 

지금까지 액션훅(add_action)만 소개 하였는데 필터훅(add_filter)한가지만 하고 글을 마치도록 하겠습니다

 

 

 

the_excerpt 함수에서 more 출력 방식 변경

1 2 3 4 5

function new_excerpt_more( $more ) { return ' <p><a class="read-more" href="'. get_permalink( get_the_ID() ) . '"><i class="fa fa-plus"></i> ' . __('Read more...', this_get_domain()) . '</a></p>'; }   add_filter( 'excerpt_more', 'new_excerpt_more' );

기존의 excerpt_more에 새로운 함수를 적용하면 아래와 같이 새로운 함수의 결과가 출력 됩니다.

 

2라인의 Read more… 부분을 아래와 같이 수정하면

1	return ' <p><a class="read-more" href="'. get_permalink( get_the_ID() ) . '"><i class="fa fa-plus"></i> ' .get_the_title().__('Read more...', this_get_domain()) . '</a></p>';

get_the_title() 함수는 포스트 제목을 불러오는 것이기때문에 제목 다음에 Read more… 이 출력됩니다.

 

 

 

 

이상 간단히 Functions.php 파일의 이용 방법을 알아봤습니다

 

아래 주소는 각각의 레퍼런스 사이트이며 주소 마지막에 함수 필터 액션 명 입력하면 바로 나옴니다

자세한 워드프레스 함수는 http://codex.wordpress.org/Function_Reference/

필터는 http://codex.wordpress.org/Plugin_API/Filter_Reference/

액션은 http://codex.wordpress.org/Plugin_API/Action_Reference/

출처 : http://www.wpdev.kr/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4%ED%85%8C%EB%A7%88-functions%ED%8C%8C%EC%9D%BC-%EC%9D%B4%EC%9A%A9%ED%95%98%EA%B8%B0/