WordPress Shortcode
για PDF Viewer

Δημοσιεύθηκε 27/06/2021

Σε αυτό το άρθρο θα βρεις τον πιο lightweight κώδικα για PDF Viewer σε ένα WordPress site.

Με την βοήθεια των Google Docs Viewer θα δημιουργήσουμε ένα πολύ απλό WordPress shortcode για το PDF Viewer.

PDF Viewer Shortcode

[nbPDF url=”https://…/PdfUrl.pdf” width=”100%” height=”700px”]

Χρήση:

  1. url: δηλώνουμε ολόκληρο το url ένος pdf αρχείου, είτε βρίσκεται στο site μας είτε οπουδήποτε αλλού πχ https://mydomain.gr/docs/pdf.pdf
  2. width: προαιρετική παράμετρος αν δεν μας ικανοποιεί η default τιμή (100%)
  3. height: προαιρετική παράμετρος αν δεν μας ικανοποιεί η default τιμή (700px)

Εφόσον το width και το height είναι προαιρετικές παράμετροι η πιο απλή μορφή του shortcode είναι:

[nbPDF url=”https://…/PdfUrl.pdf” ]

Neobabis Simple WordPress PDF Viewer
ένα παράδειγμα χρήσης του PDF Viewer

Αλλαγή των default width και height

Μέσω CSS μπορούμε να κάνουμε Override τις default τιμές των width και height, ώστε να δηλώσουμε μία φορά την προτίμησή μας και να χρησιμοποιούμε τις παραμέτρους του shortcode, μόνο για ειδικές περιπτώσεις που θέλουμε άλλες τιμές

.nb_pdf_container iframe{
    width:  YYYpx !important;
    height:  YYYpx !important;
}

@media (max-width:768px){
   .nb_pdf_container iframe{
      height:  ΖΖΖpx !important;
   }
}

PDF Viewer Κώδικας

function nb_pdf_viewer_shortcpde($atts)
{
    $atts = shortcode_atts(array(
        'url' => '',
        'width' => '100%',
        'height' => '700px'
    ), $atts);
    $output = '';
    if ($atts['url'] != '') :
        $output .= '<div class="nb_pdf_container">';
        $output .= '<iframe src="https://docs.google.com/viewer?url=' . $atts['url'] . '&embedded=true" style="width: ' . $atts['width'] . '; height: ' . $atts['height'] . ';" frameborder="0"></iframe>';
        $output .= '</div>';
    endif;
    return $output;
}
add_shortcode('nbPDF', 'nb_pdf_viewer_shortcpde');

Αντιγράφουμε τον παραπάνω κώδικα και τον αποθηκεύουμε στο functions.php, διαφορετικά μπορούμε να το κατεβάσουμε ως plugin από τον github λογαριασμό μου για να το εγκαταστήσουμε χωρίς την χρήση κώδικα και να μπορούμε να χρησιμοποιούμε το shortcode.