워드프레스 블로그에 OnePress 테마를 적용하면 오른쪽 사이드바에 최신 글과 카테고리 목록이 표시되지만, 최신 글과 카테고리의 제목만 나열되어 있어 보기가 좋지 않습니다. 이 글에서는 OnePress 테마 최신 글과 카테고리 제목 앞에 기호를 붙여 가독성을 향상시키는 방법을 알아보겠습니다.
워드프레스 OnePress 테마 최신 글과 카테고리 제목 앞에 기호 붙이기
아래 화면은 Onepress 테마를 적용한 워드프레스 블로그로 오른쪽 사이드바에 있는 최신 글과 카테고리 목록이 리스트로 나열되어 있어 가독성이 좋지 않습니다. 그래서 최신 글과 카테고리 제목 앞에 삼각형 기호를 추가해서 가독성을 높일 수 있도록 하겠습니다.
워드프레스 Onepress 테마 최신 글과 카테고리 제목앞에 기호를 붙이는 방법은 두 가지가 있는데, 첫 번째는 CSS 코드를 사용하는 것이고, 두 번째는 자바스크립트를 사용하는 것입니다. 그런데 제가 원하는 것은 아래와 같이 제목이 길어 줄바꿈 될 때 두 번째 줄의 시작 위치가 첫 번째 줄과 동일하게 들여쓰기 되는 것입니다. CSS 코드로는 이렇게 할 수가 없어 자바 스크립트를 사용하여 구현하도록 하겠습니다.
자바 스크립트는 블로그가 로드될 때 동적으로 내용을 변경하거나 사용자의 상호작용에 반응하여 블로그의 특정 부분을 동적으로 변경하여 원하는 효과를 구현하도록 되어 있습니다. 즉 화면에 출력되는 어떤 코드라도 특정해서 동적으로 변경할 수 있지만, 너무 많은 자바스크립트 코드나 비효율적으로 작성된 코드는 페이지의 로딩 시간에 영향을 줄 수 있으므로, 성능과 속도를 고려하여 최적화하는 것이 필요합니다.
<script>
// DOM이 완전히 로드될 때까지 기다린 후 함수를 실행합니다.
document.addEventListener('DOMContentLoaded', function() {
// '.wp-block-latest-posts__post-title' 클래스를 가진 모든 요소를 선택합니다.
var titles = document.querySelectorAll('.wp-block-latest-posts__post-title');
// 선택된 각 요소에 대해 반복 실행합니다.
titles.forEach(function(title) {
// 각 제목의 내용을 업데이트하고, '▶' 기호와 특정 스타일 설정을 앞에 추가합니다.
title.innerHTML = '<div style="white-space: pre-wrap; text-indent: -1.4em; padding-left: 1em;">▶ ' + title.innerText + '</div>';
});
// 지정된 클래스를 가진 리스트 아이템 안의 모든 앵커 링크를 선택합니다.
var categoryLinks = document.querySelectorAll('.wp-block-categories-list.wp-block-categories li a');
// 선택된 카테고리 링크의 각 링크에 대해 반복 실행합니다.
categoryLinks.forEach(function(link) {
// 각 링크의 텍스트 앞에 '▶' 기호를 추가합니다.
link.innerText = '▶ ' + link.innerText;
// 링크 텍스트의 글꼴 색상을 '#061D7A'로 변경합니다.
link.style.color = '#061D7A';
});
});
</script>
위의 코드를 사이에 추가하기 위해 워드프레스 관리자 화면에서 도구 → Head & Footer Code 로 이동합니다. Head & Footer Code가 없다면 아래 랑크를 클릭하여 설치하세요.
Head & Footer Code의 HEAD Code에 위의 코드를 복사하여 붙여넣기 한 후, 아래로 스크롤하여 “변경사항 저장”을 클릭하여 저장합니다.
위의 스크립트를 적용한 결과는 아래와 같습니다. 보시는 것처럼 최신 글 목록과 카테고리 목록의 제목 앞에 삼각형 기호가 추가되어 가독성이 향상되었습니다. 삼각형이 아닌 다른 기호를 사용하고 싶다면 위의 코드에서 삼각형 대신 원하는 기호로 변경하시면 됩니다.
오늘은 워드프레스 Onepress 테마 최신 글과 카테고리 제목앞에 기호를 붙여 가독성을 높이는 방법을 알아보았습니다. 자바스크립트를 활용하기 때문에 조금 어렵게 느껴지실 수 있지만, 제가 제공한 코드를 그대로 사용하시면 되기 때문에 적용해 보실 것을 추천드립니다. 저는 삼각형 기호를 사용했지만 마음에 들지 않으시다면 다른 기호로 변경하셔도 됩니다.
참고로, 기호를 바꾸는 방법은 한글 ‘ㅁ’ 자음을 입력한 후 오른쪽 Ctrl 키를 누르면 아래와 같이 기호가 표시되며, 여기서 원하는 기호를 선택하시면 됩니다.
