Changwoo Blog

[카테고리:] 1일1워프

  • wp-util #2: wp.ajax

    지난 포스트에 이어 이번에는 wp.ajax 에 대해 포스팅한다. wp.ajax에 대해 소개하고 wp.ajax와 wp.template을 활용한 초간단 플러그인을 같이 제작해 본다.

    (더 보기…)

  • wp-util #1: wp.template

    오늘은 wp-util 스크립트를 소개하고자 한다. 경로는 /wp-includes/js/wp-util.js 이고, 이 스크립트 안에는 두가지 도구가 있는데, 하나는 wp.template, 나머지 하나는 wp.ajax이다. 간단하게 포스팅하는 것이 1일 1워프의 주제인데, 오늘 하루에 두가지를 다 포스팅하기는 내가 너무 힘들고 분량도 아까우므로 🙂 오늘은 그중 하나인 wp.template 만 알아보도록 하자.

    (더 보기…)

  • 액션/필터 레퍼런스

    코어 동작 어딘가에 적절히 콜백을 덧대 자신이 원하는 동작을 만들어내는 것, 이것이 플러그인 개발의 핵심이 아닐까 한다. 그러려면 코어가 어떤 흐름으로 동작하는지, 어떤 액션과 필터를 제공하는지 알아두는 것은 자명하다.

    그런 흐름을 잘 정리해 둔 문서가 바로 이 액션 레퍼런스와 필터 레퍼런스이다. 모든 필터와 액션을 담은 것은 아니겠지만, 리퀘스트를 받아 리스폰스를 내기까지의 순서를 따라 잘 나열되어 있다. 가장 흔히 사용되는 대표적인 필터와 액션 흐름을 살펴볼 수 있는 좋은 문서이다.

    프론트 기준으로 코어는 아주 대략적으로 이런 흐름으로 진행된다. 이 흐름을 생각하면서 훅을 훑어보면 코어를 이해하는데 많은 도움이 될 것이다.

    • 설정 파일 로드, 필수 파일 로드, 데이터베이스 설정.
    • MU 플러그인 로드.
    • 플러그인 로드.
    • 테마 로드.
    • 로그인된 사용자 설정.
    • 프론트의 주소에 따라 메인 쿼리 준비.
    • HTTP 헤더 전송.
    • 메인 쿼리 – 데이터베이스 쿼리.
    • 메인 쿼리의 종류에 따라 어떤 프론트 템플릿을 불러올지 결정.
    • 템플릿 인클루드.
      • 템플릿 헤더 출력.
      • 템플릿 본문과 설정에 따라 메뉴, 사이드바 출력.
      • 템플릿 푸터 출력.
    • 어드민 바 출력.
    • 종료.

    이 대략적인 흐름이 중요한 이유가 있다. 이 흐름을 모르면 도대체 어떤 때 어떤 동작을 넣어야 하는지 이해하기 어려울 뿐만 아니라 원하는 동작을 제때 코어에 전달하지 못할 수도 있기 때문이다. add_action을 넣는 시점은 do_action이 일어나기 이전에 이뤄져야 한다. 예를 들어 푸터 출력 진행중에 ‘plugins_loaded’ 액션을 넣어도 절대 동작하지 않는다. 왜냐면 ‘plugins_loaded’ 액션은 그 이전에 끝났기 때문이다. 이런 워드프레스 동작 라이프사이클은 알아둘수록 도움이 된다.

  • dashicons

    워드프레스 대시보드(또는 어디서든)에서 사용되는 아이콘 모음이다. 웹사이트에서 간편히 전체 목록을 확인할 수 있다.

    개발시 관리자 화면의 메뉴 아이콘을 꾸밀 때 특히 유용하다. 기본 아이콘인 톱니바퀴나 핀 말고 다양한 아이콘으로 만들어 보자.

    목록에서 원하는 아이콘을 클릭하면 아이콘 이름, HTML 코드나 CSS 스타일이 적절히 출력된다. 커스텀 포스트나 메뉴를 삽입할 때는 아이콘 이름을 쓰고, 나머지 경우에서는 적당히 HTML 태그나 CSS 스타일 요소 등을 사용하면 된다.

    예를 들어, 아래 커피 아이콘의 이름은 ‘dashicon-coffee’이다.

    이 아이콘을 커스텀 포스트의 메뉴 아이콘으로 쓰려면,

    <?php
register_post_type(
    'foo_type',
    array(
        ....
        'menu_icon' => 'dashicons-coffee', // 이렇게!
    )
);Code language: HTML, XML (xml)

    커스텀 페이지의 메뉴 아이콘으로 쓴다면,

    <?php
add_menu_page(
    'Page Title',
    'Menu Title',
    'manage_options',
    'callback_function',
    'dashicons-coffee' // 이렇게!
);Code language: HTML, XML (xml)

    이렇게 사용 가능하다.

  • wp_enqueue_script

    wp_enqueue_script() 함수는 직접적으로 HTML 코드에 스크립트를 조율해야 하는 과정을 없애준다. 스크립트간 의존성도 해결해주고, 캐시 문제도 해결해 준다. “JavaScript와 CSS를 삽입하는 과정을 명확히 알아두자.” 같은 긴 포스트를 작성하고는 싶지만, 글이 너무 길어지니 생략한다.

    그보다는 문서 중 여러 JS 라이브러리의 핸들을 문서화한 부분을 오늘 포스트의 키 포인트로 전달하고 싶다. 워드프레스가 사용한 여러 유용한 라이브러리를 재활용하는 측면에서 꽤 쓸만하다. 한번쯤 꼭 읽어보고 개발할 때 활용하도록 하자.

  • wp-config.php 설정 숙지하기

    wp-config.php 수정하기 문서.

    여기 내용들은 완전히까지는 아니지만 그래도 매우 잘 알아두어야 할 사항들이다. 어정쩡하게 알아두지 말고 한 번쯤 꼭 숙독해 두어야 한다.

    (더 보기…)