워드프레스에서 PDF 파일 다운로드 방법

워드프레스 사이트에서 사용자들이 다운로드할 수 있도록 매뉴얼, 브로셔, 회사소개서 등을 PDF 파일로 업로드하고 싶은 경우가 있습니다. 워드프레스에서는 여러 가지 방법으로 PDF 파일 다운로드가 가능하도록 할 수 있습니다.

이 글에서는 PDF, 이미지 파일, 동영상 파일, 오피스 파일, 압축 파일 등을 사용자가 다운로드할 수 있도록 하는 파일 다운로드 관리자 플러그인을 소개하고, 아울러 플러그인을 사용하지 않고 HTML 코드를 사용한 PDF 파일 다운로드 방법도 살펴보겠습니다.

[ 이 글은 2023년 11월 29일에 최종 업데이트되었습니다. ]

업데이트: 블록 에디터의 "파일" 블록 사용하기

워드프레스가 업데이트되면서 블록 에디터(구텐베르크)에 파일 블록이 추가되었습니다. 이제 파일 블록을 사용하여 PDF 파일을 업로드할 수 있습니다. 파일 업로드 방법은 다음 영상을 참고해 보세요.

다음 글도 참고해보세요:

워드프레스에서 PDF 파일을 다운로드하는 간편한 방법: 플러그인 사용

Easy Media Download, WordPress Download Manager와 같은 플러그인을 사용하면 PDF나 이미지 등의 파일을 업로드하여 사용자들이 다운로드할 수 있도록 만들 수 있습니다. 이런 플러그인을 사용하면 비밀번호를 설정하거나 다운로드 가능한 사용자 역할을 지정할 수 있습니다.

파일을 업로드/다운로드할 수 있는 자료실을 운영하려는 경우에는 한국형 게시판 플러그인(예: 케이보드, 망보드)을 사용할 수 있습니다.

많은 파일의 다운로드를 관리하는 경우 이와 같은 플러그인을 사용하면 편리하지만, 1~2개 파일의 다운로드를 제공하는 경우에는 아래의 "플러그인을 사용하지 않고 PDF 파일을 다운로드할 수 있도록 하는 방법" 섹션에서 설명하는 방법을 이용하시기 바랍니다.

Easy Media Download 플러그인

워드프레스 PDF 파일 다운로드 방법: Easy Media Download 플러그인

Easy Media Download는 워드프레스용 무료 다운로드 관리자 플러그인으로, 사용자들이 웹사이트에서 디지털 미디어 파일을 다운로드할 수 있도록 합니다. 이 플러그인은 가벼우며 쉽게 다운로드가 가능하도록 합니다. 아름다운 다운로드 버튼을 생성할 수 있습니다.

특징:

  • 빠른 다운로드 생성
  • mp3, aac, m4a, wav 등과 같은 음악 또는 오디오 파일 무료 다운로드
  • 랜딩 페이지에 다운로드 버튼 삽입
  • mp4, mov, qt (QuickTime), mpg, mpeg, flv, m4v, swf, flash, avi, wma, ogg, webm 등과 같은 동영상 파일(비디오 파일) 무료 다운로드
  • 사용자가 모든 파일 형식으로 직접 다운로드하도록 허용
  • doc, docx (OpenOffice, Microsoft Word), odt (OpenDocument), htm, html, ps, tex, xml, txt, csv 등과 같은 문서 무료 다운로드
  • 큰 파일 다운로드 허용 (파일 크기 제한 없음)
  • xlsx (Microsoft Excel), pptx (Microsoft PowerPoint) 등과 같은 오피스 파일 무료 다운로드
  • 페이팔(PayPal)을 사용하여 무료 디지털 다운로드에 대하여 기부 받기 (※국내에서는 국내 페이팔 계정 간 송금이 금지되어 있습니다.)
  • js, css, php 등의 스크립트 무료 다운로드
  • 다운로드 추적/모니터링
  • tar, rar, zip, 7z, gz, z 등과 같은 압축 파일 무료 다운로드
  • 브라우저에서 다운로드할지 묻는 창을 강제로 표시
  • png, gif, jpg, jpeg, bmp 등과 같은 이미지 파일 무료 다운로드
  • 새 탭에서 다운로드 열기
  • pdf, epub 등과 같은 전자책 무료 다운로드

자세한 내용은 Easy Media Download 플러그인 페이지를 참고해보세요.

WordPress Download Manager 플러그인

워드프레스 파일 다운로드 관리자 플러그인: 이미지, 동영상, 뮤직, 오피스 파일, 압축 파일, PDF 파일 등 다운로드

