워드프레스 블로그 제작 CSS 2
워드프레스 블로그 제작 시 기본 테마를 사용해도 문제는 없지만, 검색엔진 최적화를 통해 더 나은 사용자 환경을 만들 수 있습니다. 블로그 제작에서는 테마 설정, 접근성 개선 등이 중요합니다. 특히, 글 페이지의 터치 영역과 글자 크기의 문제. 메인 페이지는 “Read more” 링크를 “Read Full Article”로 변경하는 작업 등 기본적인 최적화 방법입니다.
워드프레스 블로그 제작 시 기본 테마를 그대로 사용해도 크게 문제가 발생하지 않습니다. 그러나 기왕이면 검색엔진 최적화를 진행해서 좀 더 좋은 환경을 만드는 것도 생각해 볼 수 있습니다. 그리고 그 방법이 어렵거나 많은 시간과 노력을 투자하지 않아도 되기 때문에 작업을 진행하겠습니다.
워드프레스 블로그 제작
워드프레스 블로그 제작 방법으로 테마와 간단한 폰트 크기를 설정하는 방법을 진행했었습니다. 폰트만 수정한 워드프레스 블로그에 간단한 글을 작성해서 검색 최적화 테스트를 합니다. 메인 페이지와 글 페이지, 그리고 카테고리 페이지 총 3가지 페이지를 테스트하면 됩니다.
그러나 아직 카테고리 페이지를 제작하고 메뉴를 설정하는 작업을 진행하지 못했습니다. 그래서 메인 페이지하고 글 페이지만 테스트하겠습니다.
워드프레스 블로그 글 페이지
워드프레스에서 기본적으로 제공해 주는 글 페이지입니다. 사이드바와 콘텐츠 영역, 그리고 상하단의 영역으로 디자인되어 있습니다. 이 디자인은 일반적인 블로그 디자인으로 사용하기에 손색이 없어 보입니다.
워드프레스 글페이지 수정
워드프레스 블로그 제작 중 가장 중요한 글 페이지를 성능 테스트합니다. 그러면 접근성 관련 권장사항 지적 사항이 발견됩니다. 터치 영역이 충분히 크지 않다는 사항입니다. 이 사항은 수정해 주셔야 합니다.
댓글 관련 작성자명과 댓글 작성 날짜의 글자 크기가 작아 터치하기 불편하기 때문에 발생합니다. 글자의 크기를 적당한 크기로 지정해 주시면 해결됩니다.
폰트 설정 방법과 CSS 적용 방법은 지난 글을 참고하시면 됩니다.
댓글 작성자
.comment-author cite {
font-style: normal;
font-weight: 700;
font-size: 20px;
}
댓글 작성 날짜
.entry-meta.comment-metadata {
margin-top: 0;
font-size: 17px;
}워드프레스 블로그 메인 페이지
워드프레스 메인 페이지는 정적 페이지와 동적 페이지로 설정할 수 있습니다. 동적 페이지는 주로 블로그 운영 시 많이 사용합니다. 동적 페이지는 운영자가 직접 디자인 작업을 진행해야 합니다.
가볍고 편한 워드프레스 블로그를 제작 중이기 때문에 동적 페이지로 설정할 것입니다. 동적 페이지는 기본 설정이라 변경해 주실 필요는 없습니다.
메인 페이지를 성능 최적화 테스트를 하게 되면 아래와 같은 문제를 지적하게 됩니다
링크 1개 찾음
설명적인 링크 텍스트는 검색엔진에서 콘텐츠를 이해하는 데 도움을 줍니다
메인 페이지 수정
아래는 문제가 되는 코드입니다.
<a title="5인치 FPV드론 추천 Nul XL5 드론 소개"
class="read-more"
href="http://1.222.3.5/a%94/"
aria-label="Read more about 5인치 FPV드론 추천">
Read more</a>메인 화면의 최근 글 하단에 글 페이지로 안내하는 “Read more”라는 안내글이 있습니다. 이 안내글을 좀 더 구체적인 글로 변경하면 됩니다. 코드를 수정해야 합니다. 그러나 코드를 수정하기 힘들면 다음과 같이 진행합니다.
- “Read more”를 “Read Full Article”로 변경하는 스크립트 코드를 사이드바에 적용시키면 됩니다
주의: 아래 방법은 FTP 프로그램으로 원본 코드를 수정하지 못하는 경우에 작업합니다. 작업을 편하게 하기 위해서 진행하는 임시 작업입니다. 문제가 되는 코드 수정은 간단한 작업이기 때문에 코드 수정도 어렵지 않습니다.
<script>
document.addEventListener("DOMContentLoaded", function() {
// Select the link with the class 'read-more'
const readMoreLink = document.querySelector(".read-more");
// Check if the link exists
if (readMoreLink) {
// Change the text to 'Read Full Article'
readMoreLink.textContent = "Read Full Article";
}
});
</script>사이드에 항목 추가
사이드 메뉴에 위의 스크립트 코드를 적용해야 합니다. 사이드 메뉴 수정 방법입니다. 워드프레스 관리자 페이지 사이드 메뉴에서 모양, 위젯, RIGHT SIDEBAR를 선택해서 항목을 추가해 주시면 됩니다.HTML 코드를 사용할 것이므로 사용자 정의 HTML을 선택해 주시면 됩니다.
사이드바에 다른 요소를 추가할 경우도 이런 방법으로 추가해 주시면 됩니다
