l-1

WordPress笔记

主页/WordPress笔记/博客文章/综合文章/如何在WordPress博客文章中嵌入PDF、电子表格和其他文件

如何在WordPress博客文章中嵌入PDF、电子表格和其他文件

Bug编译狮

Bug编译狮

在WordPress博客文章中嵌入PDF、电子表格等文件是一种增强用户体验和分享信息的有效方式。这不仅可以帮助读者轻松访问和下载所需资源，还可以提高网站的互动性和吸引力。下面我将指导您如何在WordPress中实现这一功能。

步骤 1: 安装必要的插件

首先，确保您的WordPress安装了以下两个插件：

  • Media Library：用于管理媒体库中的所有文件。
  • File Embed：允许您从WordPress中嵌入各种格式的文件（包括PDF）。

您可以通过WordPress插件市场搜索这两个插件并安装它们。

步骤 2: 配置File Embed插件

安装完成后，打开File Embed插件的设置页面。在这里，您需要配置几个选项来确保能够正确地嵌入文件：

  1. 选择要显示的文件类型：通常选择“全部”或“仅 PDF”，具体取决于您的需求。
  2. 上传文件到：选择您希望这些文件存储的位置。对于大多数用户来说，推荐的是“本地媒体库”。
  3. 预览模式：选择您想要的预览模式，比如“缩略图”或“详细视图”。

完成以上配置后，点击保存更改。

步骤 3: 在文章中插入文件

回到您的WordPress文章编辑界面，找到您想添加文件的地方，例如在文章正文内或者在特定区域（如标题页或侧边栏）。

  1. 插入新行，然后输入标签。这个标签会触发File Embed插件的加载。
  2. 然后，使用file="..."参数来指定您要在文章中嵌入的文件。例如，如果您有一个名为“example.pdf”的PDF文件，您可以这样输入：

示例代码

假设您有一篇文章，其中包含了以下部分：

这篇文章包含一些关于技术的文章。如果你想获取更多信息，请查看我们的PDF教程。

当用户点击该链接时，他们会被带到一个新的窗口，显示PDF文档的内容。

效果说明

当用户点击上述链接时，他们会在浏览器中看到PDF文档的一个简单版式，同时保留原始文件的完整细节。这种设计不仅提高了用户体验，还鼓励用户进一步探索相关资源。

注意事项

  • 确保您的博客服务器支持跨域资源共享(CORS)，否则某些文件可能无法被正确嵌入。
  • 根据所使用的文件大小和格式，确保有足够的空间存放文件，以及适当的网络速度。

通过以上步骤，您现在可以成功地在WordPress博客文章中嵌入PDF或其他文件。这种方法不仅能提升用户体验，还能为您的博客增添更多价值。

黑板前的Bug语法讲师

黑板前的Bug语法讲师

在WordPress上嵌入PDF、电子表格或其他文件是一种非常实用的功能，它可以帮助用户快速分享和访问这些类型的文件，而无需下载或打开它们。

步骤 1: 创建包含文件的页面

首先，在WordPress中创建一个包含文件的新页面。这通常需要通过“添加新页面”按钮完成。

<div class="wrap">
    <h2>Create a new page with file attachment</h2>
    <form method="post" action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>">
        <input type="hidden" name="page_id" value="<?php the_ID(); ?>" />
        <input type="hidden" name="action" value="add_attachment" />
        <div class="postbox">
            <h3><?php _e('Add Attachment', 'your-plugin-name'); ?></h3>
            <p><label for="file"><?php _e('Select File:', 'your-plugin-name'); ?></label><br /></p>
            <input id="file" name="file" type="file" size="40" />
            <p><input type="submit" value="<?php _e('Upload', 'your-plugin-name'); ?>" class="button submit" /></p>
        </div>
    </form>
</div>

步骤 2: 添加文件上传功能

接下来，在functions.php文件中添加以下代码以实现文件上传功能：

function add_file_attachment_to_page() {
    global $wp_filesets;
    if ( ! isset( $_POST['page_id'] ) || ! isset( $_POST['action'] ) ) {
        return;
    }
    $page_id = absint( $_POST['page_id'] );
    $attachment = wp_insert_attachment(
        array(
            'guid' => wp_get_attachment_url(),
            'filename' => $_FILES['file']['name'],
            'post_mime_type' => $_FILES['file']['type'],
            'post_title' => sanitize_file_name($_FILES['file']['name']),
            'post_content' => '',
            'post_status' => 'inherit',
            'post_parent' => $page_id,
        ),
        $page_id
    );
    if ( is_wp_error( $attachment ) ) {
        wp_die( $attachment->get_error_message() );
    }
    update_post_meta( $page_id, '_wp_attached_file', $_FILES['file']['name'] );
    wp_set_object_terms( $attachment, get_option('default_term'), 'post_tag' );
}

步骤 3: 配置插件

最后，为您的插件配置适当的选项以启用此功能。例如，您可以将add_file_attachment_to_page()函数添加到init.php文件中的register_activation_hook()部分：

add_action( 'init', 'add_file_attachment_to_page' );

现在，当您点击“上传文件”按钮时，WordPress会自动将文件插入当前页面并显示在相应的位置。请确保正确地设置_wp_attached_file属性来存储上传的文件路径。

示例代码

HTML代码：

<div class="attachment-content">
    <a href="<?php echo esc_url( wp_get_attachment_url( $attachment->ID ) ); ?>" target="_blank"><img src="<?php echo esc_url( wp_get_attachment_image_src( $attachment->ID, 'full' )[0] ); ?>" alt="" width="500" height="auto"/></a>
</div>

在这个例子中，我们使用了esc_url和esc_attr函数来处理URL和标签，确保HTML输出安全。

PHP代码：

if ( ! empty( $_GET['post'] ) && is_numeric( $_GET['post'] ) ) {
    $post_id = absint( $_GET['post'] );
    if ( is_object( $post_id ) && ! empty( $post_id->ID ) ) {
        $post = get_post( $post_id->ID );
        if ( $post instanceof WP_Post && $post->post_type === 'attachment' ) {
            $attachment = $post;
            break;
        }
    }
}

if ( $attachment instanceof WP_Post && $attachment->post_status !== 'inherit' ) {
    $content = '<div class="attachment-content">';
    $content .= '<a href="' . esc_url( wp_get_attachment_url( $attachment->ID ) ) . '" target="_blank">' . esc_html( $attachment->post_title ) . '</a>';
    $content .= '<div style="display: block; margin-top: 2em;">';
    $content .= '<img src="' . esc_url( wp_get_attachment_image_src( $attachment->ID, 'full' )[0] ) . '" alt="' . esc_attr( $attachment->post_title ) . '" style="width: 500px; max-width: 500px; display: block;" />';
    $content .= '</div>';
    $content .= '</div>';

    // Add this code to show or hide the content based on post status
    if ($attachment->post_status == 'inherit') {
        $content .= '<div class="post-status-inherit">This attachment has been inherited from its parent.</div>';
    } else {
        $content .= '<div class="post-status-attached">This attachment is attached to this post.</div>';
    }

    echo $content;
}

这个示例代码展示了如何在WordPress文章中显示嵌入的文件。注意，要使这段代码正常工作，请确保已经启用了相应的插件（如WP Media Library）以及设置了正确的主题样式。

,

最新更新