添加小铅笔 -WordPress Customize API[wordpress开发教程]

添加小铅笔 -WordPress Customize API

添加小铅笔 –WordPress Customize API[wordpress开发教程]

我们使用WordPress Settings API添加完自己的选项后,为了方便主题用户便捷的找到需要设置的地方,这个时候就可以给你的设置项目添加一个小铅笔,主题用户点击小铅笔即可直接到设置的地方,十分方便,跟着这次的wordpress开发教程一起来学习吧。

在这里我以wordpress自带的2019主题来做演示。

效果实现:

首先,我们需要添加一个设置项目,在2019主题根目录下的functions.php文件的<?下面添加以下代码:

Npcink 首发,Muze 原创
  1. //添加自定义设置选项
  2. function npcink_customize_register( $wp_customize ) {
  3. //给相关设置项目加小铅笔
  4. if ( isset( $wp_customize->selective_refresh ) ) {
  5. //One
  6. $wp_customize->selective_refresh->add_partial( 'npcink_sections_text_one', array(
  7. 'selector' => '.1-1',
  8. 'render_callback' => 'lifet_customize_partial_npcink_sections_text_one',
  9. ) );
  10. //Two
  11. $wp_customize->selective_refresh->add_partial( 'npcink_sections_text_two', array(
  12. 'selector' => '.1-2',
  13. 'render_callback' => 'lifet_customize_partial_npcink_sections_text_two',
  14. ) );
  15. }
  16. //-----------------------------------------------------------------------------
  17. //添加主题设置面板,ID = npcink_options
  18. $wp_customize->add_panel( 'npcink_options',
  19. array(
  20. 'title' => __( '添加小铅笔演示', 'npcink' ),
  21. 'description' => __( 'Npcink出品', 'npcink' ),
  22. 'priority' => 30,
  23. 'capabitity' => 'edit_theme_options',
  24. ) );
  25. //添加文本设置节,ID = npcink_sections_text
  26. $wp_customize->add_section('npcink_sections_text',
  27. array(
  28. 'title' => '文本设置',
  29. 'description' => '主题的文本设置',
  30. 'panel' => 'npcink_options',
  31. ) );
  32. //文字设置:one,ID = npcink_sections_text_one
  33. $wp_customize->add_setting('npcink_sections_text_one',
  34. array(
  35. 'default' => 'Npcink 荣誉出品',
  36. )
  37. );
  38. $wp_customize->add_control('npcink_sections_text_one',
  39. array(
  40. 'label' => '文本设置:One',
  41. 'section' => 'npcink_sections_text',
  42. 'type' => 'text',
  43. )
  44. );
  45. //文字设置:two,ID = npcink_sections_text_two
  46. $wp_customize->add_setting('npcink_sections_text_two',
  47. array(
  48. 'default' => 'Npcink 荣誉出品',
  49. )
  50. );
  51. $wp_customize->add_control('npcink_sections_text_two',
  52. array(
  53. 'label' => '文本设置:Two',
  54. 'section' => 'npcink_sections_text',
  55. 'type' => 'text',
  56. )
  57. );
  58. }
  59. add_action( 'customize_register', 'npcink_customize_register' );

保存上面的代码,我们就可以在网站后台 → 外观 → 自定义中看到我们添加的新选项:添加小铅笔演示。

为了方便看到演示效果,我们在主题根目录下的header.php文件底部添加以下代码:

  1. <dl style="padding: 1em;">
  2. <dd class="1-1">1-1:<?php echo get_theme_mod( 'npcink_sections_text_one', 'Npcink荣誉出品' ); ?></dd>
  3. <dd class="1-2">1-2:<?php echo get_theme_mod( 'npcink_sections_text_two', 'Npcink荣誉出品' ); ?></dd>
  4. </dl>

注意这里的 class :1-1、1-2

效果如下图:

添加小铅笔 -WordPress Customize API[wordpress开发教程]-度崩网-几度崩溃

代码解释:

如果您阅读了我之前发布的文章,那么在这里您需要注意这几点:

一:

在做效果演示时我给dd标签添加了CSS,分别是1-1、1-2,这将有助于接下来的小铅笔进行定位。

二:

我新添加了一段if判断语句:

Npcink 首发,Muze 原创
  1. if ( isset( $wp_customize->selective_refresh ) ) {
  2. //One
  3. $wp_customize->selective_refresh->add_partial( 'npcink_sections_text_one', array(
  4. 'selector' => '.1-1',
  5. 'render_callback' => 'lifet_customize_partial_npcink_sections_text_one',
  6. ) );
  7. //Two
  8. $wp_customize->selective_refresh->add_partial( 'npcink_sections_text_two', array(
  9. 'selector' => '.1-2',
  10. 'render_callback' => 'lifet_customize_partial_npcink_sections_text_two',
  11. ) );
  12. }

简化后为:

  1. if ( isset( $wp_customize->selective_refresh ) ) {
  2. $wp_customize->selective_refresh->add_partial( '控件ID', array(
  3. 'selector' => '添加的CSS',
  4. 'render_callback' => 'xxx_控件ID',
  5. ) );
  6. }

这一段的意思就是给指定的CSS处添加小铅笔。

以上代码均可正常使用,但其具体实现原理我是一概不知,仅供参考,如果能够帮助到您那是最好啦。

举一反三,相信你已经知道了如何添加小铅笔了,如果你还有疑问的话,欢迎在评论区留言交流。

补充(参考):

你搜callback 里的函数
没有那个是不起作用的
这个callback 是要返回修改后前端展示的结果的

基于 留的class 找元素直接替换内容
你文章没提这个
别人只写个函数名 啥作用没有

这个  render_callback  跟 id 没半毛钱关系

完全是可以 自定义命名的

原文地址:https://www.npc.ink/15085.html

点点赞赏,手留余香

给TA打赏
共0人
还没有人赞赏,快来当第一个赞赏的人吧!
    WordPress教程

    怎么在搜索结果中排除指定的页面或文章或分类?[wordpress开发教程]

    2020-5-27 14:18:47

    WordPress教程

    WordPress Customize API - 添加第一个自定义选项[wordpress开发教程]

    2020-5-27 14:54:40

    本站所发布的一切源码、模板、应用等文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版,购买注册,得到更好的正版服务。如有侵权。本站内容适用于DMCA政策。若您的权利被侵害,请与我们联系处理,站长 QQ: 84087680 或 点击右侧 私信:盾给网 反馈,我们将尽快处理。
    ⚠️
    本站所发布的一切源码、模板、应用等文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版,购买注册,得到更好的正版服务。如有侵权。本站内容适用于DMCA政策
    若您的权利被侵害,请与我们联系处理,站长 QQ: 84087680 或 点击右侧 私信:盾给网 反馈,我们将尽快处理。
    0 条回复 A文章作者 M管理员
    欢迎您,新朋友,感谢参与互动!
      暂无讨论,说说你的看法吧
    个人中心
    购物车
    优惠劵
    今日签到
    私信列表
    搜索