WordPress 메뉴에 소셜 미디어 아이콘을 추가하는 방법(쉬운 방법)

WordPress 메뉴에 소셜 미디어 아이콘을 추가하는 방법을 찾고 계십니까?

Facebook 및 Twitter와 같은 사이트의 로고는 전 세계 사람들이 즉시 인식합니다. 메뉴에 이러한 아이콘을 추가하면 공간을 많이 차지하지 않으면서도 눈길을 끄는 방식으로 소셜 미디어 프로필을 홍보할 수 있습니다.

이 기사에서는 WordPress 탐색 메뉴에 소셜 미디어 아이콘을 추가하는 방법을 보여줍니다.

메뉴에 소셜 미디어 아이콘을 추가해야 하는 이유는 무엇입니까?

귀하의 웹사이트에 소셜 미디어 아이콘을 추가함으로써 사람들이 귀하의 다양한 소셜 네트워킹 프로필을 방문하도록 장려할 수 있습니다. 이렇게 하면 Facebook, Twitter, Instagram 등에서 더 많은 팔로워와 참여를 얻을 수 있습니다.

한 가지 옵션은 WordPress 사이드바 또는 유사한 위젯 준비 영역에 소셜 미디어 아이콘을 추가하는 것입니다. 그러나 사람들이 새 페이지를 방문하려고 할 때 일반적으로 탐색 메뉴를 먼저 봅니다.

WordPress 메뉴에 소셜 미디어 아이콘을 추가하면 모든 소셜 미디어 프로필에서 더 많은 클릭, 참여 및 팔로워를 얻을 수 있습니다.

소셜 미디어 아이콘은 메뉴에 추가 텍스트를 추가하지 않고도 방문자의 관심을 끌 수 있습니다. 이를 통해 작은 공간에서 다양한 프로필을 많이 홍보할 수 있습니다.

즉, WordPress 메뉴에 소셜 미디어 아이콘을 쉽게 추가하는 방법을 살펴보겠습니다.

비디오 튜토리얼

서면 지침을 선호하는 경우 계속 읽으십시오. 아래의 빠른 링크를 사용하여 사용하려는 방법으로 바로 이동하십시오.

방법 1: 메뉴 이미지 플러그인 사용(권장)

WordPress 메뉴에 소셜 미디어 아이콘을 추가하는 가장 쉬운 방법은 메뉴 이미지를 사용하는 것입니다. 이 무료 플러그인을 사용하면 소셜 아이콘을 포함하여 탐색 메뉴에 이미지 아이콘을 추가할 수 있습니다.

소셜 아이콘을 만들 때 WordPress 미디어 라이브러리에 업로드한 모든 이미지를 사용할 수 있습니다.

예를 들어, 최고의 소셜 미디어 회사 중 다수는 Twitter 브랜드 툴킷과 같이 웹 사이트에서 사용할 수 있는 로고를 제공합니다. Font Awesome 웹사이트와 같은 온라인 라이브러리에서 아이콘을 다운로드할 수도 있습니다.

메뉴 이미지는 Font Awesome 플러그인과도 통합됩니다. 이를 통해 모든 주요 소셜 네트워크의 아이콘을 포함하여 WordPress 대시보드에서 직접 모든 Font Awesome 아이콘을 찾아보고 가져올 수 있습니다. 이러한 이유로 Font Awesome 플러그인을 설치하는 것이 좋습니다.

Font Awesome을 설정하는 방법에 대한 자세한 지침은 WordPress 테마에 아이콘 글꼴을 쉽게 추가하는 방법에 대한 가이드를 참조하세요.

소셜 미디어 아이콘을 제공하는 방법에 관계없이 메뉴 이미지 플러그인을 설치하고 활성화해야 합니다. 자세한 내용은 WordPress 플러그인 설치 방법에 대한 단계별 가이드를 참조하십시오.

활성화 시 아이콘 크기를 확인하고 필요한 경우 변경할 수 있습니다. 이렇게 하려면 메뉴 이미지 » 메뉴 이미지 로 이동해야 합니다.

