WordPress 主题开发:添加后台主题设置页面

 郑妙忠  66  0  2019-05-25 11:31:40
先写一个 html 页面

涉及文件:setting_page.php(在主题文件夹下自己创建的)

<?php
  if(isset($_POST['update_setting']) && $_POST['update_setting'] == 'true'){
    /* 表单提交时调用,数据在这里面保存到数据库 */
    // 接收图片 url 数据
    update_option('my_img_url',stripslashes($_POST['img_url'])); // update_option($key, $value) 保存数据到数据库,$key 不存在时会创建,存在时会更新
  }

  /* 下面是 html 输出 */
  wp_enqueue_media(); // 加载wp自带媒体上传面板,上传图片时要使用
?>

<div class="wrap">
  <h2>主题设置</h2>
  <form method="POST" action="">
    <input type="hidden" name="update_setting" value="true" />

    <p>
      <input type="text" size="100" name="img_url" id="img_url" value="<?php echo get_option('my_img_url'); //获取数据库数据 ?>"/>
      <input type="button" name="upload_img" id="upload_img" value="上传"/>
    </p>
    <script>
      /* wp 图片上传面板使用方法,只要修改一下类名就能使用 */
      jQuery(document).ready(function(){
        var upload_frame;
        var value_id;
        jQuery('#upload_img').live('click',function(event){
          value_id =jQuery( this ).attr('id');
          event.preventDefault(); // 阻止事件冒泡
          if( upload_frame ){
            upload_frame.open();
            return;
          }
          upload_frame = wp.media({title: '选择图片',button: {text: '确认'},multiple: false}); // 创建面板
          upload_frame.on('select',function(){ // 面板选择图片后回调函数
            attachment = upload_frame.state().get('selection').first().toJSON();
            jQuery('#img_url').val(attachment.url); // 把选择的图片的 url 赋值给 input
          });
          upload_frame.open(); // 打开面板
        });
      });
    </script>
    <!-- wp 样式保存按钮 -->
    <input type="submit" name="submit" id="submit" class="button button-primary" value="保存更改">
  </form>
</div>
后台核心的代码

涉及文件:function.php

<?php
  // 添加后台主题设置页面
  function setting_admin_menu(){
    // 在控制面板的侧边栏添加设置选项页链接
    add_theme_page("主题设置", "主题选项", "edit_themes", basename(__FILE__), "setting_page");
    /**
    * add_theme_page($title, $menu_text, $parent_menu_name, $file_name, $function_name)
    * 第一个参数显示在浏览器标题
    * 第二个参数显示在后台菜单
    * 第三个参数是父级菜单
    * 第四个参数是当前文件名
    * 第五个参数是自定义函数名
    */
  }
  add_action('admin_menu', 'setting_admin_menu');

  function setting_page(){
    // 引入上面创建的 setting_page.php 页面文件,其实 setting_page.php 里面的代码可以写在这里
    require_once( get_template_directory() . 'setting_page.php');
  }
?>
END
 留言 (共 0 条)

时钟

80%的人还看过

广告(请点击)

广告(请点击)