wordpress - Code

PageSpeed Insights의 성능 테스트 때문에 js css 파일 연결 방법을 이리저리 해보았다.

function.php에도 넣어보고 직접도 넣어보고 한 결과 직접 넣고 preload나 async를 거는 게 좋았다.

js css 파일 연결 – 직접 연결

css – style 파일 연결

<link rel="stylesheet" href="<?php echo get_template_directory_uri() . '/css/reset.min.css'; ?>"/>
<link rel="stylesheet" href="<?php echo get_template_directory_uri() . '/css/common.min.css'; ?>"/>

<?php if (is_front_page()): ?>
    <link rel="preload" as="style" href="<?php echo get_template_directory_uri() . '/css/index.min.css'; ?>" onload="this.rel='stylesheet'" />
<?php else: ?>
    <link rel="preload" as="style" href="<?php echo get_template_directory_uri() . '/css/sub.min.css'; ?>" onload="this.rel='stylesheet'" />
<?php endif; ?>

js – script 파일 연결

<script rel="async" src="<?php echo get_template_directory_uri() . '/js/common.min.js'; ?>"></script>

기타 function.php에서 연결 방법

function custom_style_sheet() {
	wp_enqueue_style( 'css-reset', get_stylesheet_directory_uri() . '/css/reset.css' );
}
add_action('wp_enqueue_scripts', 'custom_style_sheet');



function my_enqueue_scripts() {
	wp_enqueue_script( 'common-script', get_stylesheet_directory_uri() . '/js/common.js');
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );