인기 기사의 순위 표시하기

접속 수가 많은 인기 기사(인기 글)의 순위를 사이드바에 표시해서 구독자가 쉽게 볼 수 있도록 한다. WordPress Popular Posts 플러그인을 이용해서 표시하고, 순위 번호를 붙인다.

  1. WordPress Popular Posts 플러그인 이용하기
    Wordpress Popular Posts 플러그인을 설치하고 활성화한다. [외모]-[위젯]을 열고 ‘WordPress Popular Posts’ 위젯을 ‘사이드바1’에 추가한다. 추가하면 위젯의 설정화면이 열린다. 여기에서 순위의 산출 방법 등을 지정한다.
  2. 인기 기사 순위 표시 확인하기
    구독 수가 많은 기사부터 순서대로 표시된다.
  3. 목록에 번호 붙이기
    구독 횟수 순위를 나타내기 위해 <ol>~</ol>로 마크업해서 번호를 붙인다. 외모]-[위젯]에서 ‘WordPress Popular Posts’ 위젯의 설정화면을 열고, HTML Markup settings의 ‘Use custom HTML Markup’에 체크한 후 [저장하기] 버튼을 클릭한다.
    저장이 되면 마크업한 설정이 표시되기 때문에 ‘Before/after Populat Posts’에서 시작 태그를 <ol>, 종료태그를 </ol>로 지정한 후 [저장하기] 버튼을 클릭한다.
    메뉴를 확인하면 각 기사의 앞에 번호가 표시된다.
  4. 기본으로 표시되는 번호 삭제하기
    글 앞에 표시되는 번호를 디자인한다. 그러나 기본으로 표시되는 번호는 스타일시트로 디자인을 지정하기 어렵기 때문에 삭제하고 style.css 파일을 열어 다시 설정을 추가한다.
  5. 디자인한 번호 표시하기
    각 글의 앞에 디자인한 번호를 표시한다. 오렌지색의 박스 형태에 흰색 번호를 표시한 형태로 디자인한다.

->MEMO

글 앞에  디자인한 번호를 표시하기 위해 여기에서는 스타일시트의 content 속성과 카운터(counter) 기능을 이용해서 <a>로 마크업한 위치 앞에 번호를 추가하도록 지정한다. 이것은 CSS2.1의 기능으로 주요 브라우저가 지원하고 있지만 Internet Explorer는 버전 8부터 지원하고 있다. 이전 버전의 IE에서는 번호없이 표시된다.

->MEMO

‘bofore’ 셀렉터는 CSS3에서는 ‘::before’라고 입력하지만 Internet Explorer 8을 지원하지 않기 때문에 여기에서는 ‘:before’라고 입력한다.

출처: 바꾸면서 배우는 워드프레스 디자인

답글 남기기