소셜 아이콘을 만들 때 썸네일, 이미지 또는 대형과 같은 기본 WordPress 이미지 크기를 사용할 수 있습니다. 메뉴 이미지를 사용하면 기본적으로 24×24, 36×36 및 ​​48×48 픽셀로 설정된 세 가지 고유한 크기 중에서 선택할 수 있습니다.

이러한 크기는 대부분의 WordPress 웹사이트에서 잘 작동하지만 첫 번째, 두 번째 또는 세 번째 메뉴 이미지 필드에 다른 숫자를 입력하여 변경할 수 있습니다.

완료되면 '변경 사항 저장'을 클릭하여 설정을 저장합니다.

탐색 메뉴에 아이콘을 추가하려면 Appearance » Menus 로 이동하십시오. 기본적으로 WordPress는 사이트의 기본 메뉴를 표시합니다.

소셜 미디어 아이콘을 다른 메뉴에 추가하려면 '편집할 메뉴 선택' 드롭다운을 열기만 하면 됩니다.

그런 다음 목록에서 메뉴를 선택하고 '선택'을 클릭합니다.

새 메뉴를 만드는 방법에 대한 단계별 지침은 WordPress에서 탐색 메뉴를 추가하는 방법에 대한 가이드를 참조하세요.

시작하려면 각 소셜 프로필을 새 링크로 메뉴에 추가해야 합니다.

준비가 되면 '맞춤 링크' 섹션을 클릭하여 확장한 다음 사용하려는 소셜 미디어 페이지의 주소를 입력합니다. 예를 들어 Facebook 그룹 또는 YouTube 채널의 URL을 입력할 수 있습니다.

또한 '링크 텍스트'를 입력해야 합니다. 나중 단계에서 메뉴에서 이 제목이 표시되는 위치를 변경하거나 완전히 숨길 수 있는 옵션이 있습니다.

완료되면 '메뉴에 추가'를 클릭합니다.

이제 이 항목이 오른쪽 열에 나타납니다.

소셜 미디어 아이콘을 추가하려면 새 메뉴 항목 위로 마우스를 가져가면 됩니다.

그런 다음 '메뉴 이미지' 버튼이 나타나면 클릭합니다.

참고: '메뉴 이미지' 버튼이 보이지 않으면 '변경사항 저장'을 클릭하세요. 이제 메뉴 항목 위로 마우스를 가져가면 '메뉴 이미지' 버튼이 나타납니다.

이제 WordPress 미디어 라이브러리의 이미지를 사용할지 또는 Font Awesome에서 제공하는 아이콘을 사용할지 결정할 수 있습니다.

기성품 Font Awesome 아이콘을 사용하려면 'Icon' 옆의 라디오 버튼을 클릭하십시오.

그런 다음 'Fontawesome'을 선택합니다.

그런 다음 '브랜드'를 클릭할 수 있습니다.

이제 모든 주요 소셜 네트워크의 아이콘을 포함하여 모든 브랜드 아이콘이 표시됩니다. 사용하고 싶은 이미지가 보이면 클릭만 하면 됩니다.

또 다른 옵션은 '이미지' 라디오 버튼을 선택하여 WordPress 미디어 라이브러리에서 자신의 아이콘을 사용하는 것입니다. 그런 다음 '이미지 설정' 링크를 클릭합니다.

이제 WordPress 미디어 라이브러리에서 이미지를 선택하거나 컴퓨터에서 새 파일을 업로드할 수 있습니다.

아이콘을 가져온 위치에 관계없이 메뉴 이미지는 오른쪽에 미리보기를 표시합니다.

이제 '제목 위치' 설정을 사용하여 소셜 미디어 아이콘 위, 아래, 앞 또는 뒤에 링크 제목을 표시할지 여부를 변경할 수 있습니다.

