워드프레스 재사용 가능 블록 – Read More

Sep 25, 2022 | 0 comments

워드프레스로 글을 작성하다 보면 일부 항목을 숨긴 상태로 표시했다가 필요한 경우 사이트를 방문한 사용자가 직접 펼쳐서 내용을 확인하게 하는 방식으로 작성 하는 경우가 있습니다.

이런 경우 Read More 로 검색해 보면 다양한 플러그인이 존재합니다.

아니면 Content Toggle (Accordion) Block For Gutenberg – Ultimate Blocks 같은 블록모음 플러그인을 설치해서 해당 블록을 사용할 수도 있습니다.

하지만 이와 같은 방법은 플러그인 제작자가 정해준 디자인을 그대로 이용해야 하며 플러그인은 별도로 설치해야 합니다.

그래서, 원하는 디자인으로 직접 만들어서 사용하고자 재사용 가능 블록으로 만들어서 사용하는 방법을 소개합니다.

이 기능을 구현함에 있어 Divi Read More Button with jQuery ~ Divi Lover 에서 설명한 소스코드를 참조해서 사용 중입니다.

그러면 지금부터 해당 재사용 가능 블록을 만들어 보겠습니다.

자바스크립트 function 추가

Jquery 로 실행되는 스크립트 입니다.

테마 파일중에 header.php 에서 head 태그 사이에 추가하시면 됩니다.

Jquery 의 경우 다른 플러그인 에서 사용중인 경우 이미 추가되어 있을 수 있습니다.

<!-- 이미 Jquery 를 사용 중인 경우 생략 가능 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
	$('.rm-collapselink').hide();
	$('.rm-expandlink').unbind().click(function(e){
		e.preventDefault();
		$('.rm-collapselink').show();
		$('.rm-hidearea').slideDown();		
		$(this).hide();
	});
	$('.rm-collapselink').unbind().click(function(e){
		e.preventDefault();
		$('.rm-expandlink').show();
		$('.rm-hidearea').slideUp();		
		$(this).hide();
	});
});
</script>

Child Theme 를 사용하시는 경우 관리자 페이지 -> 외모 -> 테마 파일 편집기 에서 추가하시면 됩니다.

Divi Theme 의 경우 관리자페이지 -> Divi -> Theme Options -> Integration 항목에서 추가하시면 됩니다.

CSS 스크립트 추가

다음 스크립트는 접기 버튼과 숨김 영역이 포스트가 로드 될 때 숨긴 상태로 표시되게 합니다.

/************************** START Reusable Readmore block */
/* collapse link */
.rm-collapselink {
    display:none;
}
/* hide area */
.rm-hidearea {
    display:none;
}
/************************** END Reusable Readmore block */

관리자페이지 -> 외모 -> 사용자 정의하기 -> 추가 CSS 에서 추가하시면 됩니다.

Divi Theme 의 경우 관리자페이지 -> Divi -> Theme Options -> General -> Custom CSS 에서도 가능합니다.

재사용 가능한 블록 관리 화면에서 Import

관리자 페이지에서 새 글 추가 또는 기존 포스트 편집 화면으로 이동하신 다음 우측 상단 메뉴를 클릭하셔서 재사용 가능한 블록 관리 메뉴를 실행해 주세요.

아래 파일을 다운로드 하신 다음 압축을 해제하시면 json 파일이 1개 존재합니다.

재사용 가능한 블록 관리 화면에서 상단에 위치한 JSON에서 가져오기 버튼을 클릭한 다음 다운로드한 json 파일을 선택해서 가져오기를 하신 다음 페이지를 새로고침 하시면 아래와 같이 Read more paragraph 항목이 추가가 됩니다.

이제 새 글 작성이나 기존 포스트 편집화면에서 블록을 추가 할때 재사용 가능 목록에 다음과 같이 추가된 블록을 확인하실 수 있습니다.

테스트 사용 예제

해당 블록을 추가하시면 다음과 같이 기본 상태로 추가되는 것을 확인하실 수 있습니다.

해당 블록은 2개의 버튼, 여백, 문단 으로 구성되어 있습니다.

여기서 숨겨질 영역에 표시될 문구를 수정하시면 됩니다.

미리보기를 하면 다음과 같이 READ MORE 버튼만 표시가 됩니다.

READ MORE 버튼을 클릭하시면 다음과 같이 숨겨진 텍스트가 보여지고 READ LESS 버튼이 표시가 됩니다.

재사용 가능 블록의 경우 재사용 가능 블록인 상태로 편집해서 글을 업데이트 하게 되면 해당 블록의 기본 상태도 같이 업데이트가 가능하기 때문에 기본 상태를 변경하고 싶지 않은 경우 일반 블록으로 전환해서 사용하시면 됩니다.

실제 사용된 포스트

아래 포스트를 보시면 업그레이드 하는 과정을 담은 스크립트는 내용이 너무 많아 숨기 상태로 표시하고 있습니다.

Learn more on this topic

Related Blog Posts

워드프레스 Github 플러그인

워드프레스 Github 플러그인

워드프레스에서 Github 저장소를 포함하기 위해 사용 중이던 Embed Block for GitHub 플러그인의 버그 발생과 더 이상 유지 보수가 안되는 상황에서 새로운 플러그인(Github Embed)을 소개하고 해당 플러그인으로 대체 하게 된 상황에 대해 설명합니다.

read more

Join in the conversation

Leave a Comment

0 Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

무료 온라인 전광판

전광판

텍스트를 입력하고 텍스트 효과 및 배경효과 를 변경해서 전체화면으로 표시할 수 있는 전광판 용도로 사용하실 수 있습니다. 각종 스포츠 및 공연 관람시 응원 용도로 사용이 가능합니다.

Carousel

여러개의 슬라이드를 추가하여 프레젠테이션 및 이미지 슬라이드 용도로 사용하실 수 있습니다. 브라우저가 포함된 IT 기기로 큰 모니터에 연결하여 매장 내 공지사항 및 메뉴소개를 이미지로 표시할 수 있습니다.

Pin It on Pinterest

Shares
Share This

Share This

Share this post with your friends!

Shares