WordPress Shortcode
για PDF Viewer

ΣΗΜΕΙΩΣΗ για τις εκδόσεις WordPress 5.8 και μετά

Το WordPress πλέον έχει ενσωματωμένο PDF Viewer,
οπότε το παρακάτω άρθρο πλέον ίσως δεν φανεί χρήσιμο.
Ωστόσο το ενσωματομένο PDF Viewer ,προς στιγμή,
δεν έχει υποστήριξη στους mobile browsers.
Περισσότερα σχετικά με την υποστήριξη
μπορείς να δεις στο caniuse.

Σε αυτό το άρθρο θα βρεις τον πιο 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” ]

Αλλαγή των 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.