如何使用流式排版实现WordPress自由缩放字体
block_core_image_render_lightbox ( $block_content, $block )
添加灯箱行为所需的指令和布局。
function block_core_image_render_lightbox( $block_content, $block ) {
/*
* If it's not possible that an IMG element exists then return the given
* block content as-is. It may be that there's no actual image in the block
* or it could be that another plugin already modified this HTML.
*/
if ( false === stripos( $block_content, '<img' ) ) {
return $block_content;
}
$processor = new WP_HTML_Tag_Processor( $block_content );
$aria_label = __( 'Enlarge image' );
/*
* If there's definitely no IMG element in the block then return the given
* block content as-is. There's nothing that this code can knowingly modify
* to add the lightbox behavior.
*/
if ( ! $processor->next_tag( 'img' ) ) {
return $block_content;
}
$alt_attribute = $processor->get_attribute( 'alt' );
// An empty alt attribute `alt=""` is valid for decorative images.
if ( is_string( $alt_attribute ) ) {
$alt_attribute = trim( $alt_attribute );
}
// It only makes sense to append the alt text to the button aria-label when the alt text is non-empty.
if ( $alt_attribute ) {
/* translators: %s: Image alt text. */
$aria_label = sprintf( __( 'Enlarge image: %s' ), $alt_attribute );
}
// Currently, we are only enabling the zoom animation.
$lightbox_animation = 'zoom';
// Note: We want to store the `src` in the context so we
// can set it dynamically when the lightbox is opened.
if ( isset( $block['attrs']['id'] ) ) {
$img_uploaded_src = wp_get_attachment_url( $block['attrs']['id'] );
$img_metadata = wp_get_attachment_metadata( $block['attrs']['id'] );
$img_width = $img_metadata['width'] ?? 'none';
$img_height = $img_metadata['height'] ?? 'none';
} else {
$img_uploaded_src = $processor->get_attribute( 'src' );
$img_width = 'none';
$img_height = 'none';
}
if ( isset( $block['attrs']['scale'] ) ) {
$scale_attr = $block['attrs']['scale'];
} else {
$scale_attr = false;
}
$w = new WP_HTML_Tag_Processor( $block_content );
$w->next_tag( 'figure' );
$w->add_class( 'wp-lightbox-container' );
$w->set_attribute( 'data-wp-interactive', true );
$w->set_attribute(
'data-wp-context',
sprintf(
'{ "core":
{ "image":
{ "imageLoaded": false,
"initialized": false,
"lightboxEnabled": false,
"hideAnimationEnabled": false,
"preloadInitialized": false,
"lightboxAnimation": "%s",
"imageUploadedSrc": "%s",
"imageCurrentSrc": "",
"targetWidth": "%s",
"targetHeight": "%s",
"scaleAttr": "%s",
"dialogLabel": "%s"
}
}
}',
$lightbox_animation,
$img_uploaded_src,
$img_width,
$img_height,
$scale_attr,
__( 'Enlarged image' )
)
);
$w->next_tag( 'img' );
$w->set_attribute( 'data-wp-init', 'effects.core.image.initOriginImage' );
$w->set_attribute( 'data-wp-on--load', 'actions.core.image.handleLoad' );
$w->set_attribute( 'data-wp-effect', 'effects.core.image.setButtonStyles' );
// We need to set an event callback on the `img` specifically
// because the `figure` element can also contain a caption, and
// we don't want to trigger the lightbox when the caption is clicked.
$w->set_attribute( 'data-wp-on--click', 'actions.core.image.showLightbox' );
$w->set_attribute( 'data-wp-effect--setStylesOnResize', 'effects.core.image.setStylesOnResize' );
$body_content = $w->get_updated_html();
// Add a button alongside image in the body content.
$img = null;
preg_match( '/<img[^>]+>/', $body_content, $img );
$button =
$img[0]
. '<button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="' . esc_attr( $aria_label ) . '"
data-wp-on--click="actions.core.image.showLightbox"
data-wp-style--right="context.core.image.imageButtonRight"
data-wp-style--top="context.core.image.imageButtonTop"
style="background: #000"
>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false">
<Path stroke="#FFFFFF" d="M6 4a2 2 0 0 0-2 2v3h1.5V6a.5.5 0 0 1 .5-.5h3V4H6Zm3 14.5H6a.5.5 0 0 1-.5-.5v-3H4v3a2 2 0 0 0 2 2h3v-1.5Zm6 1.5v-1.5h3a.5.5 0 0 0 .5-.5v-3H20v3a2 2 0 0 1-2 2h-3Zm3-16a2 2 0 0 1 2 2v3h-1.5V6a.5.5 0 0 0-.5-.5h-3V4h3Z" />
</svg>
</button>';
$body_content = preg_replace( '/<img[^>]+>/', $button, $body_content );
// We need both a responsive image and an enlarged image to animate
// the zoom seamlessly on slow internet connections; the responsive
// image is a copy of the one in the body, which animates immediately
// as the lightbox is opened, while the enlarged one is a full-sized
// version that will likely still be loading as the animation begins.
$m = new WP_HTML_Tag_Processor( $block_content );
$m->next_tag( 'figure' );
$m->add_class( 'responsive-image' );
$m->next_tag( 'img' );
// We want to set the 'src' attribute to an empty string in the responsive image
// because otherwise, as of this writing, the wp_filter_content_tags() function in
// WordPress will automatically add a 'srcset' attribute to the image, which will at
// times cause the incorrectly sized image to be loaded in the lightbox on Firefox.
// Because of this, we bind the 'src' attribute explicitly the current src to reliably
// use the exact same image as in the content when the lightbox is first opened while
// we wait for the larger image to load.
$m->set_attribute( 'src', '' );
$m->set_attribute( 'data-wp-bind--src', 'context.core.image.imageCurrentSrc' );
$m->set_attribute( 'data-wp-style--object-fit', 'selectors.core.image.lightboxObjectFit' );
$initial_image_content = $m->get_updated_html();
$q = new WP_HTML_Tag_Processor( $block_content );
$q->next_tag( 'figure' );
$q->add_class( 'enlarged-image' );
$q->next_tag( 'img' );
// We set the 'src' attribute to an empty string to prevent the browser from loading the image
// on initial page load, then bind the attribute to a selector that returns the full-sized image src when
// the lightbox is opened. We could use 'loading=lazy' in combination with the 'hidden' attribute to
// accomplish the same behavior, but that approach breaks progressive loading of the image in Safari
// and Chrome (see https://github.com/WordPress/gutenberg/pull/52765#issuecomment-1674008151). Until that
// is resolved, manually setting the 'src' seems to be the best solution to load the large image on demand.
$q->set_attribute( 'src', '' );
$q->set_attribute( 'data-wp-bind--src', 'selectors.core.image.enlargedImgSrc' );
$q->set_attribute( 'data-wp-style--object-fit', 'selectors.core.image.lightboxObjectFit' );
$enlarged_image_content = $q->get_updated_html();
// If the current theme does NOT have a `theme.json`, or the colors are not defined,
// we need to set the background color & close button color to some default values
// because we can't get them from the Global Styles.
$background_color = '#fff';
$close_button_color = '#000';
if ( wp_theme_has_theme_json() ) {
$global_styles_color = wp_get_global_styles( array( 'color' ) );
if ( ! empty( $global_styles_color['background'] ) ) {
$background_color = esc_attr( $global_styles_color['background'] );
}
if ( ! empty( $global_styles_color['text'] ) ) {
$close_button_color = esc_attr( $global_styles_color['text'] );
}
}
$close_button_icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="15" height="15" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg>';
$close_button_label = esc_attr__( 'Close' );
$lightbox_html = <<<HTML
<div data-wp-body="" class="wp-lightbox-overlay $lightbox_animation"
data-wp-bind--role="selectors.core.image.roleAttribute"
data-wp-bind--aria-label="selectors.core.image.dialogLabel"
data-wp-class--initialized="context.core.image.initialized"
data-wp-class--active="context.core.image.lightboxEnabled"
data-wp-class--hideAnimationEnabled="context.core.image.hideAnimationEnabled"
data-wp-bind--aria-modal="selectors.core.image.ariaModal"
data-wp-effect="effects.core.image.initLightbox"
data-wp-on--keydown="actions.core.image.handleKeydown"
data-wp-on--touchstart="actions.core.image.handleTouchStart"
data-wp-on--touchmove="actions.core.image.handleTouchMove"
data-wp-on--touchend="actions.core.image.handleTouchEnd"
data-wp-on--click="actions.core.image.hideLightbox"
tabindex="-1"
>
<button type="button" aria-label="$close_button_label" style="fill: $close_button_color" class="close-button" data-wp-on--click="actions.core.image.hideLightbox">
$close_button_icon
</button>
<div class="lightbox-image-container">$initial_image_content</div>
<div class="lightbox-image-container">$enlarged_image_content</div>
<div class="scrim" style="background-color: $background_color" aria-hidden="true"></div>
</div>
HTML;
return str_replace( '</figure>', $lightbox_html . '</figure>', $body_content );
}
要使用` get_users `函数获取所有用户列表，可以按照以下步骤进行：
1. 使用` get_users `函数调用获取用户列表：
$users = get_users();
2. 您可以按需使用参数来过滤结果。例如，您可以通过角色、用户ID、用户登录名等过滤用户列表。以下是一个根据用户角色为过滤条件的示例：
$users = get_users( array(
'role' => 'subscriber' // 将角色名称替换为您要过滤的角色
) );
在上述示例中，将` role `参数设置为所需的角色名称来过滤用户列表。
3. 您可以使用循环遍历获取的用户列表，并访问每个用户的属性。例如，以下示例将显示每个用户的用户名和电子邮件地址：
foreach( $users as $user ) {
echo '用户名：' . $user->user_login . ', 电子邮件：' . $user->user_email . ;
}
在上述示例中，通过` $user->user_login `和` $user->user_email `访问每个用户的用户名和电子邮件地址。
请注意，` get_users `函数默认返回所有用户，并可以根据需要使用更多参数进行过滤。您可以参阅WordPress官方文档中的` get_users `函数文档，了解更多可用参数和用法示例。
总结起来，使用` get_users `函数获取所有用户列表的步骤是：
get_users `函数获取用户列表。在WordPress中，可以使用WP_PLUGIN_DIR和WP_PLUGIN_URL常量来定义插件的目录路径和URL。
1. `WP_PLUGIN_DIR`：这是一个常量，用于定义插件的目录路径（文件系统路径）。您可以使用以下代码在插件文件中访问该常量：
$plugin_dir = WP_PLUGIN_DIR . '/your-plugin-folder/';
在上述代码中，将"your-plugin-folder"替换为您插件的实际文件夹名称。使用该常量，您可以获取插件文件的完整路径。
2. `WP_PLUGIN_URL`：这是一个常量，用于定义插件的URL（用于在网页上访问插件文件）。以下是一个使用该常量的示例：
$plugin_url = WP_PLUGIN_URL . '/your-plugin-folder/';
同样，请将"your-plugin-folder"替换为您插件的实际文件夹名称。使用该常量，您可以获取插件在网页上的完整URL。
请注意，`WP_PLUGIN_DIR`和`WP_PLUGIN_URL`常量在WordPress版本2.6之后引入。从WordPress 5.5版本开始，这两个常量被标记为过时（deprecated），因为WordPress更倾向于使用新的插件文件结构。如果您正在开发新插件，建议使用新的插件文件结构和相关函数。
在新的插件文件结构中，可以使用以下函数来获取插件的目录路径和URL：
- `plugin_dir_path()`：获取插件目录路径。
- `plugin_dir_url()`：获取插件URL。
这些函数会自动将插件的版本、多站点和SSL等考虑因素纳入计算。
总结起来，使用`WP_PLUGIN_DIR`和`WP_PLUGIN_URL`常量定义插件的目录和URL的方法是：
$plugin_dir = WP_PLUGIN_DIR . '/your-plugin-folder/'; $plugin_url = WP_PLUGIN_URL . '/your-plugin-folder/';
但请注意，这两个常量已被标记为过时，建议使用新的插件文件结构和相关函数来获取插件的路径和URL。
使用PHP在WordPress中添加自定义功能可以通过以下方式实现：
下面是一个实操示例。
要在WordPress中添加自定义功能，可以按照以下步骤使用PHP编写并添加自定义功能：
// 添加自定义功能示例
// 1. 创建自定义短代码
function custom_shortcode() {
return '这是我的自定义短代码内容';
}
add_shortcode('custom', 'custom_shortcode');
// 2. 自定义小工具
function custom_widget() {
echo '这是我的自定义小工具内容';
}
register_widget('custom_widget');
// 3. 自定义菜单
function custom_menu() {
register_nav_menu('custom-menu', '自定义菜单');
}
add_action('after_setup_theme', 'custom_menu');
// 4. 自定义页面模板
function custom_page_template() {
/* Template Name: 自定义模板 */
// 自定义模板的内容和样式
}
请注意，修改主题文件可以在主题更新时丢失，因此建议在进行任何更改之前备份functions.php文件。此外，为避免不必要的错误和冲突，建议在添加自定义功能前先了解WordPress开发文档和最佳实践，以确保正确、安全地实现所需的自定义功能。
使用 do_action 函数可以触发一个钩子函数。do_action 函数的参数与要触发的钩子函数的参数相同。
例如，触发save_post钩子函数的代码如下：
do_action( 'save_post', $post_ID, $post );
这里，$post_ID 和 $post 是传递给钩子函数的参数。
使用 wp_get_current_user 获取当前登录用户的信息：
$current_user = wp_get_current_user(); // 获取当前用户的ID $user_id = $current_user->ID; // 获取当前用户的用户名 $user_login = $current_user->user_login; // 获取当前用户的邮箱 $user_email = $current_user->user_email; // 获取当前用户的显示名称 $display_name = $current_user->display_name;
(工作日 10:00 - 18:30 为您服务)
