نمایش فایل PDF در سایت وردپرس بدون افزونه

شما یک فایل PDF را در سایت وردپرس خود آپلود کرده‌اید و حالا می‌خواهید آن را داخل نوشته یا برگه نمایش دهید؛ طوری که بازدیدکننده بتواند بدون دانلود کردن فایل، پیش‌نمایش PDF را در سایت ببیند.

نمایش فایل PDF در وردپرس کار سختی نیست و حتی در بسیاری از موارد نیازی به نصب افزونه هم ندارید. بسته به اینکه از ویرایشگر جدید وردپرس، ویرایشگر کلاسیک، المنتور یا کد HTML استفاده می‌کنید، چند روش ساده برای قرار دادن پیش نمایش PDF در سایت وجود دارد.

بهترین روش نمایش فایل PDF در وردپرس چیست؟

اگر از نسخه‌های جدید وردپرس و ویرایشگر بلوکی استفاده می‌کنید، ساده‌ترین روش برای نمایش PDF استفاده از بلوک File یا همان پرونده است. در این روش نیازی به کدنویسی ندارید و خود وردپرس امکان نمایش فایل PDF داخل نوشته یا برگه را فراهم می‌کند.

اما اگر از ویرایشگر کلاسیک استفاده می‌کنید، یا می‌خواهید کنترل بیشتری روی محل نمایش فایل داشته باشید، می‌توانید از کد iframe استفاده کنید. همچنین اگر قصد دارید فایل‌های Word، Excel یا PowerPoint را هم به‌صورت آنلاین نمایش دهید، روش Google Docs Viewer همچنان گزینه کاربردی‌ای است.

پس به‌طور خلاصه، اگر فقط می‌خواهید یک فایل PDF ساده را داخل نوشته نمایش دهید، روش اول یعنی بلوک File بهترین انتخاب است. اگر می‌خواهید کد دستی قرار دهید، روش iframe مناسب‌تر است. و اگر می‌خواهید فایل‌های Office را هم پیش‌نمایش کنید، بهتر است از Google Docs Viewer استفاده کنید.

روش اول: نمایش فایل PDF در وردپرس با بلوک File

در نسخه‌های جدید وردپرس، برای قرار دادن PDF داخل نوشته نیازی نیست حتماً از افزونه یا کد iframe استفاده کنید. خود وردپرس در ویرایشگر بلوکی، بلوکی به نام File دارد که با استفاده از آن می‌توانید فایل PDF را آپلود کرده و پیش‌نمایش آن را داخل همان نوشته نمایش دهید.

برای شروع، وارد پیشخوان وردپرس شوید و نوشته یا برگه مورد نظر خود را ویرایش کنید. سپس روی دکمه افزودن بلوک کلیک کرده و بلوک File یا پرونده را انتخاب کنید.

بعد از اضافه کردن بلوک File، می‌توانید فایل PDF خود را آپلود کنید یا یکی از فایل‌های موجود در کتابخانه رسانه وردپرس را انتخاب کنید.

پس از انتخاب فایل PDF، از بخش تنظیمات بلوک، گزینه نمایش درون‌خطی PDF را فعال کنید. با فعال شدن این گزینه، فایل PDF به‌صورت مستقیم داخل نوشته یا برگه نمایش داده می‌شود و کاربران می‌توانند بدون دانلود فایل، محتوای آن را ببینند.

همچنین می‌توانید ارتفاع نمایشگر PDF را تنظیم کنید تا پیش‌نمایش فایل با طراحی قالب و عرض محتوای سایت شما هماهنگ‌تر شود. برای مثال اگر فایل شما چند صفحه دارد، بهتر است ارتفاع نمایشگر را بیشتر کنید تا کاربر تجربه بهتری داشته باشد.

مزایای استفاده از بلوک File وردپرس

• نیازی به نصب افزونه ندارد.
• برای کاربران مبتدی بسیار ساده است.
• فایل PDF داخل نوشته یا برگه نمایش داده می‌شود.
• امکان نمایش دکمه دانلود فایل هم وجود دارد.
• با ویرایشگر جدید وردپرس کاملاً سازگار است.

