PDF.js in WordPress
A general-purpose, web standards-based platform for parsing and rendering PDFs.
PDF.js를 사용하여 bbPress 포럼에 PDF를 임베드하고, 인쇄 및 다운로드 버튼을 제거하는 방법은 가장 강력한 제어권을 제공합니다. 이 방법은 PDF를 브라우저 내에서 직접 렌더링하며, UI 요소를 코드로 제어할 수 있습니다.
가장 효율적인 구현 방법은 별도의 뷰어 페이지를 만들고 bbPress 게시글 내에서 iframe으로 불러오는 방식입니다.
1단계: PDF.js 라이브러리 준비
먼저 PDF.js 공식 홈페이지에서 Prebuilt 패키지를 다운로드합니다.
- 압축을 푼 후, WordPress 테마 폴더 내에
pdfjs라는 이름의 폴더를 만듭니다.- 경로 예시:
/wp-content/themes/your-theme/pdfjs/
- 경로 예시:
- 해당 폴더 안에
web과build폴더가 포함되어 있어야 합니다.
2단계: 출력 및 다운로드 기능 제거 (코드 수정)
pdfjs/web/viewer.html 파일을 텍스트 에디터로 열어 다음 부분을 수정합니다.
- UI 버튼 숨기기 (HTML): id=”download”, id=”print”, id=”secondaryDownload”, id=”secondaryPrint”를 가진 <button> 태그를 찾아 style=”display: none;”을 추가하거나 아예 삭제합니다.
- 단축키 차단 (JS): pdfjs/web/viewer.mjs (또는 viewer.js) 파일에서 Ctrl+S, Ctrl+P를 감지하는 이벤트를 찾아 비활성화하거나, 아래의 CSS 방식을 병행합니다.
- CSS 강제 숨김 (가장 확실함): pdfjs/web/viewer.css 파일 하단에 아래 코드를 추가합니다
/* 다운로드 및 인쇄 버튼 강제 숨김 */
#download, #print, #secondaryDownload, #secondaryPrint, #toolbarViewerRight {
display: none !important;
}
3단계: bbPress 게시글에 임베드하는 함수 만들기
이제 functions.php에 숏코드를 등록하여 bbPress에서 간편하게 사용할 수 있도록 합니다.
PHP
// [pdf_safe_view url="PDF파일주소"] 숏코드 생성
function register_pdf_safe_viewer_shortcode($atts) {
$a = shortcode_atts(array(
'url' => '',
), $atts);
if (empty($a['url'])) return 'PDF URL이 입력되지 않았습니다.';
// 테마 폴더 내 pdfjs 경로 설정
$viewer_url = get_stylesheet_directory_uri() . '/pdfjs/web/viewer.html';
$file_url = esc_url($a['url']);
// iframe으로 뷰어 호출 (우클릭 방지 스크립트 포함)
return '<iframe src="' . $viewer_url . '?file=' . $file_url . '#view=FitH"
width="100%" height="600px"
style="border: none;"
oncontextmenu="return false;"></iframe>';
}
add_shortcode('pdf_safe_view', 'register_pdf_safe_viewer_shortcode');
4단계: bbPress에서 사용하기
bbPress 포럼의 토픽이나 답글 작성 시 아래와 같이 입력합니다.
[pdf_safe_view url="https://your-site.com/wp-content/uploads/document.pdf"]
5단계: 추가 보안 조치 (우클릭 및 드래그 방지)
뷰어 내에서 텍스트를 복사하거나 우클릭하여 저장하는 것을 막기 위해 viewer.html의 <body> 태그를 다음과 같이 수정합니다.
HTML
<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false">
💡 이 방식의 핵심 장점
- UI 제어: 브라우저의 기본 PDF 뷰어가 아닌 PDF.js의 UI를 쓰기 때문에 ‘저장’ 버튼을 완전히 없앨 수 있습니다.
- 경로 은닉: 일반적인
<a>태그 다운로드 링크가 노출되지 않습니다. - 사용자 경험: bbPress 레이아웃 내에서 깔끔하게 문서가 표시됩니다.
Gemini
Our Score
Click to rate this post!
[Total: 0 Average: 0]
Visited 9 times, 1 visit(s) today
