hello啊！米娜桑，大家好啊！我终于是回来了啊！！！
至于我为什么会鸽了那么久呢？|
哎！真是说来话长啊~我最近的一段时间都在磨练自己吧~
嘛，其实也算不上磨练。无非就是再理解别人所写的问玩意。
那么今天也不说别的了，来记录一下后台的短代码功能吧！
1.PHP文件
我们需要创建一个短代码的文件夹，当然了，如果你嫌弃麻烦也可以不创建直接引用这个短代码文件也行。
但是我是对自己有点要求的，文件必须得分类好，所以我就以创建文件夹，比较规范的形式来编写短代码功能吧！
- 1.在主题的根目录下创建一个名为【shortcodes】的文件夹。
- 2.在【shortcodes】文件夹内创建一个名为index.php的文件。
- 3.因为短代码不可能只有一两个什么的所以我就为每个短代码创建一个独立的文件夹。
- 4.这里我来编写一个登录查看内容的短代码吧，在【shortcodes】文件夹内创建一个文件夹，那就命名为【hide_codes】吧！
- 5.在【hide_codes】文件夹内创建一个名为hide_codes.php的文件和一个hide_codes.js的文件以及添加一个35*35的小图标！
- 6.最后引用这些代码到index.php文件夹内，再把index.php的文件夹引用到functions.php中【注：关于functions.php文件我有在我发布的【WordPress主题编写】WordPress主题文件模板 内说的很清楚了，不知道这是什么的可以去看看】
index.php文件
在所创建的文件内写入以下代码
<?php
add_filter('mce_external_plugins', 'add_plugin');
add_filter('mce_buttons', 'register_button');
function register_button($buttons)
{
array_push($buttons, "|", "cntent_hide_codes");
//在后台编辑器中添加一个按钮其中[cntent_]必须作为前缀不可删除
//例如我要添加新的按钮就写为【cntent_new_button】其中的new_button为自己要修改的内容
//每添加一个按钮那么""后面就需要一个英文的【,】最后一个则不需要添加【,】|类似这个写法"cntent_hide_codes","cntent_new_button"
return $buttons;
}
function add_plugin($plugin_array)
{
$plugin_array['cntent_hide_codes'] = get_template_directory_uri() . 'shortcodes/hide_codes/hide_codes.js';
// 后台短代码按钮的js路径
//其中[cntent_hide_codes]对应了上面的按钮添加，这个函数的以及点击这个按钮就会加载这个js文件的内容
return $plugin_array;
}
// 一行一个文件|载入所需文件
$files = array(
'shortcodes/hide_codes/hide_codes.php',
//引用处理短代码的函数文件
//后续短代码依据上面的链接形式来写
);
//依次输送短代码的php文件
foreach ($files as $file) {
require_once get_theme_file_path('/' . $file);
}
hide_codes.php
在文件内写入以下代码
<?php
//短代码的设置
//函数命名要与你添加的按钮所填写的内容一致
function content_hide_codes($atts, $content = null)
{
// 检查用户是否处于登录状态
$logged_in = is_user_logged_in();
// 使用if-else语句根据登录状态输出不同内容
if ($logged_in) {
//如果是登录则输出登录所显示的内容
//do_shortcode($content)就是你短代码中间的内容类似这个[hide]这是隐藏的内容[/hide]其中【这是隐藏的内容】 = do_shortcode($content)
$output = '<div class="leaf_logged_in leaf_div_block">' . do_shortcode($content) . '</div>';
} else {
//如果未登录则输出未登录的内容
$output = '<div class="leaf_not_logged_in leaf_div_block"><p class="leaf_not_logged_in_text">检测到你是未登录的游客，请点击[登录]来查看被隐藏的文章内容吧~</p></div>';
}
//输出判断内容
return $output;
}
//与你所写的函数命名一致
add_shortcode('hidden', 'content_hide_codes');
//在短代码的[]内自定义内容的
function content_hide_codes($atts, $content = null)
{
// 检查用户是否处于登录状态
$logged_in = is_user_logged_in();
//构建输出内容
$atts = shortcodecatts(array(
color = '000000',//设置为默认十六进制颜色为黑色
),$atts);
//获取短代码的内容并赋值给变量
$color = $atts['color'];
// 使用if-else语句根据登录状态输出不同内容
if ($logged_in) {
//如果是登录则输出登录所显示的内容
//do_shortcode($content)就是你短代码中间的内容类似这个[hide]这是隐藏的内容[/hide]其中【这是隐藏的内容】 = do_shortcode($content)
//文章发布时esc_html($color)被解析为短代码中所输入的值
$output = '<div class="leaf_logged_in leaf_div_block" >'<p class="leaf_logged_in_text" style="background: #'.esc_html($color).';">. do_shortcode($content) .</p>'</div>';
} else {
//如果未登录则输出未登录的内容
$output = '<div class="leaf_not_logged_in leaf_div_block">
<p class="leaf_not_logged_in_text" style="background: #'.esc_html($color).';">检测到你是未登录的游客，请点击[登录]来查看被隐藏的文章内容吧~</p>
</div>';
}
//输出判断内容
return $output;
}
add_shortcode('hidden', 'content_hide_codes');2.Js文件
在文件内写入以下代码
(function (tinymce) {
tinymce.create('tinymce.plugins.cntent_hide_codes', { //注意这里有个 cntent_hide_codes
init: function (ed, url) {
ed.addButton('cntent_hide_codes', { //注意这一行有一个 cntent_hide_codes
//这是按钮的说明内容
title: '登录查看内容',
//这是按钮的图标图片
image: url + '/hide.png', //注意图片的路径 url是当前js的路径
onclick: function () {
//以下是不需要在[]内有任何值的代码
ed.selection.setContent('[hide]需要隐藏的内容[/hide]'); //这里是你要插入到编辑器的内容，你可以直接写上代码
//以下是需要在[]中添加变量的代码
ed.selection.setContent('[hide color="写入十六进制颜色[不需要把#也写入]"]需要隐藏的内容[/hide]'); //这里是你要插入到编辑器的内容，你可以直接写上代码
}
});
},
createControl: function (n, cm) {
return null;
},
});
tinymce.PluginManager.add('cntent_hide_codes', tinymce.plugins.cntent_hide_codes); //注意这里有两个 cntent_hide_codes
})(window.tinymce);这样就差不多了，但是还是写写一个额外内容吧，这个内容我就不做过多解释了自己去理解吧！
(function (tinymce) {
tinymce.PluginManager.add('cntent_background', function (editor, url) {
editor.addButton('cntent_background', {
type: 'menubutton', // 使用下拉框样式
title: '文字背景颜色',
image: url + '/background.png', // 注意图片的路径 url是当前js的路径
menu: [
{
text: '红色背景',
value: 'radback',
icon: ' ',
image: url + '/rad_background.png', // 注意图片的路径 url是当前js的路径
onclick: function () {
// 获取选中的值
var value = this.value();
// 处理所选的菜单选项
if (value === 'radback') {
// 插入红色背景标签
editor.insertContent('[' + value + ']在此输入内容[/' + value + ']');
}
},
},
{
text: '绿色背景',
value: 'greenback',
icon: ' ',
image: url + '/green_background.png', // 注意图片的路径 url是当前js的路径
onclick: function () {
// 获取选中的值
var value = this.value();
// 处理所选的菜单选项
if (value === 'greenback') {
// 插入绿色背景标签
editor.insertContent('[' + value + ']在此输入内容[/' + value + ']');
}
},
},
{
text: '蓝色背景',
value: 'blueback',
icon: ' ',
image: url + '/blue_background.png', // 注意图片的路径 url是当前js的路径
onclick: function () {
// 获取选中的值
var value = this.value();
// 处理所选的菜单选项
if (value === 'blueback') {
// 插入蓝色背景标签
editor.insertContent('[' + value + ']在此输入内容[/' + value + ']');
}
},
},
{
text: '黄色背景',
value: 'yellowback',
icon: ' ',
image: url + '/yellow_background.png', // 注意图片的路径 url是当前js的路径
onclick: function () {
// 获取选中的值
var value = this.value();
// 处理所选的菜单选项
if (value === 'yellowback') {
// 插入黄色背景标签
editor.insertContent('[' + value + ']在此输入内容[/' + value + ']');
}
},
},
// 可以根据需要添加更多选项
],
});
});
})(window.tinymce);
