워드프레스 관리자 글 목록에는 제목이나 날짜 등 기본적인 컬럼이 있고, 설치한 플러그인이 지원하는 컬럼을 추가할 수도 있습니다. 대표적인 것으로 페이지뷰를 카운트하는 것 등이 있습니다. 하지만 컬럼폭이 너무 넓어 보기 좋지 않은 경우가 많은데요. 이 글에서는 워드프레스 관리자 글 목록의 컬럼폭을 변경하는 방법에 대해 알아보겠습니다.
워드프레스 관리자 글 목록의 컬럼폭을 변경하는 방법
여러분 중에 저처럼 워드프레스 관리자 글 목록의 컬럼 폭이 눈에 거슬리신 적이 있으신가요? 아래는 저의 관리자 글 목록 화면인데요. ‘Views’ 컬럼은 보여주는 정보에 비해 컬럼의 폭이 너무 넓어 전체적인 균형을 흐트려 놓고 있습니다. 사실 이런 것이 별로 신경 쓰이지 않는 분들에게는 그냥 둬도 아무 상관이 없지만, 저와 같이 예민한 사람들에게는 여간 신경 쓰이는 것이 아닙니다. 그래서 제가 원하는 폭 넓이로 바꾸었고, 이 글에서 그 과정을 자세히 알아보겠습니다.
오늘의 목표는 위의 화면에서 ‘카테고리’, ‘날짜’, ‘Views’ 컬럼의 폭을 조정하는 것입니다. 그러기 위해서 먼저 각 컬럼의 ID나 CLASS명을 알아내야 합니다.
워드프레스 관리자 글 목록 화면에서 ‘F12’ 키를 눌러 개발자 도구로 들어갑니다.
아래와 같이 개발자 도구에서 ①번을 클릭한 후, ID를 알아내야 할 컬럼 위에 마우스를 가져다 놓으면 오른쪽에 회색으로 컬러링 되어 있는 부분에서 ③번처럼 ID를 확인할 수 있습니다. 여기서 ‘Views’ 컬럼의 ID가 ‘views’라는 것을 확인하였습니다. 마찬가지로 확인해 보면 ‘날짜’ 컬럼의 ID는 ‘date’, ‘카테고리’ 컬럼의 ID는 ‘categories’라는 것을 확인할 수 있습니다.
위에서 확인한 ID를 ‘CSS 추가’에 추가한 후 width를 설정하면 쉽게 변경할 수 있을 거라 생각했지만, 실제 적용해 보니 안 되더군요. 너무 쉽게 생각했나 봅니다. 그래서 자바스크립트를 활용해서 동적으로 변경하는 방법을 적용하였습니다. 아래는 제가 적용한 자바스크립트 코드입니다.
function custom_admin_script() {
echo '<script>
jQuery(document).ready(function($) {
$("#views").css("width", "120px");
});
jQuery(document).ready(function($) {
$("#categories").css("width", "180px");
});
jQuery(document).ready(function($) {
$("#date").css("width", "190px");
});
</script>';
}
add_action('admin_footer', 'custom_admin_script');
위의 코드를 워드프레스 관리자 화면에서 ‘외모’ → ‘테마 파일 편집기’ → ‘functions.php’를 순서대로 클릭하여 파일을 열고 아래 화면과 같이 파일의 맨 아래에 붙여넣기 한 후, ‘파일 업데이트’를 클릭하면 적용됩니다.
이제 결과를 확인해 보겠습니다. 아래는 ‘카테고리’, ‘날짜’, ‘Views’ 컬럼의 폭이 조정된 관리자 글 목록 화면입니다. 어떠신가요? 첫 번째 화면에서 너무 넓어 보기 싫었던 Views의 폭이 줄어들니 왠지 균형이 맞는 것 같지 않으신가요?
오늘은 워드프레스 관리자 글 목록의 컬럼폭을 변경하는 방법에 대해 알아보았습니다. 제 성격이 까탈스러워서 그런지 모르겠지만, 다른 분들은 그냥 넘어가는 것을 저는 왜 그냥 넘어가지 못하는 걸까요? 넋두리를 하려고 하는 것은 아니구요. 이번 글을 통해 저처럼 관리자 글 목록의 컬럼폭을 변경하고 싶으신 분들이 있으시다면 적용해 보시기 바랍니다.