워드프레스 Visual Link Preview 대안: HTML 및 CSS로 링크 미리보기 구현

Last Updated: 2024년 03월 28일 | | 댓글 남기기

티스토리, 네이버 블로그나 네이버 카페, 페이스북, 카카오톡 등에서 링크를 입력하면 썸네일과 제목, 요약글을 미리볼 수 있도록 표시됩니다. 워드프레스에서 내부 링크를 임베드하면 Embed 기능이 비활성화되지 않은 경우 페이스북 스타일의 링크 미리보기가 표시되지만 외부 링크를 임베드할 때에는 작동하지 않습니다.

워드프레스에서 이와 같은 스타일의 링크 미리보기를 구현하고 싶은 경우 Visual Link Preview 플러그인을 사용하면 편리합니다.

💡페이스북 글 공유 스타일로 클릭률을 높이는 방법!

여기에서는 플러그인에 의존하지 않고 HTML과 CSS로 비주얼 링크 프리뷰를 구현하는 방법에 대하여 살펴보겠습니다.

보다 쉬운 방법으로 패턴이나 쇼트코드로 만들어서 활용할 수 있습니다. 패턴과 쇼트코드에 대한 부분을 이 글의 하단에서 별도로 설명했습니다.

워드프레스 Visual Link Preview 대안: HTML 및 CSS로 링크 미리보기 구현

HTML과 CSS로 다음과 같은 스타일의 링크 미리보기를 구현할 수 있습니다. 이 방법을 이용하면 플러그인을 사용할 필요가 없습니다. 플러그인을 사용하면 자동으로 썸네일과 제목, 요약글을 불러와서 표시하지만, 아래의 방법에서는 직접 썸네일 URL, 제목, 요약문을 입력해야 합니다. 번거로울 수 있지만, 표시되는 제목과 요약문 등을 변경하고 싶은 경우 괜찮은 방법일 수 있습니다.

스타일 1: PC에서는 썸네일이 왼쪽에 표시되고 모바일에서는 썸네일이 제목 위에 표시됩니다.

ChatGPT로 블로그 이미지 만들기
ChatGPT로 블로그 이미지 만들기
저는 ChatGPT의 프리미엄 버전이 출시되자 곧바로 가입하여 유료 버전을 사용해오고 있습니다. 지난주에 GPT-4가 달리(DALL E)와 브라우징, 데이터 분석 기능과 통합되어 이러한 기능들을 함께 사용하는 것이 가능해졌습니다. 그 이전에는 각 기능이 별도로 분리되어 제공되었었는데..
더보기

스타일 2: 아래 스타일은 PC와 모바일 모두 썸네일이 제목 위에 표시됩니다.

워드프레스 한글 맞춤법 검사 방법 5가지
워드프레스 한글 맞춤법 검사 방법 5가지
블로그 글을 작성한 후에 맞춤법 검사를 한 후에 공개하는 것이 좋습니다. 아무리 좋은 글이라도 맞춤법이 틀린 부분이 많다면 신뢰가 떨어지게 될 것입니다. 워드프레스에서는 한글 맞춤법 검사 기능이 제공되지 않습니다. 몇 가지 방법으로 맞춤법 검사를 할...
더보기

스타일 1: PC에서는 썸네일이 왼쪽에 모바일에서는 썸네일이 상단에 표시

CSS 코드:

/* 비주얼 링크 프리뷰 - 가로 and 세로 버전 */
.link-preview-container {
    background-color: white;
    border: 1px solid #ddd; 
    border-radius: 5px;
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 15px;
    transition: box-shadow 0.3s ease; 
}

