最近在项目中进行 WordPress 后台开发的时候，需要制作弹出层，经过一轮测试，发现还是 WordPress 原生已支持的 ThickBox 比较方便。...WordPress 的 ThickBox jQuery 库 WordPress 后台自带的 ThickBox 库是经过 WordPress 修改的，比如目前插件更新提示的详情链接就是使用 ThickBox...WordPress 后台自带的 ThickBox jQuery 库有两种使用方式： iframe 模式：在弹出层中加载另外一个网页。...inline 模式：在弹出层中加载 HTML 片段 下面分别详细讲讲这两种模式的详细使用方法： iframe 模式 的 href 属性即为 iframe 要加载的页面，TB_iframe 参数指定的是 ThickBox 的 iframe 模式，width 参数指定了弹出层的宽度，height 参数指定了弹出层的高度
Dashicons 是 WordPress 官方出的用于后台的图标字体，可以用于 WordPress 的各个地方，也可以用在 WordPreess 前台，但是你事先要加载相关的 CSS。...add_action( 'wp_enqueue_scripts', function() { wp_enqueue_style( 'dashicons' ); }); 下面讲讲如何在 WordPress...各个地方如何使用 Dashicons register_post_type() 中使用： 注册文章类型的时候，如果要自定义文章类型在后台左侧菜单的图标，可以指定 menu_icon 的参数为 dashicons...为了方便插件或者主题开发者方便选择 Dashicons，WPJAM Basic 插件集成了 Dashicons 功能，在后台罗列出所有的 Dashicons 以及每个 Dashicon 的名称和 HTML...点击「WPJAM」菜单下的「 Dashicon」子菜单，首先看到的按照分类显示的所有 Dashicons 列表： 点击某个 Dashicon，就会显示大图，和其名称，对应的的 HTML 代码：
其实 WordPress 本身也有类似于 Cron 的功能，让我们可以直接在 WordPress 中定义和执行定时作业，WordPress 把这个功能定义为：WP-Cron，比如 WordPress 本身的文章预发布功能就是基于...WP-Cron 定义了一套完整的 API，让 WordPress 第三方开发者可以通过插件的去定义定时作业。...： 在该界面，可以立即执行定时作业，也可以删除，或者直接新增定时作业。...定义定义作业 WP-Cron 支持两种类型的定义作业： 单一的未来事件（比如设定某篇文章在将来某个时间发布） 重复发生的事件，比如每天或每个星期等一段时间内重复发生的事件（比如定时清理无用的信息） 定义单一的未来事件...在 WPJAM Basic 定时作业管理后台加入： 这里非常好理解，就不再想讲，只是后通过界面添加的方式，暂时不支持参数，即 $args 参数。
前几篇文章小编分别介绍了PageAdmin、帝国、Ecshop这些国内知名建站系统的模板制作和修改，今天小编给大家介绍国外很有名的个人博客系统：wordpress的模板制作。...相对于其他几个建站系统，wordpress模板制作稍微就复杂一点，wordpress的制作需要熟悉php编程，本片文章重点说一下数据的调用。 wordpress模板制作之标题调用 默认在标题前加一个》箭头号，可以用在首页调用；而纯粹是调用文章标题，可以用在文章和列表页 wordpress模板制作之列表调用 在 if() 和 while() 的外面，只需要分号去结束或者关闭。 wordpress模板制作之文章页调用 在 if() 和 while() 的外面，只需要分号去结束或者关闭。
，都是“Canonical 标签以及在 WordPress 中的应用”这篇日志的内容，对于搜索引擎来说，这样两个不同的 URL 是无法判断是同一篇日志的，搜索引擎为了更多收录内容，就会同时收录这两个链接...WordPress 默认支持 Canonical 标签 在 WordPress 2.9 之前，让 WordPress 博客支持 Canonical 标签是需要通过插件或者手工修改主题的 header.php...> 在 WordPress 2.9 发布之后，WordPress 已经默认支持这一标签了，我们无需做任何动作，主题就支持这一标签。...我们可以在 WordPress 的源文件 wp-includes/default-filters.php 看到如下的代码： add_action( 'wp_head', 'rel_canonical'...标签，而又没有在 WordPress 中屏蔽默认的 filter 的话，则会输出重复的 Canonical 标签。
serialize() 和 unserialize() 函数有个问题，在序列化的时候，不会判断是否已经序列化过了，或者在序列化数组恢复成数组的时候，也不会判断这是不是序列化数组。...WordPress 如何序列化数据 所以 WordPress 做了一些改进，创造了 maybe_serialize() 和 maybe_unserialize() 这两个函数，用法和 serialize...但是: maybe_serialize() 在进行序列化的时候，如果要序列化的数组或对象已经被序列化过了，就不会再次进行序列化，直接返回已经序列化的字符串。...为了判断是否为已经序列化，所以 WordPress 还有两个函数： is_serialized( data, strict = true )：检查 is_serialized_string( data...is_serialized( $data ) ) { if ( is_serialized_string( $data ) ) { // do something } } 另外，很重要一点，但是 WordPress
React/JSX 中的注释类似于 JavaScript 的多行注释，但是是用大括号括起来。...单行注释： {/* 单行注释（在原生 JavaScript 中，单行注释用双斜杠（//）表示） */} {`Welcome ${user}, let's play React`} 多行注释： {/* 多行注释超过 一行 */} {`Welcome ${user}, let's play React`}
我前面介绍过 Mobile Detect 这个 PHP 类库，它可以用来检测移动设备环境，它有一个非常完整的库，可以检测出所用的设备类型（包括操作类型，以及手机品牌等都能检测）和浏览器的详细信息。...但是如果只是简单的判断下当前浏览博客的设备是否为移动设备，那么我们可以使用 WordPress 默认的函数 wp_is_mobile 函数来判断，但是这个函数有个问题，它把 iPad 也算作移动设备，但是...iPad 设备比较大，有时候我们仅仅希望在手机看到不同的设计和功能，所以我重新写了一个 wpjam_is_mobile 函数，去除了 iPad ： function wpjam_is_mobile()...return true; } else { return false; } } 并且 wpjam_is_mobile 函数已经整合到 WPJAM Basic 插件中。
MobX 是一款精准的状态管理工具库，如果你在 React 和 React Native 应用中使用过 Flux、Alt、Redux 和 Reflux，那毫不犹豫地说，MobX 的简单性将成为你状态管理的不二之选...这是我们要增加新条目时转向的组件； 在 addListItem中，把 this.state.text 传入this.props.store.addListItem。...在与输入框绑定的 updateText 中会更新this.state.text； 在 removeListItem 中调用 this.props.store.removeListItem 并传入条目；...在 addItemToList 中调用 this.props.navigator.push，传入条目和数组存储两个参数； 在 render 方法中，通过属性解构数据存储： const { list }...= this.props.store 8.在 render 方法中，也创建了界面，并绑定了类的方法 import React, { Component } from 'react' import { View
MobX 是一款精准的状态管理工具库，如果你在 React 和 React Native 应用中使用过 Flux、Alt、Redux 和 Reflux，那毫不犹豫地说，MobX 的简单性将成为你状态管理的不二之选...这是我们要增加新条目时转向的组件； 在 addListItem中，把 this.state.text 传入this.props.store.addListItem。...在与输入框绑定的 updateText 中会更新this.state.text； 在 removeListItem 中调用 this.props.store.removeListItem 并传入条目；...在 addItemToList 中调用 this.props.navigator.push，传入条目和数组存储两个参数； 在 render 方法中，通过属性解构数据存储： const { list }...= this.props.store 8.在 render 方法中，也创建了界面，并绑定了类的方法 import React, { Component } from 'react' import
React Native中的iconfont 关于在React Native中使用iconfont，网上已有很多非常好的解决方案，用的最多的就是react-native-vector-icons , 这个库支持很多常用的...IconFont的使用原理 其实IconFont就是一些文字，通过在web上的使用，我们可以大概猜出使用方法： 指定字体集 把对应的16进制码当成文字写到文本中 在React Native中同样如此，我们可以通过...react-native-vector-icons的源代码来验证我们的想法。...实际上，一个字体通常由数个表(table)构成，字体的信息存储在表中。...tag-svip:{icon('tag-svip')} ) } } 另外，在工程中
这篇教程中，你将会学到如何在 React web 应用中获取数据并显示。这很重要。 在整个 React 组件中有几个地方都可以获取远程数据。何时获取数据是另外一个问题。...在教程结束后，你会清楚的知道 React 中该如何获取数据，不同方法的利弊和如何在 React 应用中使用这些技术。...我们的应用中只是在 componentDidMount() 方法中启动一个 5s 的定时器更新数据，然后，在 componentWillUnmount() 方法清除定时器 componentDidMount...当用户在初始化数据的时候（比如：点击搜索按钮）这很重要。 在演示 app 中，当请求时数据时我简单的显示一条提示信息：“请求数据中...”。...在 App 组件的 render() 方法中，通过检查state.isFetching 的值来决定是否显示提示信息。
# 一、在 React 中绑定事件 接着上一章的案例，给他绑定事件，动态的切换 boolea # 二、预热原生事件绑定 # 原生事件绑定的几种方式 按钮一</button...创建一个类组件 class Mood extends React.Component { constructor(props) { super(props) //...中绑定事件可以使用原生的写法，但是不推荐使用原生的写法，推荐使用 React 的写法 React 中的写法和原生的写法有所区别--请看下面的例子 // 原生的 onclick 要写成小驼峰形式 onClick...// 原生的 onbluer 要写成小驼峰形式 onBluer React 绑定方法不能直接调用方法，因为 React 一上来就会嗲用 return 里面的返回代码，所有就会造成页面一开始就执行 class...Mood extends React.Component { ...
JSX（JavaScript XML）是一种在 React 中用于描述用户界面的 JavaScript 语法扩展。...在 JavaScript 代码中编写类似 HTML 的结构，以声明式地定义组件的外观和行为。 JSX 的语法看起来类似于 XML 或 HTML，但实际上是 JavaScript 的一种语法扩展。...以下是 JSX 的一些特点和用法： 1：组件声明： 使用 JSX，声明自定义组件和内置组件，以创建像 HTML 标签一样的自定义标签。...; } 2：表达式插值： JSX 在大括号 {} 中插入 JavaScript 表达式，动态地生成内容。...props.isLoggedIn && Please log in} ); } 将 JavaScript 和 HTML 结合在一起，使得编写 React 组件更加方便和可读性更高
在 React 中，可以通过以下几种方式来创建 ref： 1：使用 React.createRef() 方法： 在类组件中，可以使用 React.createRef() 方法来创建 ref 对象。...通常，在组件的构造函数中将 ref 赋值给类的实例属性。...} render() { return ; } } 2：使用回调函数方式： 另一种方式是使用回调函数形式的 ref，通过在组件中定义一个函数...3：使用 React.useRef() Hook： 在函数组件中，可以使用 React.useRef() Hook 来创建一个 ref 对象，并将其赋值给一个变量。...需要注意的是，在组件挂载完成后访问 ref，以确保 ref.current 的值不为 null 或 undefined。
要更改WordPress Gutenberg编辑器的宽度，您需要为其加载自定义CSS规则。以下是如何快速更改宽度的概述，包括加载样式表和添加将增加Gutenberg编辑器内容区域宽度的特定规则。...加载Gutenberg编辑器的自定义CSS 在你的主题的functions.php里面添加以下函数和钩子。这将加载editor.css在主题目录的根目录中调用的CSS文件。...，打开editor.css文件添加以下规则以更改Gutenberg编辑器的内容宽度。...} /* Width of "full-wide" blocks */ .wp-block[data-align="full"] { max-width: none; } 这在主题支持下的块编辑器手册中概述...，是更改Gutenberg编辑器宽度的官方推荐方法。
jQuery 有个 wrap 函数，可以使用指定的 HTML 元素来包裹每个被选元素。...div class="inner">Hello Goodbye 我们使用 wrap 函数给 class 为 inner 的元素加上...class 为 new 的 div： $( ".inner" ).wrap( "" ); 结果为： 在 PHP 中也简单实现相应的版本： function wpjam_wrap($text, $wrap){ $pos = strpos($wrap, '></');...is_callable($wrap)){ return call_user_func_array($wrap, $text); } return $text; } 该功能已经整合到 WPJAM Basic 插件中，
前言 总是喜欢去尝试各种各样的主题，但寻找很久之后也没有找到一款适合自己的，总有一些地方不合自己的心意，于是萌生了制作子主题的想法，在创建了子主题之后才发现，在子主题的修改和过程中越发感觉子主题的并不是我想要的...，特别是在父主题更新之后，所以开始想着从头开始，自己制作一款主题吧。...在初步阅读了WordPress主题制作相关文档之后，我就开始了我的主题制作旅程，在这里，我将记录下我的制作过程，希望对后来者有所帮助。...申明 本次主题制作会参考各大主题的部分实现方法和样式设计（最终产出一款适合我自己的主题），本次制作的主题暂时不考虑引入前端框架，但会引入一些插件，因为插件的引入可能导致页面请求数增加，我会在主题选项中尽可能的提供配置开关来让您可以选择性的开启一些功能...注意：在 WordPress，page（页面）和 Page（静态页面）是两种不同的东西。
如何在linux中搭建WordPress个人博客： 1、安装apache 2、安装php、mysql、php-mysql、图形库gd 3、查看防火墙、SElinux状态 关闭防护服务 4、开启apache...服务 使用浏览器进行访问，服务正常 5、测试php功能 使用浏览器进行访问，成功 6、启动mysql 登陆mysql，成功 查看数据库 7、测试数据库连接功能 使用浏览器测试，连接成功 8、下载wordpress
props: { bgColor: { default: "none", }, // 背景色 waveAllHeight: { default: 160 }, // 波浪的整体高度...212, // canvas 高度 progress = $progress, // 波浪位置高度 d2 = waveWidth / waveCount, // 单个波浪的宽度
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
