워드프레스 블로그 만든 이야기
페이지 정보
작성자 Lottie관련링크
본문
워드프레스 워드프레스 파비콘 설정은 간단한 문제이기도하고 복잡한 문제이기도 합니다.즉 워드프레스에 별다른 기능을 넣지 않으면 간단한 구조로 파비콘 설정에 큰 문제가 없지만 복잡한 테마를 적용하게 되면 그때부턴 힘들어집니다이 문제로 인해 거의 3달이상을 생쇼를 했답니다.제게는 워드프레스가 총 7개가 있습니다.이중 비애드센스 브랜드 사이트 2개와 애스센스 적용 사이트 5개가 있습니다.브랜드 사이트는 비교적 간단한 구조이다보니 파비콘 설정은 아주 간단했습니다. 그냥 테마의 아이덴티티나 설정에서 지정해 놓으면 문제없이 노출이 되었지만 애드센스가 적용된 사이트는 전문 사이트들이다보니 테마를 조금 복잡한 테마를 워드프레스 적용했습니다.즉, 카테고리별, 기타 주제별 섹션이 나눠져있고 메인 뉴스나 지정된 포스팅도 쉽게 메인홈에서 보여주게 되어 있기때문에 그 테마의 구조가 복잡합니다.1단계 부모테마에 2~3 단계의 차일드테마가 있습니다.그래서 파비콘 설정으로 골머리가 아~~~~~워드프레스 파비콘이 안 보인다면? 워드프레스를 운영하면서 파비콘(사이트 아이콘)을 설정하는 건 가장 기본적인 브랜딩 작업 중 하나입니다. 그런데, 분명히 설정을 제대로 했는데도 브라우저 탭에 엉뚱한 아이콘이 표시되거나, 아예 아이콘이 보이지 않는 경우가 있다면… 욜라 짜증납니다.기껏 열심히 만들었는데 왜 안보이고 지랄이십니까 하는 욕이 절로 ....???? 워드프레스 워드프레스에서 파비콘을 설정하는 일반적인 방법기본적으로 워드프레스에서는 다음과 같은 방법으로 파비콘을 설정할 수 있습니다.1. Customizer(사용자 정의) 이용경로: 외모 >사용자 정의 >사이트 아이덴티티여기서 '사이트 아이콘'을 업로드하면 모든 브라우저 탭, 모바일 즐겨찾기 등에서 표시됩니다.이래도 안된다면 직접 코드를 수정하는 방법도 있지요2. 직접 meta 태그로 삽입테마편집기에 header.php 또는 functions.php 등의 파일에서 에서 아래와 같은 방식으로 직접 넣기도 하죠또는 다양한 사이즈별로 다음과 같이 구성할 수도 있습니다 ; 3. SEO 플러그인 또는 테마 기능을 통해 자동 설정일부 워드프레스 SEO 플러그인(Yoast, RankMath 등)에서도 파비콘 설정을 해도 됩니다.???? 그런데도 파비콘이 적용되지 않는다면?이게 환장할 노릇입니다.파비콘을 정상적으로 설정했음에도 브라우저에선 생까는 무심한 아이콘이 표시되는 현상…저도 똑같은 문제를 겪었고, 캐시 문제인가? 아이콘 사이즈 문제인가? 하며 한참을 헤맸습니다.결론부터 말하자면, 범인은 PWA for WP 플러그인이었습니다.이 플러그인의 역활은 이렇습니다.???? 주요 기능 요약기능설명???? 홈 화면 추가사용자가 웹사이트를 모바일 홈 화면에 앱처럼 설치 가능⚡ 오프라인 지원인터넷이 끊겨도 특정 페이지 또는 캐시된 콘텐츠는 계속 접근 가능???? 빠른 로딩Service Worker를 활용해 워드프레스 리소스를 캐싱하고, 로딩 속도 개선???? 푸시 알림푸시 알림(OneSignal 연동 시)으로 사용자에게 실시간 정보 전송 가능????️ 앱 셸(App Shell) 구조 적용앱처럼 빠르게 보이게끔 레이아웃 캐싱 구조 지원???? 설치 시 앱 아이콘/이름/화면 방향 설정설치 시 앱 이름, 아이콘, 색상 등을 커스터마이징 가능???? 멀티사이트 지원워드프레스 멀티사이트 환경에서도 작동이렇다고 하는데 실제로 지웠을때 저런 기능의 필요성은 거의 없어서 영향이 없습니다.그러면 이 놈은 왜 깔렸냐?사실 이 부분은 정확히 기억이 나질 않습니다.누군가 좋다하니 깔았던 거 같기도하고 테마에 워드프레스 같이 섞여서 깔린거 같기도 하고 잘 모르겠네요.여튼 이 놈을 지우니 곧 파비콘이 보이더라구요.저는 이미 서치콘솔에 이 파이콘이 색인검색이 되어 있었던 거라 바로 보이더군요.다시말해 이 플러그인이 그걸 가리고 있었던 겁니다.해당 폴더로 들어가보면 이 플러그인이 내세우는 파비콘이 이미 떡하고 자리 잡고 있었더라구요.그게 맨날 내 실제 파비콘을 대체 하고 있었던 겁니다.신규사이트라서 서치콘솔에 아직 사이트 아이콘이 색인 안되어 있다면 며칠에서 길게는 10일이상 시간이 걸릴 수도 있습니다.????️♂️ PWA for WP가 파비콘을 덮어쓰는 구조이 플러그인은 웹사이트를 워드프레스 앱처럼 동작하게 만들어주는 PWA(Progressive Web App) 기능을 제공합니다. 그런데 이 기능을 위해 자동 생성되는 manifest.json 파일에 아이콘 설정이 포함되어 있어,브라우저에서 워드프레스의 기본 파비콘보다 우선적으로 해당 아이콘을 로드하게 됩니다.???? 예시:icons: [ { src: /wp-content/plugins/pwa-for-wp/icons/icon-512x512.png, sizes: 512x512, type: image/png"} ] 이게 바로 사용자가 설정한 favicon.ico나 site icon을 가려버리는 원인입니다.✅ 해결 방법1. PWA for WP 플러그인 비활성화 또는 삭제가장 간단하면서도 확실한 방법입니다.→ 비활성화하는 즉시 manifest.json도 무력화되면서 파비콘이 정상 표시됩니다.그리곤 시원한 기분이 들게 됩니다.물론 워드프레스 이 방법으로 다 해결되지 않습니다. 개인별로 설정이 다 다르기 때문에 또다른 원인이 있을 수 있으나 이 방식은 제가 발견한 것으로 이 글을 읽는 분께 좋은 해결책으로 쓰이길 바랍니다.✋ 마무리하며워드프레스를 쓰는 많은 유저가 파비콘 표시 문제로 혼란을 겪곤 합니다.그리고 종종 원인이 의외의 플러그인일 수도 있습니다.PWA 기능이 필요 없다면 이 플러그인은 과감히 비활성화하세요.웹사이트는 첫인상이 중요합니다. 파비콘 하나로도 브랜드의 인상이 바뀔 수 있죠.내가 설정한 파비콘이 온전히 보이도록 환경을 꼼꼼히 점검해보는 걸 추천드립니다 ????
워드프레스댓글목록
등록된 댓글이 없습니다.