워드프레스 블로그 OnePress 테마 사이드바에 Email 주소 추가하기

글자 크기

워드프레스 블로그를 개설한 후 OnePress 테마를 적용하여 운영하고 있습니다. 그런데 사이드바에 연락처 위젯이 없어 이번에 직접 Email 주소를 추가하였습니다. 이 글에서는 OnePress 테마 사이드바에 Email 주소를 추가하는 방법에 대해 자세히 알아보겠습니다.




워드프레스 블로그 OnePress 테마 사이드바에 Email 주소 추가하기

오늘의 목표는 아래 그림에서 보이는 오른쪽 상단의 빨간색 테두리 부분에 ‘Contact zisikbug’를 추가하고, 이를 클릭하면 이메일을 보낼 수 있도록 설정하는 것입니다.

이메일 주소를 추가할 위치를 정합니다


먼저 사용할 이메일 아이콘을  https://icon-icons.com/ko/ 에서 검색하여 다운로드 받습니다.

이메일 아이콘을 다운로드 받습니다


다음으로 워드프레스 관리자 화면에서 미디어 → Add New Media File 로 이동하여 “파일 선택”을 클릭하고 방금 다운로드 받은 이메일 아이콘을 업로드합니다.

다운로드 받은 이메일 아이콘을 워드프레스에 업로드합니다


아이콘이 업로드되면, 미디어 → Library 에서 방금 업로드한 이메일 아이콘을 클릭하여 파일 URL를 확인입니다. 확인한 파일 URL를 노트패드등에 복사해 놓습니다.

업로드한 이메일 아이콘의 URL를 복사합니다


이제 외모 → 위젯으로 이동하여 +위치에 마우스를 위치시킨 후 우클릭하여 ‘사용자 정의 HTML’을 선택합니다. 만약 HTML 메뉴가 보이지 않는다면, 검색창에 ‘html’을 입력하여 검색합니다.

위젯에 사용자 정의 HTML 블록을 추가합니다


아래 코드에서 이메일 주소를 여러분의 주소로 변경하고, src=”파일 URL”의 파일 URL을 복사해 둔 아이콘의 URL로 변경합니다. 이렇게 수정한 코드를 아래 그림과 같이 붙여넣기 합니다. 그리고 “위로 올리기”를 클릭하여 해당 블록을 사이드바 맨 위로 위치시킵니다.

<figure class="wp-block-image size-full"><a href="mailto:여러분의 이메일주소"> 
    <img src="파일 URL" style="vertical-align:middle; border:none; padding-bottom:6px;"/>
    <span style="font-size:20px; font-weight: bold; padding-top:2px; padding-bottom:0px"> 
 Contact zisikbug</span></a>
</figure>


추가한 HTML 블록에 이메일 아이콘과 주소를 추가합니다


HTML 코드를 추가하고 나면, 아래와 같이 이메일 주소가 사이드바에 추가되며 클릭하면 이메일 작성 창이 열립니다.

이메일 주소를 추가한 화면을 확인합니다


오늘은 워드프레스 Onepress 테마 사이드바에 이메일 주소를 추가하는 방법을 알아보았습니다. 단순히 연락처를 추가하는 것처럼 보일 수 있지만, 이는 방문자들과의 소통을 강화하고 블로그의 신뢰도를 높이는 중요한 방법 중 하나라고 생각합니다. Onepress 테마를 사용하시는 분들이라면 저와 같이 이메일 주소를 추가해 보시길 바랍니다.