این روش برای نمایش فایل‌هایی مثل رزومه، کاتالوگ، بروشور، فرم ثبت‌نام، نمونه قرارداد، فایل آموزشی، راهنمای محصول و فایل‌های دانلودی ساده بسیار مناسب است.

چه زمانی بلوک File کافی نیست؟

اگر فقط می‌خواهید فایل PDF را در سایت نمایش دهید، بلوک File معمولاً کافی است. اما اگر امکانات بیشتری مثل جستجو داخل PDF، زوم حرفه‌ای، حالت تمام‌صفحه، طراحی اختصاصی نمایشگر، کنترل روی دانلود یا نمایش بهتر در موبایل می‌خواهید، استفاده از افزونه های نمایش فایل PDF می‌تواند گزینه بهتری باشد.

با این حال، برای بیشتر سایت‌های وردپرسی، همین روش ساده و بدون افزونه نیاز شما را برطرف می‌کند.

روش دوم: نمایش PDF در وردپرس با کد iframe مستقیم

روش دوم استفاده از کد iframe است. این روش زمانی کاربرد دارد که می‌خواهید فایل PDF را به‌صورت دستی داخل نوشته، برگه، ابزارک HTML، قالب سایت یا صفحه‌سازهایی مثل المنتور قرار دهید.

ابتدا باید فایل PDF را در کتابخانه رسانه وردپرس آپلود کنید. برای این کار هنگام ویرایش نوشته، روی دکمه افزودن پرونده چند رسانه‌ای کلیک کرده و فایل PDF خود را بارگذاری کنید. سپس لینک مستقیم فایل را مانند تصویر زیر کپی کنید:

بعد از کپی کردن لینک فایل، کد زیر را در بخش HTML نوشته یا برگه قرار دهید:

<iframe src="FILE_URL" style="width: 100%; height: 600px; border: none;" loading="lazy" title="پیش نمایش فایل PDF"></iframe>

در کد بالا به جای FILE_URL، آدرس فایل PDF خود را قرار دهید.

برای مثال، اگر لینک فایل PDF شما به شکل زیر باشد:

https://themefars.com/wp-content/uploads/2020/02/Resume.pdf

کد نهایی شما به این صورت می‌شود:

<iframe src="https://themefars.com/wp-content/uploads/2020/02/Resume.pdf" style="width: 100%; height: 600px; border: none;" loading="lazy" title="پیش نمایش فایل PDF"></iframe>

با قرار دادن این کد، پیش‌نمایش فایل PDF داخل نوشته نمایش داده می‌شود و کاربر می‌تواند بدون دانلود فایل، محتوای آن را مشاهده کند.

تنظیم عرض و ارتفاع پیش نمایش PDF

در کد بالا، عرض نمایشگر روی ۱۰۰ درصد تنظیم شده است تا با عرض محتوای سایت هماهنگ شود. ارتفاع نیز روی ۶۰۰ پیکسل قرار دارد.

اگر فایل PDF شما کوتاه است، می‌توانید ارتفاع را کمتر کنید:

height: 400px;

اگر فایل شما چند صفحه دارد یا می‌خواهید فضای بیشتری برای نمایش آن در نظر بگیرید، می‌توانید ارتفاع را بیشتر کنید:

height: 700px;

پیشنهاد می‌شود بعد از قرار دادن PDF، صفحه را هم در دسکتاپ و هم در موبایل بررسی کنید تا مطمئن شوید نمایشگر فایل ظاهر مناسبی دارد.

قرار دادن لینک دانلود یا باز کردن PDF در تب جدید

حتی اگر فایل PDF را داخل نوشته نمایش می‌دهید، بهتر است یک لینک جایگزین هم برای دانلود یا باز کردن فایل در تب جدید قرار دهید. این کار باعث می‌شود اگر مرورگر کاربر پیش‌نمایش PDF را به‌درستی نمایش نداد، همچنان بتواند به فایل دسترسی داشته باشد.

برای این کار می‌توانید از کد زیر استفاده کنید:

