Merhaba arkadaşlar
Bu gün WMARACI da bir arkadaşımızın “web sitemizde PDF nasıl görüntüleriz” sorusu karşısında ufak bir araştırma yaparken github da açık kaynaklı olarak paylaşılan bir proje gördüm. Bu proje javascript kullanarak web sitelerimizde yönetilebilir şekilde PDF dosyalarını görüntülemeyi sağlıyor. Bende bu projeyi inceleyince kafamda şimşekler çaktı ve dedim ki ben bunu WordPress’e uydurayım. Böylelikle ufak bir yardım ile bu işi sonuca kavuşturdum. Sonuç olarak WordPress sitelerimizde shortcode yardımı ile basit bir şekilde PDF dosyalarını tüm tarayıcıların destekleyeceği bir şekilde gösterebilirsiniz.
WordPress PDF Dosyaları Görüntüleme
WordPress web sitemizde PDF dosyaları basit ve sağlam bir şekilde ekleyeceğiz. Güncel tüm tarayıcılar destekleyecek. Desteklemeyen eski tarayıcılarda ise PDF dosyasının indirme bağlantısı görünecek. Böylece her şekilde ziyaretçiler bu dosyaya ulaşabilecek.
Bu işlemi yapabilmek için kullandığınız temanın functions.php dosyasına erişiminiz olması gerekmekte. Eğer bu dosyaya erişimiz var ise dosyayı düzenlemek üzere açıyoruz ve uygun bir yere(en alt yada en üst
/** PDFObject Eklentisi **/
// Add Shortcode
function pdf_embed_shortcode( $atts ) {
// Attributes
$atts = shortcode_atts(
array(
'src' => '',
'page' => '1',
'div' => 'pdf-viewer',
'height' => '700',
),
$atts,
'pdf_embed'
);
// Return custom embed code
return '
<script></script>
<script>
var options = {
height: "' . $atts['height'] . 'px",
page: "' . $atts['page'] . '",
};
PDFObject.embed("' . $atts['src'] . '", "#' . $atts['div'] . '", options);
</script>
';
}
add_shortcode( 'pdf_embed', 'pdf_embed_shortcode' );
Yukarıda ki işlemi eğer başarı ile tamamladıysanız yani bu kodu functions.php dosyanıza hatasız bir şekilde uyguladıysanız ve siteniz görüntülenmeye devam ediyorsa sıradaki işlem bir içerik paylaşacağımız saman PDF dosyaları nasıl kolayca içeriğimize ekleyeceğiz ve görüntülenmesini sağlayacağız buna geçelim. Bunun için aşağıdaki örneklerde göründüğü gibi içerik ekleyebilirsiniz. Fakat bu kodu eklerken yazı editörünüzün “Metin” konumunda olması gerekmekte.
Örnek 1;
[pdf_embed src="https://cihaneken.com.tr/wp-content/uploads/2017/02/NamazveAbdest.pdf" div="hahah" height="900" page="4"]
Yukarıdaki örnekte;
src kısmına PDF dosyasının adresini girdik.
div kısmına ise PDF dosyası görüntülenirken hangi div id sinin ne olacağını belirledik css girmek isteyen olursa diye.
height kısmına PDF dosyasının ne kadar yükseklik ile gösterileceğini belirledik.
page kısmı ise bizim PDF dosyamızın ilk açılışta kaçıncı sayfadan paşlayacağını gösteriyor.
Örnek 2;
[pdf_embed src="https://cihaneken.com.tr/wp-content/uploads/2017/02/NamazveAbdest.pdf"]
Yukarıda ki örnekte ise hiç src haricinde hiç bir değer girmedik fakat varsayılan değerler ile PDF dosyamız yine görüntülenecektir. Bu durumda dosya 1. sayfada başlayacak div id si de pdf-viewer olacak ve yükseklik değeri de 700px olacaktır.
Demo Sayfası
Aşağıda örnek resimleri görebilirsiniz.
