헤더 배경색을 랜덤하게 바꾸는 방법 (색 번호 표시)

사이트의 로고가 표시되는 헤더 뒷 배경색을 페이지 로드 시 랜덤하게 바꾸고, 색 번호도 노출하고 싶은데 방법이 있을까요?

jQuery(워드프레스에 이미 포함)를 이용하면 색의 번호는 #xxxxxx 또는 rgb값으로 랜덤하게 얻을 수 있는 방법이 있습니다. 페이지를 로딩하는 순간 랜덤한 색을 얻은 다음, 바꾸고자 하는 헤더의 스타일을 jQuery로 다시 변경하는 방법을 적용하면 이 문제는 해결이 됩니다.

<?php 
/**
 * Add scripts, styles to wp_footer()
 */
function custom_oks_enqueue() {
    if (is_single(130)) { ?> <script type="text/javascript">(function ($) {
            var randomColor = Math.floor(Math.random() * 16777215).toString(16);
            // var random_colour =  'rgb('+ (Math.floor(Math.random() * 256)) + ','+ (Math.floor(Math.random() * 256)) + ','+ (Math.floor(Math.random() * 256)) + ')';
            // console.log(random_colour);
            $('.entry-header').css("background-color", "#" + randomColor);
            $('.entry-title').after('<span>color: #' + randomColor + '</span>');
        })(jQuery);
        </script><?php        
    }    
}
add_action( 'wp_footer', 'custom_oks_enqueue', 99 );

이 글의 포스트 아이디는 130이고 이 포스트 글에만 스크립트가 적용되도록 했습니다. 랜덤 색 번호는 6자리 색상 코드 또는 RGB 색 지정 방법 두 가지로 얻을 수 있습니다. 예제에서는 현재 제목이 표시되는 본문 헤더의 색 배경을 변경하고, 타이틀 다음에 색 번호가 표시 되도록 했습니다.

답글 남기기 응답 취소