워드프레스 케이보드 최신글 캐러셀 (회전 슬라이더)

워드프레스 케이보드의 특정 게시판의 최신글을 캐러셀(회전 슬라이더)로 표시하는 작업을 부탁받았습니다. 엘리멘터 프로의 Loop Carousel이나 Loop Grid 등의 위젯을 사용하여 최신글 슬라이더를 구현하려고 시도했지만, 이러한 요소들을 사용할 경우 모든 게시판 글들이 표시되었고 썸네일이 지정되어 있지 않으면 썸네일이 나오지 않는 문제가 있었습니다.

엘리멘터 프로에서 제공하는 Loop Carousel 등의 요소를 사용하여 케이보드 최신 게시글들을 표시하는 방법이 가능하다면 가장 쉬울 것 같지만, 그리 쉽지는 않은 것 같습니다. 대신 케이보드의 스킨 파일을 직접 수정하여 클라이언트가 원하는 대로 구현했습니다.

워드프레스 케이보드 최신글 캐러셀 (회전 슬라이더)

케이보드에서 제공하는 숏코드를 사용하여 최신글을 나열하면 다음과 비슷하게 표시됩니다(thumbnail 스킨).

최신 게시글을 다음 그림(최종 결과물)과 같이 슬라이더 형식으로 표시하는 작업을 진행했습니다.

클라이언트의 몇 가지 요구 사항을 반영한 것인데요.

• PC에서 4개의 슬라이드 항목, 모바일에서는 2개 항목 (항목은 변경 가능)
• 작성자 이름은 첫 글자만 표시되도록 하고 나머지는 별표(*)로 처리
• 왼쪽, 오른쪽 화살표는 제거

이외에 다음 사항을 추가로 반영했습니다.

• 썸네일이 지정되어 있지 않은 경우 첫 번째 이미지를 썸네일로 지정할 것
• 게시글에 이미지가 없는 경우에는 이미지 없이 표시할 것
• 자동으로 회전할 것.

엘리멘터에서 제공하는 포스트 위젯을 활용하면 비슷하게 구현이 가능할 것 같았습니다. 예를 들어, Loop Grid나 Loop Carousel 같은 요소들을 사용할 수 있습니다.

이 방법을 이용하는 경우 테마 빌더에서 Loop Item 템플릿을 먼저 만들어야 합니다.

엘리멘터에서 제공하는 Loop 템플릿 중에서 마음에 드는 것을 선택하여 로드한 후에 원하는 대로 수정할 수 있습니다.

엘리멘터의 Loop Carousel에서 Query 소스로 Kboard를 선택하면 케이보드 게시글들이 표시됩니다.

문제는 모든 게시판의 글들이 표시되고 썸네일이 지정되어 있지 않으면 썸네일이 표시가 안 됩니다. Loop Grid도 마찬가지입니다.

특정 게시판 글만 필터링하는 작업은 쉽지 않은 것 같습니다.

Loop Carousel 위젯에서 Query ID에 kboard_board_1을 입력하고 차일드 테마의 함수 파일에 다음 코드를 추가하여 시도해 볼 수 있습니다.

add_action('elementor_pro/posts/query/kboard_board_1', function($query) {
	if ($query->get('post_type') === 'kboard') {
		$query->set('meta_query', [
			[
				'key' => 'board_id',
				'value' => '1',
				'compare' => '='
			]
		]);
	}
});

그리고 kboard_board_content의 게시글을 워드프레스 포스트로 동기화를 해야 특정 게시판 글들만 표시되도록 할 수 있을 것입니다. 예시 코드:

add_action('admin_init', function () {
	if (!is_admin() || !current_user_can('manage_options')) return;

	if (isset($_GET['generate_kboard_posts']) && $_GET['generate_kboard_posts'] == '1') {
		global $wpdb;

		$kboard_table = $wpdb->prefix . 'kboard_board_content';

		// 게시판 ID 1번의 글을 가져옴
		$contents = $wpdb->get_results("SELECT uid, title, content, date FROM $kboard_table WHERE board_id = 1");

		$created = 0;
		foreach ($contents as $row) {
			// 해당 UID가 WordPress에 이미 존재하는지 확인
			$exists = $wpdb->get_var($wpdb->prepare(
				"SELECT ID FROM {$wpdb->prefix}posts WHERE ID = %d AND post_type = 'kboard'",
				$row->uid
			));

			if (!$exists) {
				// WordPress post로 복사
				wp_insert_post([
					'ID'           => (int)$row->uid, // UID와 post ID를 일치시킴
					'post_type'    => 'kboard',
					'post_status'  => 'publish',
					'post_title'   => wp_strip_all_tags($row->title),
					'post_content' => $row->content,
					'post_date'    => date('Y-m-d H:i:s', strtotime($row->date)),
				]);
				$created++;
			}
		}

		add_action('admin_notices', function () use ($created) {
			echo "<div class='notice notice-success is-dismissible'><p>KBoard 게시판 1번 글 <strong>{$created}</strong>개가 WordPress에 등록되었습니다.</p></div>";
		});
	}
});

테스트 사이트에서 이런 방법을 시도해보았지만, 썸네일이 지정되어 있어야 썸네일이 표시되는 등 썸네일 문제가 있었고, 작성자 이름을 고객이 원하는 대로 표시하는 작업이 추가적으로 필요하여 작업이 복잡해지는 것 같아서, 이 방법은 포기하고 케이보드 게시판의 스킨 파일을 수정하는 방법으로 바꾸었습니다.

케이보드에서 KBoard 화이클 비디오 최신글 슬라이더라는 스킨을 유료로 판매하고 있지만, 원하는 대로 커스텀하려면 추가적인 코딩 작업이 필요합니다. (그리고 이 상품의 댓글을 보면 오류가 발생한다고 호소하는 사용자들이 있네요.😢)

👉 케이보드 최신글을 회전 슬라이더(캐러셀) 형식으로 표시하기를 원하시거나 기타 워드프레스 또는 웹호스팅 관련 문제 해결이 필요한 경우 여기에서 서비스(유료)를 의뢰하실 수 있습니다.

참고

https://avada.tistory.com/3619

워드프레스 케이보드 오션 별점 스킨 게시판 커스텀 작업

https://avada.tistory.com/2299

GeneratePress 테마로 워드프레스 블로그 세팅 예시 (How to Customize GP)

https://avada.tistory.com/2897

엘리멘터 무료 버전 vs. 프로 버전 비교