워드프레스 컨테이너에 외부 링크 추가 삽입하기

워드프레스에서 버튼이 아닌 컨테이너 자체에 링크를 넣는 방법은 여러 가지 있겠지만, 제가 사용하는 방법을 보여드릴게요.

 

제일 간단한 방법은 "레이아웃->추가옵션(제일하단)->html 타입을 링크로 변경->링크삽입" 이지만, 이 방법은 레이아웃이 깨지는 경우가 있습니다.

 

그래서 다른 방법을 보여드릴게요.

 

1.우선 클레스 id에서 값을 입력해줍니다.

2.그리고 css에서 마우스호버 효과를 작성합니다.

아래의 css를 넣어주세요.

#wallet {
    cursor: pointer; /* 마우스 커서를 손가락 모양으로 변경 */
    transition: background-color 0.3s; /* 배경 색상 변화 애니메이션 */
}

#wallet:hover {
    background-color: #242424; /* 마우스 오버 시 배경 색상 변경 */
}

 

 

3.Custom CSS & JS 플러그인을 설치합니다.

4.커스텀 HTML을 추가합니다

 

아래의 내용을 그대로 붙여주세요.

<!-- Add HTML code to the header or the footer.

For example, you can use the following code for loading the jQuery library from Google CDN:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

or the following one for loading the Bootstrap library from jsDelivr:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

-- End of the comment --> 

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var walletElement = document.getElementById('클레스ID값 입력');
        walletElement.addEventListener('click', function() {
            window.location.href = 'https://웹사이트링크 입력';
        });
    });
</script>

 

 

이렇게 하시면 컨테이너에 링크가 연결 된 것을 확인 할 수 있습니다.