2022/07 31

워드프레스 Elementor 페이지 빌더: 고객사 리스트 슬라이드 만들기 (이미지 캐러셀)

고객사 소개 페이지에서 고객사 로고들을 왼쪽 또는 오른쪽으로 움직이는 슬라이드(좌우 롤링 배너)로 만들어 표시하는 경우가 많이 있습니다. 쉽게 이해하기 위해 다음 영상을 보시면 기업 로고들이 배열되어 가로로 회전하고 있습니다. 테스트용으로 임의의 이미지를 업로드하여 만들어 보았습니다. 제대로 만들려면 먼저 크기가 일정한 고객사 로고 파일을 준비하면 되겠죠. 위의 영상과 같이 고객사를 소개하는 회전 슬라이더를 워드프레스에서 만들려는 경우, 테마 기능이나 플러그인을 사용할 수 있습니다. 예를 들어, 베스트셀링 테마인 아바다 테마에서는 이미지 캐러셀(image carousel) 기능을 사용하여 비슷하게 구현할 수 있습니다. 워드프레스 아바다(Avada)에서 Image Carousel 사용하기 - 워드프레스 중..

Snagit과 Camtasia가 여름 세일을 하네요 (30% 할인)

사용이 쉬운 스크린 캡처 및 편집 프로그램인 Snagit과 화면 녹화 및 동영상 편집 프로그램인 Camtasia가 30% 할인된 가격에 판매되고 있습니다. Snagit & Camtasia 여름 세일 유용한 무료 화면 캡처 프로그램도 있지만 저는 오랫동안 Snagit이라는 유료 화면 캡처 프로그램을 사용하고 있습니다. Snagit은 화면 캡처 후 곧바로 간단한 편집을 할 수 있어 시간을 절약할 수 있습니다. Camtasia는 사용이 간단한 동영상 편집 프로그램으로 동영상 편집 시 시간을 아낄 수 있습니다. 저는 Camtasia를 사용하여 워드프레스 및 웹호스팅 사용법을 소개하는 유튜브 영상을 만들고 있습니다. 초기에는 무료 TTS 음성 사이트를 이용하여 음성을 넣었지만, 지금은 그것도 귀찮아서 그냥 화면을..

IT & 기타/IT 2022.07.21

워드프레스 문의폼: 선택 필드 옵션에 따라 다른 수신자에게 메일 전송하기

다음 그림과 같이 사용자가 선택하는 옵션에 따라 문의 내용을 다른 수신자에게 전송하고 싶은 경우가 있습니다. 가령, "영업" 관련 문의는 영업 담당자에게, "지원" 관련 문의는 고객지원 담당자에게 전송하는 것이 효율적일 것입니다. 워드프레스 문의폼: 선택 필드 옵션에 따라 다른 수신자에게 메일 전송하기 (다중 발송) 워드프레스 유료 컨택트 폼 플러그인인 Quform에서는 사용자가 선택하는 필드 값에 따라 다른 이메일 주소로 문의 데이터를 전송하도록 설정할 수 있습니다. 톱니바퀴 모양의 설정 아이콘(①)을 클릭하고 Notifications(알림) 탭(②)을 선택합니다. Enable conditional recipients(조건부 수신자 활성화) 옵션을 활성화합니다. 그런 다음, Add conditional..

워드프레스 엘리멘터 '사이트에 기본 키트가 없습니다' 오류

