워드프레스 - 테마 만들기 - meta box

functions.php

<?php
include 'functions-post-type.php';
include 'functions-setup.php';
include 'functions-taxonomy.php';

먼저 구조를 분리해준다.

 

functions-post-type.php

<?php
function bookstore_register_post_type(){
    register_post_type('book', [
        'has_archive' =>true,
        'labels' => [
            'name'                  => '책',
            'singular_name'         => '책',
            'menu_name'             => '책',
            'name_admin_bar'        => '책',
            'add_new'               => '새 책 추가',
            'add_new_item'          => '새 책을 추가합니다',
            'new_item'              => '새 책',
            'edit_item'             => '책 수정',
            'view_item'             => '책 보기',
            'all_items'             => '책 목록 ',
            'search_items'          => '책 검색',
            'parent_item_colon'     => '상위 책:',
            'not_found'             => '현재 입력한 책이 없습니다.',
            'not_found_in_trash'    => '휴지통에 책이 없습니다',
            // 'featured_image'        => '',
         
        ],
        'public' =>true,
        'menu_position' => 3,
        'menu_icon' => 'dashicons-book'
        // 'menu_icon' => get_template_directory_uri().'/images/open-book.svg'
    ]);
}
add_action('init', 'bookstore_register_post_type');

functions-setup.php

<?php
add_action('wp_enqueue_scripts',function(){
    wp_enqueue_style('mbs-style',get_stylesheet_uri());
});



add_action('after_setup_theme', function(){
    add_theme_support('title-tag');
    add_theme_support( 'automatic-feed-links');
});

 

meta box

post 편집화면에서 한 영역을 뜻하는 용어, html의 필드셋 개념 

단순 input

앞부제, 뒷부제, 가격, 발행일, 페이지수

에디터

목차

이미지

표지 이미지 

 

함수

add_meta_box

인자값: html id, 사람용 제목, 출력용 함수, post type 

 

액션

add_meta_boxes

add_meta_boxes_{post-type}

 

 

 

해당 부분을 메타 박스라고 할 수 있다.

 

먼저 functions_metabox를 추가하기 위해 

functions.php

<?php
include 'functions-post-type.php';
include 'functions-setup.php';
include 'functions-taxonomy.php';
include 'functions-meta-box.php';

 

를 추가해준다. 

 

meta-box를 관리할 디렉토리 meta-box 를 생성후 book-detail.php를 생성해준다.

 

 

functions-meta-box.php

<?php
add_action('add_meta_boxes_book', function(){
    add_meta_box( 'book-detail', '책 상세 정보', function(){
        include 'meta-box/book-detail.php';
    }, 'book');
});

 

add_meta_box( id, title, callback, screen, context, priority, callback_args )

를 통해 값을 넣어준다. 

 

 

book-detail.php

<table class="form-table">
    <tbody>
        <tr>
            <th><label for="subtitle_head">앞부제</label></th>
            <td>
                <input type="text" name="meta[subtitle_head]" id="subtitle_head" class="regular-text">
            </td>
        </tr>
    </tbody>
</table>

 

 

 

 

위와같이  책 상세 정보 부분및 앞부제가 나오게 된다.

class=regular-text를 통해 너비를 넓혀준다 

 

 

뒷부제, 가격, 발행일, 페이지수도 추가해준다 .

 

<table class="form-table">
    <tbody>
        <tr>
            <th><label for="subtitle_head">앞부제</label></th>
            <td>
                <input type="text" name="meta[subtitle_head]" id="subtitle_head" class="regular-text">
            </td>
        </tr>
        <tr>
            <th><label for="subtitle_tail">뒷부제</label></th>
            <td>
                <input type="text" name="meta[subtitle_tail]" id="subtitle_tail" class="regular-text">
            </td>
        </tr>
        <tr>
            <th><label for="price">가격</label></th>
            <td>
                <input type="tel" name="meta[price]" id="price" class="regular-text" pattern="[0-9]+" title="숫자로만 적어주세요">
            </td>
        </tr>
        <tr>
            <th><label for="published_date">발행일</label></th>
            <td>
                <input type="date" name="meta[published_date]" id="published_date" class="regular-text">
            </td>
        </tr>
        <tr>
            <th><label for="pages">페이지수</label></th>
            <td>
                <input type="tel" name="meta[pages]" id="pages" class="small-text" pattern="[0-9]+" title="숫자로만 적어주세요" >
            </td>
        </tr>
    </tbody>
</table>

 

 

목차용 에디터 붙이기 

 

wp_editor($content, $editor_id, $settings = array( )  ) ;

 

functions-meta-box.php

<?php
add_action('add_meta_boxes_book', function(){
    add_meta_box( 'book-detail', '책 상세 정보', function(){
        include 'meta-box/book-detail.php';
    }, 'book');

    add_meta_box( 'book-toc', '목차', function(){
        include 'meta-box/book-toc.php';
    }, 'book');
});

 

book-toc.php

<?php
wp_editor( '', 'book_toc', [
    'text_area_name' =>'meta[toc]'
]);

목차 부분이 정상적으로 생성이 되었다. 

 

 

위 방식은 아래와 같이도 변경이 가능하다. 

 

functions-meta-box.php

<?php
add_action('add_meta_boxes_book', function () {
    add_meta_box('book-detail', '책 상세 정보', function () {
        include 'meta-box/book-detail.php';
    }, 'book');
});

add_action('edit_form_advanced', function () {
    if (get_current_screen()->post_type === 'book') {
        include 'meta-box/book-toc.php';
    }
});

post_type이 book일때만 

해당 액션을 실행해준다(edit_form_advanced는 전역적으로 적용이 되기 때문) 

 

book-toc.php

<div class="postbox">
    <h2>목차</h2>
    <hr style="margin:0;"/>
    <div class="inside">
        <?php
        wp_editor('', 'book_toc', [
            'text_area_name' => 'meta[toc]'
        ]);
        ?>
    </div>
</div>