WordPress에서 장문의 긴 글을 작성했을 때, 만약 해당 글을 index 페이지에선 그 내용을 다 보여주지 않고 글 앞부분의 도입부만을 보여주고 싶을 때를 대비해 more tag로 처리하는 기능을 제공한다. 그런데 이 기능을 그대로 가져다 쓰면 웹 접근성 면에서 문제가 생길 수 있다.
이렇게 해서 자동 생성된 링크 텍스트는 기본적으로 그냥 무의미한 more…로 표시되는데, 만약 글의 앞뒤 문맥을 인지하지 못한 상태에서 해당 링크를 스크린 리더를 통해 접근했을 땐 해당 링크가 어느 곳을 가리키는지 알 수가 없는 것이다. 하지만, 다행히 WordPress의 the_content() 함수를 제대로 쓰면 이 more tag의 내용을 입맛에 맞게 수정할 수가 있다.
the_content() 함수는 일반적으로 WordPress에서 사용되는 The Loop라는 PHP 코드 안에서 쓰이는데, 보통 WordPress 테마 파일의 index.php나 혹은 최신 WordPress에서 기본 제공하는 Twenty Twelve 테마 같은 경우 post의 종류에 맞는 여러 군데의 템플릿(template)에 사용되고 있으며 상황에 맞게 각기 따로 수정해 주어야 한다.
그래서, 일반 블로그의 글 제목을 자동으로 more tag의 링크 텍스트에 집어넣고 싶을 땐 the_content() 함수를 다음과 같이 적용해 준다.
이렇게 하면, 자동으로 다음과 같은 HTML을 생성해서 돌려준다.
해당_포스트_글의_타이틀 제목의 글 마저 읽기 »
여기서 글 제목 부분을 <span> 태그로 감싼 이유는 시각장애인이 아닌 일반 사용자에겐 불필요하게 노출된 제목을 감추어 주는 스타일을 적용하기 위해서인데, HTML5 Boilerplate에서 빌려 온 것으로 스크린 리더에선 인식하지만, 시각적으론 안 보이게 하는 다음과 같은 스타일을 적용해 줄 수 있다.
/* accessibile more tag */
이렇게 하면, 접근성을 해치지 않으면서도 more tag를 필요에 따라 유용하게 사용할 수 있을 것이다.
참고 글 : Customizing the Read More