wordpressの子テーマでCSSや画像のパスの指定方法

Wordpressのtwentytwentyoneテーマで、画像やCSSファイルを子テーマのフォルダに入れましたが
下記のようにパスを指定してもCSSも画像も適用されません。

header.php側でCSSを指定しindex.phpで画像を指定したのですが
パスの指定はどうしたらいいでしょうか？

wordpressのtwentytwentyoneテーマのバージョンはバージョン: 5.7.2

「ためした事」
CSSの場合

「テスト１」


<!doctype html>
<html <?php language_attributes(); ?> <?php twentytwentyone_the_html_classes(); ?>>
<head>
	<link rel="stylesheet" href="wordpress/wp-content/themes/twentytwentyone-child/css/common.css">

	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>

「テスト２」

<!doctype html>
<html <?php language_attributes(); ?> <?php twentytwentyone_the_html_classes(); ?>>
<head>
	<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/common.css">

	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>

画像の場合


<!doctype html>
<section id="box"><a href="index.php"></a></section>

#box {
	margin-top:20px;
	display: flex;
    flex-wrap: wrap;
	justify-content: center;
    align-items: center;
}

「テスト１」

#box  a {
	background-image: url("wordpress/wp-content/themes/twentytwentyone-child/img/test.png");
	background-repeat: no-repeat;
	background-position: center;
	display: block;
	background-size: contain;
	width:200px;
	height:100px;
}

「テスト２」

#box  a {
	background-image: url("<?php bloginfo('template_directory'); ?>/img/test.png");
	background-repeat: no-repeat;
	background-position: center;
	display: block;
	background-size: contain;
	width:200px;
	height:100px;
}