워드프레스 LMS 인터넷 강의 사이트 커스텀 작업

워드프레스로 구축한 인터넷 강의 사이트에 간단한 기능을 추가하는 작업을 맡았습니다. 사이트를 살펴보니 테마는 자체적으로 제작한 테마를 사용했고 대부분의 기능을 Oxygen 빌더와 LMS 관련 애드온으로 제작되었네요. Oxygen 페이지 빌더는 처음 접했는데, 엘리멘터에 비해 사용자 자체는 불편한 것처럼 느껴졌습니다.

워드프레스 LMS 인터넷 강의 사이트 커스텀 작업

Oxygen 페이지 빌더는 비교적 덜 알려져 있는 워드프레스 플러그인입니다. 워드프레스 플러그인 설치 페이지에서 Oxygen Builder를 검색해도 검색이 안 되네요. 아마 무료 버전은 없고 유료 버전만 제공되는 것 같습니다.

Oxygen 빌더는 Basic, WooCo, Ultimate 등 3가지 요금제가 있고, 모두 한 번만 지불하면 평생 사용할 수 있는 것으로 보입니다.

비용적인 측면에서는 확실히 엘리멘터 프로보다 경제적이네요.

Oxygen 빌더의 장단점

장점

• 높은 유연성과 사용자 정의 가능성을 제공하며 Webflow와 유사한 사용자 경험 제공
• 로딩 시간이 빠르고 파일 크기가 작아 성능이 우수함
• CSS와 JavaScript에 능숙한 고급 개발자들에게 적합한 도구
• 동적 콘텐츠 처리에 강점이 있으며, 커스텀 포스트 타입과 리피터 기능을 잘 지원

단점

기술적 문제점

• 리치 텍스트(Rich Text) 필드에서 숏코드를 지원하지 않음
• 구조 패널에서 드래그 앤 드롭 기능이 불편함
• CSS 재생성에 많은 시간이 소요되며 빌더 자체의 로딩이 느림
• 서버 이전이나 스테이징 시 여러 문제가 발생

운영상 우려사항

• Breakdance라는 새로운 페이지 빌더 출시로 인해 Oxygen이 방치될 수 있다는 우려가 있음
• 평생 라이선스 가격 정책의 지속 가능성 문제로 구독 기반 모델로 전환 예정

Tutor LMS 플러그인

해당 사이트에는 Tutor LMS라는 LMS(학습 관리 시스템) 플러그인과 Oxygen용 Tutor LMS 플러그인이 설치되어 있었습니다.

Tutor LMS Pro의 경우 가격이 조금 부담스러운 수준이네요.

워드프레스 사이트에서 Tutor LMS와 우커머스 등을 사용하여 인터넷 강의를 판매하도록 제작되었습니다. 살펴보니 강의(Course)를 만들고 상품을 연결하는 판매하는 형식이었습니다. Oxygen 빌더로 상품 페이지를 템플릿을 사용하여 커스텀할 수 있었고, 강의 페이지의 경우 개별 강의 페이지에 대하여 템플릿을 만들도록 구성되어 있었습니다.

Tutor LMS를 엘리멘터에서도 지원하도록 애드온이 제공됩니다.

자세한 정보는 Tutor LMS 플러그인 사이트를 참고하세요.

💡Tutor LMS 플러그인에 대한 자세한 정보

코스(Courses) 페이지에 댓글을 표시하도록 커스텀하기

강의 페이지에 기대평을 적을 수 있도록 댓글을 활성화하는 작업을 맡게 되었습니다. Oxygen 빌더로 Comment Form과 Comments List 요소를 적절한 곳에 배치할 수 있도록 기능이 지원되었습니다.

그러나 상품 페이지 템플릿에 댓글 폼과 댓글 리스트 요소를 배치하면 댓글이 제대로 작동했지만, 코스(Course) 템플릿에 댓글 요소들을 배치하여도 작동하지 않았습니다.

다음과 같은 파일을 만들어서 Courses의 포스트 타입 이름을 먼저 확인해보았습니다.

<?php
// WordPress 환경 로드
require_once('wp-load.php');

header('Content-Type: text/html; charset=utf-8');

echo "<h2>Tutor LMS 포스트 타입 확인</h2>";

if ( function_exists('tutor') ) {
    echo "<p><strong>포스트 타입:</strong> " . tutor()->course_post_type . "</p>";
} else {
    echo "<p style='color: red;'><strong>⚠ TutorLMS 플러그인이 활성화되지 않았거나, tutor() 함수가 정의되지 않았습니다.</strong></p>";
}

