，直播是寺庙的师傅，讲授佛法。佛教中请的最多的是：`阿弥陀佛`，互动时依然是这样，必须允许重复评论。
说到垃圾评论，不得不讲垃圾注册，是WordPress的两大毒瘤，下一篇文章要介绍下通过代码对用户名和邮箱进行处理，如何禁止垃圾注册。
---
# WordPress+Nuxt.js+Vue.js开发的前端node项目被停止的处理方案
**URL:** https://salongweb.com/wordpress-nuxt-js-vue-js-node-stopped.html
Slhao Pro主题前端上线后每天能收到宝塔的提示，说项目已经停止，找了很久没有发现问题。在查看node项目网站日志中的响应日志和错误日志时，发现大量的` /go?url=链接`请求，估计是这个问题导致node项目负载过高，从而导致node项目被停止。
## 解决方法
在node项目管理——配置文件中新增一条Nginx的规则，将所有带/go字样的链接都返回403，代码如下：
```
# 禁止/go链接的访问
location /go {
deny all;
}
```
重启Node项目，访问带/go字样的所有链接都将返回403，这样对前端服务就没有任何影响。
## 补充
以上解决方法在一段时间内不会出现服务被停止的问题，时间久了还是有问题，最好是安装下服务器防火墙。防火墙默认设置基本能防止被攻击，再将一些经常访问特定链接（/go，/wp-admin）的IP加入黑名单，Slhao Pro主题前端到现在没有再出现服务被停止的情况。
---
# WordPress 使用 wp_set_password 重置用户密码
**URL:** https://salongweb.com/wordpress-wp_set_password.html
当 WordPress 管理员忘记密码或需要重置用户密码时，可以使用 `wp_set_password` 函数来实现。该函数将为指定用户设置新密码，该密码将经过哈希处理并保存在数据库中。
以下是使用 `wp_set_password` 函数重置 WordPress 用户密码的步骤：
1、进入服务器/宝塔网站文件管理中，找到当前活动的主题目录并打开 `functions.php` 文件
2、在 `functions.php` 文件中添加以下代码：
```
// 重置密码
function reset_user_password() {
$user_id = 1; // 更改为需要重置密码的用户的 ID
$new_password = 'newpassword'; // 更改为新的密码
wp_set_password($new_password, $user_id);
}
// 添加一个名为 reset_password 的动作钩子
add_action('init', 'reset_user_password');
```
3、将 `$user_id` 和 `$new_password` 变量的值更改为需要重置密码的用户的 ID 和新的密码。
4、保存 `functions.php` 文件并刷新 WordPress 管理页面。
5、刷新页面可即可删除步骤2中的代码，再次保存
现在，当您刷新 WordPress 管理页面时，`reset_user_password` 函数将会被调用，并为指定的用户设置新密码。
注意：在使用此方法之前，请务必备份您的网站，以防止不可预测的错误发生。此外，确保删除或注释掉添加的代码，以免在不需要时再次运行该函数。
---
# WordPress 出现 Allowed memory size of 134217728 bytes exhausted 错误如何修复
**URL:** https://salongweb.com/wordpress-allowed-memory-size-bytes-exhausted.html
当出现 “Allowed memory size of 134217728 bytes exhausted” 错误时，意味着 PHP 内存限制被耗尽。这通常发生在处理大型文件、大量数据或执行复杂操作时。
以下是修复该错误的几种方法：
1. 增加 PHP 内存限制
- 可以通过在 WordPress 根目录下的 wp-config.php 文件中添加以下行来增加 PHP 内存限制：
```
define('WP_MEMORY_LIMIT', '256M');
```
- 在宝塔面板——软件商店中找到网站使用的 PHP，将设置中的内容加大，如下图：
请注意，如果您的主机没有足够的可用内存，这种方法可能不起作用。
2. 优化代码
检查您的代码是否存在循环或递归等问题，这可能导致内存泄漏。您还可以尝试使用 PHP 内置函数来优化代码，例如 `unset()` 函数，它可以释放变量占用的内存。
3. 禁用插件或主题
某些插件或主题可能会使用大量内存，尝试禁用它们以确定是否解决问题。
4. 增加服务器内存
如果您的服务器有足够的内存，您可以尝试增加内存限制。您可以通过联系您的主机提供商来获得帮助。
5. 使用缓存插件
使用缓存插件可以减少服务器负载和内存使用量，并提高网站性能。推荐使用 WP Super Cache 或 W3 Total Cache 等缓存插件。
总之，当出现 “Allowed memory size of 134217728 bytes exhausted” 错误时，您应该首先尝试增加 PHP 内存限制。如果这不起作用，请考虑优化代码、禁用插件或主题，或增加服务器内存。
---
# WordPress 获取用户 ID 的8种方法
**URL:** https://salongweb.com/wordpress-get-user-id.html
在 WordPress 主题的开发过程中，获取用户 ID 的频率是很高的，可在 WordPress 中查看用户信息，也可以通过代码直接获取。
### 一、在 **WordPress 后台区域找到用户 ID**
这是一个非常简单的方法，需要有后台管理权限的用户才能查看。
1、登录 WordPress 后台
2、转到用户——所有用户列表页面
3、编辑用户
4、在当前页面链接中的 user\_id= 后面的数字即是用户的 ID
### 二、获取当前用户 ID（也可以获取用户名，Email 等）
获取当前登录用户ID的最佳方法是使用`get_current_user_id()`函数。
```
$current_user_id = get_current_user_id();
```
与wp\_get\_current\_user()方法相同的函数：
```
$current_user = wp_get_current_user();
$current_user_id = $current_user->ID;
```
`get_current_user_id()`的用法对我来说似乎更简单，但你可以使用任何你想要的方式，因为在代码中它们是相同的。
获取用户其它信息：
```
$user_email = $current_user->user_email;
$first_name = $current_user->first_name;
$display_name = $current_user->display_name;
```
### 三、通过 Email 获取用户 ID
可使用 `get_user_by()` 函数获取用户信息
```
$the_user = get_user_by('email', 'admin@salongweb.com');
$the_user_id = $the_user->ID;
```
反过来，我们也可以通过 ID 获取用户的 Email
```
$the_user = get_user_by( 'id', 1 ); // 用户 ID 为1
echo $the_user->user_email;
```
### 四、通过用户名获取用户 ID
同样是使用 `get_user_by()` 函数获取用户信息
```
$the_user = get_user_by('login', 'salongweb');
$the_user_id = $the_user->ID;
```
反过来，我们也可以通过 ID 获取用户的用户名，和通过 ID 获取用户 Email 是一样的。
五、通过姓名名获取用户 ID
打印所有姓为“sa”的用户的 ID：
```
global $wpdb;
$users = $wpdb->get_results("SELECT user_id FROM $wpdb->usermeta WHERE meta_key = 'first_name' AND meta_value = 'sa'");
if ($users) {
foreach ($users as $user) {
echo $user->user_id;
}
} else {
echo '没有该姓的用户。';
}
```
打印所有名字为“longlong”的用户的 ID：
```
global $wpdb;
$users = $wpdb->get_results("SELECT user_id FROM $wpdb->usermeta WHERE meta_key = 'first_name' AND meta_value = 'longlong'");
if ($users) {
foreach ($users as $user) {
echo $user->user_id;
}
} else {
echo '没有该名字的用户。';
}
```
如果您想通过任何用户元值查找用户ID，那么上面的代码可以工作。只需将`meta_key`和`meta_value`替换为您需要的。
当然，在get\_user\_meta( $id, $meta\_key, true)函数的帮助下，你也可以得到用户的姓和名以及任何meta。
### 六、通过文章 ID 获取作者 ID
在这种情况下，您可以从`WP_Post`对象获取用户ID。
```
$my_post = get_post( $post_id ); // 获取文章 ID 获取文章数据
echo $my_post->post_author; // 打印出作者 ID
```
也可以使用 `get_post_field()` 函数来直接获取作者的 ID
```
$author_id = get_post_field('post_author', $post_id);
```
### 七、从 WooCommerce 的订单中获取客户 ID
有两种不同的方法，第一种是通过订单元数据获取客户 ID：
```
$customer_id = get_post_meta( 123, '_customer_user', true); // 123 是订单 ID
```
第二个可通过`WC_Order`类来获取，WooCommerce 版本需3.0 +。
```
$order = wc_get_order( 123 ); // 123 是订单 ID
$customer_id = $order->get_customer_id(); // 或者 $order->get_user_id() 是一样的
```
### 八、将用户 ID 添加到 WordPress 用户列表的列中
这对于管理员来说，查看用户 ID 是相当的方便快捷，可将如下代码添加到 WordPress 主题函数文件 functions.php 中
```
/*
* 添加用户列表栏目
*/
function salong_user_id_column($columns)
{
$columns['user_id'] = 'ID';
return $columns;
}
add_filter('manage_users_columns', 'salong_user_id_column');
/*
* 栏目内容
*/
function salong_user_id_column_content($value, $column_name, $user_id)
{
if ('user_id' == $column_name)
return $user_id;
return $value;
}
add_action('manage_users_custom_column', 'salong_user_id_column_content', 10, 3);
```
---
# WordPress 如何根据文章类型向编辑器添加 CSS
**URL:** https://salongweb.com/wordpress-editor-add-css.html
在 WordPress 中，我们可以通过向主题中添加 CSS 文件来为页面和文章添加样式。但是，如果您希望根据文章类型添加自定义样式，该怎么办呢？在本文中，我们将介绍如何在文章编辑器中添加自定义 CSS 样式，以根据文章类型为区块编辑器添加样式。
步骤 1：创建一个新的 CSS 文件
首先，我们需要创建一个新的 CSS 文件，其中包含我们想要为区块编辑器添加的样式。将该文件命名为 custom-editor-style.css，并将其放置在您的主题文件夹中的任何位置。
步骤 2：将 CSS 文件链接到主题
接下来，我们需要将 CSS 文件链接到我们的主题中。在您的主题的 functions.php 文件中添加以下代码：
```
function salong_add_editor_style() {
global $post;
if( 'post' === $post->post_type ) {
add_editor_style( 'path/to/custom-editor-style.css' );
}
}
add_action( 'admin_init', 'salong_add_editor_style' );
```
请将上面的代码中的“post\_type\_name”替换为您的文章类型的名称。此代码将确保只在编辑该文章类型时添加自定义样式。
步骤 3：为您的文章类型添加样式
最后，在 custom-editor-style.css 文件中添加您想要为您的文章类型添加的样式。您可以使用选择器针对您的文章类型添加样式，例如：
```
.post-type-name .wp-block {
/* 自定义样式 */
}
```
现在，当您编辑您的文章类型时，将会应用您为该文章类型添加的自定义样式。
---
# WordPress 主题 Slearn Pro 课程插件之编辑课程选项
**URL:** https://salongweb.com/wordpress-slearn-pro-course-options.html
课程插件功能已经能满足绝大多数在线教育培训课程网站的需求，选项功能也众多，「即将推出」功能还在开发中。
           