<p><a href="https://themefars.com/wp-content/uploads/2020/02/Resume.pdf" target="_blank" rel="noopener noreferrer">دانلود یا باز کردن فایل PDF در تب جدید</a></p>

روش سوم: نمایش PDF با Google Docs Viewer

Google Docs Viewer یکی از روش‌های قدیمی و کاربردی برای نمایش آنلاین فایل‌ها در سایت است. این روش مخصوصاً زمانی مفید است که بخواهید علاوه بر PDF، فایل‌های Office مثل Word، Excel و PowerPoint را هم به‌صورت آنلاین پیش‌نمایش کنید.

در این روش، فایل شما باید در دسترس عموم باشد. یعنی اگر لینک فایل را در مرورگر باز می‌کنید، بدون نیاز به ورود، رمز عبور یا سطح دسترسی خاص، فایل قابل مشاهده باشد. اگر فایل خصوصی باشد یا سرور اجازه دسترسی ندهد، Google Docs Viewer نمی‌تواند آن را نمایش دهد.

برای استفاده از این روش، ابتدا فایل PDF خود را در کتابخانه رسانه وردپرس آپلود کرده و لینک مستقیم آن را کپی کنید. سپس کد زیر را در نوشته یا برگه قرار دهید:

<iframe src="https://docs.google.com/viewer?embedded=true&url=FILE_URL" style="width: 100%; height: 600px; border: none;" loading="lazy" title="پیش نمایش فایل PDF"></iframe>

در کد بالا، به جای FILE_URL لینک مستقیم فایل PDF را قرار دهید.

برای مثال:

<iframe src="https://docs.google.com/viewer?embedded=true&url=https://themefars.com/wp-content/uploads/2020/02/Resume.pdf" style="width: 100%; height: 600px; border: none;" loading="lazy" title="پیش نمایش فایل PDF"></iframe>

حالا پیش نمایش فایل PDF در سایت شما به این شکل نمایش داده می‌شود:

 

ساخت لینک پیش نمایش PDF با Google Docs Viewer

اگر نمی‌خواهید فایل PDF را داخل نوشته جاسازی کنید، می‌توانید فقط یک لینک پیش‌نمایش آنلاین بسازید. وقتی کاربر روی این لینک کلیک کند، فایل PDF در مرورگر باز می‌شود و نیازی نیست ابتدا آن را دانلود کند.

برای ساخت لینک پیش‌نمایش، از ساختار زیر استفاده کنید:

https://docs.google.com/viewer?embedded=true&url=FILE_URL

حالا به جای FILE_URL، لینک مستقیم فایل خود را قرار دهید.

برای مثال:

https://docs.google.com/viewer?embedded=true&url=https://themefars.com/wp-content/uploads/2020/02/Resume.pdf

اکنون می‌توانید این لینک را به یک متن، تصویر یا دکمه بدهید.

برای نمونه:

<a href="https://docs.google.com/viewer?embedded=true&url=https://themefars.com/wp-content/uploads/2020/02/Resume.pdf" target="_blank" rel="noopener noreferrer">مشاهده پیش نمایش PDF</a>

یا اگر می‌خواهید لینک به شکل دکمه نمایش داده شود، می‌توانید از کد زیر استفاده کنید:

<a href="https://docs.google.com/viewer?embedded=true&url=https://themefars.com/wp-content/uploads/2020/02/Resume.pdf" target="_blank" rel="noopener noreferrer" style="display: inline-block; padding: 10px 18px; background: #2271b1; color: #fff; text-decoration: none; border-radius: 6px;">مشاهده پیش نمایش PDF</a>

نمایش فایل‌های Word، Excel و PowerPoint در وردپرس

یکی از مزیت‌های Google Docs Viewer این است که فقط برای PDF نیست. اگر می‌خواهید فایل‌های Office مثل Word، Excel یا PowerPoint را هم داخل سایت نمایش دهید، می‌توانید از همین ساختار استفاده کنید.

برای مثال، برای نمایش فایل Word می‌توانید از کدی شبیه نمونه زیر استفاده کنید:

