0 0 0

wordpress文章图片遮盖层插件完整代码怎么写?

admin
1月前 606

前言

为了创建一个 WordPress 文章图片遮盖层插件,以下是一个简单的示例代码,支持 PHP 8.0 版本。

完整代码

1、创建一个名为 image-overlay-plugin.php 的插件文件,将以下代码复制粘贴到该文件中:

<?php
/*
Plugin Name: 图片遮盖层插件
Description: 为文章图片添加遮盖层
Version: 1.0
Author: 您的姓名
*/

// Enqueue scripts and styles
function image_overlay_scripts() {
    wp_enqueue_style('image-overlay-style', plugin_dir_url(__FILE__) . 'style.css');
    wp_enqueue_script('image-overlay-script', plugin_dir_url(__FILE__) . 'script.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'image_overlay_scripts');

// Add overlay to post images
function add_image_overlay($content) {
    if (is_singular('post')) {
        $post_id = get_the_ID();
        $post_thumbnail = get_the_post_thumbnail($post_id, 'large');
        
        if ($post_thumbnail) {
            $overlay_html = '<div class="image-overlay">' . $post_thumbnail . '<div class="overlay"></div></div>';
            $content = $overlay_html . $content;
        }
    }
    
    return $content;
}
add_filter('the_content', 'add_image_overlay');​

2、创建一个名为 style.css 的样式文件,用于定义遮盖层的样式。

3、创建一个名为 script.js 的 JavaScript 文件,用于定义遮盖层的行为。

4、将这些文件一起打包,并上传到您的 WordPress 插件目录中。

5、激活插件后,您的文章图片应该会显示遮盖层效果。您可以根据需要对样式和行为进行定制。

最新回复 (0)

    暂无评论

请先登录后发表评论!

返回
请先登录后发表评论!