WordPress Embed Block for GitHub plugin link clickable

Published Oct 12, 2022 | Updated May 19, 2023 | 0 comments

WordPress GitHub Reposity Embed Block

포스트를 작성하면서 GitHub 링크를 표시할 필요가 있어 사용중인 플러그인이 있다.

사실 그냥 텍스트에 링크만 걸어도 되지만, 좀 더 보기 좋게 표시하기 위해 사용하고 있는 플러그인 중에 하나이다.

기본 탑재된 Embed 블럭의 경우 GitHub 링크는 지원하지 않는다.

그래서 지금은 Embed Block for GitHub 라는 플러그인을 사용 중이다.

예를 들면 다음과 같이 일반 텍스트 링크 보다 훨씬 보기 좋게 표시해 준다.


https://github.com/kkomzi7179/MdiTabStripCS



해당 플러그인을 설치한 다음 포스트 편집화면에서 블럭 목록 중에 GitHub Repo 블럭을 추가해서 사용하면 된다.

블럭을 추가한 다음 우측 블럭 속성에서 GitHub 링크를 지정해 주면 된다.

GitHub 프로필 링크는 지원되지 않고 현재는 Repository 링크만 지원하는 것 같다.

Embed Block for GitHub 플러그인 링크 클릭 안되는 버그 수정

근데 현재(2022-10-12 기준) 시점까지 추가된 블럭에서 링크가 클릭이 되지 않는 버그가 있다.

그래서 지금까지는 해당 블럭 외에 텍스트 링크를 추가해서 클릭할 수 있게끔 처리했다.

근데 이게 생각보다 번거로워서 해결 방법을 찾아 보았는데 생각보다 쉽게 찾을 수 있었다.

해당 포럼(Link does not click | WordPress.org) 에서 해결 방법을 찾을 수 있었다.

몇가지가 있지만 내 경우엔 다음의 CSS 를 활성 테마의 추가 CSS 에 추가 하는게 간편하고 동작에도 전혀 문제가 없었다.

/************************** BEGIN Embed Block for GitHub clickable */
.ebg-br-wrapper > .ebg-br-background-image { pointer-events: none; }
/************************** END Embed Block for GitHub clickable */

해당 스타일을 적용하고 나면 해당 블럭의 Repository 와 Profile 링크 모두 제대로 동작한다.

Learn more on this topic

Related Blog Posts

워드프레스 디버깅

워드프레스 디버깅

워드프레스는 기본적으로 최초 발행일을 표시하게 되어있다. 하지만 난 최초 발행일 뿐만 아니라 최종 수정시점을 표시하기 위해 아래 포스팅에서 작성한 것처럼 마지막 수정일 포함해서 반환하게 수정했었다 https://blog.kkomzi.net/24777 그 이후 며칠 아무 이상 없이 사이트가 잘 작동하는 줄 알았다 하지만 언제 부턴가 관리자 Dashboard 페이지가 일부만 표시되고 나머지 위젯들이 표시가 되지 않았다 정상적인 상황에서는 Site Health Status 가...

read more
워드프레스에서 특정 블럭이 포함된 글을 찾아서 불필요한 블럭 플러그인 정리하기

워드프레스에서 특정 블럭이 포함된 글을 찾아서 불필요한 블럭 플러그인 정리하기

Wordpress 를 사용하면서 필요한 Block 을 찾기 위해서 여러가지 플러그인을 설치하며 사용해 보고 있습니다. 이전에 설치한 플러그인 중에 정리를 하고 싶은데 이미 다른 포스팅에 사용한 적이 있다면 해당 포스트를 검색해서 대체 가능한 블록으로 모두 교체해 준 다음 폴러그인을 삭제하고자 합니다. 검색을 해보니 DB 에서 특정 텍스트를 찾아주는 플러그 인도 있었습니다. 하지만, 특정 Block 를 정확히 지정해서 찾아주는 무료(유료조차 찾을 수 없었음) 플러그인을 찾지...

read more
워드프레스 대표 이미지 사이즈 조정 방법 수정하기

워드프레스 대표 이미지 사이즈 조정 방법 수정하기

포스트 상단에 표시되는 Feather image 의 경우 테마 또는 기타 설정에 따라 다르게 표시되겠지만 현재 사용 중인 테마에서 작은 이미지가 등록된 경우 원본 이미지의 사이즈 보다 크게 확대가 되면서 비트맵 이미지의 특성으로 인해 깨져 보일 수 밖에 없습니다. 그래서 Additional CSS 에 다음과 같이 CSS 를 추가해서 좀 더 자연스럽게 표시될 수 있게 수정하였습니다. object-fit - CSS: Cascading Style Sheets | MDN...

read more

Join in the conversation

Leave a Comment

0 Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

무료 온라인 전광판

전광판

텍스트를 입력하고 텍스트 효과 및 배경효과 를 변경해서 전체화면으로 표시할 수 있는 전광판 용도로 사용하실 수 있습니다. 각종 스포츠 및 공연 관람시 응원 용도로 사용이 가능합니다.

Carousel

여러개의 슬라이드를 추가하여 프레젠테이션 및 이미지 슬라이드 용도로 사용하실 수 있습니다. 브라우저가 포함된 IT 기기로 큰 모니터에 연결하여 매장 내 공지사항 및 메뉴소개를 이미지로 표시할 수 있습니다.

Pin It on Pinterest

Shares
Share This

Share This

Share this post with your friends!

Shares