안녕하세요, 사랑하는 WordPress Tooltip Plugin 사용자 여러분, 이 메시지가 잘 전달되기를 바라며 가족과 함께 멋진 날들을 보내고 계시길 바랍니다. 우리는 훌륭한 WordPress Tooltip 사용자로부터 WordPress Tooltips Plugin에서 테마와의 CSS 충돌을 보고하는 티켓을 받았습니다. 우리의 WordPress 개발자가 테마를 확인한 결과, 툴팁에서 사용되는 Bootstrap 및 Font Awesome과 충돌하는 것을 발견했습니다. 소중한 툴팁 사용자의 문제를 해결하기 위해, 우리의 WordPress Tooltips 개발자는 새로운 버전인 WordPress Tooltips Pro Plus 35.8.8을 출시했습니다.
1: WordPress 툴팁에 포함된 테마와 Bootstrap 프레임워크 간의 충돌을 해결했습니다:
안녕하세요 지원팀,
우선: 믿을 수 없을 만큼 빠른 처리와 늦은 밤 작업에 대해 다시 한 번 큰 감사를 드립니다.
35.8.8 버전에서는 거의 모든 것이 제 쪽에서 완벽합니다:
WooCommerce 주문 페이지 → PHP 경고가 사라졌습니다 ✅
Salient → 타이포그래피 관리 패널 → 더 이상 깨지지 않았습니다 ✅
헤더/푸터의 소셜 아이콘 → 잘 보입니다 ✅
35.8.8로 업데이트한 직후에 나타난 단 하나의 회귀가 있습니다:
홈페이지에서 모바일 헤더/히어로 레이아웃이 깨졌습니다 (메뉴/헤더 블록이 이동하고 간격이 어긋납니다).
이전 빌드에서 이미 수정되었지만, 35.8.8로 업데이트하니 다시 발생했습니다.
다시 한 번, 여러분의 끊임없는 노력과 빠른 응답에 정말 감사드립니다 — 여러분이 얼마나 유연하고 도움이 되는지 정말로 감사하게 생각합니다!
따뜻한 인사를 전합니다,
우리는 툴팁 사용자 문제를 해결하고 다음과 같이 답변했습니다:
안녕하세요
이 메시지가 잘 전달되기를 바라며 가족과 함께 행복한 날들을 보내고 계시길 바랍니다
문제에 대해 사과드립니다. 우리는 테마와 플러그인의 코드를 확인했으며, 다양한 해상도에서 이 문제를 테스트한 결과, Bootstrap과 테마 간의 충돌로 인해 발생한 것을 발견했습니다. 해결책은 간단합니다. 툴팁 글로벌 설정 패널을 열고 “테마 충돌을 피하기 위해 Bootstrap CSS 사용/사용 안 함?” 옵션을 비활성화해 주세요. 저희 쪽에서는 모든 것이 잘 작동한다고 확인했습니다
테스트를 해주시고 피드백을 주실 수 있을까요? 문제가 있다면 주저하지 말고 말씀해 주세요. 최대한 빨리 해결해 드리겠습니다
감사합니다, 사랑하는 사람들과 함께 축복받은 하루 되세요
친애하는 인사를 전합니다,
WordPress Tooltips 지원팀
2: WooCommerce 주문 페이지: 주문 세부 정보 섹션 아래에 여러 PHP 경고가 여전히 나타납니다 (post_type이 null인 경우 관련):
완료, 우리는 문제를 해결하기 위해 코드를 다음과 같이 수정했습니다:
if (isset($post->post_type)) {
if ($post->post_type == ‘tooltips’) { add_meta_box(“show_tooltips_excerpt_control_meta_box_id”, __(‘툴팁 팝업에 발췌를 표시하시겠습니까?’, ‘wordpress-tooltips’), ‘show_tooltips_excerpt_meta_box’, null, “side”, “high”, null); } }
이제 잘 작동합니다
3: Salient 타이포그래피 패널: WordPress Tooltips Pro가 활성화되면 Salient → 타이포그래피 아래의 관리 인터페이스가 깨지고 정렬이 어긋납니다.
완료, 우리는 핵심 테마의 코드를 검토한 결과 .tooltip 클래스가 포함되어 있어, admin.css 파일의 .tooltips 클래스와 충돌하는 것을 발견했습니다. 우리는 WordPress Tooltips 플러그인을 다음과 같이 수정했습니다:
현재 화면이 플러그인에 속할 때만 wp-admin 영역에서 WordPress Tooltips 플러그인의 admin.css 파일을 로드합니다.
코드:
if (isset($_GET[‘post_type’]))
{
$tooltips_admin_post_type_check = sanitize_text_field($_GET[‘post_type’]);
if ($tooltips_admin_post_type_check === ‘tooltips’)
{
wp_enqueue_style(‘tooltips_pro_admin_css’, plugin_dir_url(__FILE__) . ‘asset/css/admin/admin.css’);
}
}
이제 잘 작동합니다
4: 소셜 아이콘: 메뉴와 푸터의 Font Awesome 아이콘 (소셜 링크)이 여전히 잘못 표시되거나 빈 상자로 나타납니다.
완료, Salient 테마에서 그들이 스크립트를 늦게 로드하는 것을 발견했습니다:
add_action( ‘wp_enqueue_scripts’, ‘nectar_enqueue_dynamic_css’, 20 );
우리는 플러그인을 수정하여 Font Awesome을 늦게 로드하여 다른 테마나 플러그인과의 충돌을 피했습니다:
add_action( ‘wp_enqueue_scripts’, ‘ttfa_load_font_awesome’ ,10000);
따라서 Salient 테마의 모든 코드는 먼저 실행되고, 우리의 코드는 마지막에 Font Awesome을 로드합니다.
이제 잘 작동합니다
사용자의 테마는 Font Awesome 6.5를 사용하고 있었고, 우리의 Font Awesome Tooltips는 WordPress Tooltips Pro Plus 35.8.8에서 Font Awesome 6.4를 사용하고 있었습니다. 우리는 Font Awesome Tooltips를 최신 버전인 Font Awesome 7.1로 업그레이드했습니다. Font Awesome이란 무엇인가요?
Font Awesome은 확장 가능한 벡터 아이콘과 소셜 로고의 방대한 컬렉션을 제공하는 인기 있는 아이콘 툴킷 및 웹 글꼴입니다. 개발자는 이미지 파일 없이도 웹사이트와 애플리케이션에 고품질 아이콘을 쉽게 통합할 수 있습니다. Font Awesome의 주요 기능:
확장 가능한 아이콘: 벡터 기반이기 때문에 Font Awesome 아이콘은 품질을 잃지 않고 어떤 크기로도 확장할 수 있어 반응형 디자인에 적합합니다.
크로스 브라우저 호환성: Font Awesome은 모든 최신 웹 브라우저에서 원활하게 작동합니다.
쉬운 통합: 개발자는 간단한 <link> 태그를 사용하거나 npm 또는 Yarn과 같은 패키지 관리자를 통해 Font Awesome을 쉽게 프로젝트에 통합할 수 있습니다.
사용자 정의 가능: 아이콘은 CSS로 스타일링할 수 있어 색상, 크기, 회전 등을 변경하여 웹사이트의 디자인 요구 사항에 맞출 수 있습니다.
접근성: Font Awesome 아이콘은 적절한 HTML 속성을 통해 접근 가능하게 만들어 스크린 리더가 사용할 수 있도록 합니다.
정기적인 업데이트: 이 툴킷은 새로운 아이콘으로 자주 업데이트되어 시간이 지남에 따라 라이브러리가 향상됩니다.
사용자들이 Font Awesome을 좋아하는 이유:
다양한 종류: Font Awesome은 수천 개의 아이콘을 제공하여 사용자가 어떤 애플리케이션에 적합한 아이콘을 찾을 수 있는 충분한 선택지를 제공합니다.
단순성: Font Awesome의 구문은 간단하여 모든 기술 수준의 개발자가 쉽게 구현할 수 있습니다.
성능: 글꼴 기반 아이콘 세트인 Font Awesome은 일반적으로 전통적인 이미지 아이콘보다 더 빠르게 로드되어 웹사이트 성능을 향상시킵니다.
커뮤니티 지원: 많은 사용자와 포괄적인 문서가 있어 개발자는 쉽게 지원, 튜토리얼 및 예제를 찾을 수 있습니다.
일관된 스타일: 모든 아이콘은 통일된 스타일을 가지고 있어 웹 애플리케이션 전반에 걸쳐 시각적 일관성을 유지하는 데 도움이 됩니다.
무료 및 유료 옵션: Font Awesome은 무료 및 프리미엄 버전을 제공하여 사용자가 필요와 예산에 따라 선택할 수 있습니다.
결론
Font Awesome은 그 다재다능함, 사용의 용이성 및 방대한 아이콘 라이브러리 덕분에 많은 개발자들이 선호하는 솔루션이 되었습니다. 간단한 웹사이트를 구축하든 복잡한 웹 애플리케이션을 만들든, Font Awesome은 UI 디자인을 향상하고 사용자 경험을 개선하는 데 필요한 도구를 제공합니다. Font Awesome Tooltips란 무엇인가요?
Font Awesome Tooltips는 개발자가 Font Awesome 아이콘을 사용하여 호버 가능한 정보 상자 또는 힌트를 생성할 수 있는 기능으로, WordPress Tooltips Pro Plus 버전 19.9.8에 포함되어 있습니다. 이러한 툴팁은 사용자가 커서를 올렸을 때 웹페이지의 요소에 대한 추가 컨텍스트나 정보를 제공합니다. Font Awesome Tooltips의 주요 기능:
아이콘: Font Awesome 라이브러리의 아이콘을 툴팁에 쉽게 통합하여 시각적 매력과 사용자 경험을 향상시킬 수 있습니다.
사용자 정의: 툴팁은 웹사이트의 디자인에 맞게 스타일링하고 사용자 정의할 수 있어 색상, 크기 및 위치 조정이 가능합니다.
반응성: 다양한 화면 크기에 잘 적응하여 데스크톱 및 모바일 인터페이스 모두에 적합합니다.
접근성: 적절하게 구현된 툴팁은 UI를 혼잡하게 만들지 않고 추가 정보를 제공하여 접근성을 향상시킬 수 있습니다.
JavaScript 지원: 많은 툴팁 구현은 JavaScript 또는 CSS 프레임워크(예: Bootstrap)를 활용하여 표시 및 숨기기 효과와 같은 기능을 향상시킵니다.
WordPress 게시물에 Font Awesome Tooltips 추가하는 방법
WordPress 게시물에서 매력적인 콘텐츠를 만드는 것이 Font Awesome 툴팁 덕분에 더 쉬워졌습니다! 다음 간단한 단계를 따라 독자에게 추가 정보를 제공하는 아름다운 아이콘으로 게시물을 향상시켜 보세요. 1단계: 새 WordPress 게시물 만들기
WordPress에서 새 게시물을 만들기 시작합니다. 편집기에서 다음과 같이 Font Awesome 툴팁 단축코드를 삽입합니다:
[ ttfa tooltip_id=”13″ set=”fas” icon=”fa-question-circle” size=”2x” color=”#9ee2c6″ ]
이 Font Awesome 툴팁 단축코드는 게시물에 툴팁을 표시할 수 있게 해줍니다.
더 많은 WordPress 툴팁 단축코드는 우리의 자세한 툴팁 단축코드 문서에서 확인할 수 있습니다; tooltips.org/how-to-use-wordpress-tooltip-shortcode-tooltips-to-add-tooltips-manually/ 2단계: 툴팁 미리보기
단축코드를 추가한 후, WordPress 게시물의 프론트엔드로 이동합니다. 다음과 같은 멋진 질문 원 아이콘이 보일 것입니다:
Font Awesome 툴팁 아이콘
사용자가 질문 원 위에 마우스를 올리면 툴팁 팝업이 나타나 추가 세부 정보를 제공합니다:
Font Awesome 툴팁 팝업 3단계: 툴팁 사용자 정의
Font Awesome 아이콘의 크기와 색상을 사용자 정의할 수 있는 유연성이 있습니다. 예를 들어, 질문 원 아이콘을 더 크게 만들고 싶다면, 크기 매개변수를 2x에서 3x, 4x 또는 더 크게 변경하면 됩니다! 예를 들어: 프론트엔드에서 Font Awesome 툴팁 팝업 창
색상을 변경하려면, 색상 매개변수를 원하는 헥스 값으로 수정하면 됩니다, 예를 들어 #cccccc 또는 #eeeeee와 같이요. 4단계: 아이콘 스타일 선택
set 매개변수를 변경하여 Font Awesome 툴팁의 스타일을 조정할 수도 있습니다:
fas — 솔리드 아이콘
far — 레귤러 아이콘
fab — 브랜드 아이콘
알아야 할 사항 요약:
tooltip_id: 이것은 WordPress 툴팁 편집기에서 생성한 툴팁의 ID입니다.
set: 솔리드(fas), 레귤러(far) 또는 브랜드(fab) 아이콘 중에서 선택하세요.
icon: 우리는 질문 원 아이콘을 사용했지만, 1,588개 이상의 멋진 아이콘이 있으니 선택할 수 있습니다!
size: 디자인 선호도에 따라 3x, 4x 등으로 크기를 늘려도 됩니다.
color: 사이트에 맞게 색상을 사용자 정의하세요, 예를 들어 #eeeeee와 같이요.
이제 WordPress 게시물을 매력적인 Font Awesome 툴팁으로 향상시킬 준비가 되었습니다! 즐거운 블로깅 되세요! 결론:
Font Awesome은 크기, 색상 및 스타일을 CSS로 사용자 정의할 수 있는 1,500개 이상의 고품질 아이콘을 포함하고 있습니다. 이러한 아이콘은 크로스 브라우저 호환성을 위해 설계되었습니다. Font Awesome Tooltips는 사용자 상호작용을 개선하고 웹 페이지에서 유용한 정보를 시각적으로 매력적인 방식으로 제공하는 데 유용한 구성 요소입니다.
변경이 필요하시면 주저하지 말고 말씀해 주세요. 최대한 빨리 완료하도록 노력하겠습니다(현재 시각은 오전 1시 52분입니다).
모든 것이 잘 작동하면 테스트 사이트의 접근 권한을 변경해 주세요. 우리는 귀하의 개인 데이터와 개인 정보를 보호하기 위해 귀하의 계정에 로그인하지 않았습니다
감사합니다, 사랑하는 사람들과 함께 축복받은 하루 되세요
친애하는 인사를 전합니다,
WordPress Tooltips 지원팀