WordPress Download Manager는 워드프레스 사이트에서 파일 다운로드를 관리, 추적, 제어하는 파일/문서 관리 플러그인입니다. 비밀번호를 설정하고, 파일에 접근할 수 있는 사용자 역할을 제어하고, 속도나 사용자당 다운로드 수를 제한하여 다운로드를 제어할 수 있습니다. 그리고 Captcha Lock 또는 IP 차단 기능을 사용하여 봇이나 원치 않는 사용자 또는 스패머를 차단할 수 있으며, 다운로드하기 전에 사용자들이 약관에 동의하도록 요구할 수도 있습니다.

기능:

  • 커스텀 포스트 타입 및 분류: 다운로드를 추가하는 것이 마치 포스트를 생성하는 것과 같습니다.
  • 드래그 & 드롭 파일 업로드
  • http max upload limit (최대 업로드 제한)을 무시하도록 분할 업로드(Chunk upload) 지원
  • 서버 파일 브라우저를 사용하는 서버에서 직접 파일 첨부
  • 미디어 라이브러리 파일 보호
  • 글이나 페이지를 편집할 때 다운로드를 쉽게 생성 및 삽입하기 위한 tinymce 에디터의 빠른 추가 패널
  • 구글 드라이브 (15GB 무료)에 파일을 보관하도록 구글 드라이브(Google Drive) 지원
  • 드롭박스 (2GB 무료)에 파일을 보관하도록 DropBox 지원
  • Box.com(10GB 무료)에 파일을 보관하도록 Box.com 지원
  • onedrive.live.com (15GB 무료)에 파일을 보관하도록 OneDrive (원드라이브) 지원
  • 파일을 "브라우저에서 열기" 또는"다운로드" 옵션 (PDF 또는 이미지)
  • 다운로드에 액세스 가능한 사용자 제어
  • 카테고리 레벨 엑세스 컨트롤
  • 다운로드 속도 제어
  • 패스워드 보호
  • CAPTCHA 보호
  • 원치 않는 IP 주소에서 다운로드하거나 봇이 다운로드하는 것을 방지하기 위한 IP 차단 (IP Block) 옵션
  • 누가 언제 어디서 다운로드하는지 체크할 수 있는 다운로드 로그
  • 약관 보호 - 다운로드 전에 사용 약관에 동의
  • 각 파일에 대하여 전체 다운로드 횟수를 볼 수 있는 다운로드 카운터
  • 사용자 정의 다운로드 링크 아이콘
  • 파일 타입 아이콘 지원
  • 완전한 기능의 사용자 대시보드 ( [wpdm_user_dashboard] 숏코드 사용)
  • 사용자 정의 프런트엔드 로그인/가입 양식 숏코드
  • 사용자 정의 oEmbed 템플릿
  • 반응형 DataTable 지원 ([wpdm_all_packages jstable=1 items_per_page=20] 숏코드 사용)
  • 검색 및 정렬 옵션
  • 사용자 정의 링크 레이블
  • 다운로드 링크 쇼트코드
  • 다운로드 가능한 파일에 대한 직접 링크를 위한 숏코드 [wpdm_direct_link id=file_id_required link_label=any_text_optional]
  • 신규 파일 위젯
  • 인기 다운로드 위젯
  • 다운로드 검색 위젯
  • 멀티레벨 카테고리
  • 맞춤형 TinyMce 버튼
  • 카테고리 임베드 숏코드
  • 고급 서버 파일 브라우저
  • 완전한 카테고리 및 파일 트리 (간단한 숏코드 [wpdm_tree] 사용)
  • MP4 동영상 업로드 및 재생 지원
  • 동영상 파일 다운로드 보호. 방문자들이 재생은 할 수 있지만 다운로드는 차단
  • 번역 가능

이 플러그인은 다양한 기능을 제공하며 현재 10만 개 이상 사이트에서 사용되고 있습니다. 이 블로그에서 몇 년 전에 이 플러그인을 사용한 적이 있었습니다만, 당시에는 플러그인이 사이트 속도에 부정적인 영향을 미쳐서 삭제했습니다. 지금도 사이트 속도에 안 좋은 영향을 미치는지는 모르겠습니다. 기능적인 측면에서는 나무랄 데 없는 플러그인 같습니다.

자세한 내용은 WordPress Download Manager 플러그인 페이지를 참고해보세요.

플러그인을 사용하지 않고 PDF 파일을 다운로드할 수 있도록 하는 방법

