文章目录
-
- 在当今数字时代,社交媒体分享功能已成为网站不可或缺的一部分。虽然市场上有许多现成的分享插件,但它们往往包含不必要的功能、加载速度慢,或者不符合网站的设计风格。通过开发自己的WordPress社交媒体分享插件,您可以完全控制功能、设计和性能,打造与品牌完美融合的分享工具。 本教程将引导您从零开始创建一个功能完整、代码优雅的社交媒体分享插件。我们将通过WordPress的插件架构,实现一个可自定义的分享工具,支持主流社交平台,并确保代码的可维护性和扩展性。
- 在开始编码之前,我们需要设置开发环境并创建插件的基本结构。 <?php /** * 插件名称: Custom Social Share * 插件URI: https://yourwebsite.com/custom-social-share * 描述: 自定义社交媒体分享工具,轻量高效,支持多平台 * 版本: 1.0.0 * 作者: 您的姓名 * 作者URI: https://yourwebsite.com * 许可证: GPL v2 或更高版本 * 文本域: custom-social-share */ // 防止直接访问文件 if (!defined('ABSPATH')) { exit; } // 定义插件常量 define('CSS_PLUGIN_VERSION', '1.0.0'); define('CSS_PLUGIN_PATH', plugin_dir_path(__FILE__)); define('CSS_PLUGIN_URL', plugin_dir_url(__FILE__)); /** * 主插件类 - 管理插件的所有功能 */ class CustomSocialShare { private static $instance = null; /** * 获取插件单例实例 * 使用单例模式确保插件只被初始化一次 */ public static function get_instance() { if (null === self::$instance) { self::$instance = new self(); } return self::$instance; } /** * 构造函数 - 初始化插件 */ private function __construct() { $this->init_hooks(); } /** * 初始化WordPress钩子(动作和过滤器) */ private function init_hooks() { // 插件激活时执行的操作 register_activation_hook(__FILE__, array($this, 'activate_plugin')); // 插件停用时执行的操作 register_deactivation_hook(__FILE__, array($this, 'deactivate_plugin')); // 初始化插件 add_action('plugins_loaded', array($this, 'init_plugin')); } /** * 插件激活时执行 */ public function activate_plugin() { // 创建或更新数据库表(如果需要) $this->create_database_tables(); // 设置默认选项 $this->set_default_options(); // 刷新WordPress重写规则 flush_rewrite_rules(); } /** * 插件停用时执行 */ public function deactivate_plugin() { // 清理临时数据 // 注意:通常不删除用户数据,除非用户明确要求 flush_rewrite_rules(); } /** * 创建数据库表(示例) */ private function create_database_tables() { global $wpdb; $table_name = $wpdb->prefix . 'social_share_stats'; $charset_collate = $wpdb->get_charset_collate(); // 检查表是否已存在 if ($wpdb->get_var("SHOW TABLES LIKE '$table_name'") != $table_name) { $sql = "CREATE TABLE $table_name ( id mediumint(9) NOT NULL AUTO_INCREMENT, post_id bigint(20) NOT NULL, platform varchar(50) NOT NULL, share_count int(11) DEFAULT 0, last_shared datetime DEFAULT '0000-00-00 00:00:00', PRIMARY KEY (id), KEY post_id (post_id), KEY platform (platform) ) $charset_collate;"; require_once(ABSPATH . 'wp-admin/includes/upgrade.php'); dbDelta($sql); } } /** * 设置默认插件选项 */ private function set_default_options() { $default_options = array( 'enabled_platforms' => array('facebook', 'twitter', 'linkedin', 'pinterest'), 'display_position' => 'after_content', 'button_style' => 'rounded', 'share_text' => '分享到', 'show_count' => true, 'custom_css' => '', ); // 如果选项不存在,则添加默认选项 if (false === get_option('custom_social_share_options')) { add_option('custom_social_share_options', $default_options); } } /** * 初始化插件功能 */ public function init_plugin() { // 加载文本域用于国际化 load_plugin_textdomain( 'custom-social-share', false, dirname(plugin_basename(__FILE__)) . '/languages' ); // 初始化前端功能 $this->init_frontend(); // 初始化管理后台功能 if (is_admin()) { $this->init_admin(); } } // 其他方法将在后续部分实现 } // 初始化插件 CustomSocialShare::get_instance(); ?>
- 现在我们来创建前端分享按钮的显示功能。这部分代码负责在文章内容前后添加分享按钮。 <?php // 接续上面的CustomSocialShare类 /** * 初始化前端功能 */ private function init_frontend() { // 在文章内容后添加分享按钮 add_filter('the_content', array($this, 'add_share_buttons_to_content')); // 注册前端样式和脚本 add_action('wp_enqueue_scripts', array($this, 'enqueue_frontend_assets')); // 注册AJAX处理函数 add_action('wp_ajax_record_share', array($this, 'record_share_ajax')); add_action('wp_ajax_nopriv_record_share', array($this, 'record_share_ajax')); } /** * 在文章内容中添加分享按钮 * * @param string $content 文章内容 * @return string 添加分享按钮后的内容 */ public function add_share_buttons_to_content($content) { // 只在单篇文章页面显示分享按钮 if (!is_single()) { return $content; } // 获取插件选项 $options = get_option('custom_social_share_options'); $position = isset($options['display_position']) ? $options['display_position'] : 'after_content'; // 生成分享按钮HTML $share_buttons = $this->generate_share_buttons(); // 根据设置的位置添加按钮 if ('before_content' === $position) { return $share_buttons . $content; } elseif ('after_content' === $position) { return $content . $share_buttons; } elseif ('both' === $position) { return $share_buttons . $content . $share_buttons; } return $content; } /** * 生成分享按钮HTML * * @return string 分享按钮的HTML代码 */ private function generate_share_buttons() { global $post; // 获取当前文章信息 $post_id = $post->ID; $post_title = urlencode(get_the_title($post_id)); $post_url = urlencode(get_permalink($post_id)); $post_excerpt = urlencode(wp_trim_words(get_the_excerpt($post_id), 20)); // 获取特色图片 $post_thumbnail = ''; if (has_post_thumbnail($post_id)) { $thumbnail_id = get_post_thumbnail_id($post_id); $post_thumbnail = urlencode(wp_get_attachment_image_url($thumbnail_id, 'full')); } // 获取插件选项 $options = get_option('custom_social_share_options'); $enabled_platforms = isset($options['enabled_platforms']) ? $options['enabled_platforms'] : array(); $share_text = isset($options['share_text']) ? $options['share_text'] : '分享到'; $button_style = isset($options['button_style']) ? $options['button_style'] : 'rounded'; // 平台配置 $platforms = array( 'facebook' => array( 'name' => 'Facebook', 'url' => "https://www.facebook.com/sharer/sharer.php?u={$post_url}"e={$post_title}", 'icon' => 'facebook-f', 'color' => '#1877f2' ), 'twitter' => array( 'name' => 'Twitter', 'url' => "https://twitter.com/intent/tweet?text={$post_title}&url={$post_url}", 'icon' => 'twitter', 'color' => '#1da1f2' ), 'linkedin' => array( 'name' => 'LinkedIn', 'url' => "https://www.linkedin.com/shareArticle?mini=true&url={$post_url}&title={$post_title}&summary={$post_excerpt}", 'icon' => 'linkedin-in', 'color' => '#0077b5' ), 'pinterest' => array( 'name' => 'Pinterest', 'url' => "https://pinterest.com/pin/create/button/?url={$post_url}&media={$post_thumbnail}&description={$post_title}", 'icon' => 'pinterest-p', 'color' => '#bd081c' ), 'weibo' => array( 'name' => '微博', 'url' => "http://service.weibo.com/share/share.php?url={$post_url}&title={$post_title}", 'icon' => 'weibo', 'color' => '#e6162d' ), 'whatsapp' => array( 'name' => 'WhatsApp', 'url' => "https://api.whatsapp.com/send?text={$post_title}%20{$post_url}", 'icon' => 'whatsapp', 'color' => '#25d366' ), 'telegram' => array( 'name' => 'Telegram', 'url' => "https://t.me/share/url?url={$post_url}&text={$post_title}", 'icon' => 'telegram-plane', 'color' => '#0088cc' ) ); // 开始构建HTML $html = '<div class="custom-social-share-container">'; $html .= '<div class="share-label">' . esc_html($share_text) . '</div>'; $html .= '<div class="share-buttons ' . esc_attr($button_style) . '">'; foreach ($enabled_platforms as $platform) { if (isset($platforms[$platform])) { $platform_data = $platforms[$platform]; $html .= sprintf( '<a href="%s" class="share-button share-%s" data-platform="%s" target="_blank" rel="noopener noreferrer" style="background-color: %s;" onclick="recordShare(%d, '%s')">', esc_url($platform_data['url']), esc_attr($platform), esc_attr($platform), esc_attr($platform_data['color']), $post_id, esc_js($platform) ); $html .= '<i class="fab fa-' . esc_attr($platform_data['icon']) . '"></i>'; $html .= '<span class="platform-name">' . esc_html($platform_data['name']) . '</span>'; // 显示分享计数(如果启用) if (isset($options['show_count']) && $options['show_count']) { $share_count = $this->get_share_count($post_id, $platform); if ($share_count > 0) { $html .= '<span class="share-count">' . intval($share_count) . '</span>'; } } $html .= '</a>'; } } $html .= '</div></div>'; return $html; } /** * 获取分享计数 * * @param int $post_id 文章ID * @param string $platform 平台名称 * @return int 分享次数 */ private function get_share_count($post_id, $platform) { global $wpdb; $table_name = $wpdb->prefix . 'social_share_stats'; $count = $wpdb->get_var($wpdb->prepare( "SELECT share_count FROM $table_name WHERE post_id = %d AND platform = %s", $post_id, $platform )); return $count ? intval($count) : 0; } /** * 注册前端资源(CSS和JS) */ public function enqueue_frontend_assets() { // 只在文章页面加载资源 if (!is_single()) { return; } // 加载Font Awesome图标库 wp_enqueue_style( 'font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css', array(), '5.15.4' ); // 加载插件自定义样式 wp_enqueue_style( 'custom-social-share-style', CSS_PLUGIN_URL . 'assets/css/frontend.css', array(), CSS_PLUGIN_VERSION ); // 加载插件自定义脚本 wp_enqueue_script( 'custom-social-share-script', CSS_PLUGIN_URL . 'assets/js/frontend.js', array('jquery'), CSS_PLUGIN_VERSION, true ); // 传递AJAX URL到前端脚本 wp_localize_script('custom-social-share-script', 'css_ajax', array( 'ajax_url' => admin_url('admin-ajax.php'), 'nonce' => wp_create_nonce('record_share_nonce') )); } /** * 处理分享记录的AJAX请求 */ public function record_share_ajax() { // 验证nonce if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'record_share_nonce')) { wp_die('安全验证失败'); } $post_id = isset($_POST['post_id']) ? intval($_POST['post_id']) : 0; $platform = isset($_POST['platform']) ? sanitize_text_field($_POST['platform']) : ''; if ($post_id > 0 && !empty($platform)) { $this->record_share($post_id, $platform); wp_send_json_success(array('message' => '分享记录已更新')); } else { wp_send_json_error(array('message' => '参数错误')); } } /** * 记录分享到数据库 * * @param int $post_id 文章ID * @param string $platform 平台名称 */ private function record_share($post_id, $platform) { global $wpdb; $table_name = $wpdb->prefix . 'social_share_stats'; $current_time = current_time('mysql'); // 检查是否已有记录 $existing = $wpdb->get_row($wpdb->prepare( "SELECT id, share_count FROM $table_name WHERE post_id = %d AND platform = %s", $post_id, $platform )); if ($existing) { // 更新现有记录 $wpdb->update( $table_name, array( 'share_count' => $existing->share_count + 1, 'last_shared' => $current_time ), array('id' => $existing->id), array('%d', '%s'), array('%d') ); } else { // 插入新记录 $wpdb->insert( $table_name, array( 'post_id' => $post_id, 'platform' => $platform, 'share_count' => 1, 'last_shared' => $current_time ), array('%d', '%s', '%d', '%s') ); } } ?>
- 创建前端CSS和JavaScript文件来美化分享按钮并添加交互功能。 assets/css/frontend.css: /* 社交媒体分享插件 - 前端样式 */ .custom-social-share-container { margin: 30px 0; padding: 20px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; text-align: center; } .share-label { font-size: 16px; font-weight: 600; margin-bottom: 15px; color: #333; } .share-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .share-button { display: inline-flex; align-items: center; padding: 10px 15px; border-radius: 4px; color: white; text-decoration: none; font-size: 14px; font-weight: 500; transition: all 0.3s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .share-button:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.15); color: white; text-decoration: none; } .share-button i { font-size: 18px; margin-right: 8px; } .platform-name { margin-right: 5px; } .share-count { 好的,我们继续生成剩余部分。 assets/css/frontend.css (续): padding: 2px 6px; border-radius: 10px; font-size: 12px; margin-left: 5px; } /* 圆角按钮样式 */ .share-buttons.rounded .share-button { border-radius: 25px; } /* 方形按钮样式 */ .share-buttons.square .share-button { border-radius: 4px; } /* 圆形按钮样式 */ .share-buttons.circle .share-button { border-radius: 50%; width: 50px; height: 50px; padding: 0; justify-content: center; } .share-buttons.circle .platform-name, .share-buttons.circle .share-count { display: none; } .share-buttons.circle i { margin-right: 0; font-size: 20px; } /* 响应式设计 */ @media (max-width: 768px) { .share-button { padding: 8px 12px; font-size: 13px; } .share-button i { font-size: 16px; margin-right: 5px; } .share-buttons.circle .share-button { width: 45px; height: 45px; } } @media (max-width: 480px) { .share-buttons { gap: 8px; } .share-button { padding: 6px 10px; font-size: 12px; } .platform-name { display: none; } .share-button i { margin-right: 0; } } assets/js/frontend.js: /** * 自定义社交媒体分享插件 - 前端脚本 */ (function($) { 'use strict'; /** * 记录分享到数据库 * @param {number} postId 文章ID * @param {string} platform 平台名称 */ window.recordShare = function(postId, platform) { // 发送AJAX请求记录分享 $.ajax({ url: css_ajax.ajax_url, type: 'POST', data: { action: 'record_share', post_id: postId, platform: platform, nonce: css_ajax.nonce }, success: function(response) { if (response.success) { // 更新前端计数显示 updateShareCountDisplay(postId, platform); } }, error: function() { console.log('分享记录失败'); } }); // 延迟打开分享窗口,确保记录请求已发送 setTimeout(function() { // 这里不阻止默认行为,让链接正常打开 }, 100); }; /** * 更新分享计数显示 * @param {number} postId 文章ID * @param {string} platform 平台名称 */ function updateShareCountDisplay(postId, platform) { var $button = $('.share-button[data-platform="' + platform + '"]'); var $countSpan = $button.find('.share-count'); if ($countSpan.length) { var currentCount = parseInt($countSpan.text()) || 0; $countSpan.text(currentCount + 1); } else { // 如果之前没有计数显示,现在添加 $button.append('<span class="share-count">1</span>'); } } /** * 初始化分享按钮点击事件 */ function initShareButtons() { $('.share-button').on('click', function(e) { var $button = $(this); var platform = $button.data('platform'); var postId = $button.closest('.custom-social-share-container') .find('.share-button') .first() .attr('onclick') .match(/recordShare((d+)/); if (postId && postId[1]) { recordShare(parseInt(postId[1]), platform); } }); } // 文档加载完成后初始化 $(document).ready(function() { initShareButtons(); }); })(jQuery);
- 现在创建插件在WordPress后台的设置页面,让用户可以自定义分享工具。 <?php // 接续上面的CustomSocialShare类 /** * 初始化管理后台功能 */ private function init_admin() { // 添加设置菜单 add_action('admin_menu', array($this, 'add_admin_menu')); // 注册插件设置 add_action('admin_init', array($this, 'register_settings')); // 加载管理后台资源 add_action('admin_enqueue_scripts', array($this, 'enqueue_admin_assets')); // 添加插件设置链接 add_filter('plugin_action_links_' . plugin_basename(__FILE__), array($this, 'add_plugin_action_links')); } /** * 添加管理菜单 */ public function add_admin_menu() { add_options_page( __('社交媒体分享设置', 'custom-social-share'), __('社交分享', 'custom-social-share'), 'manage_options', 'custom-social-share', array($this, 'render_settings_page') ); // 添加统计子菜单(可选) add_submenu_page( null, // 不显示在菜单中 __('分享统计', 'custom-social-share'), '', 'manage_options', 'custom-social-share-stats', array($this, 'render_stats_page') ); } /** * 渲染设置页面 */ public function render_settings_page() { // 检查用户权限 if (!current_user_can('manage_options')) { wp_die(__('您没有权限访问此页面。', 'custom-social-share')); } ?> <div class="wrap"> <h1><?php echo esc_html(get_admin_page_title()); ?></h1> <form action="options.php" method="post"> <?php // 输出设置字段 settings_fields('custom_social_share_settings'); do_settings_sections('custom-social-share'); submit_button(__('保存设置', 'custom-social-share')); ?> </form> <div class="css-preview-section"> <h2><?php _e('预览', 'custom-social-share'); ?></h2> <p><?php _e('以下是根据当前设置生成的分享按钮预览:', 'custom-social-share'); ?></p> <div id="css-preview-container"> <!-- 预览将通过JavaScript动态生成 --> </div> </div> </div> <?php } /** * 注册插件设置 */ public function register_settings() { // 注册设置 register_setting( 'custom_social_share_settings', 'custom_social_share_options', array($this, 'sanitize_options') ); // 添加基本设置部分 add_settings_section( 'css_basic_settings', __('基本设置', 'custom-social-share'), array($this, 'render_basic_settings_section'), 'custom-social-share' ); // 添加显示设置部分 add_settings_section( 'css_display_settings', __('显示设置', 'custom-social-share'), array($this, 'render_display_settings_section'), 'custom-social-share' ); // 添加高级设置部分 add_settings_section( 'css_advanced_settings', __('高级设置', 'custom-social-share'), array($this, 'render_advanced_settings_section'), 'custom-social-share' ); // 平台选择字段 add_settings_field( 'enabled_platforms', __('启用平台', 'custom-social-share'), array($this, 'render_platforms_field'), 'custom-social-share', 'css_basic_settings' ); // 显示位置字段 add_settings_field( 'display_position', __('显示位置', 'custom-social-share'), array($this, 'render_position_field'), 'custom-social-share', 'css_display_settings' ); // 按钮样式字段 add_settings_field( 'button_style', __('按钮样式', 'custom-social-share'), array($this, 'render_button_style_field'), 'custom-social-share', 'css_display_settings' ); // 分享文本字段 add_settings_field( 'share_text', __('分享文本', 'custom-social-share'), array($this, 'render_share_text_field'), 'custom-social-share', 'css_display_settings' ); // 显示计数字段 add_settings_field( 'show_count', __('显示分享计数', 'custom-social-share'), array($this, 'render_show_count_field'), 'custom-social-share', 'css_display_settings' ); // 自定义CSS字段 add_settings_field( 'custom_css', __('自定义CSS', 'custom-social-share'), array($this, 'render_custom_css_field'), 'custom-social-share', 'css_advanced_settings' ); } /** * 清理和验证选项 */ public function sanitize_options($input) { $sanitized = array(); // 清理平台选择 if (isset($input['enabled_platforms']) && is_array($input['enabled_platforms'])) { $allowed_platforms = array('facebook', 'twitter', 'linkedin', 'pinterest', 'weibo', 'whatsapp', 'telegram'); $sanitized['enabled_platforms'] = array(); foreach ($input['enabled_platforms'] as $platform) { if (in_array($platform, $allowed_platforms)) { $sanitized['enabled_platforms'][] = sanitize_text_field($platform); } } } // 清理显示位置 if (isset($input['display_position'])) { $allowed_positions = array('before_content', 'after_content', 'both', 'none'); $sanitized['display_position'] = in_array($input['display_position'], $allowed_positions) ? sanitize_text_field($input['display_position']) : 'after_content'; } // 清理按钮样式 if (isset($input['button_style'])) { $allowed_styles = array('rounded', 'square', 'circle'); $sanitized['button_style'] = in_array($input['button_style'], $allowed_styles) ? sanitize_text_field($input['button_style']) : 'rounded'; } // 清理分享文本 if (isset($input['share_text'])) { $sanitized['share_text'] = sanitize_text_field($input['share_text']); } // 清理显示计数 $sanitized['show_count'] = isset($input['show_count']) ? (bool) $input['show_count'] : false; // 清理自定义CSS if (isset($input['custom_css'])) { $sanitized['custom_css'] = wp_strip_all_tags($input['custom_css']); } return $sanitized; } /** * 渲染平台选择字段 */ public function render_platforms_field() { $options = get_option('custom_social_share_options'); $enabled_platforms = isset($options['enabled_platforms']) ? $options['enabled_platforms'] : array(); $platforms = array( 'facebook' => __('Facebook', 'custom-social-share'), 'twitter' => __('Twitter', 'custom-social-share'), 'linkedin' => __('LinkedIn', 'custom-social-share'), 'pinterest' => __('Pinterest', 'custom-social-share'), 'weibo' => __('微博', 'custom-social-share'), 'whatsapp' => __('WhatsApp', 'custom-social-share'), 'telegram' => __('Telegram', 'custom-social-share') ); foreach ($platforms as $value => $label) { $checked = in_array($value, $enabled_platforms) ? 'checked' : ''; echo sprintf( '<label style="margin-right: 15px; display: inline-block; margin-bottom: 10px;"> <input type="checkbox" name="custom_social_share_options[enabled_platforms][]" value="%s" %s> %s </label>', esc_attr($value), $checked, esc_html($label) ); } } /** * 渲染显示位置字段 */ public function render_position_field() { $options = get_option('custom_social_share_options'); $current_position = isset($options['display_position']) ? $options['display_position'] : 'after_content'; $positions = array( 'before_content' => __('内容之前', 'custom-social-share'), 'after_content' => __('内容之后', 'custom-social-share'), 'both' => __('两者都显示', 'custom-social-share'), 'none' => __('不自动显示(使用短代码)', 'custom-social-share') ); foreach ($positions as $value => $label) { $checked = ($current_position === $value) ? 'checked' : ''; echo sprintf( '<label style="display: block; margin-bottom: 5px;"> <input type="radio" name="custom_social_share_options[display_position]" value="%s" %s> %s </label>', esc_attr($value), $checked, esc_html($label) ); } } /** * 渲染按钮样式字段 */ public function render_button_style_field() { $options = get_option('custom_social_share_options'); $current_style = isset($options['button_style']) ? $options['button_style'] : 'rounded'; $styles = array( 'rounded' => __('圆角', 'custom-social-share'), 'square' => __('方形', 'custom-social-share'), 'circle' => __('圆形(仅图标)', 'custom-social-share') ); foreach ($styles as $value => $label) { $checked = ($current_style === $value) ? 'checked' : ''; echo sprintf( '<label style="margin-right: 15px;"> <input type="radio" name="custom_social_share_options[button_style]" value="%s" %s> %s </label>', esc_attr($value), $checked, esc_html($label) ); } } /** * 渲染分享文本字段 */ public function render_share_text_field() { $options = get_option('custom_social_share_options'); $current_text = isset($options['share_text']) ? $options['share_text'] : '分享到'; echo sprintf( '<input type="text" name="custom_social_share_options[share_text]" value="%s" class="regular-text">', esc_attr($current_text) ); } /** * 渲染显示计数字段 */ public function render_show_count_field() { $options = get_option('custom_social_share_options'); $checked = isset($options['show_count']) && $options['show_count'] ? 'checked' : ''; echo sprintf( '<label> <input type="checkbox" name="custom_social_share_options[show_count]" value="1" %s> %s </label>', $checked, __('启用分享计数显示', 'custom-social-share') ); } /** * 渲染自定义CSS字段 */ public function render_custom_css_field() { $options = get_option('custom_social_share_options'); $current_css = isset($options['custom_css']) ? $options['custom_css'] : ''; echo sprintf( '<textarea name="custom_social_share_options[custom_css]" rows="10" cols="50" class="large-text code">%s</textarea> <p class="description">%s</p>', esc_textarea($current_css), __('在这里添加自定义CSS样式来修改分享按钮的外观。', 'custom-social-share') ); } /** * 加载管理后台资源 */ public function enqueue_admin_assets($hook) { // 只在插件设置页面加载 if ('settings_page_custom-social-share' !== $hook) { return; } wp_enqueue_style( 'custom-social-share-admin', CSS_PLUGIN_URL . 'assets/css/admin.css', array(), CSS_PLUGIN_VERSION ); wp_enqueue_script( 'custom-social-share-admin', CSS_PLUGIN_URL . 'assets/js/admin.js', array('jquery'), CSS_PLUGIN_VERSION, true ); } /** * 在插件列表中添加设置链接 */ public function add_plugin_action_links($links) { $settings_link = sprintf( '<a href="%s">%s</a>', admin_url('options-general.php?page=custom-social-share'), __('设置', 'custom-social-share') ); array_unshift($links, $settings_link); return $links; } ?>
- 添加短代码功能,让用户可以在任何位置插入分享按钮。 <?php // 接续上面的CustomSocialShare类 /** * 初始化短代码 */ private function init_shortcodes() { add_shortcode('social_share', array($this, 'social_share_shortcode')); } /** * 社交分享短代码 * * @param array $atts 短代码属性 * @return string 分享按钮HTML */ public function social_share_shortcode($atts) { // 解析短代码属性 $atts = shortcode_atts(array( 'platforms' => '', // 指定平台,用逗号分隔 'style' => '', // 覆盖默认样式 'title' => '', // 自定义标题
在当今数字时代,社交媒体分享功能已成为网站不可或缺的一部分。虽然市场上有许多现成的分享插件,但它们往往包含不必要的功能、加载速度慢,或者不符合网站的设计风格。通过开发自己的WordPress社交媒体分享插件,您可以完全控制功能、设计和性能,打造与品牌完美融合的分享工具。
本教程将引导您从零开始创建一个功能完整、代码优雅的社交媒体分享插件。我们将通过WordPress的插件架构,实现一个可自定义的分享工具,支持主流社交平台,并确保代码的可维护性和扩展性。
在开始编码之前,我们需要设置开发环境并创建插件的基本结构。
<?php
/**
* 插件名称: Custom Social Share
* 插件URI: https://yourwebsite.com/custom-social-share
* 描述: 自定义社交媒体分享工具,轻量高效,支持多平台
* 版本: 1.0.0
* 作者: 您的姓名
* 作者URI: https://yourwebsite.com
* 许可证: GPL v2 或更高版本
* 文本域: custom-social-share
*/
// 防止直接访问文件
if (!defined('ABSPATH')) {
exit;
}
// 定义插件常量
define('CSS_PLUGIN_VERSION', '1.0.0');
define('CSS_PLUGIN_PATH', plugin_dir_path(__FILE__));
define('CSS_PLUGIN_URL', plugin_dir_url(__FILE__));
/**
* 主插件类 - 管理插件的所有功能
*/
class CustomSocialShare {
private static $instance = null;
/**
* 获取插件单例实例
* 使用单例模式确保插件只被初始化一次
*/
public static function get_instance() {
if (null === self::$instance) {
self::$instance = new self();
}
return self::$instance;
}
/**
* 构造函数 - 初始化插件
*/
private function __construct() {
$this->init_hooks();
}
/**
* 初始化WordPress钩子(动作和过滤器)
*/
private function init_hooks() {
// 插件激活时执行的操作
register_activation_hook(__FILE__, array($this, 'activate_plugin'));
// 插件停用时执行的操作
register_deactivation_hook(__FILE__, array($this, 'deactivate_plugin'));
// 初始化插件
add_action('plugins_loaded', array($this, 'init_plugin'));
}
/**
* 插件激活时执行
*/
public function activate_plugin() {
// 创建或更新数据库表(如果需要)
$this->create_database_tables();
// 设置默认选项
$this->set_default_options();
// 刷新WordPress重写规则
flush_rewrite_rules();
}
/**
* 插件停用时执行
*/
public function deactivate_plugin() {
// 清理临时数据
// 注意:通常不删除用户数据,除非用户明确要求
flush_rewrite_rules();
}
/**
* 创建数据库表(示例)
*/
private function create_database_tables() {
global $wpdb;
$table_name = $wpdb->prefix . 'social_share_stats';
$charset_collate = $wpdb->get_charset_collate();
// 检查表是否已存在
if ($wpdb->get_var("SHOW TABLES LIKE '$table_name'") != $table_name) {
$sql = "CREATE TABLE $table_name (
id mediumint(9) NOT NULL AUTO_INCREMENT,
post_id bigint(20) NOT NULL,
platform varchar(50) NOT NULL,
share_count int(11) DEFAULT 0,
last_shared datetime DEFAULT '0000-00-00 00:00:00',
PRIMARY KEY (id),
KEY post_id (post_id),
KEY platform (platform)
) $charset_collate;";
require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
dbDelta($sql);
}
}
/**
* 设置默认插件选项
*/
private function set_default_options() {
$default_options = array(
'enabled_platforms' => array('facebook', 'twitter', 'linkedin', 'pinterest'),
'display_position' => 'after_content',
'button_style' => 'rounded',
'share_text' => '分享到',
'show_count' => true,
'custom_css' => '',
);
// 如果选项不存在,则添加默认选项
if (false === get_option('custom_social_share_options')) {
add_option('custom_social_share_options', $default_options);
}
}
/**
* 初始化插件功能
*/
public function init_plugin() {
// 加载文本域用于国际化
load_plugin_textdomain(
'custom-social-share',
false,
dirname(plugin_basename(__FILE__)) . '/languages'
);
// 初始化前端功能
$this->init_frontend();
// 初始化管理后台功能
if (is_admin()) {
$this->init_admin();
}
}
// 其他方法将在后续部分实现
}
// 初始化插件
CustomSocialShare::get_instance();
?>
现在我们来创建前端分享按钮的显示功能。这部分代码负责在文章内容前后添加分享按钮。
<?php
// 接续上面的CustomSocialShare类
/**
* 初始化前端功能
*/
private function init_frontend() {
// 在文章内容后添加分享按钮
add_filter('the_content', array($this, 'add_share_buttons_to_content'));
// 注册前端样式和脚本
add_action('wp_enqueue_scripts', array($this, 'enqueue_frontend_assets'));
// 注册AJAX处理函数
add_action('wp_ajax_record_share', array($this, 'record_share_ajax'));
add_action('wp_ajax_nopriv_record_share', array($this, 'record_share_ajax'));
}
/**
* 在文章内容中添加分享按钮
*
* @param string $content 文章内容
* @return string 添加分享按钮后的内容
*/
public function add_share_buttons_to_content($content) {
// 只在单篇文章页面显示分享按钮
if (!is_single()) {
return $content;
}
// 获取插件选项
$options = get_option('custom_social_share_options');
$position = isset($options['display_position']) ? $options['display_position'] : 'after_content';
// 生成分享按钮HTML
$share_buttons = $this->generate_share_buttons();
// 根据设置的位置添加按钮
if ('before_content' === $position) {
return $share_buttons . $content;
} elseif ('after_content' === $position) {
return $content . $share_buttons;
} elseif ('both' === $position) {
return $share_buttons . $content . $share_buttons;
}
return $content;
}
/**
* 生成分享按钮HTML
*
* @return string 分享按钮的HTML代码
*/
private function generate_share_buttons() {
global $post;
// 获取当前文章信息
$post_id = $post->ID;
$post_title = urlencode(get_the_title($post_id));
$post_url = urlencode(get_permalink($post_id));
$post_excerpt = urlencode(wp_trim_words(get_the_excerpt($post_id), 20));
// 获取特色图片
$post_thumbnail = '';
if (has_post_thumbnail($post_id)) {
$thumbnail_id = get_post_thumbnail_id($post_id);
$post_thumbnail = urlencode(wp_get_attachment_image_url($thumbnail_id, 'full'));
}
// 获取插件选项
$options = get_option('custom_social_share_options');
$enabled_platforms = isset($options['enabled_platforms']) ? $options['enabled_platforms'] : array();
$share_text = isset($options['share_text']) ? $options['share_text'] : '分享到';
$button_style = isset($options['button_style']) ? $options['button_style'] : 'rounded';
// 平台配置
$platforms = array(
'facebook' => array(
'name' => 'Facebook',
'url' => "https://www.facebook.com/sharer/sharer.php?u={$post_url}"e={$post_title}",
'icon' => 'facebook-f',
'color' => '#1877f2'
),
'twitter' => array(
'name' => 'Twitter',
'url' => "https://twitter.com/intent/tweet?text={$post_title}&url={$post_url}",
'icon' => 'twitter',
'color' => '#1da1f2'
),
'linkedin' => array(
'name' => 'LinkedIn',
'url' => "https://www.linkedin.com/shareArticle?mini=true&url={$post_url}&title={$post_title}&summary={$post_excerpt}",
'icon' => 'linkedin-in',
'color' => '#0077b5'
),
'pinterest' => array(
'name' => 'Pinterest',
'url' => "https://pinterest.com/pin/create/button/?url={$post_url}&media={$post_thumbnail}&description={$post_title}",
'icon' => 'pinterest-p',
'color' => '#bd081c'
),
'weibo' => array(
'name' => '微博',
'url' => "http://service.weibo.com/share/share.php?url={$post_url}&title={$post_title}",
'icon' => 'weibo',
'color' => '#e6162d'
),
'whatsapp' => array(
'name' => 'WhatsApp',
'url' => "https://api.whatsapp.com/send?text={$post_title}%20{$post_url}",
'icon' => 'whatsapp',
'color' => '#25d366'
),
'telegram' => array(
'name' => 'Telegram',
'url' => "https://t.me/share/url?url={$post_url}&text={$post_title}",
'icon' => 'telegram-plane',
'color' => '#0088cc'
)
);
// 开始构建HTML
$html = '<div class="custom-social-share-container">';
$html .= '<div class="share-label">' . esc_html($share_text) . '</div>';
$html .= '<div class="share-buttons ' . esc_attr($button_style) . '">';
foreach ($enabled_platforms as $platform) {
if (isset($platforms[$platform])) {
$platform_data = $platforms[$platform];
$html .= sprintf(
'<a href="%s" class="share-button share-%s" data-platform="%s" target="_blank" rel="noopener noreferrer" style="background-color: %s;" onclick="recordShare(%d, '%s')">',
esc_url($platform_data['url']),
esc_attr($platform),
esc_attr($platform),
esc_attr($platform_data['color']),
$post_id,
esc_js($platform)
);
$html .= '<i class="fab fa-' . esc_attr($platform_data['icon']) . '"></i>';
$html .= '<span class="platform-name">' . esc_html($platform_data['name']) . '</span>';
// 显示分享计数(如果启用)
if (isset($options['show_count']) && $options['show_count']) {
$share_count = $this->get_share_count($post_id, $platform);
if ($share_count > 0) {
$html .= '<span class="share-count">' . intval($share_count) . '</span>';
}
}
$html .= '</a>';
}
}
$html .= '</div></div>';
return $html;
}
/**
* 获取分享计数
*
* @param int $post_id 文章ID
* @param string $platform 平台名称
* @return int 分享次数
*/
private function get_share_count($post_id, $platform) {
global $wpdb;
$table_name = $wpdb->prefix . 'social_share_stats';
$count = $wpdb->get_var($wpdb->prepare(
"SELECT share_count FROM $table_name WHERE post_id = %d AND platform = %s",
$post_id,
$platform
));
return $count ? intval($count) : 0;
}
/**
* 注册前端资源(CSS和JS)
*/
public function enqueue_frontend_assets() {
// 只在文章页面加载资源
if (!is_single()) {
return;
}
// 加载Font Awesome图标库
wp_enqueue_style(
'font-awesome',
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css',
array(),
'5.15.4'
);
// 加载插件自定义样式
wp_enqueue_style(
'custom-social-share-style',
CSS_PLUGIN_URL . 'assets/css/frontend.css',
array(),
CSS_PLUGIN_VERSION
);
// 加载插件自定义脚本
wp_enqueue_script(
'custom-social-share-script',
CSS_PLUGIN_URL . 'assets/js/frontend.js',
array('jquery'),
CSS_PLUGIN_VERSION,
true
);
// 传递AJAX URL到前端脚本
wp_localize_script('custom-social-share-script', 'css_ajax', array(
'ajax_url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('record_share_nonce')
));
}
/**
* 处理分享记录的AJAX请求
*/
public function record_share_ajax() {
// 验证nonce
if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'record_share_nonce')) {
wp_die('安全验证失败');
}
$post_id = isset($_POST['post_id']) ? intval($_POST['post_id']) : 0;
$platform = isset($_POST['platform']) ? sanitize_text_field($_POST['platform']) : '';
if ($post_id > 0 && !empty($platform)) {
$this->record_share($post_id, $platform);
wp_send_json_success(array('message' => '分享记录已更新'));
} else {
wp_send_json_error(array('message' => '参数错误'));
}
}
/**
* 记录分享到数据库
*
* @param int $post_id 文章ID
* @param string $platform 平台名称
*/
private function record_share($post_id, $platform) {
global $wpdb;
$table_name = $wpdb->prefix . 'social_share_stats';
$current_time = current_time('mysql');
// 检查是否已有记录
$existing = $wpdb->get_row($wpdb->prepare(
"SELECT id, share_count FROM $table_name WHERE post_id = %d AND platform = %s",
$post_id,
$platform
));
if ($existing) {
// 更新现有记录
$wpdb->update(
$table_name,
array(
'share_count' => $existing->share_count + 1,
'last_shared' => $current_time
),
array('id' => $existing->id),
array('%d', '%s'),
array('%d')
);
} else {
// 插入新记录
$wpdb->insert(
$table_name,
array(
'post_id' => $post_id,
'platform' => $platform,
'share_count' => 1,
'last_shared' => $current_time
),
array('%d', '%s', '%d', '%s')
);
}
}
?>
创建前端CSS和JavaScript文件来美化分享按钮并添加交互功能。
assets/css/frontend.css:
/* 社交媒体分享插件 - 前端样式 */
.custom-social-share-container {
margin: 30px 0;
padding: 20px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
text-align: center;
}
.share-label {
font-size: 16px;
font-weight: 600;
margin-bottom: 15px;
color: #333;
}
.share-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.share-button {
display: inline-flex;
align-items: center;
padding: 10px 15px;
border-radius: 4px;
color: white;
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.share-button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
color: white;
text-decoration: none;
}
.share-button i {
font-size: 18px;
margin-right: 8px;
}
.platform-name {
margin-right: 5px;
}
.share-count {
好的,我们继续生成剩余部分。
assets/css/frontend.css (续):
padding: 2px 6px;
border-radius: 10px;
font-size: 12px;
margin-left: 5px;
}
/* 圆角按钮样式 */
.share-buttons.rounded .share-button {
border-radius: 25px;
}
/* 方形按钮样式 */
.share-buttons.square .share-button {
border-radius: 4px;
}
/* 圆形按钮样式 */
.share-buttons.circle .share-button {
border-radius: 50%;
width: 50px;
height: 50px;
padding: 0;
justify-content: center;
}
.share-buttons.circle .platform-name,
.share-buttons.circle .share-count {
display: none;
}
.share-buttons.circle i {
margin-right: 0;
font-size: 20px;
}
/* 响应式设计 */
@media (max-width: 768px) {
.share-button {
padding: 8px 12px;
font-size: 13px;
}
.share-button i {
font-size: 16px;
margin-right: 5px;
}
.share-buttons.circle .share-button {
width: 45px;
height: 45px;
}
}
@media (max-width: 480px) {
.share-buttons {
gap: 8px;
}
.share-button {
padding: 6px 10px;
font-size: 12px;
}
.platform-name {
display: none;
}
.share-button i {
margin-right: 0;
}
}
assets/js/frontend.js:
/**
* 自定义社交媒体分享插件 - 前端脚本
*/
(function($) {
'use strict';
/**
* 记录分享到数据库
* @param {number} postId 文章ID
* @param {string} platform 平台名称
*/
window.recordShare = function(postId, platform) {
// 发送AJAX请求记录分享
$.ajax({
url: css_ajax.ajax_url,
type: 'POST',
data: {
action: 'record_share',
post_id: postId,
platform: platform,
nonce: css_ajax.nonce
},
success: function(response) {
if (response.success) {
// 更新前端计数显示
updateShareCountDisplay(postId, platform);
}
},
error: function() {
console.log('分享记录失败');
}
});
// 延迟打开分享窗口,确保记录请求已发送
setTimeout(function() {
// 这里不阻止默认行为,让链接正常打开
}, 100);
};
/**
* 更新分享计数显示
* @param {number} postId 文章ID
* @param {string} platform 平台名称
*/
function updateShareCountDisplay(postId, platform) {
var $button = $('.share-button[data-platform="' + platform + '"]');
var $countSpan = $button.find('.share-count');
if ($countSpan.length) {
var currentCount = parseInt($countSpan.text()) || 0;
$countSpan.text(currentCount + 1);
} else {
// 如果之前没有计数显示,现在添加
$button.append('<span class="share-count">1</span>');
}
}
/**
* 初始化分享按钮点击事件
*/
function initShareButtons() {
$('.share-button').on('click', function(e) {
var $button = $(this);
var platform = $button.data('platform');
var postId = $button.closest('.custom-social-share-container')
.find('.share-button')
.first()
.attr('onclick')
.match(/recordShare((d+)/);
if (postId && postId[1]) {
recordShare(parseInt(postId[1]), platform);
}
});
}
// 文档加载完成后初始化
$(document).ready(function() {
initShareButtons();
});
})(jQuery);
现在创建插件在WordPress后台的设置页面,让用户可以自定义分享工具。
<?php
// 接续上面的CustomSocialShare类
/**
* 初始化管理后台功能
*/
private function init_admin() {
// 添加设置菜单
add_action('admin_menu', array($this, 'add_admin_menu'));
// 注册插件设置
add_action('admin_init', array($this, 'register_settings'));
// 加载管理后台资源
add_action('admin_enqueue_scripts', array($this, 'enqueue_admin_assets'));
// 添加插件设置链接
add_filter('plugin_action_links_' . plugin_basename(__FILE__), array($this, 'add_plugin_action_links'));
}
/**
* 添加管理菜单
*/
public function add_admin_menu() {
add_options_page(
__('社交媒体分享设置', 'custom-social-share'),
__('社交分享', 'custom-social-share'),
'manage_options',
'custom-social-share',
array($this, 'render_settings_page')
);
// 添加统计子菜单(可选)
add_submenu_page(
null, // 不显示在菜单中
__('分享统计', 'custom-social-share'),
'',
'manage_options',
'custom-social-share-stats',
array($this, 'render_stats_page')
);
}
/**
* 渲染设置页面
*/
public function render_settings_page() {
// 检查用户权限
if (!current_user_can('manage_options')) {
wp_die(__('您没有权限访问此页面。', 'custom-social-share'));
}
?>
<div class="wrap">
<h1><?php echo esc_html(get_admin_page_title()); ?></h1>
<form action="options.php" method="post">
<?php
// 输出设置字段
settings_fields('custom_social_share_settings');
do_settings_sections('custom-social-share');
submit_button(__('保存设置', 'custom-social-share'));
?>
</form>
<div class="css-preview-section">
<h2><?php _e('预览', 'custom-social-share'); ?></h2>
<p><?php _e('以下是根据当前设置生成的分享按钮预览:', 'custom-social-share'); ?></p>
<div id="css-preview-container">
<!-- 预览将通过JavaScript动态生成 -->
</div>
</div>
</div>
<?php
}
/**
* 注册插件设置
*/
public function register_settings() {
// 注册设置
register_setting(
'custom_social_share_settings',
'custom_social_share_options',
array($this, 'sanitize_options')
);
// 添加基本设置部分
add_settings_section(
'css_basic_settings',
__('基本设置', 'custom-social-share'),
array($this, 'render_basic_settings_section'),
'custom-social-share'
);
// 添加显示设置部分
add_settings_section(
'css_display_settings',
__('显示设置', 'custom-social-share'),
array($this, 'render_display_settings_section'),
'custom-social-share'
);
// 添加高级设置部分
add_settings_section(
'css_advanced_settings',
__('高级设置', 'custom-social-share'),
array($this, 'render_advanced_settings_section'),
'custom-social-share'
);
// 平台选择字段
add_settings_field(
'enabled_platforms',
__('启用平台', 'custom-social-share'),
array($this, 'render_platforms_field'),
'custom-social-share',
'css_basic_settings'
);
// 显示位置字段
add_settings_field(
'display_position',
__('显示位置', 'custom-social-share'),
array($this, 'render_position_field'),
'custom-social-share',
'css_display_settings'
);
// 按钮样式字段
add_settings_field(
'button_style',
__('按钮样式', 'custom-social-share'),
array($this, 'render_button_style_field'),
'custom-social-share',
'css_display_settings'
);
// 分享文本字段
add_settings_field(
'share_text',
__('分享文本', 'custom-social-share'),
array($this, 'render_share_text_field'),
'custom-social-share',
'css_display_settings'
);
// 显示计数字段
add_settings_field(
'show_count',
__('显示分享计数', 'custom-social-share'),
array($this, 'render_show_count_field'),
'custom-social-share',
'css_display_settings'
);
// 自定义CSS字段
add_settings_field(
'custom_css',
__('自定义CSS', 'custom-social-share'),
array($this, 'render_custom_css_field'),
'custom-social-share',
'css_advanced_settings'
);
}
/**
* 清理和验证选项
*/
public function sanitize_options($input) {
$sanitized = array();
// 清理平台选择
if (isset($input['enabled_platforms']) && is_array($input['enabled_platforms'])) {
$allowed_platforms = array('facebook', 'twitter', 'linkedin', 'pinterest', 'weibo', 'whatsapp', 'telegram');
$sanitized['enabled_platforms'] = array();
foreach ($input['enabled_platforms'] as $platform) {
if (in_array($platform, $allowed_platforms)) {
$sanitized['enabled_platforms'][] = sanitize_text_field($platform);
}
}
}
// 清理显示位置
if (isset($input['display_position'])) {
$allowed_positions = array('before_content', 'after_content', 'both', 'none');
$sanitized['display_position'] = in_array($input['display_position'], $allowed_positions)
? sanitize_text_field($input['display_position'])
: 'after_content';
}
// 清理按钮样式
if (isset($input['button_style'])) {
$allowed_styles = array('rounded', 'square', 'circle');
$sanitized['button_style'] = in_array($input['button_style'], $allowed_styles)
? sanitize_text_field($input['button_style'])
: 'rounded';
}
// 清理分享文本
if (isset($input['share_text'])) {
$sanitized['share_text'] = sanitize_text_field($input['share_text']);
}
// 清理显示计数
$sanitized['show_count'] = isset($input['show_count']) ? (bool) $input['show_count'] : false;
// 清理自定义CSS
if (isset($input['custom_css'])) {
$sanitized['custom_css'] = wp_strip_all_tags($input['custom_css']);
}
return $sanitized;
}
/**
* 渲染平台选择字段
*/
public function render_platforms_field() {
$options = get_option('custom_social_share_options');
$enabled_platforms = isset($options['enabled_platforms']) ? $options['enabled_platforms'] : array();
$platforms = array(
'facebook' => __('Facebook', 'custom-social-share'),
'twitter' => __('Twitter', 'custom-social-share'),
'linkedin' => __('LinkedIn', 'custom-social-share'),
'pinterest' => __('Pinterest', 'custom-social-share'),
'weibo' => __('微博', 'custom-social-share'),
'whatsapp' => __('WhatsApp', 'custom-social-share'),
'telegram' => __('Telegram', 'custom-social-share')
);
foreach ($platforms as $value => $label) {
$checked = in_array($value, $enabled_platforms) ? 'checked' : '';
echo sprintf(
'<label style="margin-right: 15px; display: inline-block; margin-bottom: 10px;">
<input type="checkbox" name="custom_social_share_options[enabled_platforms][]" value="%s" %s>
%s
</label>',
esc_attr($value),
$checked,
esc_html($label)
);
}
}
/**
* 渲染显示位置字段
*/
public function render_position_field() {
$options = get_option('custom_social_share_options');
$current_position = isset($options['display_position']) ? $options['display_position'] : 'after_content';
$positions = array(
'before_content' => __('内容之前', 'custom-social-share'),
'after_content' => __('内容之后', 'custom-social-share'),
'both' => __('两者都显示', 'custom-social-share'),
'none' => __('不自动显示(使用短代码)', 'custom-social-share')
);
foreach ($positions as $value => $label) {
$checked = ($current_position === $value) ? 'checked' : '';
echo sprintf(
'<label style="display: block; margin-bottom: 5px;">
<input type="radio" name="custom_social_share_options[display_position]" value="%s" %s>
%s
</label>',
esc_attr($value),
$checked,
esc_html($label)
);
}
}
/**
* 渲染按钮样式字段
*/
public function render_button_style_field() {
$options = get_option('custom_social_share_options');
$current_style = isset($options['button_style']) ? $options['button_style'] : 'rounded';
$styles = array(
'rounded' => __('圆角', 'custom-social-share'),
'square' => __('方形', 'custom-social-share'),
'circle' => __('圆形(仅图标)', 'custom-social-share')
);
foreach ($styles as $value => $label) {
$checked = ($current_style === $value) ? 'checked' : '';
echo sprintf(
'<label style="margin-right: 15px;">
<input type="radio" name="custom_social_share_options[button_style]" value="%s" %s>
%s
</label>',
esc_attr($value),
$checked,
esc_html($label)
);
}
}
/**
* 渲染分享文本字段
*/
public function render_share_text_field() {
$options = get_option('custom_social_share_options');
$current_text = isset($options['share_text']) ? $options['share_text'] : '分享到';
echo sprintf(
'<input type="text" name="custom_social_share_options[share_text]" value="%s" class="regular-text">',
esc_attr($current_text)
);
}
/**
* 渲染显示计数字段
*/
public function render_show_count_field() {
$options = get_option('custom_social_share_options');
$checked = isset($options['show_count']) && $options['show_count'] ? 'checked' : '';
echo sprintf(
'<label>
<input type="checkbox" name="custom_social_share_options[show_count]" value="1" %s>
%s
</label>',
$checked,
__('启用分享计数显示', 'custom-social-share')
);
}
/**
* 渲染自定义CSS字段
*/
public function render_custom_css_field() {
$options = get_option('custom_social_share_options');
$current_css = isset($options['custom_css']) ? $options['custom_css'] : '';
echo sprintf(
'<textarea name="custom_social_share_options[custom_css]" rows="10" cols="50" class="large-text code">%s</textarea>
<p class="description">%s</p>',
esc_textarea($current_css),
__('在这里添加自定义CSS样式来修改分享按钮的外观。', 'custom-social-share')
);
}
/**
* 加载管理后台资源
*/
public function enqueue_admin_assets($hook) {
// 只在插件设置页面加载
if ('settings_page_custom-social-share' !== $hook) {
return;
}
wp_enqueue_style(
'custom-social-share-admin',
CSS_PLUGIN_URL . 'assets/css/admin.css',
array(),
CSS_PLUGIN_VERSION
);
wp_enqueue_script(
'custom-social-share-admin',
CSS_PLUGIN_URL . 'assets/js/admin.js',
array('jquery'),
CSS_PLUGIN_VERSION,
true
);
}
/**
* 在插件列表中添加设置链接
*/
public function add_plugin_action_links($links) {
$settings_link = sprintf(
'<a href="%s">%s</a>',
admin_url('options-general.php?page=custom-social-share'),
__('设置', 'custom-social-share')
);
array_unshift($links, $settings_link);
return $links;
}
?>
添加短代码功能,让用户可以在任何位置插入分享按钮。
<?php
// 接续上面的CustomSocialShare类
/**
* 初始化短代码
*/
private function init_shortcodes() {
add_shortcode('social_share', array($this, 'social_share_shortcode'));
}
/**
* 社交分享短代码
*
* @param array $atts 短代码属性
* @return string 分享按钮HTML
*/
public function social_share_shortcode($atts) {
// 解析短代码属性
$atts = shortcode_atts(array(
'platforms' => '', // 指定平台,用逗号分隔
'style' => '', // 覆盖默认样式
'title' => '', // 自定义标题


