求助：在WordPress页面实现本站专属QR Code扫描跳转功能

Hey there! Let's walk through how to get that QR scanner up and running on your WordPress site, with the exact behavior you want—only jumping to your WooCommerce product URLs, while displaying other scanned content as plain text.

First, let's get the scanner files set up on your server:

• Download the JsQRScanner package, then locate the js folder inside it.
• Upload this entire js folder to your WordPress installation. The best spot is your child theme directory (e.g., wp-content/themes/your-child-theme/js/qr-scanner/) using FTP or your hosting's file manager—using a child theme ensures your changes won't get overwritten when your parent theme updates.

• Go to your WordPress dashboard, create a new page (name it something like "QR Code Scanner").
• Switch to the Code Editor (not the visual editor) and add this HTML structure for the scanner and result display:

<div id="scanner" style="width: 300px; height: 300px; margin: 20px auto;"></div>
<input type="text" id="scannedTextMemo" readonly style="width: 100%; padding: 10px; margin-top: 20px;" placeholder="Scanned content will appear here">

WordPress recommends enqueuing scripts instead of adding raw <script> tags directly. Here are two ways to do this:

Option A: Add to Your Child Theme's functions.php #

Open your child theme's functions.php file and paste this code:

function enqueue_qr_scanner_scripts() {
    // Only load the script on your scanner page (replace "qr-code-scanner" with your page's slug)
    if (is_page('qr-code-scanner')) {
        wp_enqueue_script(
            'jsqrscanner',
            get_stylesheet_directory_uri() . '/js/qr-scanner/jsqrscanner.nocache.js',
            array(),
            '1.0',
            true // Load script in the footer for better performance
        );
    }
}
add_action('wp_enqueue_scripts', 'enqueue_qr_scanner_scripts');

Adjust the script path if you uploaded the js folder to a different location.

Option B: Use a Custom Script Plugin #

If you don't want to edit functions.php, use a plugin like Custom CSS & JS or Insert Headers and Footers. In the plugin's interface, target your scanner page and add:

<script type="text/javascript" src="YOUR_SCRIPT_FULL_URL_HERE"></script>

Replace YOUR_SCRIPT_FULL_URL_HERE with the actual URL of jsqrscanner.nocache.js (you can get this from your file manager or media library if you uploaded it there).

Back to your scanner page's code editor, paste this JavaScript to initialize the scanner and add your URL validation logic:

function onQRCodeScanned(scannedText) {
    const scannedTextMemo = document.getElementById("scannedTextMemo");
    if (scannedTextMemo) {
        scannedTextMemo.value = scannedText;
    }

    // Check if the scanned URL belongs to your site
    const yourSiteBaseURL = window.location.origin; // Automatically gets your site's root URL (e.g., https://yourstore.com)
    
    // Optional: Add extra check for WooCommerce product paths
    const isWooCommerceProduct = scannedText.includes('/product/');

    if (scannedText.startsWith(yourSiteBaseURL) && isWooCommerceProduct) {
        // Redirect to the product page
        window.location.href = scannedText;
    } else {
        // Show non-site content without redirecting (optional alert for clarity)
        alert("Scanned content: " + scannedText);
    }
}

// Runs when the scanner is ready to use
function JsQRScannerReady() {
    const jbScanner = new JsQRScanner(onQRCodeScanned);
    // Reduce image size to boost mobile performance
    jbScanner.setSnapImageMaxSize(300);
    const scannerContainer = document.getElementById("scanner");
    if (scannerContainer) {
        jbScanner.appendTo(scannerContainer);
    }
}

This code will automatically redirect to your WooCommerce product pages when scanned, while showing a popup with other QR code content.

• Publish your page, then access it on a mobile device (desktop cameras work too, but mobile is the intended use case).
• Scan one of your WooCommerce product QR codes—you should be redirected to the product page instantly.
• Scan an external QR code—you'll see the content displayed without redirecting.

• Camera not working? Ensure your site uses HTTPS (modern browsers require HTTPS to access device cameras; localhost works for testing).
• Script not loading? Check your browser's developer console (F12) for 404 errors—this means your script URL is incorrect.
• Slow scanning? Adjust setSnapImageMaxSize to a higher value (e.g., 400) for more accurate scans, though it may use slightly more mobile resources.

内容的提问来源于stack exchange，提问作者Alviandiky