WordPress shortcode 在网页设计时是非常弹性的功能,当需要在特定位置加入想要呈现的内容,却受限于网站主题框架无法以内建编辑器或区块小工具完成时,就可以选择自行创建shortcode 函式定义想要显示的内容...就能够在网站主题不支援编辑的位置显示特定文字或图片,本篇文章分享的shortcode 函式相当简单,只需按照步骤就能够完成 使用add_shortcode 函数 第一步:在下方的函式中,dh_first_shortcode 是可以自定义的名称...第二步:以WordPress 传统编辑器而言,只需加入刚刚定义的shortcode 名称,并在前后加上[ ] 符号即可。 第三步:完成后就会在网页上显示我们所定义的文字与图片,如下图所示。...第四步:在本来的函式中,我们只单纯输出文字,因此在外观上不会套用网站主题既有的CSS 样式表,此时只需要为文字加入HTML 标签以及CSS 类名称,以下图为例,设定文字为h2 就会套用网站中对h2 既有的样式...今天的教学到这里告一段落了,不要忘记在右侧订阅鹄学苑电子报,确保收到最新WordPress 教学文章
使用的方法主要有两种: 可以通过在WordPress编辑器中插入短码的形式。...显示相对日期 显示效果如下: ---- WordPress 和 Vue.js 的学习资源推荐 1 month ago ---- 显示文章中的图片 如果你想把文章的特色图片实现出来,只需要在短码中增加一个参数...手把手教妹子用WordPress建一个公司官网(1) ---- 可以看到图片的对齐位置有点奇怪,通过增加一点CSS代码就可以灵活的调整图片的位置 .display-posts-listing .listing-item...举几个例子: orderby=”author” -按作者排序 orderby=”rand” – 随机排序 orderby=”comment_count” – 按评论数量排序 在上面的短码中我还加入了其他几个参数...,也可以通过增加wrapper="div" 把每一个结果都包如一个div标签中,以便更好的结合其他工具进行自定义CSS,通过这种方式可以把结果显示成表格、栅格(Grid)等等其他形式,可以玩出花来。
CSS 和 JS 适配小屏幕设备 夜间模式支持 安装和更新 安装 在 Github Release 页面下载 .zip 文件,在 WordPress 后台 “主题” 页面上传并安装。...自动更新 Argon 接入了 WordPress 更新机制,当新版本发布后,在 WordPress 后台 “更新” 页面即可更新 Argon。...,并在专门的 “说说” 页面展示,也支持说说和首页文章穿插 评论功能扩展 – Ajax 评论,评论支持 Markdown、验证码、再次编辑、显示 UA、悄悄话模式、回复时邮件通知、查看编辑记录、无限加载等功能...诸多功能 – 文章目录、阅读进度、Mathjax 或 Katex 公式解析、图片放大预览、Pangu.js 文本格式化、平滑滚动等 丰富的短代码 – 支持通过短代码在文章中插入 TODO、标签、警告...、提示、折叠区块、Github 信息卡、时间线、隐藏文本、视频等模块 其他 – 自适应、精心优化的文章阅读界面 CSS、可切换衬线/非衬线字体、可自定义 CSS 和 JS、支持使用 CDN 加速静态文件访问
、文章过时信息显示 Pjax - 支持 Pjax 无刷新加载,提高浏览体验 友情链接 - 支持使用 WordPress 自带的链接管理器进行友链管理,支持多种友链样式 "说说" 功能 - 随时发表想法,...并在专门的 "说说" 页面展示,也支持说说和首页文章穿插 评论功能扩展 - Ajax 评论,评论支持 Markdown、验证码、再次编辑、显示 UA、悄悄话模式、回复时邮件通知、查看编辑记录、无限加载等功能...诸多功能 - 文章目录、阅读进度、Mathjax 或 Katex 公式解析、图片放大预览、Pangu.js 文本格式化、平滑滚动等 丰富的短代码 - 支持通过短代码在文章中插入 TODO、标签、警告、...时间线、隐藏文本、视频等模块 适配 Gutenberg 编辑器 - 支持使用 Gutenberg 编辑器可视化插入区块 多语言 - 支持中文、英文、俄文等语言 其他 - 自适应、精心优化的文章阅读界面 CSS...、可切换衬线/非衬线字体、可自定义 CSS 和 JS、支持使用 CDN 加速静态文件访问、SEO 友好、Banner 打字动画、留言板页面、文章脚注等 Argon - 一个轻盈、简洁的 WordPress
用到的函数: get_theme_data( ) 信息存放的文件 style.css 内容展示图: 图片 遵循规则: 默认WordPress的样式表需要遵从 第一行是主题的名字; 第二行是主题的地址...get_theme_data 函数分析 该函数将主题文件内的style.css文件中的主题相关信息(也就是每个wordpress的主题样式页头必须遵守的主题描述格式)通过数组返回,需要说明的是该函数没有默认参数...$theme_data['Version']; } 页面前台调用代码和最终的HTML输出如下所示 当然我们通过一些适当的修改还可以将我们的theme_version()函数改为短码调用(shortcode...)方便使用 //版本号短码函数 functiontheme_version_shortcode( ){ $theme_name='xycss';//customizewithyourthemename.../style.css'); return$theme_data['Version']; } 那么短码调用方式如下: [theme_version] 输出的html结果为:1.3
): 注:将代码中二维码链接文字等介绍替换成自己的 /** * WordPress文章部分内容关注微信公众号后可见 * 钻芒博客移植美化www.zmki.cn 项目基于https://www.ilxtx.com...不用再手动添加到 style.css 如果你想要修改css,可以下载下来自行修改。...本项目引用css:https://a-oss.zmki.cn/20190503/gzhhfxz.css 3 集成短代码 为了方便使用,在后台文本编辑器中集成该短代码。...} } add_action( 'admin_print_footer_scripts', 'lxtx_wpsites_add_gzh_quicktags' ); 4 使用方法 4.1 在文章中使用短代码...本文源自:纯代码实现WordPress文章设置隐藏内容公众号可见
貌似在上个月,我就和中国历史、梦轩丽人等几位博友提过,张戈博客分享的《WordPress 酷炫 CSS3 读者墙,排名按年度、本月、本周划分的小方法》,其实可以封装成 WordPress 插件,方便一些不会部署代码的童鞋...在手动模式当中,插件提供 2 个自定义部署的方法: 方法①是短代码部署的方法: 后台编辑页面内容,在任意位置插入短代码“[readers_ranking]”,保存页面即可。...特别说明的是: i、 短代码只能将排行版输出到页面的最前面; ii、 已排除文章类型,所以短代码只对页面生效; iii、不管是手动模式还是自动模式,只要启用插件,短代码就会生效。...Ps:在主题模板中调用函数,可以灵活定义排行版出现的位置,适合熟悉程度较高的 WordPress 博主。 ④、自定义样式 原本我想将这个排行版弄成响应式的,可惜弄了半天也就是个半成品!...如果不熟悉 CSS 代码,可以试探性的修改带中文注释的那些属性,并不建议修改其他不熟悉的属性。 如果很熟悉 CSS 代码,你可以在后台自定义样式设置中重新定义这个排行榜的样式。
可以将输入验证码称为最简单形式的两因素身份验证。或者,您可能需要输入额外的 PIN 码。某些网站需要您在登录前识别模式。...您将通过二维码扫描重定向到另一个设置页面。 ...在手机上下载Google Authenticator应用程序并扫描二维码,将生成的代码插入您手机上的“Authenticator Code验证器代码”字段中并进行验证。 就是这样!...您已成功为您的站点启用 WordPress 双重身份验证。下次登录 WordPress 网站时,系统会要求您在手机上提供代码。.../ 相关文章 WordPress网站如何删除渲染阻止资源提高网站速度 WordPress网站如何使用WP Rocket删除未使用的CSS 如何将自定义CSS添加到WordPress网站
,博猪特地写了短代码插件以及代码高亮插件【代码高亮插件已提交至WordPress官方】 对HTML5视频以及优酷土豆视频的完美响应式支持 完美支持SMTP邮件 登录页面必应美图 更完善的注册页面,验证机制...Sakurairo: 一个多彩,轻松上手,体验完善,具有强大自定义功能的WordPress主题(基于 Sakura 主题)。...iro 主题——一个多彩,轻松上手,体验完善,具有强大自定义功能的WordPress主题。...、折叠区块、Github 信息卡、时间线、隐藏文本、视频等模块 多语言 – 支持中文、英文、俄文等语言 其他 – 自适应、精心优化的文章阅读界面 CSS、可切换衬线/非衬线字体、可自定义 CSS 和 JS...主题,Origami v2 参考了 Aurora 主题的设计改成了 半透明 + 背景 的风格,配色使用了 Spectre.css 默认的配色。
过滤默认的相册样式 WordPress 中会使用[ gallery]这个短代码来加载预定义的CSS。这些默认设置你通过use_default_gallery_style函数自定义。...> 重写[ caption] 短代码 [ caption] 短代码可以让你很简单地通过字幕包裹某张图片,如果你想修改下,往下看。...> 添加文章CSS类名 body_class这个过滤器在WordPress 开发中常常用到,那么你知道有个post_class过滤器可以让你在文章内添加自定义的CSS 类吗?...> 这样就为你的WordPress 网站的第一篇文章添加了.first-post 这个类,之后在开发中你就可通过CSS 自定义.first-post 的样式而不用担心因为使用:first这个伪类而产生的跨浏览器兼容问题了...在附件中增加自定义的输入框 在WordPress 中,附件大体上相当于一种额外的文章类型——仅仅有小小区别。
其实新主题也不是我自己独立完成的,前端基于Bootstrap 5框架,布局参照之前主题,核心php代码部分来自之前主题的,还有些是根据自己想到的功能在网上查找的,但不管是php代码,还是html和CSS...主题介绍 更新记录 详细信息 一款基于Bootstrap 5前端框架开发的WordPress主题,CSS3+HTML5和响应式设计,可自定义背景风格(颜色或图片),支持绝大数浏览器浏览...自定义标志 网站LOGO(图片或字体logo、网站标题、favicon网站小标、默认头像、默认缩略图等都可自定义 短代码 主题集成丰富实用的短代码:链接下载、代码高亮、回复/密码可见、引用文章/评论...侧栏滚动小工具 回到顶部、搜索框、隐藏/开启侧栏、暗黑转换、当前页面二维码 。。。。。。...点赞分享 二维码打赏、点赞、分享到社交媒体按钮 评论表情 评论起来更有意思 图片Lightbox 点击图片弹窗放大查看。 视频文章 视频自定义文章类型。
通过使用钩子,插件可以在 WordPress 的生命周期中插入自定义功能。...其他文件:如 CSS、JavaScript、图像等,视插件功能而定。...以下是一个简单的插件文件结构示例:复制my-plugin/├── my-plugin.php├── css/│ └── style.css├── js/│ └── script.js└── README.md...';}add_filter('the_content', 'my_first_plugin_modify_content');3.2 创建自定义短代码短代码是 WordPress 中的一种特殊标记...以下是创建自定义短代码的示例:function my_first_plugin_shortcode() { return '这是一个自定义短代码的内容。
从WordPress 3.9版本后,WordPress 默认的编辑器 TinyMCE 随之升级到了版本4,带来的问题以前在默认编辑器上的增强开发的效果可能失效。...除了默认的字体,根据个人需求你可能需要添加其他字体,比如说Google font(不过在天朝嘛目前貌似有点难连接这个)上的字体,那么你可以用下面的代码注册一个自定义字体。...wpex_mce_google_fonts_styles' ) ) { function wpex_mce_google_fonts_styles() { $font_url = 'http://fonts.googleapis.com/css...下面直接献上本站实现上图所示的效果的代码: // 短代码可视化插入按钮 devework.com function my_add_mce_button() { if ( !.../ ,但非完全翻译,只取部分仅作抛砖引玉而已,要完整理解前前后后的原理还需要看原文。
因为微慕小程序后端采用的WordPress,WordPress支持短代码的功能,于是在文章的任意位置插入卡片成为可能。 ?...用WordPress的自定义短代码需要支持以下3个功能: 1.在小程序的文章详情页任意位置支持链接式卡片 2.卡片式链接的跳转支持多个跳转方式:跳转本小程序,跳转其他小程序,跳转网页 3.需要兼容WordPress...自定义短代码的格式如下: [minappershortcode qrcode=”小程序二维码图” poster=”封面图” title=”标题” appid=”小程序appid” path=”小程序页面路径...” url=”网页链接” codetype=”短代码类型” redirectype=”跳转方式” description=”说明” price=”价格” buttontext=”跳转按钮文字”] 示例如下...运用wordpress短代码,可以为小程序扩展更多的功能。
中国电信189.io短地址api接口调用以及与wordpress的整合 作者:matrix 被围观: 18,833 次 发布时间:2013-08-07 分类:Wordpress 兼容并蓄 |...> 说明:ecurl()为增加的自定义函数,用来读取api返回的xml值,也就是那短地址。...2.文章页面模板single.php相关位置处中添加自定义函数ecurl()的调用。...大致原因网上说是只能读取 没搞懂~ 后来无意中找到WordPress短接接函数的调用ID ); ?> 神奇的解决了问题!...短地址还可以延伸到QR码的显示: <div id="currentPageCode" style="cursor: pointer; position: fixed; bottom: 30px; left
插件安装与激活步骤 1:下载插件从 GitHub 仓库 或 Gitee 或 陌涛网盘 WordPress 插件市场下载插件 ZIP 文件。...通过短代码嵌入友情链接申请表单如果你希望在现有页面或文章中嵌入友情链接申请表单,可以使用短代码。步骤 1:添加短代码编辑你想要显示表单的页面或文章。...在内容中输入以下短代码(简码):[friend_links_form] 更新或发布页面。步骤 2:访问页面访问包含短代码的页面,你会看到一个友情链接申请表单。3....后台管理友情链接所有提交的友情链接申请都可以在 WordPress 后台进行管理。步骤 1:进入管理页面登录 WordPress 后台。在左侧菜单中,点击 友情链接。...Q2:如何自定义表单样式?编辑插件目录中的 assets/css/style.css 文件,自定义表单样式。Q3:如何防止用户重复提交?插件会自动检测重复的 URL。
WPJAM「内容模板插件」最早的时候,短代码只支持 ID,但是有些同学反馈内容模板多了,ID 记不住,更可怕的时候,由于网站重建,重新导入一下 WP,所有的内容模板 ID 都变了,所有使用了内容模板的文章都得修改...这么一说,貌似内容模板使用标识也有挺有道理,我就升级「内容模板」到版本3.1,在内容模板编辑页面,支持输入标识: 这样内容模板的短代码除了 ID 之外还支持 name 的参数了: 除了这个更新之外之外...用户管理 最强 WordPress 一键用户管理插件。 支持自定义头像,屏蔽个人设置,优化姓名设置, 隐藏登录名,限制登陆失败次数,防止密码被暴力破解等功能。...配置器 全自动 WordPress 配置器,不用一行代码就可以开发。 支持自定义文章类型,自定义字段,自定义分类,分类选项,全局选项。...微信小程序 微信小程序 WordPress 基础插件,包含基础类库和管理。 微信群二维码 轮询显示微信群二维码,突破微信群100人限制。
WPJAM 「脚本加载优化」插件还借鉴了 WordPress 原生的 load-scripts.php 脚本的写法,所以剩下的 2 个 JS 请求和 1 个 CSS 请求都做了 301 header 以及...从上图可以看出,JS 和 CSS 文件都是从本地 disk cache 读取了,意思是这仅剩下的三个 JS/CSS 文件都缓存到浏览器本地了,这样是不是效率奇高啊?...用户管理 最强 WordPress 一键用户管理插件。 支持自定义头像,屏蔽个人设置,优化姓名设置, 隐藏登录名,限制登陆失败次数,防止密码被暴力破解等功能。...配置器 全自动 WordPress 配置器,不用一行代码就可以开发。 支持自定义文章类型,自定义字段,自定义分类,分类选项,全局选项。...微信小程序 微信小程序 WordPress 基础插件,包含基础类库和管理。 微信群二维码 轮询显示微信群二维码,突破微信群100人限制。
今天为各位带来在WordPress 后台编辑器文本模式(HTML模式)添加自定义按钮的方法,这个的话如果使用S-shortcodes 短代码插件的可能有接触,因为在最新版已经集成了。...之前分享过的一篇文章《WordPress自带TinyMCE编辑器相关功能增强》也大致有介绍,今天在这里则更加细致说明方法并给出多个实例。...为WordPress 后台编辑器文本模式(HTML模式)添加按钮教程 方法很简单,依样画葫芦即可。.../my_quicktags.js', array('quicktags') ); } 然后创建一个my_quicktags.js文件,按钮便是在这里自定义的,先给出个定义...关于为什么要\"css\" 的问题,如果你学过C 语言或C++ 等类似的语言,你就知道是这么回事啦~
微信二维码、Paypal链接 点赞 每篇文章均提供点赞功能,可展示访客最喜欢的文章列表(后台可以修改点赞数据) 生成封面二维码 每篇文章均可生成二维码用于分享到微信等社交平台 主题特色简介 niRvana...归功于现代的CSS技术,这些拟物的样式都完全使用代码编写出来了!...如: Gutenberg专用模块 niRvana主题除了外观的变化以外,主要还是针对WordPress5做了大量优化:由于WordPress5.0引入了“Gutenberg Block...Editor”(区块编辑器),在这种编辑器下,原有的“短代码”就显得非常的落后了: 短代码存在的问题:在旧的TinyMCE编辑器中,短代码往往需要手动输入和编辑,很难记忆和使用。...2、新增: 自定义音频 v3.4.0 1、新增: 标签云页面,后期继续优化 v3.3.0 1、新增:网站添加”随便看看”趣味阅读功能 2、新增:允许设置文章仅搜索引擎及管理员查看 v3.2.1 1、优化
领取专属 10元无门槛券
手把手带您无忧上云