KBoard와 myCRED 플러그인을 연동하여 잘사용하고있습니다

포인트를 아래의 이미지와 같이 표시하려고 찾아본결과 원래 지원하고있는 숏코드가 있어서 적용시키려다 문제가 발생합니다

일단 http://codex.mycred.me/shortcodes/mycred_rank_progress/ 이글을 참고하여 숏코드를 생성하려고하지만 제 테마는 "Visual Composer(비주얼 컴퓨저)"를 사용하고있지않기 때문에 다른 방법을 찾아봤습니다

찾아본결과 비주얼 컴퓨저를 사용하지 않아도 https://mycred.me/code-snippets/mycred-custom-shortcode-rank-progress/ 이글을 참고하면 사용가능하다고 나와있는데

테마의 functions.php파일에 아래 코드를 추가하였습니다

<?php

// Get user's rank progress
function get_mycred_users_rank_progress( $user_id, $show_rank ) {
	global $wpdb;

	if ( ! function_exists( 'mycred' ) ) return '';
	
	// Change rank data to displayed user when on a user's profile
	if ( function_exists( 'bp_is_user' ) && bp_is_user() && empty( $user_id ) ) {
		$user_id = bp_displayed_user_id();
	}

	// Load myCRED
	$mycred = mycred();
	
	// Check if user is excluded
	#if ( $mycred->core->exclude_user( $user_id ) ) return ''; //문제가 발생한다하여 주석처리

	// Ranks are based on a total
	if ( $mycred->rank['base'] == 'total' )
		$key = $mycred->get_cred_id() . '_total';
			
	// Ranks are based on current balance
	else
		$key = $mycred->get_cred_id();

	// Get Balance
	$users_balance = $mycred->get_users_cred( $user_id, $key );
   
	// Rank Progress
   
	// Get the users current rank post ID
	$users_rank = (int) mycred_get_users_rank( $user_id, 'ID' ); //문제가 발생한다하여 ID를 type_id로 변경하였습니다
	
	// Get the name of the users current rank
	$users_rank_name = get_the_title( $users_rank );
   
	// Get the ranks set max
	$max = get_post_meta( $users_rank, 'mycred_rank_max', true );
	
	$tabl_name = $wpdb->prefix . 'postmeta';
	
	// Get the users next rank post ID
	$next_ranks = $wpdb->get_results( $wpdb->prepare( "SELECT post_id FROM {$tabl_name} WHERE meta_key = %s AND meta_value > %d ORDER BY meta_value * 1 LIMIT 1;", 'mycred_rank_min', $max ) );

    foreach( $next_ranks as $next_rank ) {

        $next_rank = $next_rank->post_id;
    }
	
	// Get the name of the users next rank
	$next_rank_name = get_the_title( $next_rank );
	
	// Get the ranks set min
	$next_rank_min = get_post_meta( $next_rank, 'mycred_rank_min', true );
   
	// Calculate progress. We need a percentage with 1 decimal
	$progress = number_format( ( ( $users_balance / $max ) * 100 ), 0 );

	// Display rank progress bar
	echo '<div class="mycred-rank-progress">';	
		echo '<h3 class="rank-progress-label" style="font-weight:bold;">Rank Progress ('. $progress .'%)</h3>';
		echo '<progress max="'. $max .'" value="'. $users_balance .'" class="rank-progress-bar">';
		echo '</progress>';	
		if( $show_rank == 'yes' ){
			echo '<span class="current-rank" style="float:left;padding-top:1%;font-weight:bold;">'. $users_rank_name .'</span>';	
			echo '<span class="next-rank" style="float:right;padding-top:1%;font-weight:bold;">'. $next_rank_name .'</span>';
			echo '<span class="points-progress" style="width:100%;float:left;margin-top: -4.5%;padding-top:1%;font-weight:bold;text-align:center;">'. $users_balance .' of '. $next_rank_min .'</span>';
		}
	echo '</div>';	
}

/**
 * myCRED Shortcode: mycred_users_rank_progress
 * @since 1.0
 * @version 1.0
 */
function mycred_users_rank_progress( $atts ){
	extract( shortcode_atts( array(
		'user_id' => get_current_user_id(),
		'show_rank' => 'no'
	), $atts ) );

	ob_start();
	
	get_mycred_users_rank_progress( $user_id, $show_rank );

	$output = ob_get_contents();
	ob_end_clean();

	return $output;

}
add_shortcode( 'mycred_users_rank_progress', 'mycred_users_rank_progress' );

?>

그리고 테마의 css파일에 아래의 코드를 추가하였습니다

.mycred-rank-progress{}
.mycred-rank-progress h3.rank-progress-label{}
.mycred-rank-progress span.current-rank{}
.mycred-rank-progress span.next-rank{}
.mycred-rank-progress span.points-progress{}

/* HTML 5 Progress Bar */
progress[value]  {
  /* Reset the default appearance */
  -webkit-appearance: none; -moz-appearance: none; appearance: none;

  /* Get rid of default border in Firefox. */
  border: none;

  /* Dimensions */
  width: 100%; height: 2em;

  /* For IE10 */
  color: red; 
}

/* HTML 5 Progress Bar Container */
progress[value]::-webkit-progress-bar {
  background-color: #eee;
}

/* HTML 5 Progress Bar Value */
progress[value]::-webkit-progress-value {
	background-color: red;
}

functions.php 파일에 추가될 내용은 해당 게시물에 댓글에 맞게 주석처리하거나 변경하였습니다

페이지에 표시는되는데 https://www.doogis.com/testpoint 페이지와 같이 이상하게 표시가됩니다

이것을 맨처음 스크린샷처럼 막대모양의 표시가 제대로 이루어졌으면 좋겠는데 전혀 연동이 안되고있는거같습니다