사용자 정의 소셜 공유 아이콘으로 WordPress 속도 최적화

그것은 쉬운 일로 보일지 모르지만 WordPress 사이트에 잘 작동하는 소셜 공유 버튼을 추가하는 것은 번거로운 일이 될 수 있습니다. 내가 잘 행동한다고 ​​말하면 간단하고 가볍고 자원 친화적이며, 가장 빠른 사회적 공유 플러그인이 있다는 것을 의미하지 않습니다. 그들은 미친 듯이 자원을 먹는 경향이 있습니다. 왜 누군가는 일부 아이콘을 표시하기 위해 플러그인로드 시간을 25-35 % 늘려야할까요? 그들의 사이트에?

좋은 소식은이 작업을 수행하기 위해 반드시 플러그인이 필요하지 않다는 것입니다. 이 튜토리얼에서는, 당신이 어떻게 쉽게 할 수 있는지 보여줄 것입니다. 맞춤 소셜 공유 버튼 추가 로 WordPress 사이트의 게시물 끝에 몇 줄의 코드.

1 단계 : 소셜 공유 버튼 생성

우리는 공유 아이콘을 생성하기위한 간편하고 사용하기 쉬운 웹 도구 인 Simple Sharing Buttons Generator를 사용할 것입니다. 이 응용 프로그램의 주요 이점은 그것이 생성하는 버튼이 프론트 엔드에서 실행된다는 것입니다. 그들은 당신의 서버에 부담을주지 않을 것입니다. 또한 사용자의 활동을 비공개로 유지할 수 있습니다..

맞춤 검색 버튼을 생성하려면 여기로 이동하여 시작하다. 6 가지 버튼 스타일 중에서 1 개를 선택하십시오. 딸깍 하는 소리 다음 것 그리고 틱 소셜 네트워크 당신은 당신의 위치에 추가하고 싶다. 작업이 끝나면 웹 사이트 정보를 작성해야합니다..

이 화면 (아래)에는 두 가지 옵션이 있습니다. '자바 스크립트 없음' 과 '자바 스크립트'. 진드기 자바 스크립트, 브라우저가 URL을 동적으로 감지 할 수 있으므로 방문객은 홈페이지의 URL뿐만 아니라 개별 게시물을 개별적으로 공유 할 수 있습니다.

마지막으로 실시간 미리보기를보고 선택한 아이콘 세트를 다운로드 한 다음 생성 한 코드를 가져옵니다..

2 단계 : 하위 테마 만들기

이제 생성 된 아이콘과 코드를 사이트에 추가해야합니다. 우선 당신은 어린이 테마를 만들어야합니다..

WP 자습서를 사용하여 WP 하위 테마를 쉽게 만들거나 WP Codex 기사의 단계를 수행 할 수 있습니다. 이미 가지고 있다면 3 단계로 건너 뛸 수 있습니다..

아동 주제는 현재 사용하는 주제와 관련이 있습니다 - 아동이 부모와 관련이있는 것과 유사한 방식으로. 그것 부모 테마에서 모든 것을 (스타일 및 기능) 상속받습니다. 하지만 당신은 할 수 있습니다 추가 기능 추가 그것에.

이 경우 추가 기능은 맞춤 소셜 공유 버튼입니다..

3 단계 : 아이콘을 표시하는 사용자 지정 함수 만들기

우리는 자식 테마의 functions.php 파일에 커스텀 함수를 추가 할 것이다..

이 기능을 사용하여 사용자 지정 액션 후크를 사용하여 원하는 사이트에 소셜 아이콘을 추가 할 수 있습니다. 자식 테마에 아직 functions.php 파일이 없다면 이름 테마 함수의 루트 폴더에 빈 텍스트 파일을 만들고 확장자를 .php로 변경하십시오.

