投稿画面にAmazonアソシエイトの商品一覧を表示する

<?php
/********************************

	カスタムボックスの設置             
	
********************************/

function add_custom_box(){
	add_meta_box( 
		'custom-box-tool',
		'TOOL',
		'custom_box_tool',
		array('page','post','fr_post'),
		'side',
		'high'
	);
}

add_action( 'add_meta_boxes', 'add_custom_box',1 );

function custom_box_tool($post){
	
	global $wpdb;
	?>
	
	<dl id="btList">
		<dt>データ参照</dt>
		<dd><button id="amzBt" type="button" onClick="showWindow('amzList')">Amazon商品一覧</button></dd>
	</dl>
	
	<div id="amzList" class="floatWindow">
		<label class="closeBt" onClick="showWindow('amzList')">閉じる</label>
		<table>
			<tr>
				<th>COPY</th>
				<th>DP</th>
				<th>BRAND</th>
				<th>TITLE</th>
			</tr>
			<?php
			$sql = "SELECT * FROM ".$wpdb->prefix .'AFF_AMZ_T';
			$results = $wpdb->get_results( $sql );
			
			?>
			<?php foreach($results as $r):?>
			
			<tr class="<?php echo $errCalss ?>">

				<td style="width:120px; text-align:center;">
					<button type="button" onClick="copyClip(this)" value="
該当する商品がみつかりません
">ショートコード</button>
				</td>
				<td><?php echo $r->DP_C; ?></td>
				<td><?php echo $r->BRAND_C; ?></td>
				<td><?php echo $r->TITLE_C; ?></td>

			</tr>
			<?php endforeach; ?>
		</table>
	</div>

	<script>
		function copyClip(obj){
			navigator.clipboard.writeText(obj.value);
		};
		function showWindow(id){
			document.getElementById(id).classList.toggle('show');

		};
	</script>
	

@media screen and ( min-width:1280px) {
	#custom-box-tool{

		position:fixed;
		top:20%;
		left:20px;
		border:2px solid #777;
		background-color:rgba(255,255,255,0.6);
	}
	#custom-box-tool .inside{
		padding:0.25rem;
	}
}
#custom-box-tool dl{
	margin-top:0;
}
#custom-box-tool dt{
	background-color:#777;
	color:#fff;
	font-weight:bold;
	margin-bottom:0.5rem;
	padding:0.5rem;
}
#custom-box-tool dd{
	padding:0;
	margin:0.5rem;
}

.floatWindow{
	display:none;
	position:fixed;
	width:900px;
	height:600px;
	overflow:auto;
	inset: 0;
	margin: auto;
    background-color: #fff;
    border: 2px solid #777;
    padding: 0.5rem;
	box-shadow:0 0 1rem rgba(0,0,0,0.7);
}


.show{
	display:block !important;
}

.floatWindow table{
	margin-top:1.5rem;
	width:100%;
}
.floatWindow tr:nth-child(2n){
	background-color:#ddd;
}
.floatWindow tr:nth-child(2n-1){
	background-color:#f0f0f0;
}
.floatWindow td{
	padding:0.5rem;
}
.floatWindow th{
	background-color:#777;
	color:#fff;
}
.closeBt{
	position:absolute;
	top:0.2rem;
	right:0.2rem;
	padding:0.3rem 0.5rem;
	background-color:#e00;
	color:#fff;
	border: 1px solid #777;
	
}

function admin_custom_css() {
    echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo("template_directory").'/css/admin.css">';
}
add_action('admin_head', 'admin_custom_css');