워드프레스 사이트에서 엘리멘터(Elementor)로 편집 시 "사이트에 기본 키트가 없습니다" 오류가 발생하면서 페이지 편집이 안 되는 경우가 있습니다. 이 에러가 발생하는 경우 대처 방법에 대하여 살펴보겠습니다. 워드프레스 엘리멘터 '사이트에 기본 키트가 없습니다' (Your site doesn't have a default kit) 오류 워드프레스 Jupiter 테마에서 엘리멘터 페이지 빌더로 페이지 편집 시 다음과 같이 "사이트에 기본 키트가 없습니다, 키트가 삭제된 것 같습니다. 새 키트를 만들거나 휴지통에서 복원해 보세요" 에러 메시지가 표시되는 경우가 있습니다. 영문으로는 "Your site does't have a default kit. Seems like your kit was delete..

티스토리 블로그도 네이버 지식스니펫에 노출되네요

이 티스토리 블로그는 구글과 네이버에서 대부분 유입되고 있고 다음 검색엔진에서 저품질이 풀린 것 같지만 유입 비중은 그다지 높은 편은 아닙니다. 이 블로그의 일부 글이 네이버 지식스니펫에 노출되고 있어 네이버에서 유입이 느리지만 방문자 수가 조금씩 늘어나고 있습니다. 네이버 지식스니펫 네이버 지식스니펫은 구글의 추천 스니펫과 비슷한 기능으로 네이버에 의하면 "AI기반 분석 알고리즘을 통해 지식백과, 뉴스, 공식 블로그 등 수많은 문서 중에서 사용자가 검색한 의도에 부합하는 정보를 자동으로 추출하여 보여주는 검색결과"입니다. 이를 통해 질문에 대하여 풍부한 정보를 검색 결과에 표시함으로써 사용자가 원하는 답을 빠르게 확인할 수 있어 검색 편의성을 향상시킵니다. [참고*스니펫(snippet)은 재사용 가능한..

카테고리 없음 2022.07.18

마우스 사용을 최소화하여 워드프레스 글 작성하기

워드프레스는 5.0 버전부터 구텐베르크(블록 에디터)를 기본 편집기로 탑재하고 있습니다. 블록 에디터는 초기에 많은 저항이 있었지만, 지금은 안정화되고 기능도 향상되어 성공적으로 안착한 것 같습니다. 과도한 마우스 사용으로 인한 손목터널증후군... 글을 많이 작성하는 경우 마우스 사용을 최소화하는 것이 손목 건강에 좋습니다. 저는 오랫동안 장기간 마우스를 사용하다 보니 손목터널증후군(수근관 증후군)이 와서 오른손에 문제가 발생했습니다. 손목터널증후군이 오면 쉬어야 하지만, 쉴 수가 없는 것이 현실입니다. 여러 가지 방법을 강구하다가 저는 마우스를 왼손잡이로 바꾸었습니다. 손목터널증후군 예방 - 마우스를 왼손잡이로 바꾸어보자 손목터널증후군은 현대인들의 고질병 중 하나로 가사 노동을 하는 여성들에게 많이 나..

애드센스 수익: '새창으로 열기' vs. '현재 창으로 열기' (링크 태그 target 속성)

티스토리 블로그에서 링크를 삽입할 때 기본적으로 '새창으로 열기'가 선택되어 있습니다. 저는 워드프레스 블로그와 티스토리 블로그에서 대부분의 링크를 '새창으로 열기'로 설정하고 있습니다. 하지만 이 경우 애드센스 수익에는 별로 안 좋을 수 있다고 합니다. 잠시 시간을 내어 애드센스 수익에 유리한 링크 태그의 target 속성이 무엇인지에 대해 고민해보았습니다. 물론 정답은 없지만, 수익형 블로그를 운영하는 분들에 의하면 '새창으로 열기'를 설정하는 것과 설정하지 않는 것이 애드센스 수익에 영향을 미친다고 합니다. 티스토리 링크 삽입 시 target 속성 티스토리에서 링크를 삽입할 때 기본적으로 '새창으로 열기' 체크가 선택되어 있습니다. 저는 이 체크란이 선택된 상태로 보통 링크를 삽입해왔습니다. 그러면..

카페24: 워드프레스 관리자 페이지에 로그인이 안 되는 경우 확인 사항

카페24 호스팅을 이용하는 워드프레스 사이트에서 관리자 페이지에 로그인을 시도할 때 로그인이 되지 않는 경우가 있을 수 있습니다. 카페24에서 워드프레스 관리자 페이지에 로그인할 수 없는 경우 워드프레스 자체의 문제일 수도 있지만, 경우에 따라 카페24의 방화벽 때문에 로그인이 차단되는 경우도 있습니다. 카페24: 워드프레스 관리자 페이지에 로그인이 안 되는 경우 확인 사항 해외에서 워드프레스 관리자 페이지 접속 불가능 해외에서 카페24에서 호스팅되는 워드프레스 사이트의 관리자 페이지에 로그인을 시도하면 아래 그림과 같이 404 Forbidden 에러가 발생하면서 "You don't have permission to access /wp-admin/ on this server" 오류가 표시됩니다. 이 문제..

워드프레스 자동 설치 시 함께 설치되는 플러그인을 삭제해도 될까?

대부분의 웹호스팅 업체에서는 워드프레스 자동 설치 옵션을 제공합니다. 워드프레스가 설치될 때 일부 플러그인이 함께 설치되는 경우가 있습니다. 호스팅 업체의 워드프레스 자동 설치 기능을 통해 워드프레스를 설치할 때 함께 설치되는 플러그인을 삭제해도 되는지에 대해 궁금해하는 분들이 많았습니다. 워드프레스 자동 설치 시 함께 설치되는 플러그인을 삭제해도 될까? 카페24나 블루호스트(Bluehost) 등 대부분의 호스팅 업체에서는 워드프레스 설치 옵션을 제공합니다. 카페24에서 워드프레스 자동 설치 카페24를 사용하는 경우 호스팅 관리 > 계정관리> 프로그램 자동설치에서 최신 워드프레스 버전을 자동 설치할 수 있습니다. 워드프레스는 www 경로와 www/wp 경로에 설치가 가능합니다. 일반적으로 www 디렉터리..

text-decoration-color를 사용하여 링크 밑줄 색상 변경하기

링크의 밑줄 색상은 text-decoration-color라는 CSS 속성을 사용하여 설정할 수 있습니다. 그러면 밑줄 색상을 텍스트 컬러와 다르게 설정하는 것이 가능합니다. text-decoration-color를 사용하여 링크 밑줄 색상 변경하기 기본적으로 밑줄(underline) 컬러는 링크의 텍스트 컬러와 동일하게 설정됩니다. 그러나 링크의 텍스트 색상과 다르게 밑줄 색상을 변경하고 싶은 경우가 있습니다. 이를 위해 대부분 border-bottom 속성을 사용하여 밑줄과 비슷하게 설정해왔습니다. 그러나 border 방법을 사용하지 않고 직접 밑줄 색상을 변경하는 방법이 있습니다. 바로 text-decoration-color 속성을 사용하여 텍스트 데코레이션(이 경우 밑줄)의 컬러를 변경할 수 있습..

IT & 기타/CSS 2022.07.13