많은 소셜 미디어 아이콘은 즉시 알아볼 수 있으므로 링크 제목이 불필요할 수 있습니다. 탐색 메뉴에 많은 소셜 아이콘을 추가하는 경우 제목으로 인해 메뉴가 더 지저분하고 복잡해 보일 수도 있습니다.

그렇게 말하면 '숨기기' 라디오 버튼을 선택하여 제목을 숨길 수 있습니다.

변경하면 실시간 미리보기가 자동으로 업데이트되므로 다른 설정을 시도하여 가장 잘 보이는 것을 확인할 수 있습니다.

마지막으로 자신의 이미지를 사용하는 경우 '이미지 크기' 드롭다운을 사용하여 소셜 미디어 아이콘의 크기를 조정할 수 있습니다.

더 큰 아이콘은 방문자의 주의를 끌지만 주의를 산만하게 할 수도 있습니다. 이를 염두에 두고 다양한 크기를 시도하여 WordPress 블로그에서 가장 잘 작동하는 것을 확인할 수 있습니다.

소셜 미디어 아이콘 설정 방법에 만족하면 '변경 사항 저장'을 클릭하기만 하면 됩니다.

WordPress 메뉴에 더 많은 아이콘을 추가하려면 이 단계를 반복하기만 하면 됩니다.

탐색 메뉴에서 다른 중요한 항목에 아이콘을 추가할 수도 있습니다. 예를 들어 연락처 양식이나 WooCommerce 결제 페이지에 아이콘을 추가할 수 있습니다.

메뉴 설정이 만족스러우면 '메뉴 저장'을 클릭하십시오.

이제 웹사이트를 방문하여 새로운 소셜 미디어 아이콘이 작동하는 모습을 볼 수 있습니다.

데모 웹사이트에서 본 모습입니다.

방법 2: 전체 사이트 편집기 사용(블록 테마만 해당)

WordPress에는 소셜 미디어 아이콘이 포함된 메뉴를 만든 다음 멋진 레이아웃으로 표시할 수 있는 소셜 아이콘 블록이 내장되어 있습니다.

이 블록에는 모든 주요 소셜 네트워크용 아이콘이 내장되어 있으므로 Font Awesome과 같은 플러그인을 설치하거나 미디어 라이브러리에 아이콘을 업로드할 필요가 없습니다. 그러나 소셜 미디어 아이콘과 소셜 아이콘 블록에 대한 링크만 추가할 수 있으므로 메뉴 이미지 플러그인만큼 유연하지 않습니다.

블록 테마를 사용하는 경우 머리글이나 바닥글과 같은 웹 사이트의 모든 부분에 소셜 아이콘 블록을 추가할 수 있습니다. 이러한 방식으로 전체 웹사이트에 소셜 미디어 메뉴를 표시할 수 있습니다.

시작하려면 WordPress 대시보드에서 모양 » 편집기 로 이동하십시오.

기본적으로 전체 사이트 편집기는 테마의 홈 템플릿을 표시하지만 모든 템플릿 또는 템플릿 부분에 소셜 아이콘을 추가할 수 있습니다. 표준 WordPress 콘텐츠 편집기를 사용하여 편집할 수 없는 웹 사이트 부분에 소셜 미디어 아이콘을 추가할 수도 있습니다.

예를 들어 사이트의 404 페이지 템플릿에 소셜 미디어 메뉴를 추가할 수 있습니다.

사용 가능한 모든 옵션을 보려면 '템플릿' 또는 '템플릿 부분'을 선택해야 합니다.

이제 편집하려는 템플릿 또는 템플릿 부분을 클릭할 수 있습니다.

예를 들어 WordPress 헤더에 소셜 미디어 아이콘을 추가하지만 어떤 템플릿을 선택하든 단계는 동일합니다.

선택한 후 WordPress는 템플릿 또는 템플릿 부분의 미리보기를 표시합니다.

계속하려면 작은 연필 아이콘을 클릭하십시오.

완료되면 왼쪽 상단 모서리에 있는 파란색 '+' 아이콘을 클릭합니다.

검색창에 '소셜 아이콘'을 입력해야 합니다.