이 빈 파일에 다음 코드 줄을 삽입하십시오.

 
귀하의 functions.php 파일이 설정되면 다음 코드 스 니펫을 추가하십시오.
 
 / * * 맞춤형 소셜 공유 아이콘을 추가합니다. * / function add_social_sharing () ? 
이 게시물을 공유하십시오.
   
마침내 HTML 주석의 줄을 지우십시오. 위의 코드 스 니펫에서 HTML 코드로 교체하십시오. Social Sharing Buttons Generator를 사용하여 1 단계에서 생성 한.
 
4 단계 : 적절한 템플릿 파일을 하위 테마 폴더에 복사
 
기본적으로 단일 게시물은 템플릿 파일로 통치됩니다. single.php. 때때로 -보다 현대적인 주제에서 - 특히 single.php 템플릿 파일을 추가로로드하므로 더 복잡합니다. 이 단계에서는 나중에 해당 아이콘을 추가 할 수있는 적절한 템플릿 파일을 찾아야합니다..
 
소셜 버튼에 적합한 위치를 찾으려면 템플릿 파일을 찾아야합니다. 단일 게시물의 내용을로드하는 함수가 포함되어 있습니다..
 
아래의 WordPress 관리 대시 보드에서 테마 편집기를 엽니 다. 모양> 편집기. 오른쪽 상단 모서리에 부모 테마를 선택할 수있는 드롭 다운 목록이 있습니다. 드롭 다운 아래에는 부모 테마에 포함 된 모든 템플릿 파일을 볼 수 있습니다. 찾으실 때까지 아래로 스크롤하십시오. 단일 게시 템플릿 (single.php 라 불림) 그것을 연다..
 
부모 테마가 get_template_part () WP 기능은 single.php 파일은 추가 템플릿 파일을 사용하여 단일 게시물의 내용을로드한다는 것을 의미합니다..
 
먼저 어느 것이이 것인지 알아 내야합니다. 추가 템플릿 파일의 이름은 get_template_part () 기능.
 
에서 스물 다섯 다음과 같이 보입니다.
 
get_template_part ( 'content', get_post_format ());
 
첫 번째 매개 변수는 '함유량' 이는 우리가 호출 한 템플릿 파일을 찾는다는 것을 의미합니다. content.php. 이 파일을 부모 테마 루트 폴더에서 자식 테마 루트 폴더로 복사하여 수정해야합니다..
 
 
5 단계 : 오른쪽 템플릿 파일에 작업 훅 추가
 
우리는 다음과 같은 함수를 만들었습니다. add_social_sharing () 3 단계에서 우리는이를 호출 된 사용자 정의 액션 훅에 첨부했습니다. custom_social_share. 이제 우리는 함수가 실행되기 원하는 곳으로이 훅을 추가해야 할 것입니다..
 
다음은 올바른 위치에 삽입해야하는 코드 스 니펫입니다.
 
 
다음으로 올바른 장소를 찾아 보겠습니다..
 
코드 편집기 나 WordPress 관리 대시 보드의 테마 편집기에서 4 단계의 하위 테마에 추가 한 템플릿 파일을 열고 the_content () 기능.
 
있는지 확인하십시오. wp_link_pages () 직후의 기능 the_content () 기능. 있다면, 위의 코드 스 니펫이 나온다. 그렇지 않으면 the_content () 기능.
 
 
6 단계 : CSS 코드를 하위 테마에 추가
 
그 style.css 코드 편집기 나 WordPress 관리 대시 보드의 테마 편집기에서 자녀 테마의 파일을 복사하고 1 단계에서 생성 한 CSS 코드를 복사하여 파일의 끝에 붙여넣고 저장하십시오.
 
 
CSS 파일에 두 줄을 더 추가하여 소셜 공유 아이콘을 각 테마에 올바르게 표시합니다. 다음 코드 스 니펫을 복사하여 붙여 넣기하십시오. style.css 파일:
 
 ul.share-buttons li a border : 0;  ul.share-buttons li img 디스플레이 : 인라인;  
 
