워드프레스에 타임라인(Timeline)을 적용하는 방법

워드프레스에서 연혁 등을 타임라인 형식으로 추가하거나 최신 글을 타임라인 형식으로 표시하고 싶은 경우가 있을 수 있습니다. 이 경우 인터넷에서 무료로 검색되는 HTML, CSS, jQuery 등의 소스를 활용하는 방법과 플러그인을 사용하는 방법이 있습니다.

무료 CSS 타임라인 소스 활용하기

회사 연혁 등을 타임라인으로 추가하려는 경우 구글에서 검색되는 타이라인 소스를 활용할 수 있습니다. 다음 W3Schools 문서에서 심플한 타임라인 소스가 제공됩니다.

• How TO - Timeline

이 소스를 사용하여 다음과 같은 타임라인(Timeline)을 만들 수 있습니다. (아래의 내용은 네이버 연역 페이지에서 일부를 인용한 것입니다.)

이 글을 작성할 때에는 위의 타임라인이 제대로 표시되었지만, 테마를 변경하니 레이아웃이 틀어지네요. CSS로 대강 잡아 놓았지만 약간 어긋난 부분이 있네요. 테마 변경 후에 모바일에서는 제대로 표시되지 않아서 모바일에서는 표시되지 않도록 설정했습니다. 원 글의 HTML과 CSS 코드를 적용할 경우 사용하는 테마에 따라 레이아웃이 제대로 표시되지 않을 수도 있을 것 같습니다. 그런 경우 적절히 응용하여 사용하시거나 다른 Timeline 소스를 찾아서 이용하시기 바랍니다.

심플한 타임라인을 만들려는 경우 활용해볼 수 있을 것입니다. "65 CSS Timelines"에서 다양한 CSS 타임라인 소스를 확인할 수 있습니다. HTML 코드는 편집기에서 직접 입력하고 CSS 코드는 차일드 테마 폴더 내의 스타일시트 파일(style.css)에 추가하면 됩니다.

• 워드프레스에서 CSS 추가하기

타임라인 플러그인

Timeline Express

Timeline Express는 워드프레스 사이트에서 세로 형태의 타임라인을 만들 수 있는 무료 플러그인입니다. 공지사항(Announcement)을 기입하고 날짜를 설정하면 이 플러그인에서 최신 공지 순으로 글을 나열해줍니다.

Timeline Express는 현재 2만 개 이상의 사이트에 설치되어 있고 사용자 평가도 비교적 좋은 편입니다. 공지사항 등을 타임라인 형식으로 표시하려는 경우에 적합할 것 같습니다.

Cool Timeline Pro

Cool Timeline Pro는 개인의 경력사항이나 회사의 연혁 등을 가로 또는 세로 형식(반응형)으로 표시할 수 있는 플러그인입니다. 블로그 포스트를 타임라인 형식으로 표시하는 것도 가능합니다.

이미지, 동영상, 슬라이드쇼 및 커스텀 디자인과 색상으로 스토리를 표현할 수 있습니다. 간단한 숏코드로 타임라인을 원하는 곳에 추가할 수 있습니다.

이 플러그인을 사용하여 다음 타임라인을 만들 수 있습니다:

• 멋진 세로 및 가로 타임라인
• 회사 타임라인
• 블로그 포스트 타임라인
• 단계별(Step by Step) 튜토리얼 타임라인
• 프로그램 히스토리
• 회사 스토리라인
• 이벤트 타임라인
• 라이프 스토리/타임라인
• 경력 사항
• 개인 생애사
• 약력 타임라인
• 제품 업데이트 타임라인
• 회사 연혁 타임라인
• 콘텐츠 타임라인
• 스타트업 스토리라인

이 플러그인은 40개 이상의 타임라인 디자인을 제공합니다. 자세한 정보와 데모는 Cool Timeline Pro 사이트를 참고하시기 바랍니다.

WP Timeline

스토리, 타임라인, 연혁, 로드맵 등을 만들고 싶은 경우에 WP Timeline 플러그인을 사용할 수 있습니다. 타임라인을 쉽게 만들 수 있도록 디자인된 WP Timeline은 업체들이 타임라인/스토리/연혁을 표시할 수 있는 매우 간단한 방법을 제공합니다. 이 플러그인을 사용하여 타임라인을 생성하고 표시하는 모든 과정을 관리할 수 있으며 모든 포스트 타입, 태그, 카테고리, 분류(Taxonomy)를 표시하는 것도 가능합니다. 쇼트코드로 원하는 곳에 타임라인을 추가할 수 있습니다.

이 플러그인은 45개 이상의 레이아웃을 제공하며 40개 이상의 애니메이션을 지원합니다. 자세한 내용과 데모는 WP Timeline 플러그인 사이트를 참고하시기 바랍니다.

Everest Timeline

Everest Timeline은 반응형 워드프레스 타임라인 플러그인으로 50개 이상의 사진 디자인된 템플릿이 제공됩니다. 이 플러그인으로 세로 타임라인 레이아웃, 가로 타임라인 레이아웃, 원 사이드 레이아웃, 페이스북 레이아웃, 트위터 레이아웃 등의 형식으로 타임라인을 표시할 수 있습니다. 각 레이아웃에는 다양한 스타일 옵션이 제공되어 커스터마이징이 가능합니다.

이 플러그인은 이미지, 슬라이더, 유튜브 동영상, 비메오 동영상, HTML 비디오 및 soundcloud 등과 같은 미디어를 지원합니다. 필터 옵션, 소셜 미디어 및 공유 버튼, 페이스북/트위터 피드, 라이트박스 기능도 통합할 수 있습니다.

쇼트코드와 위젯으로 사용하며 크리에이티브한 스토리/이벤트 타임라인을 금방 디자인할 수 있습니다. 자세한 정보와 데모는 Everest Timeline 사이트를 참고하시기 바랍니다.

테마에 포함된 기능 사용

아바다를 비롯한 일부 테마에서는 블로그 글을 타임라인으로 표시하는 기능을 제공하기도 합니다. 그리고 아바다 테마의 Fusion Builder에 포함된 Content Boxes 요소에서는 Timeline Vertical 레이아웃을 제공합니다. 제한적이지만 타임라인 기능을 구현할 수 있습니다.

마치며

이상으로 워드프레스에서 타임라인을 적용하는 방법에 대해 간단히 살펴보았습니다. 코딩이 가능하다면 직접 하드코딩 방식으로 타임라인을 구현할 수 있지만, 코딩에 익숙하지 않으면 플러그인을 사용하여 타임라인을 추가할 수 있습니다.