[英]Woocommerce admin tooltip for a custom plugin
我構建了我的 Woocommerce 插件,我需要使用工具提示在我的輸入旁邊放置一些內容。 我從Woocommerce Docs中找到了這個函數: wc_help_tip()
但我不明白,也不起作用。
這是我的代碼:
<?php
$tip = "test";
echo wc_help_tip($tip, false);
?>
當我用 F12 調試時,我看到了一個 span 內容:
<span class="woocommerce-help-tip" data-tip="test"></span>
但是前端什么都沒有出現。
對此有什么想法嗎? 或者其他的東西來放置 WordPress 的原生工具提示?
編輯:我需要在自定義管理后端頁面掛鈎中使用它,而不是在前端也不是 woocommerce 管理后端頁面
您應該將您的屏幕 ID 添加到 woocommerce。 使用 woocommerce_screen_ids 過濾器
例子:
add_filter('woocommerce_screen_ids', [ $this, 'set_wc_screen_ids' ] );
public function set_wc_screen_ids( $screen ){
$screen[] = 'your_screen_id';
return $screen;
}
確保您已為此排隊 TipTip JS,這是可能對您有所幫助的代碼,復制下面的代碼並粘貼所有 javascript 文件排隊的位置
<?php
wp_register_script( 'woocommerce_admin', WC()->plugin_url() . '/assets/js/admin/woocommerce_admin.js', array( 'jquery', 'jquery-blockui', 'jquery-ui-sortable', 'jquery-ui-widget', 'jquery-ui-core', 'jquery-tiptip' ), WC_VERSION );
$locale = localeconv();
$decimal = isset( $locale['decimal_point'] ) ? $locale['decimal_point'] : '.';
$params = array(
/* translators: %s: decimal */
'i18n_decimal_error' => sprintf( __( 'Please enter in decimal (%s) format without thousand separators.', 'woocommerce' ), $decimal ),
/* translators: %s: price decimal separator */
'i18n_mon_decimal_error' => sprintf( __( 'Please enter in monetary decimal (%s) format without thousand separators and currency symbols.', 'woocommerce' ), wc_get_price_decimal_separator() ),
'i18n_country_iso_error' => __( 'Please enter in country code with two capital letters.', 'woocommerce' ),
'i18_sale_less_than_regular_error' => __( 'Please enter in a value less than the regular price.', 'woocommerce' ),
'decimal_point' => $decimal,
'mon_decimal_point' => wc_get_price_decimal_separator(),
'strings' => array(
'import_products' => __( 'Import', 'woocommerce' ),
'export_products' => __( 'Export', 'woocommerce' ),
),
'urls' => array(
'import_products' => esc_url_raw( admin_url( 'edit.php?post_type=product&page=product_importer' ) ),
'export_products' => esc_url_raw( admin_url( 'edit.php?post_type=product&page=product_exporter' ) ),
),
);
wp_localize_script( 'woocommerce_admin', 'woocommerce_admin', $params );
wp_enqueue_script( 'woocommerce_admin' );
您無需為此加載整個 WooCommerce 管理腳本。 事實上,這是 WooCommerce 使用的 jQuery 插件的一部分,而不是 WooCommerce 代碼本身的一部分。
因此,首先,您需要確保jquery-tiptip
已加載到您的頁面上:
wp_enqueue_script( 'jquery-tiptip' );
然后,使用 JS 在woocommerce-help-tip
元素上初始化tipTip()
函數:
jQuery( function( $ ) {
$('.woocommerce-help-tip').tipTip({
'attribute': 'data-tip',
'fadeIn': 50,
'fadeOut': 50,
'delay': 200
});
});
確保在加載此腳本時,將jquery-tiptip
作為依賴項包含( wp_enqueue_script()
的第三個參數)
wp_enqueue_script(
'your-script',
plugin_dir_url( __FILE__ ) . '/js/example.js',
array( 'jquery', 'jquery-tiptip' ),
'1.0.0'
);
此功能是為后端...
下面有一個示例,它將在訂單編輯頁面中輸出工具提示:
// Displayed in Order edit pages below order details on top first column
add_action( 'woocommerce_admin_order_data_after_order_details', 'displaying_tooltip_in_order_edit_pages', 10, 1 );
function displaying_tooltip_in_order_edit_pages( $order ){
?>
<p class="form-field form-field-wide wc-customer-custom">Some text with a tooltip <?php echo wc_help_tip("hello world"); ?></p>
<?php
}
代碼位於活動子主題(或活動主題)的 function.php 文件中。
測試和工作。
因此,如果您添加一些代碼以通過鈎子在 woocommerce 管理頁面中顯示一些自定義字段或內容,您可以使用
wc_help_tip()
函數添加這些工具提示
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.