워드프레스 링크 파비콘 자동삽입 코드

로

워드프레서 사이트에서 블로그 글(포스트) 본문에 포함된 외부 링크 앞에 해당 사이트의 파비콘(favicon) 이미지를 자동으로 표시해주는 기능입니다.

글 안에 <a> 태그로 외부 링크를 넣으면, 구글에서 제공하는 파비콘 API를 통해 해당 사이트의 작은 아이콘(16×16)을 가져와 링크 앞에 붙여줍니다.

이로 인해 본문 내 링크들이 시각적으로 더 눈에 띄고, 어떤 사이트로 연결되는지 직관적으로 파악할 수 있게 됩니다.

이 기능은 포스트 페이지에만 적용되고, 페이지나 리스트에서는 적용되지 않도록 했습니다. 만약 페이지나 리스트에도 추가하고 싶은경우 page를 추가해주면 됩니다.

파비콘 자동 적용예시

image


포스트에만 파비콘 자동 삽입하기

function add_favicon_to_links_only_in_posts($content) {     // 조건: 포스트(Post)일 때만 적용     if (!is_singular('post')) {         return $content;     }      // 정규식으로 모든 a 태그를 찾기     $pattern = '/<a\s+[^>]*href=["\'](https?:\/\/[^"\']+)["\'][^>]*>(.*?)<\/a>/i';      // 링크에 파비콘 이미지 추가     $content = preg_replace_callback($pattern, function ($matches) {         $url = $matches[1];         $link_text = $matches[2];          // 구글 파비콘 API         $favicon_url = 'https://www.google.com/s2/favicons?sz=16&domain_url=' . urlencode($url);          // 파비콘 + 링크 조합         $new_link = '<img src="' . esc_url($favicon_url) . '" alt="favicon" style="width:16px;height:16px;margin-right:4px;vertical-align:middle;">';         $new_link .= '<a href="' . esc_url($url) . '" target="_blank" rel="noopener noreferrer">' . $link_text . '</a>';          return $new_link;     }, $content);      return $content; } add_filter('the_content', 'add_favicon_to_links_only_in_posts');

페이지에만 파비콘 자동 삽입하기

function add_favicon_to_links_only_in_pages($content) {     // 조건: 페이지일 때만 적용     if (!is_page()) {         return $content;     }      // 정규식으로 모든 a 태그를 찾기     $pattern = '/<a\s+[^>]*href=["\'](https?:\/\/[^"\']+)["\'][^>]*>(.*?)<\/a>/i';      // 링크에 파비콘 이미지 추가     $content = preg_replace_callback($pattern, function ($matches) {         $url = $matches[1];         $link_text = $matches[2];          // 구글 파비콘 API         $favicon_url = 'https://www.google.com/s2/favicons?sz=16&domain_url=' . urlencode($url);          // 파비콘 + 링크 조합         $new_link = '<img src="' . esc_url($favicon_url) . '" alt="favicon" style="width:16px;height:16px;margin-right:4px;vertical-align:middle;">';         $new_link .= '<a href="' . esc_url($url) . '" target="_blank" rel="noopener noreferrer">' . $link_text . '</a>';          return $new_link;     }, $content);      return $content; } add_filter('the_content', 'add_favicon_to_links_only_in_pages');

모든 콘텐츠에 파비콘 자동삽입

function add_favicon_to_links_in_all_content($content) {     // 정규식으로 모든 a 태그를 찾기     $pattern = '/<a\s+[^>]*href=["\'](https?:\/\/[^"\']+)["\'][^>]*>(.*?)<\/a>/i';      // 링크에 파비콘 이미지 추가     $content = preg_replace_callback($pattern, function ($matches) {         $url = $matches[1];         $link_text = $matches[2];          // 구글 파비콘 API         $favicon_url = 'https://www.google.com/s2/favicons?sz=16&domain_url=' . urlencode($url);          // 파비콘 + 링크 조합         $new_link = '<img src="' . esc_url($favicon_url) . '" alt="favicon" style="width:16px;height:16px;margin-right:4px;vertical-align:middle;">';         $new_link .= '<a href="' . esc_url($url) . '" target="_blank" rel="noopener noreferrer">' . $link_text . '</a>';          return $new_link;     }, $content);      return $content; } add_filter('the_content', 'add_favicon_to_links_in_all_content');

댓글남기기