wordpress问题怎样在它默认的编辑器上面添加一个pre标签

Posted 2023-04-23

我每次都要用到这个标签，不想每次都手写，怎样把pre标签添加到wordpress的默认编辑器工具栏里面
最好是给我写好吧，我直接能加进去，我用的是wordpress3.8.1版本，我把分提到最高了，会得帮帮忙吧，恩，谢谢！

可以这么做，测试是OK的

在当前皮肤下的functions.php添加如下内容

//创建按钮初始函数
add_action('init', 'add_pre_button');
function add_pre_button() 
    //判断用户是否有编辑文章和页面的权限
    if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) 
        return;
    
    //判断用户是否使用可视化编辑器
    if ( get_user_option('rich_editing') == 'true' ) 

        add_filter( 'mce_external_plugins', 'add_plugin' );
        add_filter( 'mce_buttons', 'register_button' );
    


//注册按钮
function register_button( $buttons ) 
    array_push( $buttons, "|", "pre" );//添加一个pre按钮
    return $buttons;

//注册TinyMCE按钮插件
function add_plugin( $plugin_array ) 
   $plugin_array['pre'] = get_bloginfo( 'template_url' ) . '/pre.js';
   return $plugin_array;

创建pre.js，pre.png文件，已打包成twentyfourteen.rar，下载后直接放在当前皮肤目录下即可使用。

其中pre.png图标临时做了个，你就凑合着用吧

pre.js的内容就不贴了。请下载附件参考。

参考技术A

采用该方法可以实现你想要的功能：

在functions.php中加入以下代码

///////////面板插入代码///////////
<?php
add_action( 'admin_print_footer_scripts', 'shortcode_buttons', 100 );
function shortcode_buttons() 
?>
<script type="text/javascript">
QTags.addButton( 'm', 'MP3Player', '[mp3]MP3Player代码[/mp3]');
                QTags.addButton( 'm0', '下载面板', '[down]这里输入内容[/down]');  
</script>
<?php 
?>

插入代码的地方就是：

QTags.addButton( 'm', 'MP3Player', '[mp3]MP3Player代码[/mp3]');
QTags.addButton( 'm0', '下载面板', '[down]这里输入内容[/down]');

其中第一个参数可以写成m,m0,m1,m2等等，第二个参数是显示在面板中的名称，第三个参数是会自动插入到编辑器中的代码。

你可以自行替换

参考文章：http://www.tennfy.com/1053.html

追问

提示错误，不知道怎么回事，我不太懂代码

追答///////////面板插入代码///////////
<?php
add_action( 'admin_print_footer_scripts', 'shortcode_buttons', 100 );
function shortcode_buttons() 
?>
<script type="text/javascript">
QTags.addButton( 'm', 'MP3Player', '[mp3]MP3Player代码[/mp3]');
                QTags.addButton( 'm0', '下载面板', '[down]这里输入内容[/down]');  
</script>
<?php 
function add_editor_buttons($buttons)  $buttons[] = 'fontselect'; $buttons[] = 'fontsizeselect'; $buttons[] = 'cleanup'; $buttons[] = 'styleselect'; $buttons[] = 'hr'; $buttons[] = 'del'; $buttons[] = 'sub'; $buttons[] = 'sup'; $buttons[] = 'copy'; $buttons[] = 'paste'; $buttons[] = 'cut'; $buttons[] = 'undo'; $buttons[] = 'image'; $buttons[] = 'anchor'; $buttons[] = 'backcolor'; $buttons[] = 'wp_page'; $buttons[] = 'charmap'; return $buttons;  add_filter("mce_buttons_3", "add_editor_buttons");
?>

试下这个

追问

不行哎，我用的是3.8版本，主题是默认主题

我可以使用 Javascript 更新 Wordpress 编辑器中的默认类吗？

【中文标题】我可以使用 Javascript 更新 Wordpress 编辑器中的默认类吗？

【英文标题】：Can I use Javascript to update a default class in the Wordpress Editor?

【发布时间】：2020-03-23 10:53:41

【问题描述】：

在 WordPress Gutenberg 编辑器中，我尝试以编程方式在图像块上设置默认类，无需用户通过“附加 CSS”字段手动添加即可应用。

我已尝试在图像块上应用默认样式，该样式最初有效 -

wp.blocks.registerBlockStyle( 'core/image', 
  name: 'retailResidential',
  label: 'Retail & Residential',
  isDefault: true
);

但我需要在用户更改自定义下拉列表中的字段后更新此默认类。 当此下拉列表更改时，我将取消注册块样式，然后注册新的默认块样式 - 但它对额外创建的图像没有影响（不使用更新的默认样式创建图像，仍然使用旧的）。

wp.blocks.unregisterBlockStyle(
  'core/image',
  [ 'retailResidential', 'weddingsEvents', 'advertisingEditorial']
);

更新默认图片块样式后是否需要刷新编辑器？还是有其他更好的方法来做到这一点？

reference 用于更新块样式

【问题讨论】：

我可以知道您要从编辑器创建哪种样式的图像吗？

图像被创建为图像块，使用 WordPress 5.0+ Gutenberg。它正在添加到页面中。

哦，我知道，但您会看到有默认和圆形遮罩样式，但在您的情况下，您应用的是哪种图像样式？

查看链接 (prnt.sc/q5yrls) 我已将样式应用为图像上的顶部三角形

对，我已经删除了两个默认样式（默认和圆形蒙版），我尝试添加一个自定义样式（'retailResidential'、'weddingsEvents' 或 'advertisingEditorial'），设置为默认（即用户不必点击它，它在创建图像时应用到图像）。

【参考方案1】：

我已经按照您的要求进行了工作，为此我做了以下事情： 我正在研究二十二十个主题

1) 在 javascript 文件中 editor-script-block.js

wp.domReady( function() 
  wp.blocks.unregisterBlockStyle( 'core/image', 'circle-mask' );
 );

wp.domReady( function() 
  wp.blocks.unregisterBlockStyle( 'core/image', 'default' );
 );

wp.domReady(function()
     wp.blocks.registerBlockStyle( 'core/image', 
        name: 'retailResidential',
        label: 'Retail & Residential',

      );

      wp.blocks.registerBlockStyle( 'core/image', 
        name: 'weddingsEvents',
        label: 'Wedding & Events',
      );

      wp.blocks.registerBlockStyle( 'core/image', 
        name: 'advertisingEditorial',
        label: 'Advertising & Editorial'

      );
);

现在我要为图像添加一些样式 css，就像我想在图像上添加顶部三角形到“retailResidential”样式请参见此处的图像（https://prnt.sc/q6esxq），因为我还必须为后端和前端应用 css因为有不同的类应用所以

管理端

<style>
.is-style-retailResidential >div > div.components-resizable-box__container:after 
    content: '';
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid #170606;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translatex(-50%);

</style>

前端

<style>
.is-style-retailResidential
    position: relative;

.is-style-retailResidential:after 
    content: '';
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid #170606;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translatex(-50%);


</style>

对于设置样式是默认设置，您使用了自定义字段插件，但 wordpress 已经提供选项，请参见此处（https://prnt.sc/q6ew4k）我已将默认样式设置为“零售和住宅”，它可以按照您的需要工作

我还在上传视频，请查看here

如果我有什么误解，请告诉我！