Word Cracker의 잡다한 정보 모음

워드프레스 대시보드에 CSS 스타일 적용하기

Comments 10

워드프레스 관리자 페이지에 CSS 적용하기

워드프레스 관리자 페이지(대시보드)에 CSS 스타일을 적용하려면 다음 PHP 코드를 WordPress 함수 파일에 추가하도록 합니다.

add_action('admin_head', 'my_custom_fonts');
function my_custom_fonts() {
echo '<style>
body, td, textarea, input, select {
// 원하는 코드
}
</style>';
}
// Source: css-tricks

CSS 스타일이 잘 적용되지 않으면 !important를 추가하도록 합니다.

♠ 참고로 워드프레스 대시보드의 이질적인 레이아웃이 마음에 걸리는 경우 워드프레스 대시보드를 Windows 바탕화면처럼 바꾸어주는 WP OS Desktop Backend라는 플러그인을 고려해볼 수 있을 것 같습니다.

응용하기

“알림판” 글자 앞에 글자나 이미지 추가하기

예를 들어, 관리자 페이지에 로그인하면 “알림판”이 표시됩니다. “알림판” 글자 대신에 사용자가 원하는 이미지를 삽입하거나 “알림판” 글자 앞에 블로그 이름을 추가하거나 할 수 있습니다.

예를 들어, 다음과 같은 코드를 이용할 수 있습니다.

.wp-admin.index-php #wpbody-content > .wrap h1::before {
content: "WordCracker ";
font-size: 25px;
color: red;
font-weight: bold;
}

그러면 그림과 같이 “알림판” 앞에 원하는 문구가 추가됩니다.

워드프레스 관리자 페이지에 CSS 적용하기

CSS 코드를 조금 변형하면 다음 스크린샷과 같이 로고나 이미지도 추가할 수 있습니다.

워드프레스 관리자 페이지에 CSS 적용하기

Related Posts

Comments

이 글의 링크 복사