WordPress中PDF在线查看器下载按钮禁用及CSS不生效问题

Let’s break this down—your page editor CSS isn’t working because either the selector isn’t specific enough, the styles load too early, or the PDF viewer itself blocks custom styles (especially if it’s a browser-built one). Here’s how to fix it based on your setup:

First Step: Identify Your PDF Viewer Type #

Right-click the download button and select "Inspect" (Chrome/Firefox) to check what’s rendering it:

• If the element has browser-specific classes (like chrome-pdf or mozilla-pdf), it’s the browser’s built-in PDF viewer
• If it has plugin-specific classes (like pdfjs-download or your-plugin-name-download-btn), it’s a WordPress plugin-generated viewer

Case 1: Browser-Built PDF Viewer #

Browser PDF viewers (like Chrome’s) isolate their UI from page CSS, so your custom styles won’t apply directly. You have two solid workarounds:

Option 1: Force PDF Download Instead of Preview #

Add this code to your PHP plugin to make PDFs download immediately instead of opening in the browser—no preview means no download button:

function force_pdf_download($headers, $file, $filename) {
    if (strpos($filename, '.pdf') !== false) {
        // Override headers to force download
        $headers['Content-Type'] = 'application/octet-stream';
        $headers['Content-Disposition'] = 'attachment; filename="' . basename($filename) . '"';
    }
    return $headers;
}
add_filter('wp_get_attachment_image_attributes', 'force_pdf_download', 10, 3);

Option 2: Embed PDF in a Restricted Iframe #

If you need to keep the preview, embed the PDF in an iframe with sandbox restrictions (note: this doesn’t work 100% across all browsers, but it’s worth trying):
Create a shortcode in your PHP plugin to generate the restricted iframe:

function restricted_pdf_embed($atts) {
    $atts = shortcode_atts([
        'url' => '',
        'height' => '600'
    ], $atts);
    
    if (empty($atts['url'])) return '';
    
    return sprintf(
        '<iframe src="%s" sandbox="allow-same-origin allow-scripts" width="100%%" height="%spx"></iframe>',
        esc_url($atts['url']),
        esc_attr($atts['height'])
    );
}
add_shortcode('restricted_pdf', 'restricted_pdf_embed');

Then use it in your page like this: [restricted_pdf url="https://your-site.com/path/to/your.pdf"]

Case 2: Plugin-Generated PDF Viewer #

For plugin-built viewers, the problem is almost certainly CSS specificity or loading order. Here’s how to fix it:

Step 1: Get the Exact Selector #

Use the Inspect tool to grab the button’s full selector—for example, if the button is <button class="pdf-viewer__download-btn">, your selector is .pdf-viewer__download-btn

Step 2: Inject High-Priority CSS #

Add this code to your PHP plugin to load custom CSS after all other styles, ensuring it overrides the plugin’s default styles:

function add_pdf_viewer_custom_css() {
    // Replace the selector below with your button's actual selector
    $custom_css = '
        .pdf-viewer__download-btn {
            display: none !important; /* Hides the button */
            /* If you just need to adjust the margin instead:
            margin-top: 20px !important;
            */
        }
    ';
    
    // Inject the CSS into the page's styles
    wp_add_inline_style('wp-block-library', $custom_css);
}
add_action('wp_enqueue_scripts', 'add_pdf_viewer_custom_css');

The !important flag ensures your styles take precedence, and using wp_add_inline_style guarantees it loads after core and plugin styles.

Why Your Page Editor CSS Didn’t Work #

Quick recap:

• Editor styles only apply in the backend, not the frontend
• Plugin styles often load after editor-injected styles, overriding them
• Dynamic JS-rendered viewers might not pick up static editor styles

After making changes, clear your browser cache and refresh the page to see the effect.

内容的提问来源于stack exchange，提问作者D.Tsiridakis