利用 WordPress 设置 API 添加选择设置页面

本文介绍如何使用 WordPress 设置 API 创建一个简单的单选、列表选择、复选和媒体上传设置页面,并在设置菜单中添加链接菜单。

将代码添加到主题函数模板 functions.php 中。

单选

  1. function zm_demo_settings_radio() {
  2. add_settings_section("section", "标题", null, "demo");
  3. add_settings_field("demo-radio", "单选按钮演示", "zm_demo_radio_display", "demo", "section");
  4. register_setting("section", "zm-demo-radio");
  5. }
  6. function zm_demo_radio_display() {
  7. ?>
  8. <input type="radio" name="zm-demo-radio" value="1" <?php checked( 1, get_option( 'zm-demo-radio' ), true); ?>>1
  9. <input type="radio" name="zm-demo-radio" value="2" <?php checked( 2, get_option( 'zm-demo-radio' ), true); ?>>2
  10. <?php
  11. }
  12. add_action( "admin_init", "zm_demo_settings_radio" );
  13. function zm_demo_page() {
  14. ?>
  15. <div class="wrap">
  16. <h1>单选设置</h1>
  17. <form method="post" action="options.php">
  18. <?php
  19. settings_fields( "section" );
  20. do_settings_sections( "demo" );
  21. submit_button();
  22. ?>
  23. </form>
  24. </div>
  25. <?php
  26. }
  27. function zm_menu_item() {
  28. add_submenu_page( "options-general.php", "单选设置", "单选设置", "manage_options", "demo", "zm_demo_page" );
  29. }
  30. add_action( "admin_menu", "zm_menu_item" );

列表选择

  1. // 列表选择
  2. function zm_demo_settings_select() {
  3. add_settings_section( "section", "标题", null, "demo" );
  4. add_settings_field( "demo-select", "列表选择", "zm_demo_select_display", "demo", "section" );
  5. register_setting( "section", "demo-select" );
  6. }
  7. function zm_demo_select_display() {
  8. ?>
  9. <select name="demo-select">
  10. <option value="qscutter" <?php selected( get_option( 'zm-demo-select' ), "qscutter" ); ?>>QScutter</option>
  11. <option value="qnimate" <?php selected( get_option( 'zm-demo-select' ), "qnimate" ); ?>>QNimate</option>
  12. <option value="qidea" <?php selected( get_option( 'zm-demo-select' ), "qidea" ); ?>>QIdea</option>
  13. <option value="qtrack" <?php selected( get_option( 'zm-demo-select' ), "qtrack" ); ?>>QTrack</option>
  14. </select>
  15. <?php
  16. }
  17. add_action( "admin_init", "zm_demo_settings_select" );
  18. function zm_demo_page() {
  19. ?>
  20. <div class="wrap">
  21. <h1>列表选择</h1>
  22. <form method="post" action="options.php">
  23. <?php
  24. settings_fields( "section" );
  25. do_settings_sections( "demo" );
  26. submit_button();
  27. ?>
  28. </form>
  29. </div>
  30. <?php
  31. }
  32. function zm_menu_item_select() {
  33. add_submenu_page( "options-general.php", "列表选择", "列表选择", "manage_options", "demo", "zm_demo_page" );
  34. }
  35. add_action( "admin_menu", "zm_menu_item_select" );

复选框

  1. // 复选框
  2. function zm_demo_settings_page_checkbox() {
  3. add_settings_section( "section", "标题", null, "demo" );
  4. add_settings_field( "demo-checkbox", "复选框", "zm_demo_checkbox_display", "demo", "section" );
  5. register_setting( "section", "demo-checkbox" );
  6. }
  7. function zm_demo_checkbox_display() {
  8. ?>
  9. <input type="checkbox" name="demo-checkbox" value="1" <?php checked( 1, get_option( 'zm-demo-checkbox' ), true ); ?> />
  10. <?php
  11. }
  12. add_action( "admin_init", "zm_demo_settings_page_checkbox" );
  13. function zm_demo_page() {
  14. ?>
  15. <div class="wrap">
  16. <h1>复选框</h1>
  17. <form method="post" action="options.php">
  18. <?php
  19. settings_fields( "section" );
  20. do_settings_sections( "demo" );
  21. submit_button();
  22. ?>
  23. </form>
  24. </div>
  25. <?php
  26. }
  27. function zm_menu_item_checkbox() {
  28. add_submenu_page( "options-general.php", "复选框", "复选框", "manage_options", "demo", "zm_demo_page" );
  29. }
  30. add_action( "admin_menu", "zm_menu_item_checkbox" );

媒体上传

  1. // 媒体上传
  2. function zm_demo_settings_page_file() {
  3. add_settings_section( "section", "标题", null, "demo" );
  4. add_settings_field( "demo-file", "媒体上传", "zm_demo_file_display", "demo", "section" );
  5. register_setting( "section", "demo-file", "handle_file_upload" );
  6. }
  7. function handle_file_upload( $option ) {
  8. if( !empty( $_FILES["demo-file"]["tmp_name"] ) ) {
  9. $urls = wp_handle_upload( $_FILES["demo-file"], array( 'test_form' => FALSE ) );
  10. $temp = $urls["url"];
  11. return $temp;
  12. }
  13. return $option;
  14. }
  15. function zm_demo_file_display() {
  16. ?>
  17. <input type="file" name="demo-file" />
  18. <?php echo get_option( 'demo-file' ); ?>
  19. <?php
  20. }
  21. add_action( "admin_init", "zm_demo_settings_page_file" );
  22. function zm_demo_page_file() {
  23. ?>
  24. <div class="wrap">
  25. <h1>媒体上传</h1>
  26. <form method="post" action="options.php">
  27. <?php
  28. settings_fields("section");
  29. do_settings_sections("demo");
  30. submit_button();
  31. ?>
  32. </form>
  33. </div>
  34. <?php
  35. }
  36. function zm_menu_item_file() {
  37. add_submenu_page( "options-general.php", "媒体上传", "媒体上传", "manage_options", "demo", "zm_demo_page_file" );
  38. }
  39. add_action( "admin_menu", "zm_menu_item_file" );

设置存储在 wp_options 表中。

给TA打赏
共{{data.count}}人
人已打赏
WordPress教程

修改WordPress网站默认登录地址链接提高网站安全

2022-4-28 11:14:43

WordPress教程

WordPress 后台直接复制文章并设置状态为草稿

2022-4-30 11:14:08

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索