// 현재 등록된 모든 포스트 타입 출력
echo "<h3>WordPress 등록된 모든 포스트 타입</h3>";
$post_types = get_post_types();
echo "<pre>";
print_r($post_types);
echo "</pre>";
?>

코스 페이지의 포스트 타입은 예상했던 대로 courses였습니다.

Tutor LMS 포스트 타입 확인
포스트 타입: courses

WordPress 등록된 모든 포스트 타입
Array
(
    [post] => post
    [page] => page
    [attachment] => attachment
    [revision] => revision
    [nav_menu_item] => nav_menu_item
    [custom_css] => custom_css
    [customize_changeset] => customize_changeset
    [oembed_cache] => oembed_cache
    [user_request] => user_request
    [wp_block] => wp_block
    [wp_template] => wp_template
    [wp_template_part] => wp_template_part
    [wp_global_styles] => wp_global_styles
    [wp_navigation] => wp_navigation
    [wp_font_family] => wp_font_family
    [wp_font_face] => wp_font_face
    [wpcode] => wpcode
    [wpmem_product] => wpmem_product
    [acf-taxonomy] => acf-taxonomy
    [acf-post-type] => acf-post-type
    [acf-ui-options-page] => acf-ui-options-page
    [main_horiz_ads] => main_horiz_ads
    [teacher] => teacher
    [youtube-ads-landing] => youtube-ads-landing
    [youtube-ads-apply] => youtube-ads-apply
    [youtube-ads-complete] => youtube-ads-complete
    [landing_page] => landing_page
    [main_slide] => main_slide
    [apply-page] => apply-page
    [complete-page] => complete-page
    [event] => event
    [promote] => promote
    [hero_content_slide] => hero_content_slide
    [acf-field-group] => acf-field-group
    [acf-field] => acf-field
    [kboard] => kboard
    [product] => product
    [product_variation] => product_variation
    [shop_order] => shop_order
    [shop_order_refund] => shop_order_refund
    [shop_coupon] => shop_coupon
    [shop_order_placehold] => shop_order_placehold
    [cosmosfarm_product] => cosmosfarm_product
    [oxy_user_library] => oxy_user_library
    [ct_template] => ct_template
    [courses] => courses
    [lesson] => lesson
    [tutor_quiz] => tutor_quiz
    [topics] => topics
    [tutor_assignments] => tutor_assignments
    [tutor_enrolled] => tutor_enrolled
    [itsec-dashboard] => itsec-dashboard
    [itsec-dash-card] => itsec-dash-card
    [patterns_ai_data] => patterns_ai_data
    [cc_restriction] => cc_restriction
    [rm_content_editor] => rm_content_editor
    [popupbuilder] => popupbuilder
)

다음과 같은 코드를 테마 함수 파일에 추가하여 코스 포스트 타입에 대하여 댓글을 활성화했습니다.

// "courses" 포스트 타입에 댓글 기능 활성화
function enable_comments_for_courses() {
    add_post_type_support( 'courses', 'comments' ); // 'courses' 포스트 타입에 댓글 지원 추가
}
add_action( 'init', 'enable_comments_for_courses' );

그리고 wpDiscuz라는 플러그인을 설치하여 활성화하니 이 플러그인에서 제공하는 댓글 폼과 리스트가 표시되었습니다.

마치며

Oxygen 빌더는 다소 생소하지만 평생 라이선스로 제공되기 때문에 엘리멘터에 비해 비용적인 측면에서는 저렴한 편입니다. 유료 테마 중에서 Divi 테마가 평생 라이선스로 제공되고 설치 가능한 사이트 수에 제한이 없기 때문에 웹 에이전시나 웹 개발자, 디자이너 등에 의해 많이 사용되고 있습니다.

LMS 사이트를 구축하는 작업은 쉽지 않을 수 있습니다. Oxygen 빌더 + Tutor LMS 조합으로 시도하는 것도 고려해 볼 수 있을 것 같습니다.

참고

워드프레스로 쉽게 랜딩 페이지 만들기 (feat. 엘리멘터, GeneratePress, Divi) - 워드프레스 정보꾸러미

https://avada.tistory.com/3046

해외웹호스팅: 클라우드웨이즈 vs. 블루호스트 vs. 카페24 비교 (Cloudways vs. Bluehost vs. Cafe24)