<iframe src="https://docs.google.com/viewer?embedded=true&url=https://example.com/wp-content/uploads/file.docx" style="width: 100%; height: 600px; border: none;" loading="lazy" title="پیش نمایش فایل Word"></iframe>

برای نمایش فایل Excel:

<iframe src="https://docs.google.com/viewer?embedded=true&url=https://example.com/wp-content/uploads/file.xlsx" style="width: 100%; height: 600px; border: none;" loading="lazy" title="پیش نمایش فایل Excel"></iframe>

و برای نمایش فایل PowerPoint:

<iframe src="https://docs.google.com/viewer?embedded=true&url=https://example.com/wp-content/uploads/file.pptx" style="width: 100%; height: 600px; border: none;" loading="lazy" title="پیش نمایش فایل PowerPoint"></iframe>

فقط توجه داشته باشید که فایل باید عمومی و قابل دسترسی باشد. اگر فایل پشت ورود، رمز عبور، محدودیت هاست، فایروال یا لینک غیرمستقیم باشد، ممکن است پیش‌نمایش به‌درستی نمایش داده نشود.

کد iframe را کجای وردپرس قرار دهیم؟

اگر از ویرایشگر بلوکی وردپرس استفاده می‌کنید، یک بلوک HTML سفارشی اضافه کنید و کد iframe را داخل آن قرار دهید.

اگر از ویرایشگر کلاسیک استفاده می‌کنید، از بالای ویرایشگر وارد تب متن شوید و کد را در محل مورد نظر خود قرار دهید.

اگر با المنتور صفحه می‌سازید، ابزارک HTML را به صفحه اضافه کرده و کد iframe را داخل آن بگذارید.

اگر می‌خواهید فایل PDF را در سایدبار، فوتر یا بخش خاصی از قالب نمایش دهید، می‌توانید از ابزارک HTML سفارشی استفاده کنید. در صورتی که قصد دارید کد را مستقیم داخل فایل‌های قالب قرار دهید، بهتر است قبل از تغییر فایل‌ها از سایت خود بکاپ بگیرید.

چرا پیش نمایش PDF نمایش داده نمی‌شود؟

گاهی ممکن است همه مراحل را انجام داده باشید، اما فایل PDF در سایت نمایش داده نشود. در بیشتر مواقع مشکل از لینک فایل، سطح دسترسی، حجم فایل یا محل قرار دادن کد است.

اولین کاری که باید انجام دهید این است که لینک مستقیم فایل PDF را در یک پنجره ناشناس مرورگر باز کنید. اگر فایل بدون نیاز به ورود و بدون خطا باز شد، یعنی لینک فایل درست است. اما اگر فایل باز نشد، باید آدرس فایل یا سطح دسترسی آن را بررسی کنید.

اگر از Google Docs Viewer استفاده می‌کنید، فایل باید برای گوگل قابل دسترسی باشد. یعنی نباید روی فایل محدودیت دسترسی، رمز عبور، جلوگیری از hotlink، فایروال یا تنظیمات امنیتی خاص وجود داشته باشد.

اگر فایل PDF حجم زیادی دارد، ممکن است دیر بارگذاری شود یا در برخی مرورگرها درست نمایش داده نشود. بهتر است قبل از آپلود، حجم فایل PDF را کاهش دهید و نام فایل را ساده و انگلیسی انتخاب کنید.

همچنین اگر کد iframe بعد از ذخیره نوشته حذف می‌شود، احتمالاً کد را در محل اشتباه قرار داده‌اید یا نقش کاربری شما اجازه ذخیره بعضی کدهای HTML را ندارد. در این حالت بهتر است از بلوک HTML سفارشی استفاده کنید و با حساب مدیر سایت وارد شوید.

نکات مهم برای نمایش بهتر فایل PDF در سایت

قبل از انتشار نوشته، بهتر است چند نکته ساده را رعایت کنید تا پیش‌نمایش PDF بهتر نمایش داده شود و تجربه کاربری سایت افت نکند.

حجم فایل PDF را کم کنید