---
# WordPress 主题 Slearn Pro 课程插件之编辑文章时创建和选择课时
**URL:** https://salongweb.com/wordpress-slearn-pro-edit-course-create-select-lesson.html
在WordPress + Vue.js 主题 Slearn Pro 发布2.0重写版本后，用户反馈编辑课程选择课时时不够友好，课时很多时选择就相当困难，被选择的课时在后期选择中还会是出现，为了这个功能模块特意花了几天，最终呈现效果完美，体验极佳的课时选择面板。
### 1、默认是没有任何内容
### 2、创建章节后
章节标题可再次修改，设置章节描述，创建一个新的课时或者选择已经添加好的课时。
### 3、选择课时面板
创建新课时或选择已经的课时都将和当前课程进行关联，其它课程则不能选择已选择的课时。
已选择好的课时，添加后将与当前课程进行关联。
### 4、选择后的结果
章节可开关，排序和删除，删除，删除章节时，其中的全部课时也将与当前课程取消关联。
课时可排序，预览开关切换，编辑和删除，修改标题回车后也可以修改课时标题。
### 5、最终设置好的课时
「JSON 数据」可单独保存起来，这样不管当前课程目录被怎么修改，后期都可复制数据到「JSON 数据」中直接恢复。
---
# WordPress 主题 Slearn Pro 产品插件之属性设置
**URL:** https://salongweb.com/wordpress-slearn-pro-product-attribute-options.html
产品属性可在后台「产品——产品选项——属性」中单独设置（也可在编辑产品时再次添加），有三种类型：文本、颜色和图片，在前台也是以这三种方式来显示。
编辑产品时可为已添加的属性添加属性值，也可以添加自定义属性，这些属性不会保存到主题选项中。
---
# WordPress 主题 MNews Pro 5.2 投稿新增可插入音视频功能
**URL:** https://salongweb.com/wordpress-mnews-pro-contribute-insert-audio-video.html
MNews Pro 主题已经更新到5.2版本，功能已经很完善，且实用，在文章投稿编辑器有用户提出不能上传视频或者插入视频简码不方便的问题。
这次更新，完全解决了图片，音视频上传及音视频简码插入文章不方便的问题，图片，音视频上传时都会根据需求进行获取，比如上传缩略图或者上传图片到编辑器中，我的媒体库则用户上传的图片，如果是添加音视频则获取用户上传的音视频，同时音视频在鼠标移入时会自动播放，移出后暂停，这样方便查找。
视频上传可选择 HTML5视频或内嵌视频（iframe嵌入的代码），而 HTML5视频又需要视频源地址和封面图片，在插入视频面板都可以从我的媒体库中独立上传插入到选项中。
投稿编辑器中新增的音视频上传功能，让投稿更加方便有效，让我们来预览下效果。
---
# WordPress 主题获得评论深度的2种方法
**URL:** https://salongweb.com/wordpress-get-comment-depth.html
## 一、通过使用全局变量获取评论深度
我相信您应该知道`wp_list_comments()`函数，它可以将评论打印在网站页面上。
为什么这个功能很酷?
1、这个函数运行一个评论循环，并设置一个全局变量，该变量包含循环中当前评论的深度级别。
2、`wp_list_comments()`允许您通过使用回调参数指定自己的评论模板。
```
wp_list_comments('callback=my_custom_comment_template');
```
在`my_custom_comment_template()`中，将设置全局变量`$comment_depth`和`$GLOBALS['comment_depth']`。
## 二、通过评论ID获取评论深度
如果全局变量`$comment_depth`不可用，我怎么得到一个评论深度级别呢?
我想这个简单的函数可以帮助你:
```
function salong_get_comment_depth($my_comment_id) {
$depth_level=0;
while($my_comment_id > 0) {
$my_comment=get_comment($my_comment_id);
$my_comment_id=$my_comment->comment_parent;
$depth_level++;
}
return $depth_level;
}
```
然后:
```
echo salong_get_comment_depth(784); // 打印出评论ID 为784的深度级别
```
---
# 在 WordPress 主题中编辑器 WooCommerce 产品选项卡-tabs
**URL:** https://salongweb.com/wordpress-woocommerce-change-product-tabs.html
WooCommerce 产品页面默认有3个选项卡：描述，其它信息和评论，对于很多 WordPress 主题或许不太适合，需要修改或者添加选项卡。WooCommerce 官方文档已经给出了详细的文档：
需要将代码添加到主题`functions.php`文件。
**1、删除选项卡**
```
/**
* 删除产品数据选项卡
*/
add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );
function woo_remove_product_tabs( $tabs ) {
unset( $tabs['description'] ); // 删除描述
unset( $tabs['reviews'] ); // 删除评论
unset( $tabs['additional_information'] ); // 删除其它信息
return $tabs;
}
```
**2、重命名选项卡**
```
/**
* 重命名选项卡
*/
add_filter( 'woocommerce_product_tabs', 'woo_rename_tabs', 98 );
function woo_rename_tabs( $tabs ) {
$tabs['description']['title'] = __( '产品详情' ); // 重命名描述
$tabs['reviews']['title'] = __( '产品评论' ); // 签名评论
$tabs['additional_information']['title'] = __( '产品参数' ); // 签名其它信息
return $tabs;
}
```
**3、更改选项卡顺序**
```
/**
* 更改选项卡顺序
*/
add_filter( 'woocommerce_product_tabs', 'woo_reorder_tabs', 98 );
function woo_reorder_tabs( $tabs ) {
$tabs['reviews']['priority'] = 5; // 评论第一
$tabs['description']['priority'] = 10; // 描述第二
$tabs['additional_information']['priority'] = 15; // 其它信息第三
return $tabs;
}
```
**4、自定义选项卡内容**
```
/**
* 自定义选项卡内容
*/
add_filter( 'woocommerce_product_tabs', 'woo_custom_description_tab', 98 );
function woo_custom_description_tab( $tabs ) {
$tabs['description']['callback'] = 'woo_custom_description_tab_content'; // 自定义描述回调
return $tabs;
}
/**
* 选项卡内容
*/
function woo_custom_description_tab_content() {
echo 'Custom Description
';
echo 'Here\'s a custom description
';
}
```
**5、添加自定义选项卡**
```
/**
* 添加一个自定义选项卡
*/
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {
// 添加一个新选项卡
$tabs['test_tab'] = array(
'title' => __( '名称', 'woocommerce' ),
'priority' => 50,
'callback' => 'woo_new_product_tab_content'
);
return $tabs;
}
/**
* 选项卡内容
*/
function woo_new_product_tab_content() {
// The new tab content
echo 'New Product Tab
';
echo 'Here\'s your new product tab.
';
}
```
**6、附加信息选项卡**
“附加信息”选项卡仅在产品设置了重量、尺寸或属性，并选中“在产品页面上可见”时才会显示。如果在产品没有重量、尺寸或属性时，尝试对该选项卡更改，将出现类似于以下的错误消息：
```
Warning: call_user_func() expects parameter 1 to be a valid callback, no array or string given in /mysite/wp-content/plugins/woocommerce/templates/single-product/tabs/tabs.php on line 35
```
在这种情况下，必须使用 WooCommerce 条件判断：
```
has_attributes()
has_dimensions()
has_weight()
```
比如此段代码：
```
/**
* 检查产品是否有属性、尺寸或重量
*/
add_filter( 'woocommerce_product_tabs', 'woo_rename_tabs', 98 );
function woo_rename_tabs( $tabs ) {
global $product;
if( $product->has_attributes() || $product->has_dimensions() || $product->has_weight() ) {
$tabs['additional_information']['title'] = __( '产品参数' ); // 重命名附加信息选项卡
}
return $tabs;
}
```
有了这些代码，稍作修改，定制选项卡易如反掌。
---
# WordPress 主题禁用古滕堡编辑器和小工具
**URL:** https://salongweb.com/disable-block-editor.html
WordPress 4.9.8 版本就发布了古滕堡编辑器，很好用，添加文章也比经典编辑器方便很多。在 5.8 版本后又在小工具中增加了古滕堡编辑器，功能差不多，对于 WordPress 主题开发者来说，古滕堡小工具的前台样式不太好控制，且自定义的小工具也需要将样式连接到外观——小工具中，不然自定义小工具预览就有问题。
对于很多不喜欢使用古滕堡编辑器的朋友，我们可以将如何代码添加到 functions.php 函数文件中，来使用经典编辑器。
```
// 禁用古滕堡编辑器
add_filter('use_block_editor_for_post', '__return_false');
// 禁用古滕堡小工具编辑器
remove_theme_support('widgets-block-editor');
```
---
# 阿里云 ECS 扩容后扩展分区和文件系统_Linux系统盘（宝塔同步）
**URL:** https://salongweb.com/ecs-linux-baota.html
萨龙网络为用户网站托管的主机是阿里云 ECS，网站多了磁盘空间一直没有跟上，今天增加磁盘容量，并设置了下扩展分区和文件系统。
**1、创建快照**
登录阿里云后台——云服务器 ECS，再进入实例列表，点击需要扩容的实例上的「管理」，再进入「本实例云盘」，点击「创建快照」
**2、磁盘扩容**
还是在「本实例云盘」中，点击「更多——磁盘扩容」根据要求选择输入，支付即可。
注：可选择在线扩容，操作过程不需要重启实例。
**3、扩展分区和文件系统\_Linux系统盘**
查看阿里云提供的：
文档1：[https://help.aliyun.com/document\_detail/111738.html](https://help.aliyun.com/document_detail/111738.html)
文档2：[https://help.aliyun.com/document\_detail/113316.html](https://help.aliyun.com/document_detail/113316.html?spm=a2c4g.11186623.4.1.5af4fdc9krtzlH)
文档2更详细，且有视频教程，仔细查看文档，很简单的。
---
# MAMP PHP环境安装 pcntl 扩展学习 Workerman即时通讯框架
**URL:** https://salongweb.com/mamp-php-pcntl-workerman.html
Workerman是一款开源高性能异步PHP socket框架，在学习的过程中首先得PHP 环境的支持，在 macOS 下的 MAMP Pro 默认的 PHP 环境中并没有安装 pcntl 模块，需要安装该模块才能启动 Workerman。
### 一、什么是Workerman
Workerman是一款开源高性能异步PHP socket框架。支持高并发，超高稳定性，被广泛的用于手机app、移动通讯，微信小程序，手游服务端、网络游戏、PHP聊天室、硬件通讯、智能家居、车联网、物联网等领域的开发。 支持TCP长连接，支持Websocket、HTTP等协议，支持自定义协议。拥有异步Mysql、异步Redis、异步Http、MQTT物联网客户端、异步消息队列等众多高性能组件。
### 二、切换 PHP 版本为 MAMP 指定的
macOS 系统自带PHP环境，后为开发方便，安装了 MAMP Pro 软件，在终端运行`php -v`，可查看到 macOS 自带的 PHP 版本，切换 PHP 版本为 MAMP 指定的版本步骤如下：
**1、终端输入代码来编辑 .bash\_profile 文件，该文件可以不存在，就创建新文件**
```
sudo vim ~/.bash_profile
```
**2、把环境变量代码添加到 .bash\_profile 文件里**
```
export PATH="/Applications/MAMP/bin/php/php7.4.2/bin:$PATH"
```
注：注意 PHP 版本的路径和版本号
**3、执行文件，使起生效**
```
source .bash_profile
```
**4、检查是否生效（检验一）**
```
php -v
```
**5、环境变量指向地址（检验二）**
```
which PHP
```
### 三、安装 pcntl 模块
**1、使用`php -v`命令查看当前的PHP CLI的版本**
```
~# php -v
```
**2、根据版本下载PHP源代码**
PHP历史版本下载页面：，比如 PHP 版本为 7.4.2，则下载 php7.4.2.tar.gz。
**3、解压源码压缩包**
可使用命令：
```
~# tar -zxvf php7.4.2.tar.gz
```
也可以直接在目录下解压，替换
**4、进入源码中的ext/pcntl目录**
```
~# cd /Applications/MAMP/bin/php/php7.4.2/ext/pcntl
```
**5、运行 phpize 命令**
```
~# phpize
// 显示内容：
PHP Api Version: 20090626
Zend Module Api No: 20090626
Zend Extension Api No: 220090626
```
**6、运行 configure命令**
```
~# ./configure
// 显示内容：
checking for grep that handles long lines and -e... /bin/grep
checking for egrep... /bin/grep -E
...
```
如果下一步出现错误：
```
'php.h' file not found
```
需执行：
```
~# ./configure --with-php-config=/Applications/MAMP/bin/php/php7.4.2/bin/php-config --prefix=/Applications/MAMP/bin/php/php7.4.2/bin/php
```
**7、运行 make 命令**
```
~# make
// 显示内容：
/bin/bash /tmp/ph7.4.2/ext/pcntl/libtool --mode=compile cc ...
-I/usr/include/php7 -I/usr/include/php7/main -I/usr/include/php5/TSRM -I/usr/include/php7/Zend...
...
```
**8、运 行make install 命令**
```
~# make install
// 显示内容：
Installing shared extensions: /usr/lib/php7/20090626/
```
**9、配置`php.ini`文件**
通过运行 php –ini查找php.ini文件位置：`/Applications/MAMP/bin/php/php7.4.2/conf/php.ini`，不是 MAMP 面板上打开的 php.ini，然后在文件中添加`extension=pcntl.so`
```
extension=pcntl.so
```
说明： 此方法一般用来安装PHP自带的扩展，例如posix扩展和pcntl扩展。除了用phpize编译某个扩展，也可以重新编译整个PHP，在编译时用参数添加扩展，例如在源码根目录运行
```
~# ./configure --enable-pcntl --enable-posix ...
~# make && make install
```
### 四、启动 Workerman
环境准备好，进入 Workerman 根目录，在终端执行：
```
php start.php start
```
就可以启动 Workerman
---
# WordPress 主题感染恶意代码function _check_active_widgets
**URL:** https://salongweb.com/wordpress-function-malicious-code.html
萨龙龙开发主题这么久，第一次感染恶意代码，整个 WordPress 下的主题 functions.php 都被插入了一大段函数代码，百度一下也发现有其他朋友遇到类似的情况，万幸的是在本地使用，把所有被添加的代码删除，暂时没有发现什么异样。
感染恶意代码的原因是用户要求修改下主题，而这个主题不是本人开发的，也没有想到会有恶意代码，该主题是用户从 xxxx 购买，主题是否是他本人开发的不得而知，如果是本人开发不可能不知道这是恶意代码。
**一般插入恶意代码是为了插入恶意广告，但是也有直接获取admin权限，修改你的博客主题，甚至获取你的账号信息。如发现以后没有采取措施，留下的隐患是可大可小的。**
**恶意代码都是添加在 functions.php 文件的最后面，函数名为：**
`_check_active_widget`
`_get_all_widgetcont`
`stripos`
`strripos`
`scandir`
`_prepared_widget`
`__popular_posts`
### 处理方法：
1、备份你的主题；
2、将你**所有主题**的function.php中的被插入的那些函数代码删除。
### 检查主题是否已清除该“代码病毒”
1、在你本地搭建php环境（如已有，跳过）；
2、重新在**wordpress官方网站**下载最新版的wordpress安装程序，然后重新安装一个全新的wordpress；一定是要重新安装过全新的wordpress！
3、将你已**清除干净的wordpress主题**放到主题wp-content\\themes文件夹下，启用该主题；然后进行一下发布文章、浏览页面等基本操作；
4、检查该主题的function.php文件是否被感染；
5、切换回默认主题，进行一下发布文章、浏览页面等基本操作；然后检查默认主题的function.php文件是否被感染；
如均无被感染，一般来说，该恶意代码已经被清除了。
### 提醒
1、如发现你的主题有感染恶意代码，最好检查你所有的主题，包括已经安装的、已经备份的以及在你电脑本地所以有可能被感染的主题！以免下一次将已感染的主题上传安装而再次中毒。
2、在网上下载的主题或者是购买的主题，安装前最好都能先检查一下主题的function.php是否安全。
部分内容来源：http://blog.aizhet.com/wordpress/1237.html
---
# WooCommerce 3 更新后特色产品的获取方法
**URL:** https://salongweb.com/woocommerce-3-feature-product.html
WooCommerce 已经是 WordPress 平台最好最强大的在线商城插件，已经被 WordPress 收购，更新速度比较频繁，功能更加完善。
在频繁的更新后，一些常用的函数都在优化，一些字段也有所改变。Taji 主题在首页有一个模块『编辑推荐』，获取的是特色产品，在之前我们是可以通过以下代码就可以获取特色产品：
1. $args = array(
2. ‘post\_type’ => ‘product’,
3. ‘posts\_per\_page’ => 5,
4. ‘meta\_key’ => ‘\_featured’,
5. ‘meta\_value’ => ‘yes’
6. );
在 WooCommerce 3之后（具体哪个版本不确定），以上代码是获取不了特色产品，百度、谷歌都搜遍了也没有解决，WooCommerce 插件有提供一些简码，其中就有特色产品，所以查看了下简码才得到决定。
所以可以通过以下代码来获取 WooCommerce 的特色产品：
1. $args = array(
2. ‘post\_type’ => ‘product’,
3. ‘posts\_per\_page’ => 5,
4. ‘tax\_query’ => array(
5. array(
6. ‘taxonomy’ => ‘product\_visibility’,
7. ‘terms’ => ‘featured’,
8. ‘field’ => ‘name’,
9. ‘operator’ => ‘IN’,
10. ‘include\_children’ => false
11. )
12. )
13. );
以上只是解决方案，获取文件是使用`WP_Query`函数。
---
# jQuery 显示与隐藏更多内容插件 readmore.js
**URL:** https://salongweb.com/readmore-js.html
开发一个 WordPress 文章筛选功能时，因为选项较多，默认只显示一行，可通过更多与关闭按钮来切换内容，使用到强大实用且轻巧的 jQuery readmore.js插件，可显示与隐藏更多内容，自动添加“更多”和“关闭”链接，这些都是可以自定义。
readmore.js使用非常简单，无需复杂的格式或编码的类名，只需调用.readmore()包含文本块的元素和readmore.js即可完成剩下的工作。
注意：Readmore.js与jquery版本大于1.7.0，浏览器版本尽量使用更高的，低版本的也支持，但是体验效果不好。
## 一、使用方法
1、添加到网站中
1. <script src=“../js/readmore.min.js”></script>
2、使用
1. $(‘article’).readmore();
就是这么简单。你可以改变动画的速度，崩溃块的高度，以及打开和关闭的元素。
1. $(‘article’).readmore({
2. speed: 75,
3. lessLink: ‘<a href=“#”>Read less</a>’
4. });
## 二、选项
速度：100（单位为毫秒）
maxHeight：200 （像素）
heightMargin：16（以像素为单位，以避免倒塌是比仅稍大块了maxHeight）
moreLink：'<a HREF=”#”>阅读更多</ a>’
lessLink：'<a HREF=”#”>关闭</ a>的“
embedCSS：true（需插入CSS的动态，将其设置为假，如果你有一个样式表需要的CSS）
sectionCSS：’display: block; width: 100%;’（设置块的造型，忽略，如果embedCSS是假的）
startOpen：false（不要立即截断，开始在全开位置）
expandedClass：’readmore-js-expanded’（类添加扩展模块）
collapsedClass：’readmore-js-collapsed“（类加入到折叠块）
beforeToggle：function（）{} （称为或多或少链接被点击后，但之前的块被折叠或展开。）
afterToggle：function（）{} （称为后，该块被折叠或展开）
如果该元素具有最大高度 CSS属性，Readmore.js将使用该值，而不是maxHeight选项。
更多内容及英文原文请点击：
---
# WordPress 最简便的边栏调用方法与提示
**URL:** https://salongweb.com/wordpress-sidebar.html
WordPress 主题文章类型较多，想实现不同的文章类型页面调用不同的边栏，一般的方法是将代码写在主题根目录下的 sidebar.php 文件中，通过对页面的判断来调用不同的代码，这样会产生更多的代码，并且页面种类繁多判断也很麻烦，所以今天萨龙龙来介绍一种相对简便的方法。
## 添加边栏
一般添加边栏的代码为以下代码，添加多个边栏可复制下数组，将以下代码添加到主题函数 functions.php 文件中即可。
1. function truethemes\_widgets\_init() {
2. register\_sidebar(
3. array(
4. ‘name’ => \_\_(‘首页’,’salong’),
5. ‘id’ => ‘sidebar-1’,
6. ‘description’ => \_\_(‘这个边栏显示在最新文章边栏’,’salong’),
7. ‘before\_widget’ => ‘<section id=“%1$s” class=“sidebar\_widget %2$s”>’,
8. ‘after\_widget’ => ‘</section>’,
9. ‘before\_title’ => ‘<div class=“sidebar\_title”><h3>’,
10. ‘after\_title’ => ‘</h3></div>’,
11. )
12. );
13. }
14. add\_action( ‘widgets\_init’, ‘truethemes\_widgets\_init’ );
## 获取边栏的简便代码
1. function salong\_sidebar($id){
2. global $wp\_registered\_sidebars,$salong;
3. $index = “sidebar-“.$id; //获取边栏 ID
4. $sidebar\_name = $wp\_registered\_sidebars\[$index\]\[‘name’\];//获取边栏名称
5. echo ‘<aside class=“sidebar”>’;
6. //判断边栏中是否有小工具，有就输入边栏，没有就输入提示添加小工具。
7. if ( is\_active\_sidebar($index) ) {
8. if(is\_single() && $salong\[ ‘switch\_author’\]) { get\_template\_part( ‘includes/widgets/widget’, ‘author’); }
9. dynamic\_sidebar($sidebar\_name);
10. echo ‘<article id=“move” class=“move”>’;
11. dynamic\_sidebar(\_\_( ‘移动’, ‘salong’));
12. echo ‘</article>’;
13. }else{
14. echo ‘<article class=“sidebar\_widget widget\_salong\_init”>’;
15. echo ‘<div class=“sidebar\_title”>’;
16. echo ‘<h3>’;
17. echo \_\_(‘温馨提示’,’salong’);
18. echo ‘</h3>’;
19. echo ‘</div>’;
20. echo ‘<div class=“init”><a href=“‘.get\_home\_url().’/wp-admin/widgets.php”>’;
21. echo sprintf(\_\_(‘请到后台外观——小工具中添加小工具到<b>%s</b>边栏中。’,’salong’),$sidebar\_name);
22. echo ‘</a></div>’;
23. echo ‘</article>’;
24. }
25. echo ‘</aside>’;
26. }
以上代码同样添加到主题函数 functions.php 文件中，添加边栏时也为边栏添加了一个『sidebar-1』这样的 ID，我们可以通过 ID 来获取边栏的名称，以及判断当前边栏是否有添加小工具，从而来提示用户添加小工具到边栏中。
## 调用边栏
1. <?php salong\_sidebar(1); ?>
其中的『1』为 ID『sidebar-1』数值，想调用哪个边栏修改其中的数值就 OK，是不是更加简便，都不用对页面进行判断。
---
# 禁用 WordPress 裁剪功能包括自动生成的 768 像素图片
**URL:** https://salongweb.com/wordpress-unset-thumbnail.html
WordPress 媒体库是很强大、管理媒体相当方便，如果媒体多就给数据库增加了压力，而且很多媒体是不需要上传到媒体库，上传的图片会增加很多无用被裁剪后的图片，本文就将介绍如何彻底禁用这个裁剪的功能。
### 一、对于单个站点
登录网站后台，再输入如下地址：
http://域名/wp-admin/options.php
就将进入了WordPress的全部设置页面，这个是WordPress默认隐藏的功能。
然后在浏览器中通过Ctrl+F搜索medium\_large\_size\_w，找到如下位置将768修改为0保存设置即可：
### 二、对于多站点
多站点的管理网络中的个人站点设置中 WordPress 已经提供了所有的设置选项，鼠标依次放在『我的站点——管理网络——站点』，进入站点列表中，点击需要修改缩略图参数的站点上的『编辑』，如下图：
进入到编辑站点页面，再点击『设置』进入此站点的设置选项中
然后在浏览器中通过Ctrl+F搜索Medium Large Size W（注意和单个站点的选项名称不一样），找到如下位置将768修改为0保存设置即可
以上两种设置说麻烦也不麻烦，萨龙网络开发了一些 WordPress 主题，对于很多用户来说，这样设置就是麻烦，所以我们就直接禁用 WP的裁剪功能。
三、彻底禁用 WP 裁剪
直接上代码：
1. //禁用 WordPress 4.4+ 的响应式图片功能及缩略图裁剪的所有功能
2. function salong\_disable\_wp\_tailoring( $sizes ){
3. unset( $sizes\[ ‘thumbnail’ \]);//缩略图大小
4. unset( $sizes\[ ‘medium’ \]);//中等大小
5. unset( $sizes\[ ‘medium\_large’ \] );//这张就是自动生成的768图片选项
6. unset( $sizes\[ ‘large’ \]);//大尺寸
7. unset( $sizes\[ ‘full’ \] );//全尺寸
8. return $sizes;
9. }
10. add\_filter( ‘intermediate\_image\_sizes\_advanced’, ‘salong\_disable\_wp\_tailoring’ );
将以上代码添加到主题 functions.php 文件就可以，需要裁剪什么尺寸的缩略图就注释相应的代码。
---
# 通过 WordPress 多语言插件 WPML 的语言配置文件 wpml-config.xml 来支持 Polylang 翻译主题选项字段
**URL:** https://salongweb.com/wordpress-polylang-theme-options.html
网上已经有很多介绍 WordPress 多语言的插件了，比如 Polylang 和 WPML 等强大的多语言插件，但是只是介绍，很快都是能掌握怎么使用。今天我们要说的是如何使用 Polylang 插件来实现主题选项中字段的翻译。
WordPress多语言插件WPML在Polylang之前就已经创建了，因此对于一些插件和主题集成很好。WPML语言配置文件 wpml-config.xml已经可以翻译主题选项中的字段，Polylang 也支持 wpml-config.xml 文件的配置，而且 Polylang 的工作效率几本可以完成很多主题或者插件的翻译工作，所以我们创建一个 wpml-config.xml，添加以下代码到文件中：
1. <wpml-config>
2. <custom-fields>
3. <custom-field action=“copy”>quantity</custom-field>
4. <custom-field action=“translate”>custom-title</custom-field>
5. </custom-fields>
6. <custom-types>
7. <custom-type translate=“1”>book</custom-type>
8. <custom-type translate=“1”>DVD</custom-type>
9. </custom-types>
10. <taxonomies>
11. <taxonomy translate=“1”>genre</taxonomy>
12. </taxonomies>
13. <admin-texts>
14. <!–my\_themes\_options 为主题选项的全局变量名–>
15. <key name=“my\_themes\_options”>
16. <!–其中其它名称则是选项的 ID–>
17. <key name=“option\_name\_1” />
18. <key name=“option\_name\_2” />
19. <key name=“options\_group\_1”>
20. <key name=“sub\_option\_name\_11” />
21. <key name=“sub\_option\_name\_12” />
22. </key>
23. </key>
24. <key name=“simple\_string\_option” />
25. </admin-texts>
26. </wpml-config>
并且配置支持父级关系选项，比如萨龙网络的主题幻灯片，一个幻灯片选项中有多个子幻灯片，这时就可以使用嵌套来翻译字段。
将wpml-config.xml文件放在主题或者 Polylang 插件的根目录，再前台插件后台『语言——字符串翻译』中进行翻译即可，如下图：
---
# 移除 WooCommerce 商城插件中我的帐户相关页面
**URL:** https://salongweb.com/woocommerce-remove-my-account-page.html
WooCommerce 插件默认为我的帐户页面提供了：仪表盘、订单、下载、地址、帐户详情几个页面，以及一个退出登录的按钮，如果出售的是实物或者没有下载项时，下载则没有用途，或者是虚拟产品时，地址也没有用途，所以我们可以使用代码隐藏这些不需要的页面。
1. //移除我的账户相关页面
2.
3. add\_filter ( ‘woocommerce\_account\_menu\_items’, ‘salong\_remove\_my\_account\_links’ );
4. function salong\_remove\_my\_account\_links( $menu\_links ){
5. unset( $menu\_links\[‘edit-address’\] ); // 地址
6. //unset( $menu\_links\[‘dashboard’\] ); // 仪表盘
7. //unset( $menu\_links\[‘payment-methods’\] ); // 支付方式
8. //unset( $menu\_links\[‘orders’\] ); // 订单
9. //unset( $menu\_links\[‘downloads’\] ); // 下载
10. //unset( $menu\_links\[‘edit-account’\] ); // 帐户详情
11. //unset( $menu\_links\[‘customer-logout’\] ); // 登出
12.
13. return $menu\_links;
14.
15. }
将以上代码添加到主题 functions.php 文件中即可，需要显示的页面将其注释就可以。
---
# WordPress 插入页面函数 wp_insert_post
**URL:** https://salongweb.com/wordpress-wp-insert-post.html
萨龙网络已经开发了很多 WordPress 主题，LensNews 主题要创建的页面较多，所以导致很多用户来咨询如何设置用户中心，在最新上线的 MNews 主题中就使用了 wp\_insert\_post 函数来自动创建主题要使用到的页面，这样大大减少了主题配置工作，也给萨龙龙节约了不少时间。
函数描述
该函数可在数据库中插入文章及页面。如果`$postarr`参数有“ID”设置为一个值，那么文章将被更新。您可以通过设置“post\_date”和“post\_date\_gmt”值来手动设置发布日期也可以通过设置“comment\_status”值来关闭评论或打开注释。
使用方法
1. <?php wp\_insert\_post( $postarr, $wp\_error ); ?>
参数
$postarr
一个更新或插入文章的数组元素。
1. $postarr = array(
2. ‘ID’ => ‘0’, // (int)默认值为0，如果是0以外的值，则该 ID 的文章将被更新。
3. ‘post\_author’ => get\_current\_user\_id(), // (int)文章作者的ID，默认为当前登录的用户ID
4. ‘post\_date’ => ”, // 文章发布时间，默认为当前时间。
5. ‘post\_date\_gmt’ => ”, // (字符串)GMT格式的文章发布时间。默认值是$post\_date的值。
6. ‘post\_content’ => ”, // (字符串)文章内容，默认为空。
7. ‘post\_content\_filtered’ => ”, // (字符串)过滤后的内容，默认是空的。不要管这个，WordPress会自动处理。
8. ‘post\_title’ => ”, // (字符串)文章标题，默认为空.
9. ‘post\_excerpt’ => ”, // (字符串)文章摘要，默认为空。
10. ‘post\_status’ => ”, // (字符串)文章状态，默认为『draft』，即草稿。
11. ‘post\_type’ => ”, // (字符串)文章类型，默认为『post』.
12. ‘comment\_status’ => ”, // (字符串)是否可以接受评论。接受『打开』或『关闭』。默认值是『default\_comment\_status』选项的值。
13. ‘ping\_status’ => ”, // (字符串)是否可以接受ping命令。接受『打开』或『关闭』。默认值是『default\_ping\_status』选项的值。
14. ‘post\_password’ => ”, // (字符串)访问该文章的密码，默认是空的。
15. ‘post\_name’ => ”, // (字符串)文章的别名，当发布新的文章时会默认创建。
16. ‘to\_ping’ => ”, // (字符串)空格或回车将url的列表分隔成ping，默认是空的。
17. ‘pinged’ => ”, // (字符串)空格或回车分隔的url列表，默认是空的。
18. ‘post\_modified’ => ”, // (字符串)上次修改后的日期，默认是当前时间。
19. ‘post\_modified\_gmt’ => ”, // (字符串)最后在GMT时区修改后的日期，默认是当前时间。
20. ‘post\_parent’ => ”, // (int)文章的父级文章ID，默认为 0。
21. ‘menu\_order’ => ”, // (int)如果新文章为一个页面，可以设置一个页面序号，默认为 0。
22. ‘post\_mime\_type’ => ”, // (字符串)文章的mime类型，默认是空的。
23. ‘guid’ => ”, // (字符串)全局唯一ID，用于引用post，默认是空的。
24. ‘post\_category’ => ”, // (数组)文章分类目录，默认值为『default\_category』选项的值。
25. ‘tags\_input’ => ”, // (数组)文章标签，默认为空。
26. ‘tax\_input’ => ”, // (数组)文章的自定义分类法项目，默认为空。
27. ‘meta\_input’ => ”, // (数组)自定义字段，默认为空。
28. ‘page\_template’ => ”, // 页面模板文件的名称，如，template.php，默认为空。
29. );
$wp\_error
(可选)是否返回失败的WP\_Error。
默认值：false
`wp_insert_post`函数的基本使用：
1. // 文章投稿
2. $my\_post = array(
3. ‘post\_title’ => wp\_strip\_all\_tags( $\_POST\[‘post\_title’\] ),
4. ‘post\_content’ => $\_POST\[‘post\_content’\],
5. ‘post\_status’ => ‘publish’,
6. ‘post\_author’ => 1,
7. ‘post\_category’ => array( 8,39 )
8. );
9.
10. // 插入文章到数据库
11. wp\_insert\_post( $my\_post );
函数一般用在启用主题时创建一些默认页面，以及投稿中。
---
# 移除 WooCommerce 商城插件编辑产品中的产品数据相关 tabs
**URL:** https://salongweb.com/woocommerce-remove-product-tabs.html
WooCommerce 插件默认为编辑产品页面提供了产品数据 TABS，默认包括：常规、库存、配送、联锁产品、属性、高级等模块，功能强大而实用。对于很多定制的站点，有一些 TABS 是完全用不到，所以我们通过代码来隐藏这些模块。
1. /\*移除编辑产品页面中的 TABS \*/
2. function salong\_remove\_products\_tabs($tabs){
3. unset($tabs\[‘general’\]);//常规
4. unset($tabs\[‘inventory’\]);//库存
5. unset($tabs\[‘shipping’\]);//配送
6. unset($tabs\[‘linked\_product’\]);//联锁产品
7. unset($tabs\[‘attribute’\]);//属性
8. unset($tabs\[‘advanced’\]);//高级
9. return($tabs);
10. }
11. add\_filter(‘woocommerce\_product\_data\_tabs’, ‘salong\_remove\_products\_tabs’, 10, 1);
将以上代码添加到主题 functions.php 文件中，默认是隐藏所有 tabs，要显示 tabs 就注释相关代码即可。
---
# jQuery 强大丰富的响应式弹出框插件 fancyBox3
**URL:** https://salongweb.com/fancybox3.html
fancyBox3 是一款优秀的弹出框Jquery插件，之前使用过很多 LightBOX 弹窗插件，功能都很强大，fancyBox3 相对来说，不论是设计和功能上都更胜一筹，所以萨龙网络所有主题需要弹出框的都有添加 fancyBox3 插件。
### 依赖
jQuery 3+ 是首选，但 fancyBox3 同样适用于jQuery 1.9.1+ 和 jQuery 2+。
### 兼容性
fancyBox3 包含对触摸手势的支持，甚至支持缩放手势，非常适合移动和桌面浏览器。
fancyBox3 已经在以下浏览器/设备上测试过：
- Chrome
- Firefox
- IE10/11
- Edge
- iOS Safari
- Nexus 7 Chrome
### 设置
可以通过链接`.css`和`.js`文件安装 fancyBox3 到html文件中，确保加载了 jQuery 库。以下是一个基本的HTML模板用作示例：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset=“utf-8”>
5. <title>My page</title>
6.
7. <!– CSS –>
8. <link rel=“stylesheet” type=“text/css” href=“jquery.fancybox.min.css”>
9. </head>
10. <body>
11.
12. <!– Your HTML content goes here –>
13.
14. <!– JS –>
15. <script src=“//code.jquery.com/jquery-3.2.1.min.js”></script>
16. <script src=“jquery.fancybox.min.js”></script>
17. </body>
18. </html>
### 下载 fancyBox3
在 [GitHub](https://github.com/fancyapps/fancybox) 上下载最新的 fancyBox3。
或者直接链接到cdnjs上的fancybox文件 –
### 包安装
fancyBox3 也可在npm和Bower上使用。
1. \# NPM
2. npm install @fancyapps/fancybox –save
3.
4. \# Bower
5. bower install fancybox –save
### 注意
- 确保在 fancyBox3 JS文件之前添加了jQuery库
- 如果您的页面上已经有jQuery，则不应再次加载
- 不要同时包含 fancybox.js 和 fancybox.min.js 文件
- 当在浏览器上直接打开本地文件时，某些功能（ajax，iframe等）不起作用，代码必须在Web服务器上运行
### 如何使用
**用数据属性初始化**
使用fancyBox3 最基本的方法是通过添加 `data-fancybox`属性到元素中。这会自动绑定并启动fancyBox3 的点击事件。使用`href`或 `data-src`属性来指定内容的来源。例：
1. <a href=“image.jpg” data-fancybox data-caption=“Caption for single image”>
2. <img src=“thumbnail.jpg” alt=“” />
3. </a>
[在CodePen上查看演示](https://codepen.io/fancyapps/pen/ZxREZK?editors=1000)
如果有一组项目，则可使用`data-fancybox`为每个项目使用相同的属性值来创建一个画廊，每个组都应该有一个独特的价值。例：
1. <a href=“image\_1.jpg” data-fancybox=“gallery” data-caption=“Caption #1”>
2. <img src=“thumbnail\_1.jpg” alt=“” />
3. </a>
4.
5. <a href=“image\_2.jpg” data-fancybox=“gallery” data-caption=“Caption #2”>
6. <img src=“thumbnail\_2.jpg” alt=“” />
7. </a>
[在CodePen上查看演示](https://codepen.io/fancyapps/pen/aYKzoY?editors=1000)
如果选择此方法，将应用默认设置。有关如何通过更改默认值或使用属性来定制示例的信息，请参阅 [选项](https://fancyapps.com/fancybox/3/document/#options)一节 `data-options`
有时有多个链接指向相同的来源，并在画廊中创建重复。为了避免这种情况，只需使用 `data-trigger`属性中用于`data-fancybox`其他链接的相同值的属性即可。可选地，使用 `data-index`attribute来指定起始元素的索引：
1. <a data-trigger=“gallery” href=“javascript:;”>
2. <img src=“thumbnail\_1.jpg” alt=“” />
3. </a>
[在CodePen上查看演示](https://codepen.io/fancyapps/pen/oqPKYp?editors=1000)
### 使用JavaScript进行初始化
用jQuery选择器选择你的元素（你可以使用任何有效的选择器）并调用该 `fancybox`方法：
1. $(‘\[data-fancybox=“gallery”\]’).fancybox({
2. // Options will go here
3. });
[在CodePen上查看演示](https://codepen.io/fancyapps/pen/dmKPYa?editors=1010)
有时可能需要将fancybox绑定到动态添加的元素。使用 `selector`选项为现在或将来存在的元素附加点击事件侦听器。例：
1. $().fancybox({
2. selector : ‘\[data-fancybox=“gallery”\]’,
3. loop : true
4. });
[在CodePen上查看演示](https://codepen.io/fancyapps/pen/LdrENX?editors=1010)
请记住，所选项目不会自动分组到图库中。您可以通过对`data-fancybox`属性使用相同的值来创建一个或多个组 ，类似于上一节中的示例。
### 使用Javascript
您也可以编程方式打开并关闭fancybox。以下是一些示例，请访问 [API](https://fancyapps.com/fancybox/3/document/#api)部分获取更多信息和演示。
显示简单信息：
1. $.fancybox.open(‘<div class=“message”><h2>Hello!</h2><p>You are awesome!</p></div>’);
[在CodePen上查看演示](https://codepen.io/fancyapps/pen/xWzOxR?editors=1010)
显示iframed页面：
1. $s.fancybox.open({
2. src : ‘link-to-your-page.html’,
3. type : ‘iframe’,
4. opts : {
5. afterShow : function( instance, current ) {
6. console.info( ‘done!’ );
7. }
8. }
9. });
[在CodePen上查看演示](https://codepen.io/fancyapps/pen/xWzOxR?editors=1010)
fancybox尝试根据给定的URL自动检测内容的类型。如果无法检测到，则也可以使用`data-type`属性（或 `type`选项）手动设置类型 。例：
1. <a href=“images.php?id=123” data-type=“image” data-caption=“Caption”>
2. 显示图片
3. </a>
## 媒体类型
### 图片
使用fancybox的标准方式是使用链接到较大图像的许多缩略图：
1. <a href=“image.jpg” data-fancybox=“images” data-caption=“My caption”>
2. <img src=“thumbnail.jpg” alt=“” />
3. </a>
[在CodePen上查看演示](https://codepen.io/fancyapps/pen/VyLOJX?editors=1000)
默认情况下，fancybox会在显示图像之前完全预先载入图像。您可以选择立即显示图像。它将在接收数据时呈现并显示全尺寸图像。要做到这一点，一些属性是必要的：
- `data-width` – 图像的真实宽度
- `data-height` – 图像的真实高度
1. <a href=“image.jpg” data-fancybox=“images” data-width=“2048” data-height=“1365”>
2. <img src=“thumbnail.jpg” />
3. </a>
[在CodePen上查看演示](https://codepen.io/fancyapps/pen/aYKMBm?editors=1000)
您还可以使用这些 `width`和 `height`属性来控制图像的大小。这可以用来使图像在视网膜显示器上更清晰。例：
1. $(‘\[data-fancybox=“images”\]’).fancybox({
2. afterLoad : function(instance, current) {
3. var pixelRatio = window.devicePixelRatio || 1;
4.
5. if ( pixelRatio > 1.5 ) {
6. current.width = current.width / pixelRatio;
7. current.height = current.height / pixelRatio;
8. }
9. }
10. });
[在CodePen上查看演示](https://codepen.io/fancyapps/pen/pLKYez?editors=1010)
fancybox支持“srcset”，因此它可以根据视口宽度显示不同的图像。您可以使用它来改善移动用户的下载时间，并随着时间的推移节省带宽。例：
1. <a href=“medium.jpg” data-fancybox=“images” data-srcset=“large.jpg 1600w, medium.jpg 1200w, small.jpg 640w”>
2. <img src=“thumbnail.jpg” />
3. </a>
[在CodePen上查看演示](https://codepen.io/fancyapps/pen/ZxRPyb?editors=1000)
右键单击也可以保护图像免于下载。虽然这不能保护真正确定的用户，但它应该阻止绝大多数人将您的文件撕掉。可选地，将水印放在图像上。
1. $(‘\[data-fancybox\]’).fancybox({
2. protect: true
3. });
[在CodePen上查看演示](https://codepen.io/fancyapps/pen/wmXOqN)
### 视频
YouTube和Vimeo视频只需提供页面URL即可与fancyBox一起使用。直接链接到MP4视频或使用触发元素显示隐藏的`