테마의 로고 이미지 업로드 기능 추가하기

테마의 헤더 부분에 로고 이미지를 관리자 페이지에서 업로드하는 기능을 추가한다.

 

1. functions.php 에 관리자 페이지에서의 로고 이미지 업로드 메뉴를 추가한다.

function theme_custom_logo_field_callback() {
    $logo = get_option( 'theme_logo' );
    ?>
    <input type="hidden" id="theme_logo" name="theme_logo" value="<?php echo esc_attr( $logo ); ?>" />
    <input type="button" id="upload_logo_button" class="button" value="<?php _e( 'Upload Logo', 'your-theme' ); ?>" />
    <input type="button" id="remove_logo_button" class="button" value="<?php _e( 'Remove Logo', 'your-theme' ); ?>" />
    <div id="logo_preview">
        <?php if ( $logo ) : ?>
            <img src="<?php echo esc_url( $logo ); ?>" style="max-width: 200px;">
        <?php endif; ?>
    </div>

    <script>
        jQuery(document).ready(function($) {
            // 미디어 업로더 기능 설정
            $('#upload_logo_button').click(function(e) {
                e.preventDefault();

                var custom_uploader = wp.media({
                    title: '<?php _e( "Select Logo", "your-theme" ); ?>',
                    button: {
                        text: '<?php _e( "Use this logo", "your-theme" ); ?>'
                    },
                    multiple: false // 다중 선택 비활성화
                }).on('select', function() {
                    var attachment = custom_uploader.state().get('selection').first().toJSON();
                    $('#theme_logo').val(attachment.url);
                    $('#logo_preview').html('<img src="' + attachment.url + '" style="max-width: 200px;">');
                }).open();
            });

            // 로고 제거 버튼 클릭 이벤트
            $('#remove_logo_button').click(function(e) {
                e.preventDefault();
                $('#theme_logo').val('');
                $('#logo_preview').html('');
            });
        });
    </script>
    <?php
}

 

2. 테마에서 관리자 페이지에서 설정한 로고 이미지를 불러온다.

 

header.php

function theme_custom_logo_field_callback() {
    $logo = get_option( 'theme_logo' );
    ?>
    <input type="hidden" id="theme_logo" name="theme_logo" value="<?php echo esc_attr( $logo ); ?>" />
    <input type="button" id="upload_logo_button" class="button" value="<?php _e( 'Upload Logo', 'your-theme' ); ?>" />
    <input type="button" id="remove_logo_button" class="button" value="<?php _e( 'Remove Logo', 'your-theme' ); ?>" />
    <div id="logo_preview">
        <?php if ( $logo ) : ?>
            <img src="<?php echo esc_url( $logo ); ?>" style="max-width: 200px;">
        <?php endif; ?>
    </div>

    <script>
        jQuery(document).ready(function($) {
            // 미디어 업로더 기능 설정
            $('#upload_logo_button').click(function(e) {
                e.preventDefault();

                var custom_uploader = wp.media({
                    title: '<?php _e( "Select Logo", "your-theme" ); ?>',
                    button: {
                        text: '<?php _e( "Use this logo", "your-theme" ); ?>'
                    },
                    multiple: false // 다중 선택 비활성화
                }).on('select', function() {
                    var attachment = custom_uploader.state().get('selection').first().toJSON();
                    $('#theme_logo').val(attachment.url);
                    $('#logo_preview').html('<img src="' + attachment.url + '" style="max-width: 200px;">');
                }).open();
            });

            // 로고 제거 버튼 클릭 이벤트
            $('#remove_logo_button').click(function(e) {
                e.preventDefault();
                $('#theme_logo').val('');
                $('#logo_preview').html('');
            });
        });
    </script>
    <?php
}