반응형 WordPress 플러그인을 개발하는 방법

/*
Plugin Name: My Responsive Plugin
Description: A responsive plugin for WordPress
Version: 1.0
Author: Your Name
*/

// 在这里写下你的插件逻辑代码

/* 响应式样式 */
@media screen and (max-width: 600px) {
  /* 在这里写下针对小屏幕设备的样式 */
}

@media screen and (min-width: 601px) and (max-width: 1200px) {
  /* 在这里写下针对中等屏幕设备的样式 */
}

@media screen and (min-width: 1201px) {
  /* 在这里写下针对大屏幕设备的样式 */
}

// 在这里写下你的JavaScript代码

// 加载样式
function my_responsive_plugin_styles() {
  wp_enqueue_style( 'my-responsive-plugin-style', plugin_dir_url( __FILE__ ) . 'css/style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_responsive_plugin_styles' );

// 加载脚本
function my_responsive_plugin_scripts() {
  wp_enqueue_script( 'my-responsive-plugin-script', plugin_dir_url( __FILE__ ) . 'js/script.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_responsive_plugin_scripts' );

// 添加插件内容
function my_responsive_plugin_content() {
  return '<button class="my-responsive-plugin-button">Click Me</button>';
}
add_shortcode( 'my_responsive_plugin', 'my_responsive_plugin_content' );

/* 在小屏幕设备上的样式 */
@media screen and (max-width: 600px) {
  .my-responsive-plugin-button {
    color: red;
  }
}

/* 在中等屏幕设备上的样式 */
@media screen and (min-width: 601px) and (max-width: 1200px) {
  .my-responsive-plugin-button {
    color: blue;
  }
}

/* 在大屏幕设备上的样式 */
@media screen and (min-width: 1201px) {
  .my-responsive-plugin-button {
    color: green;
  }
}

[my_responsive_plugin]