فایل‌های PDF حجیم می‌توانند سرعت بارگذاری صفحه را کاهش دهند. اگر فایل شما شامل تصاویر زیاد است، قبل از آپلود آن را فشرده کنید. این کار مخصوصاً برای کاربران موبایل اهمیت زیادی دارد.

نام فایل را ساده و انگلیسی انتخاب کنید

بهتر است نام فایل شامل فاصله، کاراکترهای خاص یا حروف فارسی نباشد. برای مثال به جای نام زیر:

رزومه جدید من.pdf

از نامی ساده‌تر استفاده کنید:

resume.pdf

یا:

wordpress-pdf-guide.pdf

همیشه لینک جایگزین قرار دهید

حتی اگر PDF داخل نوشته نمایش داده می‌شود، بهتر است یک لینک برای دانلود یا باز کردن فایل در تب جدید هم قرار دهید. این کار به کاربر کمک می‌کند اگر پیش‌نمایش در مرورگر او درست نمایش داده نشد، همچنان بتواند فایل را مشاهده کند.

نمایش PDF را در موبایل بررسی کنید

بعد از قرار دادن فایل PDF، نوشته را در موبایل هم باز کنید. گاهی پیش‌نمایش PDF در دسکتاپ ظاهر خوبی دارد، اما در موبایل به دلیل ارتفاع کم iframe یا محدودیت قالب، تجربه خوبی ایجاد نمی‌کند.

برای فایل‌های مهم از روش مطمئن‌تر استفاده کنید

اگر فایل شما مهم، محرمانه یا مخصوص کاربران عضو سایت است، بهتر است آن را با Google Docs Viewer نمایش ندهید. چون برای کار کردن این روش، فایل باید عمومی و قابل دسترسی باشد. در این شرایط بهتر است از روش‌های داخلی وردپرس، افزونه‌های حرفه‌ای یا سیستم محدودسازی دسترسی استفاده کنید.

آیا برای نمایش PDF در وردپرس افزونه لازم است؟

برای نمایش ساده فایل PDF، معمولاً نیازی به افزونه ندارید. بلوک File وردپرس، iframe مستقیم و Google Docs Viewer هر سه می‌توانند بدون افزونه فایل PDF را داخل نوشته یا برگه نمایش دهند.

اما اگر به امکانات بیشتری نیاز دارید، افزونه می‌تواند انتخاب بهتری باشد. برای مثال اگر می‌خواهید نمایشگر PDF ظاهر حرفه‌ای‌تری داشته باشد، کاربر بتواند داخل فایل جستجو کند، فایل را تمام‌صفحه ببیند یا کنترل بیشتری روی دانلود و چاپ داشته باشید، بهتر است از افزونه‌های مخصوص نمایش PDF استفاده کنید.

برای آشنایی با گزینه‌های بهتر، می‌توانید مقاله ما درباره بهترین افزونه‌های نمایش فایل PDF در وردپرس را هم ببینید.

جمع‌بندی

در این مقاله روش‌های نمایش فایل PDF در وردپرس بدون افزونه را بررسی کردیم. اگر از ویرایشگر جدید وردپرس استفاده می‌کنید، ساده‌ترین روش استفاده از بلوک File است. این روش سریع، ساده و مناسب بیشتر کاربران است.

اگر می‌خواهید فایل PDF را با کد HTML در محل دلخواه قرار دهید، می‌توانید از iframe مستقیم استفاده کنید. همچنین اگر قصد دارید علاوه بر PDF، فایل‌های Word، Excel و PowerPoint را هم به‌صورت آنلاین نمایش دهید، Google Docs Viewer همچنان کاربرد دارد.

در نهایت، اگر به امکانات پیشرفته‌تر مثل زوم، جستجو، حالت تمام‌صفحه، طراحی بهتر یا کنترل بیشتر روی فایل‌ها نیاز دارید، استفاده از افزونه PDF Viewer گزینه مناسب‌تری خواهد بود.

امیدواریم این آموزش به شما کمک کرده باشد تا پیش نمایش فایل PDF را به‌سادگی در سایت وردپرس خود نمایش دهید.