안녕하세요, WordPress tooltip 플러그인 사용자 여러분, 이 메시지가 여러분을 잘 찾아가고, 여러분이 사랑하는 사람들과 함께 즐거운 날들을 보내고 있기를 바랍니다. 최근에 우리는 재능 있는 WordPress 개발자로부터 새로운 기능 요청을 받았으며, 그가 제안한 환상적인 아이디어들에 감명받았습니다. 우리의 플러그인 개발 팀은 이러한 요청을 최대한 빨리 구현하기 위해 노력하고 있습니다.
안녕하세요, Tooltips 팀,
35.5.8 업데이트와 이전 지원에 대해 빠른 응답 감사드립니다. 저는 Salient 테마(및 WPBakery)를 사용하여 사이트에 Tooltips Pro Plus를 사용하고 있습니다.
문제: Tooltips가 프론트엔드에서 Bootstrap/Awesome/reset CSS + admin.css를 로드하여 Salient의 반응형 그리드를 덮어쓰고, FA 스택과 충돌이 발생합니다.
Font Awesome과의 충돌(테마/스택이 FA6를 사용하고 있으며, 플러그인이 다른 버전의 FA를 주입한 결과로 소셜 아이콘이 빈 박스/잘못된 글리프로 표시됨).
해결책 A:
우리는 WordPress Tooltip 플러그인을 다음과 같이 수정했습니다:
- 로드된/완료된 각 스타일 파일(handle + scr)을 스캔하여 bootstrap/font-awesome 문자열이 있는지 확인합니다.
- 테마나 다른 플러그인이 이미 이를 로드한 경우, 프로세스가 즉시 종료되어 WordPress Tooltip 플러그인이 bootstrap/font-awesome 패키지를 로드하지 않습니다.
- 그렇지 않으면 WordPress Tooltip 플러그인이 bootstrap/font-awesome 패키지를 자체적으로 로드합니다.
우리의 코드는 다음과 같습니다:
$enableBootstrapCSS = get_option('enableBootstrapCSS');
if ($enableBootstrapCSS == 'NO')
{}
else
{
global $wp_styles;
$bs_handles = array(
'bootstrap',
'bootstrap-css',
'bootstrap-style',
'bootstrap5',
'bootstrap-5',
'bootstrap4',
'bootstrap-4',
'tb-bootstrap',
'theme-bootstrap',
'font-enableBootstrapCSS',
'enableBootstrapCSS',
);
foreach ( $bs_handles as $hdl ) {
if ( wp_style_is( $hdl, 'registered' ) || wp_style_is( $hdl, 'done' ) ) {
return;
}
}
$needles = array( 'bootstrap', 'bootstrap.min.css' );
foreach ( array_merge( $wp_styles->done, $wp_styles->queue ) as $done_or_queued ) {
$obj = $wp_styles->registered[ $done_or_queued ] ?? false;
if ( ! $obj ) {
continue;
}
$src = $obj->src ?? "";
foreach ( $needles as $n ) {
if ( stripos( $src, $n ) !== false ) {
return;
}
}
}
wp_enqueue_script('bootstrap', plugin_dir_url( __FILE__ ) . 'js/bootstrap/bootstrap.min.js', array('jquery'), '5.0', true);
}
다음 기능 요청:
모바일 장치에서 툴팁이 화면 밖으로 나가는 문제(툴팁 상자가 가장자리에 있는 콘텐츠를 가리킴).
안정화 방법: A) 프론트엔드에서 로드되지 않아야 하는 플러그인 CSS를 중지했습니다.
충돌을 일으킨 Tooltips 리소스( admin.css, skin ionRangeSlider, bootstrap/awesome/reset)만 제거/등록했습니다. 최소한의 목표 조각:
해결책 B:
우리는 WordPress Tooltip 플러그인 내의 코드를 면밀히 검토했습니다. 이전 버전에서는 관리 영역에서만 admin.css 및 skin ionRangeSlider를 로드하여 프론트엔드 로드를 방지했습니다. 코드는 다음과 같이 구성되어 있습니다:
add_action('admin_head', 'tooltips_pro_admin_css');add_action('admin_head', 'tooltips_admin_rangeslider_css_js');
다음 기능 요청:
B) FA6을 한 번만 로드(프론트엔드 중복 제거).
이는 아이콘 문제를 해결했습니다(구 버전 클래스 fa fa-*를 포함한 v4-shims).
해결책 C:
이 문제는 해결책 A에서 해결되었습니다.
기능 요청:
이것을 플러그인에 구현해 주시면 좋겠어요.
리소스/옵션 격리:
- 프론트엔드에서 관리 CSS를 로드하지 않도록 (is_admin()) 보호.
완료되었습니다. - Bootstrap/Font Awesome을 선택 사항으로 만듭니다(기본적으로 비활성화). 설정에서 3가지 옵션을 제공합니다:
a) 아이콘 세트를 하나도 로드하지 않기(테마 세트 사용),
b) FA6 로드 (core/brands/solid),
c) 이전 fa fa-에 대한 레거시 shim만 로드.
완료되었습니다. 귀하는 FA6.5를 사용하고 있으며, WordPress Tooltip 플러그인은 FA6.4를 사용합니다. - 실제로 슬라이더가 표시되지 않는 경우에만 프론트엔드에서 ionRangeSlider 스타일을 로드합니다.
완료되었습니다. - CSS 네임스페이스와 범위
플러그인의 모든 선택자에 고유한 루트를 추가하십시오(예: .tooltips-pro …) 및 .row, .col, .btn, i, .icon, strong과 같은 일반 선택기를 전역적으로 피합니다.
완료되었습니다. 우리는 일반적인 선택자인 .row, .col, .btn, i, .icon, strong을 전역적으로 사용할 수 없습니다. - bootstrap과 유사한 클래스를 스타일링해야 하는 경우 이를 제한하십시오: .tooltips-pro .btn { … }가 아니라 .btn { … }
완료되었습니다. - 필요에 따라 로드
툴팁이 실제로 페이지에 존재하는 경우에만 프론트엔드 리소스를 추가합니다 (쇼트코드/콘텐츠를 스캔하거나 서버 측 플래그를 사용하여).
관련된 툴팁 효과(메뉴 항목에 대한 툴팁, 이미지에 대한 ALT 이미지를 툴팁으로 사용, 연락처 양식 필드에 대한 툴팁 등)를 지원하기 때문에, 현재로서는 이 요청에 대한 해결책을 찾는 것은 어렵습니다. 죄송합니다.
Font Awesome과의 호환성:
FA를 제공하는 경우 FA6을 사용하고 이를 문서화하십시오; FA6과 함께 이전 버전의 FA 주입을 피하여 글리프 불일치 문제를 방지하십시오. UI 아이콘에 대해 inline SVG를 사용하여 FA에 대한 의존성을 완전히 피하는 것을 고려하십시오.
완료되었습니다. 귀하는 FA6.5를 사용하고 있으며, WordPress Tooltip 플러그인은 FA6.4를 사용합니다.
훌륭한 제안에 감사드리며, 추가 기능 요청이 있는 경우 언제든지 연락 주시기 바랍니다. 여러분을 위해 이를 구현할 수 있어 매우 기쁩니다
감사합니다. 가족과 함께 행복한 하루 되시길 바랍니다
감사합니다,
WordPress Tooltip 플러그인 지원 팀
Leave a Reply