2024년 생성프레스 소셜 공유 버튼: 최고의 튜토리얼

이는 의심할 여지 없이 블로그 게시물의 채널 간 홍보를 강화하는 데 도움이 될 것입니다. 그러면 귀하의 웹 존재감이 높아질 것입니다.

블로그 항목의 프런트 엔드에 떠다니는 고정 소셜 공유 버튼을 구성하는 방법을 보여 드리겠습니다. 즉, 청중은 항상 볼 수 있습니다.

플러그인을 통해 이를 달성할 수 있지만 가장 좋은 부분은 수동으로 구성하는 것입니다. 이렇게 하면 사이트에 JavaScript를 추가하는 것을 방지할 수 있습니다(웹 사이트 성능 저하).

이 강의에서는 Elements 모듈을 사용할 것이기 때문에 생성프레스 프리미엄이 필요합니다.

차례

플러그인 없이 생성프레스(GeneratePress)에서 소셜 공유 버튼 만들기

generatePress에서 소셜 공유 버튼 만들기

플러그인 없이 생성프레스 테마에서 소셜 공유 버튼을 생성하려면 SVG 아이콘에 대해 알아야 합니다.

SVG는 확장 가능한 벡터 그래픽입니다. W3C(World Wide Web Consortium)(World Wide Web Consortium)에서 개발한 개방형 표준 비주얼(주로 아이콘으로 사용됨)입니다.

SVG 사용의 이점

우리는 Iconmonstr의 SVG를 사용할 것입니다. 이는 아이콘뿐만 아니라 XML 코드가 포함된 아이콘도 의미합니다.

이를 달성하려면 먼저 생성프레스(GeneratePress)에서 새 요소를 생성해야 합니다. WordPress 대시보드로 이동하여 모양 아래에서 요소를 클릭하세요. 그러면 요소 페이지가 열리고 새 요소 추가를 클릭합니다.

새 요소 추가를 클릭하자마자, GeneratePress 대화 상자 창이 표시됩니다. 후크를 클릭하세요. 정확합니다. 이 작업을 수행하려면 생성프레스 사용자 정의 후크가 필요합니다.

새 요소에 이름을 지정하고 코드를 추가합니다.

헤더 이후 생성으로 후크를 선택하고 PHP를 실행한 후 표시 규칙을 게시물 – 모든 게시물로 설정합니다.

화면 뷰포트에 떠다니는 소셜 공유 아이콘이 필요하기 때문입니다. 헤더 후크 이후 생성을 선택하는 것이 가장 좋습니다.

디스플레이 설정을 모든 게시물로 선택한 이유는 사용자가 자신의 소셜 사이트에서 콘텐츠를 공유하기를 원하기 때문입니다.

게시 버튼을 누르는 것을 잊지 마세요.

다음 코드를 복사하여 웹사이트에 동일하게 구현하세요.

그렇게 하려면 WordPress 대시보드로 이동하여 모양 아래에서 사용자 정의를 클릭하세요.

그러면 생성프레스(GeneratePress) 테마 사용자 정의 프로그램이 열립니다. 여기까지 내려가서 추가 CSS를 클릭하세요.

비슷한 스타일을 적용하려면 다음 CSS 코드를 붙여넣으세요. 요구 사항에 따라 CSS를 조정할 수 있습니다.

마지막으로 방법은 다음과 같습니다. 사회적 공유 아이콘은 귀하의 웹사이트와 같아야 합니다. 화면 뷰포트의 70% 위치에서 위에서부터 부동하도록 만들었습니다.

generatePress(플러그인 없음)에서 소셜 공유 버튼의 이점(플러그인 없음)

Iconmonstr의 SVG를 사용하면 아이콘이 매우 가벼워집니다.
관련된 어떤 종류의 JavaScript 코드도 없습니다.

이 전략을 사용하면 타사 플러그인을 설치하지 않습니다.
반응형입니다.

모든 버튼은 공유 목적으로 매우 빠르게 작동합니다.

이제 코드와 플러그인을 활용하여 생성프레스(GeneratePress)에서 소셜 공유 버튼을 구성하는 방법을 발견했습니다.

귀하에게 쉽고 귀하의 요구 사항을 충족하는 옵션을 사용하십시오. 기사의 PHP 및/또는 CSS 코드를 자유롭게 편집하세요.

0 공유