致力于打造一个优秀的建站资源共享学习平台!

爱站窝四川

wordpress如何在内容编辑器的前面添加自定义字段面板

爱站窝查看全部>>

人气391

你自己添加,或者使用本工作室提供的wordpress后台框架都可以给文章、页面等等添加。不过这样添加的自定义面板都只能显示在内容编辑器的后面,怎样才能在标题的后面、文章编辑器的前面添加一个自定义面板呢?

wordpress本身是没有提供任何钩子让我们在编辑器前面添加自定义字段面板的,但是我们可以用js操作,将自定义面板移动到前面去。

以我们工作室发布的wordpress后台框架应用为例,应用实例为:每个单页面前面需要加一个banner图片,具体效果为:wordpress如何在内容编辑器的前面添加自定义字段面板

 

方法:首先在后台单页面的编辑页面添加一个自定义字段面板,然后在后台引入js,用js将此自定义面板移动到前面。

步骤一、添加自定义字段面板。

使用阿树工作室提供的框架,只需要在config.php文件里面添加以下配置代码即可添加完成:(关于框架的使用方法,请参考下载页面)

  1. /****page-banner*****/
  2. //面板id为pagebannerbox
  3. $page_boxinfo = array('title' => '页面顶部图片', 'id'=>'pagebannerbox', 'page'=>array('page'), 'context'=>'normal', 'priority'=>'high', 'callback'=>'');
  4. $page_options[] = array(
  5.   "name" => '页面顶部banner图片',
  6.   "desc" => "请插入完整尺寸",
  7.   "size"=>60,
  8.   "std"=>'',
  9.   "id" => "pagebanner", //字段的id也为pagebanner
  10.   "type" => "upload"
  11. );
  12. $page_box = new ashu_meta_box($page_options,$page_boxinfo);

步骤二:添加js,本框架中已经引入了一个js文件,js文件夹中名为metabox_fields.js的文件,将js代码增加到此文件中即可:

  1. jQuery('#postdivrich').before(jQuery('#pagebannerbox')); //前面的postdivrich指的是默认文本编辑处的id不能改

jquery的before方法可以将id为pagebannerbox的div插入到id为postdivrich的前面,很简单的一句jquery代码即可实现。

TA的作品
  • Mohtml 作品/设计展示自适应wordpress主题 模板兔出品
  • QYKCMS后台软件v4.1.3部分操作界面截图
  • 轻松制作一款与众不同的QYKCMS网站主题
  • 怎样设置可以让QYKCMS系统运行得更快?
  • 使用 Apache .htaccess 文件设置QYKCMS伪静态规则的方法
  • QYKCMS后台管理软件入门级操作视频教程
  • IIS下使用 web.config 文件设置QYKCMS伪静态规则的方法
  • 同一个网站空间使用QYKCMS建立多个独立站点
  • QYKCMS后台管理员密码忘记了怎么办
  • QYKCMS 网站系统4.0 标签大全
查看全部

全部评论: 0

在线咨询
有什么可以帮到你
点击咨询

账号登录

忘记密码

第三方账号快速登录

Q Q 登 录 微 博 登 录

账号注册 已经有账号? 立即登录

发送验证码

第三方账号快速注册

Q Q 登 录 微 博 登 录