7 단계 : 서버에 소셜 미디어 아이콘 세트 업로드
 
1 단계에서 다운로드 한 선택한 소셜 미디어 아이콘 세트를 자녀의 테마 폴더에 업로드합니다. FTP를 통해 서버를 연결하고 새 폴더를 만듭니다. 이미지들 하위 테마 폴더 (/ wp-content / themes / your-child-theme / images)의 루트 안에 있고 여기에 설정된 아이콘을 업로드하십시오.
 
우리는 폴더 이름을 짓는다. 이미지들 이것은 Simple Sharing Buttons Generator가 사용하는 이미지 폴더의 기본 이름이기 때문에.
 
8 단계 : 아이콘 파일의 경로 확인
 
7 단계에서 소셜 미디어 아이콘을 서버에 업로드 한 후에는 아이콘 파일의 경로를 확인하여 파일이로드되는지 확인해야합니다.
 
이미지 파일의 경로는 브라우저에서 서버의 위치에 대한 힌트를 제공합니다. 내부의 이미지 경로를 확인해 보겠습니다. functions.php 아이 테마의 파일. 코드 편집기에서 파일을 열고 add_social_sharing () Simple Sharing Buttons Generator로 생성 한 HTML 코드를 확인해야하는 기능.
 
HTML 코드에서  태그에 src 각 아이콘에 대한 속성 각 항목이 맞는지 확인하십시오. src 속성은 단계 7에서 아이콘 세트가 업로드 된 정확한 위치를 가리 킵니다..
 
Simple Sharing Buttons Generator는 상대 경로를  파일. 때때로 상대 경로를 사용하면 브라우저에서 이미지를 렌더링 할 수 없습니다., 그래서 좋은 생각입니다. 대신 절대 경로 사용. 이렇게하면 방문자가 잠재적으로 사용하는 각 브라우저에서 필요한 아이콘 파일의 위치가 확실하지 않을 수 있습니다..
 
생성기에 의해 추가 된 상대 이미지 경로는 다음과 같습니다.
 
 
다음을 변경해 보겠습니다. src 각 아이콘의 속성은 파일의 전체 URL을 포함한다는 것을 의미하는 절대 경로.
 
위의 URL 경로는 다음과 같습니다.
 
 
9 단계 : 수정 된 파일 업로드 및 하위 테마 활성화
 
FTP를 통해 서버를 연결하고 아직 업로드하지 않은이 자습서에서 만든 모든 파일을 업로드하십시오. functions.php, 그만큼 style.css, 및 적절한 템플릿 파일 (이 자습서에서는 single.php 아니면 그 content.php).
 
마지막으로 WP 관리 대시 보드에서 하위 테마를 활성화합니다. 모양> 테마 메뉴.
 
이제는 초경량의 자원 절약형 맞춤형 소셜 공유 아이콘을 사용할 준비가되었습니다. 온라인으로 가서 사이트에서 실시간으로 확인할 수 있습니다..
 
 
결론
 
이 튜토리얼에서는 단일 게시물 끝에 맞춤형 소셜 공유 버튼을 추가하는 방법을 설명했습니다. 우리가 만든 동작 후크의 도움으로 웹 사이트의 다른 위치에 공유 아이콘을 추가 할 수 있습니다.
 
5 단계에서 사용한 코드를 단추를 표시 할 위치에 추가하십시오.
 
 
아이콘을 어딘가에 배치하려면 올바른 템플릿 파일을 찾아야합니다. 단일 페이지는 호출 된 템플릿 파일에 의해 결정됩니다. page.php, 이미지와 같은 미디어 첨부 파일은 attachment.php.
 
웹 사이트의 다른 장소에 소셜 공유 버튼을 표시하려면 WordPress 템플릿 계층 구조를 사용하여 찾을 수 있습니다.
 
소스 다운로드