오른쪽 블록이 나타나면 테마 템플릿으로 끌어다 놓습니다.

첫 번째 아이콘을 추가하려면 블록 내부의 '+' 아이콘을 클릭하기만 하면 됩니다.

나타나는 팝업에서 'Twitter' 또는 'Facebook'과 같이 추가하려는 아이콘을 입력합니다.

오른쪽 아이콘이 나타나면 클릭하여 WordPress 블로그에 추가하십시오.

이제 새로운 소셜 미디어 아이콘을 클릭하십시오.

이렇게 하면 Facebook 페이지와 같이 연결하려는 URL을 입력할 수 있는 작은 막대가 열립니다.

WordPress에 더 많은 소셜 아이콘을 추가하려면 '+' 아이콘을 클릭하고 위에서 설명한 것과 동일한 과정을 반복하면 됩니다.

모든 소셜 미디어 아이콘을 추가한 후 블록을 사용자 정의할 수 있습니다. 이렇게 하려면 소셜 아이콘 블록을 클릭하여 선택한 다음 '차단' 탭을 클릭하십시오.

'레이아웃' 설정을 사용하여 아이콘의 맞춤, 정렬 및 방향을 변경할 수 있습니다.

기본적으로 모든 소셜 미디어 링크는 동일한 탭에서 열립니다. 방문자를 웹사이트에 유지하려면 클릭하여 '새 탭에서 링크 열기' 토글을 활성화할 수 있습니다.

기본적으로 WordPress는 텍스트 없이 소셜 아이콘만 표시합니다.

각 아이콘 옆에 텍스트를 표시하려면 '레이블 표시' 토글을 클릭하여 활성화합니다.

다음으로 '스타일' 탭을 클릭합니다.

여기에서 '기본', '로고만' 또는 '알약 모양'을 클릭하여 버튼 스타일을 변경할 수 있습니다.

마지막으로 '차단 간격' 아래의 설정을 사용하여 소셜 아이콘 사이의 간격을 변경할 수 있습니다.

메뉴 모양이 만족스러우면 '저장' 버튼을 클릭합니다.

이제 웹사이트를 방문하면 소셜 미디어 아이콘이 실시간으로 표시됩니다.

보너스: 소셜 미디어 프로필을 홍보하는 방법

WordPress 메뉴에 소셜 미디어 아이콘을 추가하는 것은 다른 계정에서 더 많은 팔로워와 참여를 얻을 수 있는 좋은 방법입니다. 그러나 Twitter, Facebook 및 기타 소셜 프로필을 홍보하는 더 많은 방법이 있습니다.

더 많은 팔로워와 참여를 얻는 가장 좋은 방법은 웹사이트에 라이브 소셜 피드를 삽입하는 것입니다. 이를 통해 방문자가 귀하의 게시물에 참여하거나 소셜 미디어에서 귀하를 팔로우하는 데 사용할 수 있는 버튼과 함께 여러 계정의 최신 게시물을 표시할 수 있습니다.

웹사이트에 소셜 미디어 피드를 추가하는 가장 좋은 방법은 Smash Balloon을 사용하는 것입니다. WordPress를 위한 최고의 소셜 미디어 피드 플러그인이며 Twitter, Instagram, Facebook 등의 라이브 피드를 포함할 수 있습니다.

자세한 내용은 WordPress에 소셜 미디어 피드를 추가하는 방법에 대한 가이드를 참조하세요.

이 기사가 WordPress 메뉴에 소셜 미디어 아이콘을 추가하는 방법을 배우는 데 도움이 되었기를 바랍니다. WordPress에 Facebook 비디오를 삽입하는 방법에 대한 가이드를 보거나 WordPress용 최고의 Twitter 플러그인에 대한 전문가 선택을 볼 수도 있습니다.

이 기사가 마음에 드셨다면 WordPress 비디오 자습서용 YouTube 채널을 구독하십시오. 트위터와 페이스북에서도 우리를 찾을 수 있습니다.