플러그인을 사용하지 않고 PDF 파일이나 이미지 파일 등을 사용자들이 다운로드하도록 하고 싶은 경우 다음 과정을 통해 파일을 업로드하고 다운로드 링크를 추가할 수 있습니다.

PDF 파일 업로드

PDF 파일을 미디어 라이브러리에 업로드할 수 있습니다. 워드프레스 알림판 > 미디어 > 새로 추가를 클릭하고 PDF 파일을 PC에서 끌어다가 놓으면 업로드가 됩니다.

워드프레스 PDF 파일 업로드

파일을 업로드하면 위의 그림과 같이 업로드한 파일이 표시됩니다. 업로드한 파일의 오른쪽에 있는 편집을 클릭합니다.

워드프레스 파일 업로드 경로

파일 URL을 복사합니다(예: https://example.co.kr/wp-content/uploads/2020/03/example.pdf)

글/페이지에 다운로드 링크 또는 다운로드 아이콘 추가하기

이제 PDF 파일(이미지 파일이나 다른 파일도 가능)을 업로드하여 파일 URL을 알고 있으므로, 이 파일 URL을 사용하여 다운로드 링크(혹은 다운로드 아이콘)를 만들 수 있습니다.

다운로드 링크는 HTML download 속성을 이용하여 만들 수 있습니다. 기본적으로 다음과 같이 download 속성을 추가하면 링크 클릭 시 해당 파일을 열지 않고 다운로드하게 됩니다.

<a href="/images/myw3schoolsimage.jpg" download>

워드프레스 블록 에디터(구텐베르크 편집기)에서 블록 추가 아이콘을 클릭하고 포맷 > 사용자 정의 HTML 블록을 선택합니다.

워드프레스 사용자 정의 HTML 블록

사용자 정의 HTML 블록에 다음과 같은 형식으로 HTML 코드를 추가하면 다운로드 링크가 생성됩니다.

<a href="/wp-content/uploads/2020/03/c00044410_printer.pdf" download="파일명">
  다운로드 (PDF)
</a>

"다운로드" 문구 대신 다운로드 아이콘을 추가할 수도 있습니다. 예시:

<a href="/wp-content/uploads/2020/03/c00044410_printer.pdf" download>
  <img src="/wp-content/uploads/2020/03/download.jpg" alt="PDF 파일 다운로드" width="104" height="142">
</a>

저장한 후에 글/페이지를 열면 다운로드 링크가 작동하는 것을 확인할 수 있습니다.

버튼을 클릭하여 다운로드받도록 하려면 How to make an HTML anchor tag (or link) look like a button? 글을 참고하여 응용할 수 있습니다. 버튼 스타일은 CSS로 조정할 수 있습니다.

페이지 빌더에서 HTML 코드 추가하기(+아바다 테마, 엘리멘터 페이지 빌더)

아바다 테마엔폴드 테마와 같이 페이지 빌더를 사용하는 테마나 엘리멘터 페이지 빌더 등에서도 HTML 코드를 쉽게 추가할 수 있습니다.

가령 Avada 테마에서는 Code Block 요소를 사용하여 HTML 코드를 추가할 수 있습니다.

아바다 테마 Code Block 요소

Elementor 페이지 빌더의 경우 "엘리멘터 페이지 빌더에 HTML 코드 추가하기"를 참고하여 HTML 코드를 추가할 수 있습니다.

스타일은 CSS를 사용하여 조정할 수 있습니다. CSS는 외모 > 사용자 정의하기 > 추가 CSS에 추가할 수 있습니다. 엘리멘터 프로의 경우 해당 페이지 내에 커스텀 CSS를 추가할 수 있는 옵션이 제공되어 편리하게 CSS 코드를 추가할 수 있습니다.

HTML 코드를 사용하여 다운로드 버튼 추가 시 요약:

  1. HTML 코드를 기본 블록 에디터나 페이지 빌더의 HTML 관련 블록이나 요소(위의 "페이지 빌더에서 HTML 코드 추가하기" 섹션 참고)에 추가합니다.
  2. HTML 추가 시 CSS 클래스를 지정하고 CSS 코드를 사용하여 버튼의 스타일을 지정합니다. 버튼 CSS 스타일은 W3Schools의 CSS Buttons를 참고할 수 있습니다. CSS에 대한 기본적인 지식이 있으면 쉽게 가능합니다.
  3. CSS 코드는 외모 > 사용자 정의하기 > 추가 CSS에 추가하거나 차일드 테마의 스타일시트 파일에 추가합니다.

문서 보호 방법

이 방법을 사용하면 누구나 다운로드할 수 있습니다. 글이나 페이지를 저장할 때 비밀번호 보호 옵션을 선택하여 비밀번호를 넣어야 문서를 볼 수 있도록 하거나, Ultimate Member나 WP-Members 같은 회원제 플러그인을 사용하여 회원들만 다운로드가 가능하도록 설정할 수 있습니다.

워드프레스 문서 보호: 비밀번호 보호 옵션

또는, Divi 테마를 개발한 Elegant Themes에서 제공하는 Bloom과 같은 플러그인을 사용하여 이메일 주소를 입력해야 파일을 다운로드할 수 있도록 하는 것도 가능합니다. 뉴스레터 운용 등을 위한 구독자를 모을 때 효과적입니다.

다른 방법: download 속성 추가하기

엘리멘터 페이지 빌더 등을 통해 버튼을 추가한 상태에서, 해당 버튼을 클릭했을 때 PDF 파일이나 이미지 파일이 웹브라우저에서 열리지 않고 다운로드가 되도록 하려면 자바스크립트나 jQuery를 사용하여 downlaod 속성을 추가하는 것을 고려해볼 수 있습니다.

jQuery를 사용하여 downlaod 속성을 추가하려는 경우 다음과 같은 코드를 이용할 수 있습니다.

$("a").attr("download", true);

// 출처: https://stackoverflow.com/questions/38060533/adding-download-attribute-to-a-dynamically-using-jquery/44545258

참고:


7개 댓글

  1. 안녕하세요. 워드프레스 사이트를 만들면서 늘 잘 확인하고 참고하고 있습니다. 워드프레스에 파일 블럭을 이용해서 게시물에 첨부파일을 게시했는데, 위에서 말씀하신 것처럼 pdf 파일이 바로 다운로드 되는 것이 아닌 브라우저에서 열리게 되더라구요. 첨부파일 다운로드를 눌렀을 때 바로 파일이 다운로드 되게끔 이 문제를 해결하고 싶습니다.

    제가 아직 초보자라 "jQuery를 사용하여 downlaod 속성을 추가하려는 경우 다음과 같은 코드를 이용할 수 있습니다." 요 부분에서 코드를 어떤식으로 이용해야.. 하는지를 잘 모르겠습니다 ㅠㅠ 코딩에는 전혀 지식이 없지만 뜨문 뜨문 여기저기서 참고해서 사이트를 만들어오고 있는데, 혹시 어떻게 사이트에 적용하면 될까요? html 파일을 어떤 식으로 수정한다거나, 앞이나 function.php 마지막에 무슨 코드를 넣어라. 이런 식으로 조언해 주실 수 있을까요?

    1. 본문의 설명과 같이 사용자 정의 HTML 블록을 생성하여 HTML 코드로 추가해보시기 바랍니다. 버튼 모양은 CSS로 만들 수 있습니다.

      1. 이미 워드프레스 쿠텐베르크 편집기에 파일을 드래그해서 업로드했고, 파일 블록을 이용해서 다운로드 버튼들이 자동으로 생긴 상태인데, 해당 버튼들에 download 속성을 부여할 수는 없는 걸까요?

  2. PDF 파일 다운로드 코드 삽입하고 - 결제 시 열람하게 하려면 우커머스 깔려있다면 간단하게 코드만 넣고 연동 가능한가요 쉽나요? 가능하다면 코드 좀 알 수 있을까요

    선생님처럼 코드를 자유롭게 다루고 내가 만들고 싶은 구동 웹 구현을 위해서 어떤 공부를 시작하는게 맞나요 교육을 들을까 고민까지 되네요 테마도 결국은 내 입맛대로 자유롭게 수정하지 못하면 고민은 끝이 없을 것 같네요ㅜ

    1. 디지털/다운로드 가능한 전자 파일을 워드프레스 우커머스로 판매하려는 경우 다음 글을 참고해보세요.
      WooCommerce에서 다운로드 가능한 상품을 판매하도록 하는 옵션이 기본적으로 제공됩니다.

      https://www.thewordcracker.com/intermediate/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%EB%94%94%EC%A7%80%ED%84%B8%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C-%EA%B0%80%EB%8A%A5%ED%95%9C-%EC%83%81%ED%92%88-%ED%8C%90%EB%A7%A4%ED%95%98%EA%B8%B0/

      쉽게 가는 방법으로 워드프레스 디지털 마켓플레이스 테마를 활용하는 것도 가능합니다.

      https://cafe.naver.com/wphomepage/11724

댓글 남기기

* 이메일 주소는 공개되지 않습니다.