Hướng dẫn tạo shortcode thống kê Covid19 không cần dùng Plugin

Thủ thuật WordPress
1

Xin chào các bạn, mình là Ad CỌP,

Hôm nay mình hướng dẫn các bạn tạo shortcode thống kê Covid không cần dùng Plugin nhé.

Bước 1: Chèn code sau vào functions.php của theme

function covid19_data( $atts ) {
	$country  =  ! isset( $atts['country'] ) || $atts['country'] === 'all' ? '' : $atts['country'];
	$api_call = 'https://corona.lmao.ninja/countries/'.$country;
	$data 		= wp_remote_get( $api_call );
	$code 		= wp_remote_retrieve_response_code( $data );
	$body 		= wp_remote_retrieve_body( $data );
	$result 	= json_decode( $body );
	ob_start();
	echo '<table class="covid19-data-entries">';
        echo '<thead><tr>';
    	echo '<td>Country</td>';
    	echo '<td>Cases</td>'; 
    	echo '<td>Today Cases</td>'; 
    	echo '<td>Deaths</td>'; 
    	echo '<td>Today Deaths</td>';
	echo '<td>Recovered</td>'; 
	echo '<td>Active</td>'; 
	echo '<td>Critical</td>'; 
	echo '<td>Cases Per One Million</td>'; 
	echo '<td>Deaths Per One Million</td>';
	echo '</tr></thead>';
	if ( ! empty( $country ) ) {
    		$result = array( $result );
    	}
	    foreach( $result as $res ) {

		echo '<tbody><tr>';
		echo '<td>'. $res->country . '</td>';
		echo '<td>'. $res->cases . '</td>';
		echo '<td>'. $res->todayCases . '</td>';
		echo '<td>'. $res->deaths . '</td>';
		echo '<td>'. $res->todayDeaths . '</td>'; 
		echo '<td>'. $res->recovered . '</td>'; 
		echo '<td>'. $res->active . '</td>'; 
		echo '<td>'. $res->critical . '</td>'; 
		echo '<td>'. $res->casesPerOneMillion . '</td>'; 
		echo '<td>'. $res->deathsPerOneMillion . '</td>'; 
		echo '</tr></tbody>';
	    }
	    echo '</table>';
	   return ob_get_clean();
}
add_shortcode( 'covid19_data', 'covid19_data');

Bước 2: Chèn css vào style.css của theme cho thêm phần sinh động

table.covid19-data-entries {
border: 1px solid #1C6EA4;
background-color: #EEEEEE;
width: 100%;
text-align: left;
border-collapse: collapse;
}
table.covid19-data-entries td, table.covid19-data-entries th {
border: 1px solid #AAAAAA;
padding: 3px 2px;
}
table.covid19-data-entries tbody td {
font-size: 13px;
}
table.covid19-data-entries tr:nth-child(even) {
background: #D0E4F5;
}
table.covid19-data-entries thead {
background: #1C6EA4;
background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
border-bottom: 2px solid #444444;
}
table.covid19-data-entries thead th {
font-size: 15px;
font-weight: bold;
color: #FFFFFF;
border-left: 2px solid #D0E4F5;
}
table.covid19-data-entries thead th:first-child {
border-left: none;
}

Bước 3: Cuối cùng là phần hiển thị shortcode ở bất kỳ vị trí nào tuỳ thích

[covid19_data country="all"]

Điều kiện:

  • all : tất cả các quốc gia
  • Vietnam : chỉ 1 quốc gia

Chúc website của các bạn có thêm nhiều lượng truy cập khi chèn thêm thống kê Covid19

Hình minh hoạ:

image
image1014×701 66 KB

[right]Nguồn tham khảo: sanjeebaryal.com.np[/right]

1 Like