WordPress_php 팁에서 댓글 아바타의 사용자 정의 기본 및 지연 로딩 구현

WBOY
풀어 주다: 2016-05-16 20:04:18
원래의
1003명이 탐색했습니다.

WordPress 기본 댓글 아바타 사용자 정의
Gravatra 아바타를 설정하지 않은 댓글 작성자의 경우 WordPress에서는 백그라운드에 설정한 기본 아바타를 표시합니다. 이는 신비한 사람, 공백, 기본 Gravatar 로고 등이 될 수 있습니다. 그러나 이러한 아바타에는 공통적인 단점이 있습니다. 즉, 그다지 아름답지도 않고 보기에도 좋지 않다는 것입니다! 예를 들어, 기사를 읽기 위해 블로그에 갔지만 기사에 댓글을 단 독자의 아바타는 모두 작은 괴물, 복고풍 등 WordPress에서 자동으로 생성한 "보기 흉한" 아바타라는 것이 확실하다면, 아직도 이 블로그의 기사를 읽어보실 건가요? 내 생각에 대답은 '그렇다'이다! 그렇다면 귀하의 블로그에 속하고 귀하의 블로그에 적합한 기본 WordPress 아바타를 디자인하거나 찾는 것에 대해 생각해 본 적이 있습니까? 좋아, Zhou Liang은 모든 사람의 식욕을 자극하지 않을 것입니다. 플러그인을 사용하지 않고 WordPress의 기본 댓글 아바타를 사용자 정의하는 방법에 대해 이야기하겠습니다.

방법은 매우 간단합니다. 사용 중인 테마의 function.php 파일에 아래에 제공한 코드를 넣으세요.

<&#63;php
// Make a new default gravatar available on the dashboard
function newgravatar ($avatar_defaults) {
$myavatar = get_bloginfo('template_directory') . '/images/tweaker.jpg';
$avatar_defaults[$myavatar] = "Tweaker";
return $avatar_defaults;
}
add_filter( 'avatar_defaults', 'newgravatar' );
&#63;>

로그인 후 복사


위 코드의 /images/tweaker.jpg는 사용자 정의된 기본 아바타의 상대 경로입니다. 이미지의 주소는 직접 수정할 수 있습니다. 사용 중인 테마의 이미지 파일 아래에 아바타를 넣는 것을 권장합니다.

WordPress 댓글 아바타의 지연 로드
HTML 구조 수정

앞서 언급한 새 브라우저의 문제로 인해 더 이상 HTML 이미지를 작성하는 일반적인 방법을 사용할 수 없습니다. 대신 src 속성에 자리 표시자를 작성하고 data-original 속성에 실제 이미지 주소를 작성해야 합니다. .위의 WordPress 아바타 코드 구조는 다음과 같습니다.

<img class="avatar" src="占位符图片.gif" data-original="头像图片.jpg" />
로그인 후 복사

워드프레스에서 원본 출력 아바타는 다음과 같습니다.

<&#63;php echo get_avatar($comment); &#63;>
로그인 후 복사

이제 Lazy Load 플러그인에 맞게 변경해야 할 구조는 다음과 같습니다.

<&#63;php echo '<img class="avatar" src="占位符图片.gif" alt="" data-original="' . preg_replace(array('/^.+(src=)(\"|\')/i', '/(\"|\')\sclass=(\"|\').+$/i'), array('', ''), get_avatar($comment)) . '" />'; &#63;>
로그인 후 복사

자리 표시자 이미지로 로딩 이미지나 기본 아바타를 사용하는 것을 권장합니다.

지연 로드 지원 추가

footer.php를 열고 Lazy Load 플러그인을 추가한 후 전에 호출하세요.

<script src="jquery.lazyload.js"></script>
<script>
/* <![CDATA[ */
$("img.avatar").lazyload();
/* ]]> */
</script>
로그인 후 복사

물론 이 작업을 수행하기 전에 웹 사이트에 jQuery가 로드되어 있는지 확인해야 합니다. 전체 지침을 보려면 지연 로드에 대한 번역된 기사를 참조하세요.

지연 로드 사용의 장점과 단점

Lazy Load를 사용하는 이유는 무엇입니까? 사용하기 전에 이미지 로딩을 지연시키고 페이지 로딩 속도를 향상시킬 수 있다는 것을 알고 계셨을 것입니다. 그러나 실제로 이는 주로 속도 문제이며 웹 사이트의 SEO에도 매우 중요합니다. 예를 들어, 특정 기사 페이지가 있고 N명의 여러 사람이 답글을 달고 있지만 이러한 답글 작성자의 아바타는 기사의 내용과 아무 관련이 없는 경우가 많습니다. 우리는 검색 엔진에 관련 없는 사진이 너무 많이 포함되는 것을 원하지 않습니다.

다시 말해서 전자상거래 웹사이트를 구축하는 경우 제품 설명에 풍부한 그래픽 정보가 포함되어 있고 검색 엔진에서 크롤링되기를 바랍니다. 그러나 이러한 이미지는 크기가 커서 로딩에 영향을 미치는 경우가 많습니다. Taobao는 페이지 성능을 위해 페이지 성능도 향상시켰습니다. 모두 게으른 로드이므로 SEO 의존도가 높은 플랫폼에는 좋지 않을 수 있습니다.

이미지 로딩 지연 여부를 선택하세요. 콘텐츠의 중요성과 페이지 성능을 비교하려면 균형을 맞추는 것이 중요합니다.

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