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

참고: 인기 테마인 BE 테마(33%)The 7(35%) 할인 행사를 진행하고 있습니다.
참고

워드프레스 관리자 페이지에 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 적용하기



기부를 통해 이 블로그를 후원하실 수 있습니다.
워드프레스 설치/제작/문제해결이 필요한 경우 서비스(유료)를 요청해주세요.