Tutor LMS 대시보드에 커스텀 HTML 추가하기: 강의실에 공지 표시하는 법

워드프레스로 인터넷 강의 사이트를 제작하려는 경우 LearnDash 등 몇 가지 LMS 플러그인을 사용할 수 있습니다. Turtor LMS도 그 중 하나인데요. Tutor LMS의 대시보드(강의실)에 HTML 코드나 PHP 코드를 사용하여 공지를 표시하기를 원할 수 있습니다. 이 글에서는 Tutor LMS 대시보드에 커스텀 HTML 코드를 추가하여 공지 사항을 표시하는 방법에 대하여 살펴보겠습니다.

Tutor LMS 대시보드에 커스텀 HTML 추가하기

워드프레스 LMS 플러그인 중 하나인 Tutor LMS는 온라인 강의 제작과 판매를 쉽게 하도록 돕는 가볍고 강력한 학습 관리 시스템(LMS)입니다.

이 플러그인을 사용하면 코딩 작업 없이 무제한 강좌와 대화형 레슨, 퀴즈, 과제 등 다양한 교육 콘텐츠를 관리할 수 있으며, 우커머스(WooCommerce)와의 통합으로 결제와 구독 기반 판매도 원활하게 지원합니다.

또한, 멀티 강사 지원, 학생 대시보드(강의실), 보고서 기능, AI 기반 도구, 콘텐츠 드립(단계적으로 학습 진행), 인증서 발급, 소셜 로그인 등 교육에 필요한 다양한 기능과 확장성을 제공합니다. 교육 기관, 온라인 강좌 운영자, 기업 교육 등에서 다양한 용도로 쉽게 전문적인 e러닝 사이트를 구축할 수 있습니다.

Tutor LMS는 무료 버전과 유료 버전이 있으면 무료 버전은 현재 10만 개가 넘는 사이트에 설치되어 사용되고 있습니다.

인강 사이트나 콘텐츠 유료화 사이트는 구축하기에 쉽지 않을 수 있지만, 무료 LMS 플러그인을 설치하여 자꾸 만지다 보면 익숙해져서 원하는 기능을 어떤 식으로 구현할지에 대하여 감을 잡을 수도 있을 것입니다. 저는 Tutor LMS Pro로 제작된 인강 사이트 관리에 몇 달 전부터 부분적으로 관여하고 있는데, 계속 접하다 보니 전체적인 메카니즘이 어느 정도 파악이 되고 어떤 식으로 커스텀하면 될 것인지가 조금씩 보이는 것 같습니다.

Tutor LMS 유료 버전은 연간 구독제와 평생 라이선스가 있으면 사이트 개수에 따라 Individual, Business, Agency 플랜이 있습니다.😄

대시보드에 커스텀 HTML로 공지 표시하기

아래 그림과 같이 대시보드에 사용자들에게 꼭 알리고 싶은 공지를 표시하고 싶은 경우가 있습니다.

위와 같이 표시하고 싶은 경우 차일드 테마의 함수 파일에 다음과 같은 코드를 추가할 수 있습니다.

/**
 * file: wp-content/themes/your-theme/functions.php
 *
 * Tutor LMS Dashboard - 진행 중인 코스 위에 커스텀 HTML 블록 추가 (일반화 버전)
 * 필터 'tutor_dashboard_custom_block_html'로 HTML 교체 가능.
 */

add_action('tutor_dashboard/before/wrap', 'add_custom_block_before_enrolled_courses');

function add_custom_block_before_enrolled_courses() {
	// 기본 예시 HTML(필요 시 필터로 교체).
	$default_html = '
		<div class="tutor-dashboard-custom-block-inner" style="display:flex;gap:12px;align-items:center;">
			<strong style="font-size:16px;">📌 안내</strong>
			<span>이 영역에 공지/배너/버튼 등 원하는 HTML을 넣을 수 있어요.</span>
			<a href="#" class="tutor-dashboard-custom-cta" style="margin-left:auto;padding:8px 12px;border-radius:6px;background:#111;color:#fff;text-decoration:none;">자세히</a>
		</div>
	';
	$custom_html = apply_filters('tutor_dashboard_custom_block_html', $default_html);

	?>
	<div id="tutor-custom-block-wrapper" class="tutor-dashboard-custom-block" style="display:none;margin:20px 0 30px;padding:20px;background:#f9f9f9;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,0.1);">
		<h3 style="margin:0 0 12px;font-size:20px;color:#333;">📚 대시보드 공지</h3>
		<div id="tutor-custom-block-container" style="max-width:100%;"></div>

		<template id="tutor-custom-block-template">
			<?php
			// 왜: 대시보드에 출력될 HTML의 XSS 최소화를 위해 kses로 허용 태그만 통과.
			echo wp_kses_post( $custom_html );
			?>
		</template>
	</div>

	<script>
	document.addEventListener('DOMContentLoaded', function() {
		var enrolledCoursesSection = document.querySelector('.tutor-frontend-dashboard-course-progress');
		var customBlockWrapper = document.getElementById('tutor-custom-block-wrapper');
		var dashboardContent = document.querySelector('.tutor-dashboard-content-inner');

		if (!customBlockWrapper) return;

		// 왜: 목표 섹션이 있으면 바로 위에 배치하여 가시성 극대화
		if (enrolledCoursesSection && enrolledCoursesSection.parentNode) {
			enrolledCoursesSection.parentNode.insertBefore(customBlockWrapper, enrolledCoursesSection);
		} else if (dashboardContent) {
			dashboardContent.insertBefore(customBlockWrapper, dashboardContent.firstChild);
		}

		var container = document.getElementById('tutor-custom-block-container');
		var tpl = document.getElementById('tutor-custom-block-template');

		// 왜: 템플릿 클론으로 안전하게 초기 콘텐츠 주입
		if (container && tpl && 'content' in document.createElement('template')) {
			container.appendChild(tpl.content.cloneNode(true));
		}

		customBlockWrapper.style.display = 'block';
	});
	</script>
	<?php
}

/**
 * 선택: 테마나 플러그인에서 아래처럼 커스터마이즈 가능.
 *
 * add_filter('tutor_dashboard_custom_block_html', function($html){
 * 	return '<div>여기에 내 맞춤 HTML</div>';
 * });
 */

상기 코드를 응용하여 유튜브 영상 등 다양한 요소를 표시하는 것도 가능합니다.

상기 코드를 추가하려면 FTP에 접속할 수 있어야 합니다. FTP 접속 방법에 대하여 모르는 경우 이용 중인 웹호스팅 업체에 문의하여 안내를 받을 수 있습니다.

참고

• 워드프레스에서 멤버십을 정기 결제 방식으로 판매하는 방법 (콘텐츠 유료화 판매)
• 워드프레스 케이보드 상품 후기 게시판 구현하기
• 우커머스 간편 주문 페이지를 구현하는 YITH Easy Order Page for WooCommerce 플러그인