Post Preview in Category Archive - 워드프레스 카테고리 페이지 글 미리보기

워드프레스 블로그 내의 링크 미리보기

가끔 인터넷을 검색하다 보면 어떤 사이트 내의 링크에 마우스를 올려놓으면 해당 링크의 사이트 썸네일이 팝업으로 뜨는 것을 본 적이 있을 것입니다. 워드프레스에서도 그와 같은 기능을 플러그인을 통해 구현할 수 있습니다. WP Live Preview Links 플러그인을 설치하면 외부/내부 링크에 연결되는 사이트/페이지의 미리보기 썸네일을 표시할 수 있습니다.

이 플러그인을 설치하면 관리자 페이지(대시보드)에 “Live Preview Links”라는 메뉴가 추가됩니다. 이 링크를 클릭하여 링크 미리보기 옵션을 조정할 수 있습니다.
Live Preview Links in WordPress - 워드프레스 링크 실시간 미리보기

설정 그림의 “Live Preview Links” 옵션에서 “All links”(모든 링크), “Internal links only”(내부 링크만), “External links only”(외부 링크만)를 선택할 수 있습니다. 그리고 “class=”wp-live-preview””를 선택하면 수동으로 실시간으로 링크를 미리보기할 대상을 설정할 수 있습니다. 예를 들어, 카테고리 페이지의 글 제목에만 미리보기 썸네일이 표시되기를 원한다면 아카이브 페이지에서 class=”wp-live-preview”를 글 제목 부분에 추가하면 됩니다.

<a href="<?php the_permalink(); ?>" <?php if(is_category()) { echo 'class="wp-live-preview" '; } ?>title="<?php //echo esc_attr( sprintf( __( 'Permalink to %s', 'themonic' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a>

위와 같이 적당한 위치에 <?php if(is_category()) { echo ‘class=”wp-live-preview” ‘; } ?> 코드를 추가해주면 카테고리 페이지의 글 제목에 마우스를 올려놓으면 해당 글의 내용을 미리볼 수 있습니다.
Post Preview in Category Archive - 워드프레스 카테고리 페이지 글 미리보기

또한, KBoard 게시판의 게시글 목록에서 글 제목에 마우스를 올려놓을 때 게시글 페이지를 미리보기하려면 다음과 비슷하게 스킨 폴더 내의 list.php에서 적당한 위치에 wp-live-preview 클래스를 추가할 수 있습니다.

<a href="<?php echo $url->set('uid', $content->uid)->set('mod', 'document')->toString()?>" class="wp-live-preview"><?php echo $content->title?></a>
<?php echo $content->getCommentsCount()?>
</div></td>

참고로 list.php 파일에 보면 위와 비슷한 부분이 두 군데 있으므로(공지 사항 글과 일반 글) 두 군데 모두에 wp-live-preview 클래스를 추가해야 정상적으로 작동할 것입니다.
KBoard Post Preview in WordPress - 워드프레스에서 KBoard 게시글 미리보기

“All links”를 선택할 경우 너무 산만해지는 것 같습니다. 외부 링크에만 적용한다든가 위와 같이 class=”wp-live-preview”를 통해 특정 항목에만 적용하는 것도 좋은 방법일 것입니다.



기부를 통해 이 블로그를 후원하실 수 있습니다.
워드프레스 설치/제작/문제해결이 필요한 경우 서비스(유료)를 요청해주세요.