[워드프레스] jQuery를 사용하여 Twenty Fifteen 테마에서 전체 글 내용 대신 요약문 표시하기
이전 글에서 Twenty Sixteen 테마의 블로그 페이지 또는 전면 페이지에 전체 글 내용 대신 요약문 표시하는 방법을 살펴보았습니다. 이전 글에서는 일반적인 방법으로 테마 소스를 수정하는 방법을 소개했습니다. 동일한 방법을 Twenty Fifteen 테마에도 적용하여 전면 페이지(홈페이지) 또는 블로그 페이지에 전체 글 내용 대신 요약글을 표시할 수 있습니다.
이 글에서는 보다 간단한 방법으로 jQuery를 사용하여 동일한 효과를 얻는 방법을 살펴보려고 합니다. 이 방법의 이점은 테마 파일을 수정할 필요가 없다는 점입니다. 하지만 jQuery 파일을 Enqueque하는 방법을 알고 있어야 합니다. (js 파일 enqueque(후크)에 대한 자세한 내용은 여기를 참고해보시기 바랍니다.)
참고로 이러한 방법을 사용하지 않고 글 목록에서 "Read More" 링크를 추가하려면 글 쓰기 화면에서 "더읽기" 태그를 삽입할 수 있습니다.
이 방법을 사용하면 개별 글에 대하여 원하는 분량의 요약문만 표시할 수 있다는 장점이 있지만, 모든 글에 대해 일일이 "더보기" 태그를 삽입해야 하는 번거로움이 있습니다. 만약 이미 수 백 개의 글이 작성되어 있다면 일일이 추가하기란 쉽지 않을 것입니다.
글자 수를 줄이는 jQuery 스크립트는 이 글에 나와 있습니다. 다음과 같은 jQuery 스크립트를 사용하면 글 목록에서 개별 글에 표시되는 전체 글 컨텐츠가 175자까지만 표시되고 나머지 부분은 생략됩니다.
$(".entry-content").text(function(index, currentText) { return currentText.substr(0, 175)+'...'; });
그리고 다음 스크립투를 추가하면 Read More -> 링크가 요약글 아래에 추가됩니다(jQuery에서 화살표를 추가하는 코드 등 특수기호는 이 사이트를 참고하세요).
var lnk = $(this).parent('article').children('.entry-header').children('.entry-title').children('a').attr('href'); $('<a class="readmore">Read More →</a>').insertAfter(this).attr('href', lnk);
그리고 다음과 비슷한 CSS로 Read More의 스타일을 적절히 조정하도록 합니다.
/* Read More 스타일 */ a.readmore { display: inline-block; padding-left: 80px; margin-bottom: 20px; text-decoration: underline; } a.readmore:hover { color: blue; }
그러면 다음과 같이 블로그 페이지에 전체 글 컨텐츠 대신에 "요약문"이 표시됩니다.
이 방법을 사용하면 워드프레스 테마의 소스 파일을 일일이 수정할 필요 없이 간단한 jQuery와 CSS로 간단히 전체 글 대신 요약문을 표시할 수 있습니다.