Tutor LMSダッシュボードにカスタムHTMLを追加する：教室に通知を表示する方法

3

WordPressでインターネットレッスンサイトを作成したい場合は、LearnDashなどのいくつかのLMSプラグインを使用できます。 Turtor LMSもその一つです。 Tutor LMSのダッシュボード（教室）にHTMLコードまたはPHPコードを使用して通知を表示したい場合があります。この記事では、Tutor LMSダッシュボードにカスタムHTMLコードを追加してお知らせを表示する方法について説明します。

Tutor LMSダッシュボードにカスタムHTMLを追加する

WordPress LMSプラグインの1つであるTutor LMSは、オンライン講義の作成と販売を容易にするための軽量で強力な学習管理システム（LMS）です。

このプラグインを使用すると、コーディング作業なしで無制限のコースやインタラクティブなレッスン、クイズ、課題など、さまざまなトレーニングコンテンツを管理できます。 WooCommerce（WooCommerce）との統合により、決済と購読ベースの販売もスムーズにサポートします。

また、マルチインストラクターサポート、学生ダッシュボード（講義室）、レポート機能、AIベースのツール、コンテンツドリップ（段階的に学習進行）、証明書発行、ソーシャルログインなど、教育に必要なさまざまな機能とスケーラビリティを提供します。教育機関、オンラインコースオペレーター、企業教育など、さまざまな用途に簡単にプロのeラーニングサイトを構築できます。

Tutor LMSは無料版と有料版があれば、無料版は現在10万個を超えるサイトにインストールされ使用されています。

WordPress Tutor LMSプラグイン

人工サイトやコンテンツ有料化サイトは構築するのは容易ではないかもしれませんが、無料のLMSプラグインをインストールしていきなり触れてみると、慣れ親しんで希望する機能をどのように実装するかについて感覚をつかむこともできます。私はTutor LMS Proで製作された人工サイト管理に数ヶ月前から部分的に関わっていますが、ずっと触れてみると全体的なメカニズムがどの程度把握になり、どのようにカスタマイズすればよいかが少しずつ見えるようです。

Tutor LMS 有料版は、年間サブスクリプションとライフライセンスがあれば、サイトの数に応じてIndividual、Business、Agencyプランがあります。😄

Tutor LMSプラン

ダッシュボードにカスタムHTMLとして通知を表示する

下図のようにダッシュボードにユーザーに必ず知らせたいお知らせを表示したい場合があります。

Tutor LMSダッシュボードにカスタム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>';
 * });
 */

上記のコードを応用してYouTubeの映像など様々な要素を表示することも可能です。

上記のコードを追加するには FTPにアクセスできる必要があります。 FTP接続方法について知らない場合は、ご利用のWebホスティング会社にお問い合わせください。

参照

3のコメント

コメントを残す

  1. Tutor LMSのカスタムHTMLの追加方法が気になりましたが、この記事で具体的な方法がわかります。特にオンライン講義サイトを運営する立場で、お知らせを効率的に伝える方法を学ぶことが本当に役に立つと思います。

    返信

  2. Tutor LMSで人講サイトを運営する場合は、カスタムHTMLを追加して教室にお知らせを表示できます。

    プラグインの多様な機能を活用すれば、学生により良い学習体験を提供できるようになりますが、特にAIベースのツールやマルチインストラクターサポート機能をどのように活用できるのだろうか？オンライン講義サイトを構築する上で最も重要なポイントが何なのか知りたいです。

    返信