WordPress Embed Block for GitHub plugin link clickable

Oct 12, 2022 | 0 comments

WordPress GitHub Reposity Embed Block

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

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

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

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

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


https://github.com/cloudappbiz/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

워드프레스 재사용 가능 블록 메뉴 추가하기

워드프레스 재사용 가능 블록 메뉴 추가하기

워드프레스 관리자 페이지 좌측에 보이는 메뉴 목록에는 기본적으로 워드프레스 재사용 가능 블록 메뉴가 존재하지 않습니다. 재사용 가능 블록을 관리하기 위해 해당 페이지로 가기 위해서는 포스트 추가 및 편집 화면에서 찾아서 들어가야 합니다. 자주 쓰지 않을 때는 몰랐는데 최근에 자주 사용하다 보니 불편함이 생기네요 그래서 메뉴에 추가해서 쉽게 들어갈 방법을 찾던 중 다른 분이 작성해 둔 코드를 보고 추가할 수 있었습니다. ( 참조 링크 ) function.php 에 아래 코드를...

read more
워드프레스 재사용 가능 블록 – Read More

워드프레스 재사용 가능 블록 – Read More

워드프레스로 글을 작성하다 보면 일부 항목을 숨긴 상태로 표시했다가 필요한 경우 사이트를 방문한 사용자가 직접 펼쳐서 내용을 확인하게 하는 방식으로 작성 하는 경우가 있습니다. 이런 경우 Read More 로 검색해 보면 다양한 플러그인이 존재합니다. 아니면 Content Toggle (Accordion) Block For Gutenberg - Ultimate Blocks 같은 블록모음 플러그인을 설치해서 해당 블록을 사용할 수도 있습니다. 하지만 이와 같은 방법은 플러그인...

read more

티스토리에서 워드프레스로 블로그 이전 후 Redirect

Wordpress로 이전 한지 꽤 시간이 지났음에도 아직도 예전 블로그 글들이 오래전에 작성된 거라 더 노출이 잘 되는듯 하다 그래서 이전 블로그 조회시 현재 블로그에 동일한 글이 있는 경우 Page 를 Redirect 하게 끔 수정해 보았다. 두 사이트 모두 permalink 를 동일한 형식으로 사용중이고, 이전 사이트 에서 마이그레이션(링크 참조) 한 상태라 일부러 삭제한 글을 제외하면 동일한 경로에 존재한다. 현재 Wordpress 사이트에 CORS 설정이 필요하다...

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.

cloud app service

전광판

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

Carousel

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

타이머

지정된 시간이 경과한 후 소리로 알려주는 타이머 기능을 하고 있습니다.

Pin It on Pinterest

Shares
Share This

Share This

Share this post with your friends!

Shares