토픽 게시글에 버튼을 삽입하는 방법

개발
1

놀라운 임베드 버튼을 소개합니다 - 토픽 게시물을 더 다채롭게 만드는 궁극의 솔루션! 버튼 하나만 클릭하면 콘텐츠에 완전히 새로운 차원을 더하고 독자들을 감탄하게 만들 수 있습니다. 게다가, 이 임베드 버튼은 100% 만족도 보장을 제공합니다 - 버튼의 훌륭함에 완전히 만족하지 못하시다면 환불해 드리겠습니다 (장난입니다, 완전 무료예요!). 그래서 더 이상 미루지 마세요! 오늘 바로 임베드 버튼을 손에 넣고 쿨한 친구들의 클럽에 합류하세요!

저는 디스코ourse 포럼에서 가입을 늘리기 위해 몇 가지 CTA(행동 유도) 토픽을 만들었습니다. 각 토픽은 다른 마케팅 캠페인을 위해 준비되었습니다. 하지만 모두 공통점이 하나 있습니다… 독자들이 읽은 후 가입하도록 유도하고 싶다는 것입니다. 그래서 독자의 시선 흐름을 끊지 않도록, 편의를 위해 버튼이 직접 게시물 안에 추가했으며, 이를 통해 전환율을 높였습니다. 하지만 이 버튼은 원하시는 용도로 자유롭게 사용하실 수 있습니다! :slight_smile:

미리보기

image
image964×520 36.4 KB


활성화 방법

  1. 현재 테마에 사용자 정의 CSS를 추가하세요.
[data-wrap="button"] a {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    color: #FFF !important;
    background-color: #007bff;
    border-color: #007bff;
}

// Part #1 Allows text to be displayed to the right of a button.
[data-wrap="button"] {
    display: inline-block;
}

// Part #2 Allows text to be displayed to the right of a button.
[data-wrap="text-after-button"] {
    display:inline-block;
}
  1. 게시물에 다음을 복사하세요
[wrap="button"][시작하기](https://example.com)[/wrap]

버튼 옆에 텍스트를 표시하려면 이렇게 해보세요…

[wrap="button"][가입하기](https://YourDiscourseURL.com/signup)[/wrap]
[wrap="text-after-button"]<-- 여기 클릭하여 제 디스코ourse에 가입하세요![/wrap]
2

정말 멋지네요, 감사합니다.

4

안녕하세요, @UnitedFreedom!

당신의 토픽에서 영감을 받아 이러한 수정 사항에 대해 제대로 된 토픽을 만들게 되었습니다 :+1:

여기서 읽어보실 수 있습니다: Customize posts' contents with your own styles

5

영감을 줄 수 있어서 기뻐요. 사진과 함께 따라 하기 아주 쉬운 주제를 만들었네요. 정말 좋아해요 :slight_smile:

6

우리의 간단한 CSS 개선 사항:

"wrap-buttons"의 경우, cooked post 내부에서 HTML 출력이 약간 다르기 때문에, div > p 계층 구조에서 링크가 a 태그 안에 포함되어 있어 링크의 약간 위나 아래를 클릭해도 링크가 트리거되지 않는 문제를 해결하기 위해 CSS 마크업을 조정했습니다.

이를 우회하기 위해 a 태그 주위에 더 많은 패딩을 추가하고 <p> 태그의 margin-block 마크업을 오버라이드했습니다.

또한 링크 색상도 조정해야 했습니다.

[data-wrap="btn-primary"] {
    display: inline-block;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-weight: normal;
    color: var(--d-button-primary-text-color);
    background-color: var(--d-button-primary-bg-color);
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
    border-radius: var(--d-button-border-radius);
    transition: var(--d-button-transition);
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0);
    font-size: var(--font-0);
    line-height: normal;
    box-sizing: border-box;
    padding: 0;
    border: var(--d-button-border);
    padding: .5em .65em;
}
[data-wrap="btn-primary"] a,[data-wrap="btn-primary"] a:hover, [data-wrap="btn-primary"] a:active, [data-wrap="btn-primary"] a:visited {
    color: var(--d-button-primary-text-color);
        padding: .5em .65em;
}
[data-wrap="btn-primary"] p {
    margin-block-start: 0;
    margin-block-end: 0;
}
7

OP의 이 CSS 해킹에서 영감을 받아, 커스텀 버튼을 제공하는 이 테마 컴포넌트를 만들었습니다. 직접 CSS를 작성하는 것만큼 유연하지는 않지만, 훨씬 쉽습니다.

훌륭한 아이디어를 주신 OP에게 감사드립니다.