wordpress自定义api
在WordPress中创建自定义文章模板教程
WordPress是最领先的网站建设平台之一，使用WordPress的主要原因是由于各种模板和主题。使用WordPress你可以通过改变布局和添加个人主题来制作你梦想中的网站。WordPress的主题和布局是最好的工具，可以自行个性化你的网站。这个平台使你能够轻松地创建一个文章模板。
原文链接：在WordPress中创建自定义文章模板教程 - 搬主题
自定义文章使你能够为你的每个文章和博客使用各种布局和风格。在WordPress中创建自定义文章模板的程序有很多。如何在WordPress中创建自定义文章模板？在这里，搬主题整理了一份内容丰富的指南，以帮助你根据你的需求开始，并开发一个有助于代表你品牌的模板。
为什么需要WordPress自定义文章模板？你的网站的成功取决于你的网站如何出现在读者面前以及他们如何看待它。如果你使用一个惊人的主题或有任何新的设计，你的访问者也会被诱惑去检查你的其他内容。无论你在内容上如何努力，有一件事能让你的网站在外观上脱颖而出，那就是主题。这就是其中一个原因，主题和模板在WordPress中都非常重要。
每篇博客文章的相同布局可能会很无聊，所以最好是不断地改变。WordPress通常根据 "single.php "附带的模板顺序，有不同的文章模板。这给了你一些布局的选择，供你选择。模板是用来检查不同的风格，这取决于你的内容。在自定义单一模板的帮助下，用户可以创建独立的风格，可以应用于特定的文章，你将不会给一次又一次地重新创建每个布局。
在WordPress中创建自定义文章模板的方法创建自定义文章模板的常见方法是通过编码，但这不是每个人都能做到的。你所做的编码涉及到制作一个空白的PHP文件，并将代码写入其中。
通过使用区块编辑器这种方法不制作文章格式，包括有限的适应性。但这是要求最低的选择，可以保存你的单一文章格式，并在一段时间后重新使用它们。默认的WordPress块编辑器有一个固有的组件，使你能够保存和重用这些块。有许多可重复使用的块，而且，组块是其中之一。
集合块通常能让你把一些块和文章布局放到一个组中。然后，在这个帮助下，你就可以在不同的文章中保存和重复使用这个块。要开始使用组块编辑器，你需要在WordPress做另一个文章，然后在你的内容中添加一个组块。
内置的主题设置一些主题和插件都有内置的设置，以增强你的单篇文章布局的外观。有一些WordPress主题支持这种设置，你可以在文章编辑界面上发现它们的选项来检查它们。根据你所使用的主题，也可能有一些替代选项。
首先，你可以去看看不同的主题和它们所提供的功能。然后，你可以通过利用WordPress Themes的定制选项，按照你喜欢的方式定制主题。这些主题非常适合想获得更多知识的人。
使用Beaver Builder插件利用Beaver Builder是一个最简单的方法来制作一个自定义的文章布局。 它是现有的时尚的WordPress转轮制造商模块，允许你制作一个文章格式，而不需要编写任何代码或适应你的WordPress内容。
你需要做的主要事情是下载和安装Beaver Builder模块。WordPress是建立网站的最有指挥权的平台之一，使用WordPress的主要原因是由于丰富多彩的模板和主题。在设置上做了一些改变，使Beaver Builder可以用于博客文章。你需要在WordPress中再发一个文章，在文章界面上启动插件。另外，你可以自行定制设置。
WordPress自定义插件：代码高亮，允许内联样式，显示隐藏按钮
NO.1创建插件
在wp-content/plugins目录下创建一个文件夹，名称为tinymceSet（名称随意取）
新建一个与文件夹同名的php文件tinymceSet.php
初始代码如下
<?php/** *Plugin Name: TinymceSet *Description: 自定义tinymce插件. */
在管理后台-插件，刷新可以看到新注册的插件
如显示未启用，则点击启用
NO.2经典编辑器
添加区块，选择经典
初始tinymce编辑器只显示少数几个功能按钮，还有一些按钮默认隐藏，需要使用代码启用
启用方式，在tinymceSet.php中添加代码
function add_mce_buttons($buttons){ array_unshift($buttons, 'cut', 'copy', "paste", "image", "fontselect", "fontsizeselect", "styleselect", "sub", "sup", "backcolor", "forecolorpicker", "backcolorpicker", "visualaid", "anchor", "newdocument", "cleanup", "code", "selectall");return $buttons;}// 添加隐藏按钮add_filter('mce_buttons', 'add_mce_buttons');
保存后，刷新页面，就会发现按钮已经出现了
官方文档
#toolbarcontrols
NO.3经典编辑器
允许内联样式
本文的红蓝标题样式复制到WordPress TinyMCE后，style属性丢失
这个原因是TinyMCE的安全策略，对script标签和style属性等进行内容过滤
解决方法
在tinymceSet.php中添加代码
function custom_tinymce_config($init){// 允许所有标签和样式以及脚本（辅助style不被过滤） $init['extended_valid_elements'] = '*[*]'; $init['valid_elements'] = '*[*]'; $init['valid_children'] = '*[*]'; $init['extended_valid_elements'] = 'style,link[href|rel],script'; $init['custom_elements'] = 'style,link,~link,script'; $init['verify_html'] = false;// 这个属性决定了style属性不会被过滤 $init['paste_webkit_styles'] = "all";return $init;}// 初始化编辑器之前（当前tinymce版本为4.9.11）add_filter('tiny_mce_before_init', 'custom_tinymce_config');
刷新后就可以复制标题等样式了，包括word文档内容样式
NO.4代码高亮
WordPres的古腾堡编辑器和经典编辑器的代码块，样式都很简洁
公众号的代码块也相对简洁，对比highlightjs和prismjs，我更喜欢后者的样式
官方文档
可以自行选择样式和语言
自行选择插件
因为本文是TinyMCE v4.9.1的版本
文档地址
@4.9.11/plugins/codesample/
在tinymceSet.php中添加代码
其中一个是plugin.js
其他两个是prism官网按照你自己的喜好配置下载的prism.css和prism.js
function code_sample_add_external_plugin($mce_plugins){// 参考@4.9.11/plugins/codesample/plugin.min.js $mce_plugins['codesample'] = ''; // return $mce_plugins;}function code_sample_button($mce_buttons){ $mce_buttons[] = 'codesample';return $mce_buttons;}function code_sample_wp_scripts(){ wp_enqueue_style('prismjs-css', '', array(), null); wp_enqueue_script('prismjs-js', '', array(), null, true);}// 添加代码高亮add_filter('mce_external_plugins', 'code_sample_add_external_plugin', 999, 1);add_filter('mce_buttons', 'code_sample_button', 999, 1);add_action('wp_enqueue_scripts', 'code_sample_wp_scripts');
细节优化
如果不指定下拉语言，那么下拉语言只会有默认的选项和顺序
如果想要添加语言和调整顺序
在tinymceSet.php中添加代码，上文的custom_tinymce_config方法中增加
// 设置代码高亮 $init['codesample_languages'] = "[ { text: 'Bash/Shell', value: 'bash' }, { text: 'JavaScript', value: 'javascript' }, { text: 'PHP', value: 'php' }, { text: 'Python', value: 'python' }, { text: 'HTML/XML', value: 'markup' }, { text: 'CSS', value: 'css' }, { text: 'Java', value: 'java' }, { text: 'C', value: 'c' }, { text: 'C#', value: 'csharp' }, { text: 'C++', value: 'cpp' }, { text: 'SQL', value: 'sql' } ]";
最终完整的函数
function custom_tinymce_config($init){// 允许所有标签和样式以及脚本（辅助style不被过滤） $init['extended_valid_elements'] = '*[*]'; $init['valid_elements'] = '*[*]'; $init['valid_children'] = '*[*]'; $init['extended_valid_elements'] = 'style,link[href|rel],script'; $init['custom_elements'] = 'style,link,~link,script'; $init['verify_html'] = false;// 这个属性决定了style属性不会被过滤 $init['paste_webkit_styles'] = "all";// 设置代码高亮 $init['codesample_languages'] = "[ { text: 'Bash/Shell', value: 'bash' }, { text: 'JavaScript', value: 'javascript' }, { text: 'PHP', value: 'php' }, { text: 'Python', value: 'python' }, { text: 'HTML/XML', value: 'markup' }, { text: 'CSS', value: 'css' }, { text: 'Java', value: 'java' }, { text: 'C', value: 'c' }, { text: 'C#', value: 'csharp' }, { text: 'C++', value: 'cpp' }, { text: 'SQL', value: 'sql' } ]";return $init;}
NO.5Tips
本文的TinyMCE版本为v4.9.1
前几年写WordPress面临编辑器二选一的问题，现在古腾堡里面内置了经典编辑器，省去了很多麻烦，也解决了以前使用插件插入简码特殊效果和很难插入HTML代码的问题
END