.link-preview-container:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.link-preview-container a {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

.link-preview-image {
    flex-shrink: 0;
    width: 200px;
    height: auto; /* 또는 정사각형으로 표시할 경우 200px; */
    overflow: hidden;
}

.link-preview-image img {
    max-height: 100%;
    max-width: 100%;
    display: block;
}

.link-preview-content {
    flex: 1;
    padding: 0 10px;
}

.link-preview-title {
    font-weight: bold;
    margin-bottom: 5px;
}

.link-preview-description {
    color: #888;
    margin-bottom: 10px;
    font-size: 0.9em;
      margin-top: 10px;
}

.link-preview-button {
    background-color: #007BFF;
    color: white;
    text-align: center;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
    text-transform: uppercase;
    display: inline-block;
    margin: 0 auto;
    width: 100%;
    transition: background-color 0.3s ease;
}

.link-preview-button:hover {
    background-color: #0056b3;
}

.link-preview-top {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 10px;
}

.link-preview-bottom {
    display: flex;
    justify-content: center;
    width: 100%;
}

@media (max-width: 768px) {
    .link-preview-container {
        flex-direction: column;
    }

    .link-preview-image {
        width: 100%;
        height: auto;
        margin-bottom: 10px;
    }

    .link-preview-content {
        padding: 0;
    }

    .link-preview-top {
        flex-direction: column;
    }
}

HTML 코드:

<div class="link-preview-container">
    <a href="{{LINK_URL}}"></a>
    
    <div class="link-preview-top">
        <div class="link-preview-image">
            <img src="{{THUMBNAIL_URL}}" alt="Article Thumbnail">
        </div>
        
        <div class="link-preview-content">
            <div class="link-preview-title">{{ARTICLE_TITLE}}</div>
            <div class="link-preview-description">{{ARTICLE_DESCRIPTION}}</div>
        </div>
    </div>
    
    <div class="link-preview-bottom">
        <div class="link-preview-button">더보기</div>
    </div>
</div>

스타일 2: PC와 모바일 모두 썸네일이 상단에 표시

CSS 코드:

/* 비주얼 링크 프리뷰 - 세로 버전 */

.lp-container {
    background-color: white;
    border: 1px solid #b7b7b7;
    border-radius: 5px;
    margin: 10px 0;
    display: flex;
    flex-direction: column; /* This ensures the thumbnail is on top */
    position: relative;
    padding: 15px;
}

.lp-container a {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 1;
    border: none;
    outline: none;
    text-decoration: none;
    background: none;
}

.lp-image {
    flex-shrink: 0;
    width: 100%; /* Full width of container */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px; /* Space between the image and content */
}

.lp-image img {
    max-height: 100%;
    max-width: 100%;
    display: block;
}

.lp-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.lp-title {
    font-weight: bold;
}

.lp-description {
    color: grey;
    margin-top: 10px;
    margin-bottom: 5px;
	  font-size: 0.9em;
}

.lp-button {
    background-color: #007BFF;
    color: white;
    text-align: center;
    border-radius: 5px;
    margin-top: 10px;
    text-transform: uppercase;
    cursor: pointer;
    padding: 3px;
}

HTML 코드:

<div class="lp-container">
    <a href="{{LINK_URL}}"></a>
    <div class="lp-image">
        <img src="{{THUMBNAIL_URL}}" alt="Article Thumbnail">
    </div>
    <div class="lp-content">
        <div class="lp-title">{{ARTICLE_TITLE}}</div>
        <div class="lp-description">{{ARTICLE_DESCRIPTION}}</div>
        <div class="lp-button">더보기</div>
    </div>
</div>

적용 방법

CSS 코드는 외모 » 사용자 정의하기 » 추가 CSS에 추가합니다(1번만 추가하면 됨).

HTML 코드는 블록 에디터에서 사용자 정의 HTML을 추가하여 HTML 코드를 입력하면 됩니다. 사용자 정의 HTML 블록은 블록 편집기에서 슬래시("/")를 입력하여 선택할 수 있습니다.

워드프레스 Visual Link Preview 대안: HTML 및 CSS로 링크 미리보기 구현 3

만약 사용자 정의 HTML 블록이 표시되지 않는다면 /html을 입력하여 선택할 수 있습니다.

워드프레스 Visual Link Preview 대안: HTML 및 CSS로 링크 미리보기 구현 4

HTML 코드에서 몇 가지 변수를 실제 값으로 바꾸도록 합니다.

  • {{LINK_URL}} : 포스트 링크 URL
  • {{THUMBNAIL_URL}} : 썸네일 URL
  • Article Thumbnail : 썸네일 ALT 텍스트
  • {{ARTICLE_TITLE}} : 글 제목
  • {{ARTICLE_DESCRIPTION}} : 요약문

숏코드 사용하기

사용자 정의 HTML 블록을 사용하여 HTML 코드를 넣는 것이 부담스러운 경우 숏코드를 만들면 보다 수월하게 입력이 가능합니다. (보다 쉬운 방법으로 아래의 "패턴으로 만들어 활용하기" 부분을 참고하여 패턴을 생성할 수 있습니다.)

다음 코드를 이용 중인 테마의 함수 파일에 추가하도록 합니다. (차일드 테마를 만들어 작성하세요.)

function link_preview_shortcode($atts) {
// Extract the attributes from the shortcode
$args = shortcode_atts(array(
'url' => '#',
'src' => '',
'alt' => 'Article Thumbnail',
'title' => '',
'description' => ''
), $atts);

// Create the HTML structure and replace the placeholders with the provided attributes
$output = '<div class="link-preview-container">
<a href="' . esc_url($args['url']) . '"></a>
<div class="link-preview-top">
<div class="link-preview-image">
<img src="' . esc_url($args['src']) . '" alt="' . esc_attr($args['alt']) . '">
</div>
<div class="link-preview-content">
<div class="link-preview-title">' . esc_html($args['title']) . '</div>
<div class="link-preview-description">' . esc_html($args['description']) . '</div>
</div>
</div>
<div class="link-preview-bottom">
<div class="link-preview-button">더보기</div>
</div>
</div>';

return $output;
}

// Register the shortcode
add_shortcode('preview', 'link_preview_shortcode');

FTP를 통해 웹 서버에 접속하여 테마의 함수 파일(functions.php)에 추가할 수 있습니다.

이제 비주얼 링크 프리뷰를 표시할 곳에 다음과 같은 숏코드를 사용할 수 있습니다.

[preview url="{{LINK_URL}}" src="{{THUMBNAIL_URL}}" alt="{{Article Thumbnail}}" title="{{ARTICLE_TITLE}}" description="{{ARTICLE_DESCRIPTION}}"]

패턴으로 만들어 활용하기

다른 방법을 패턴(재사용 가능 블록)으로 만들면 쉽게 삽입할 수 있습니다.

재사용 가능 블록(패턴)

패턴 생성 팝업 창에서 동기화됨(Synced) 옵션은 비활성화하도록 합니다.

패턴 생성

패턴에 대한 자세한 정보는 다음 글을 참고해보세요:

마치며

이상으로 페이스북 스타일로 링크 미리보기를 구현하고 싶은 경우 워드프레스에서는 Visual Link Preview 플러그인을 사용할 수 있습니다. 비주얼 링크 프리뷰 플러그인을 사용하지 않고 비슷한 효과를 내고 싶은 경우 이 글에서 제시하는 방법을 참고할 수 있습니다.

참고

댓글 남기기

Leave a Comment