Tag Cloud 위젯 커스텀의 모든 것

태그 클라우드(Tag Cloud)의 글자 크기와 정렬 방식 커스텀하기

 

센스 있는 테마를 사용하고 있다면, 태그 클라우드(Tag Cloud)의 글자 크기나 정렬 방식에 대해 크게 신경 쓰지 않으셔도 될 것입니다. 테마에서 태그 클라우드(Tag Cloud)의 기본 설정을 사용자가 보다 익숙하고 편안하게 느낄 수 있도록 수정했기 때문입니다.

 

하지만 편집되지 않은, 워드프레스 기본 설정이 적용된 태그 클라우드(Tag Cloud)를 사용한다면 디자인 퀄리티가 매우 저조하다고 느낄 수 있습니다. 또한 구글로부터 텍스트 크기가 너무 작거나 클릭할 수 있는 요소가 너무 가깝다는 경고를 받으실 수도 있습니다.

 

이러한 문제를 해결/예방할 수 있는 '태그 클라우드(Tag Cloud) 위젯 커스텀의 모든 것'을 소개해드립니다.

 

1. 태그 클라우드(Tag Cloud) 매개변수 살펴보기

태그 클라우드(Tag Cloud) 커스텀을 위해서는 다음 함수의 매개 변수를 이해해야 합니다. 함수에 포함된 각각의 매개변수를 이해해야 필요에 맞게 코드를 수정할 수 있습니다.

 

widget_tag_cloud_args: 태그 클라우드(Tag Cloud)에서 사용된 분류를 필터링합니다. 즉, 태그 클라우드에 출력되는 태그의 기준을 재정의합니다.

• smallest: 가장 적게 사용된 태그의 크기를 정의합니다. 폰트 크기의 단위는 'unit' 항목에서 정의합니다. (기본값: 8pt)
• largest: 가장 많이 사용된 태그의 크기를 정의합니다. 폰트 크기의 단위는 'unit' 항목에서 정의합니다. (기본값: 22pt)
• unit: smallest, largest 항목에서 정의한 폰트 크기의 단위를 정의합니다. (기본값: pt)
• number: 출력될 Tag의 개수를 설정합니다. 양의 정수(자연수)만 입력이 가능하며, 0을 입력하면 모든 태그가 표시됩니다.(기본값: 45)
• format: 각각의 태그를 구분하는 형식을 설정합니다. 'flat'은 띄어쓰기, 'list'는 목록형, 'array'는 배열형입니다. (기본값: flat)
• separator: Tag 구분자를 설정합니다. (기본값: 공백 \n)
• orderby: Tag가 정렬되는 기준을 설정합니다. 'name'은 이름순, 'count'는 인기순으로 정렬됩니다. 참고로 'tag_cloud_sort' 필터가 Tag 정렬에 영향을 미칠 수 있습니다. (기본값: 이름순)
• order: Tag의 순서를 설정합니다. 'ASC'는 오름차순, DESC'는 내림차순, 'RAND'는 랜덤 순으로 정렬됩니다. (기본값: 오름차순)
• exclude: 태그 클라우드에서 제외할 태그를 정의합니다. 기본값으로 '제외되는 태그 없음'으로 설정되어 있습니다.
• include: 태그 클라우드에 표시할 태그를 정의합니다. 기본값으로 '모든 태그 표시'로 설정되어 있습니다.
• link: 태그의 링크 방식을 결정합니다. 태그를 클릭했을 때 '편집'화면으로 이동할 지, 해당 태그가 사용된 필터링 결과를 '보기'만 할지를 정의합니다. (기본값: 보기)
• taxonomy: 분류법/그룹화 방법에 대해 정의합니다. 계층적(카테고리의 기본 분류법)/비계층적 방법이 존재합니다. (기본값: 비계층적=Cloud)
• echo: 결과값을 리턴합니다. (기본값: true)

출처: Wordpress.org Reference/Hook - 'widget_tag_cloud_args' function

 

2. 많이 사용하는 Tag Cloud 커스텀 코드

다음의 코드를 디자인에 맞게끔 값을 수정해주시기 바랍니다.

//태그 글자 크기 수정하기
function custom_tag_cloud_text_size($args) { 
    $args['smallest'] = 12;
    $args['largest'] = 12;
    return $args; 
} 

add_filter( 'widget_tag_cloud_args', 'custom_tag_cloud_text_size' );

//태그 개수 제한하기 (45개 -> 30개)
function tag_widget_limit($args) {
    $args['number'] = 30;
    return $args; 
} 

add_filter( 'widget_tag_cloud_args', 'tag_widget_limit' );

//인기 태그 상위 30개 표시하기
function custom_tag_cloud_widget($args) {
    $args['smallest'] = 12;
    $args['largest'] = 12;
    $args['number'] = 30; //number of tag
    $args['orderby'] = 'count'; //order by popularity
    $args['order'] = 'DESC'; //descending order
    return $args; 
} 

add_filter( 'widget_tag_cloud_args', 'custom_tag_cloud_widget' );

 

3. 코드 적용하기

FTP/SSH 혹은 관리자 페이지의 '테마 편집기(Theme Editor)'을 사용하여 'functions.php 파일에 위의 코드를 추가합니다. 추후 관리 및 편집이 용이할 수 있도록 파일의 제일 하단에 주석과 함께 코드를 입력해주시기 바랍니다.

외모(Appearance) > 테마 편집기(Theme Editor) 화면