block_core_image_render_lightbox

函式


      block_core_image_render_lightbox ( $block_content, $block )

引數

(string) $block_content Rendered block content.

Required: 是
(array) $block Block object.

Required: 是

返回值

(string) Filtered block content.

定義位置

wp-includes/blocks/image.php , line 129

相關方法: block_core_image_get_lightbox_settings block_core_gallery_render block_core_heading_render block_core_page_list_render_nested_page_list block_core_navigation_render_submenu_icon

引入: -

棄用: -

新增燈箱行為所需的指令和佈局。

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 );
}

常見問題

FAQs

如何使用get_users獲取所有使用者列表？
要使用` 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 `函式獲取所有使用者列表的步驟是：
1. 呼叫` get_users `函式獲取使用者列表。
2. 使用可選的過濾引數，根據需要過濾使用者列表。
3. 使用迴圈遍歷使用者列表，並訪問每個使用者的屬性。
如何使用WP_PLUGIN_DIR和WP_PLUGIN_URL定義外掛的目錄和URL？
在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中新增自定義功能？
使用PHP在WordPress中新增自定義功能可以通過以下方式實現：
- 建立一個自定義外掛，將功能程式碼新增到外掛中。
- 使用WordPress的鉤子系統，將自定義功能繫結到適當的鉤子上。
- 在主題檔案中新增自定義功能程式碼，例如functions.php檔案。
- 使用WordPress的短程式碼功能，將自定義功能封裝為短程式碼。
- 使用WordPress的外掛或主題編輯器，將自定義功能程式碼新增到適當的位置。
下面是一個實操示例。

要在WordPress中新增自定義功能，可以按照以下步驟使用PHP編寫並新增自定義功能：
1. 開啟WordPress安裝目錄中的主題資料夾，通常位於wp-content/themes/下，找到正在使用的主題資料夾。
2. 在主題資料夾中，可以建立一個名為functions.php的檔案。如果該檔案已經存在，可以直接編輯它。
3. 在functions.php檔案中，可以使用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: 自定義模板 */
    // 自定義模板的內容和樣式
}
```
4. 編輯完functions.php檔案後，儲存並上傳到WordPress主題資料夾中。
請注意，修改主題檔案可以在主題更新時丟失，因此建議在進行任何更改之前備份functions.php檔案。此外，為避免不必要的錯誤和衝突，建議在新增自定義功能前先了解WordPress開發文件和最佳實踐，以確保正確、安全地實現所需的自定義功能。
如何進行WordPress資料庫查詢優化？
進行WordPress資料庫查詢優化可以通過以下方式實現：
- 使用WordPress提供的內建查詢函式，例如 WP_Query 、 get_posts 等。
- 使用適當的查詢引數和過濾器，減少查詢次數和資料量。
- 編寫自定義的資料庫查詢語句，使用適當的索引和快取。
- 優化資料庫伺服器配置和效能。
- 定期清理和優化資料庫表。
如何使用do_action來觸發一個鉤子函式？
使用 do_action 函式可以觸發一個鉤子函式。do_action 函式的引數與要觸發的鉤子函式的引數相同。

例如，觸發save_post鉤子函式的程式碼如下：
```
do_action( 'save_post', $post_ID, $post );
```
這裡，$post_ID 和 $post 是傳遞給鉤子函式的引數。

如何使用wp_get_current_user獲取當前登入使用者的資訊？

使用 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;

檢視更多 >

block_core_image_render_lightbox

常見問題

相關文章