본문 바로가기
지속가능티끌/웹,워드프레스

워드프레스. GitHub Gist 코드 문서삽입.

by i.got.it 2017. 3. 1.


 

개요

 

GitHub Gist 의 코드를 워드프레스 문서내에 삽입하는 방법 2가지.

방법1. oEmbed 삽입방식.

- visual 편집모드에서 GitHub Gist 코드의 URL 을 복사 붙여넣기 하면, oEmbed 기능에 의하여 즉시 문서에 시각적으로 표현되는 방식. GitHub Gist 코드 주소 예 : https://gist.github.com/igotit-anything/e6b3415dadbba8ffc69de603b51ce35b

방법2. 스크립트 코드 html 삽입방식.

- html 편집모드에서 스크립트 코드 붙여넣기

편리한 정도. 방법1이 방법2보다 훨씬 편리함.

아래 방법1과 방법2 모두 정리함.
 


 

 

방법1. oEmbed 방식 GitHub Gist 코드 워드프레스 문서 삽입.

 

oEmbed 지원 플러그인 설치.


oEmbed 기능 활성화하기 위한 플러그인 설치.
- 아래 플러그인 2개 중 1개 설치되어있으면 되며 GitHub Gist 코드 삽입 방식은 동일하다.

플러그인1.
JetPack 플러그인

설치정보 : http://igotit.tistory.com/92

JetPack 의 ShortCode Embeds 를 활성화 시켜둔 상태면, oEmbed Gist  플러그인 설치 하지 않아도  문서 편집기에서 주소 기록만으로 Gist 코드가 바로 보이므로, oEmbed Gist 설치할 필요없음.


 

플러그인2.

oEmbed Gist 플러그인 주소 : https://ko.wordpress.org/plugins/oembed-gist/

Gist 코드 oEmbed 방식 삽입전용


사용법.

문서 중에 Gist 의 코드 URL만 기록하면 해당 코드 자동으로 보임.

JetPack 의 ShortCode Embeds 를 활성화 시켜도 동일 효과임.


사용 예.

1. GitHub 에 만들어둔 코드주소 https://gist.github.com/igotit-anything/e6b3415dadbba8ffc69de603b51ce35b

2. 워드프레스 문서 visual 편집기에 GitHub Gist 의 상기1의 주소를 기록.

- Visual 편집모드에서 주소 기록하면 바로 편집 상태에서 아래 처럼 Gist의 코드가 보임.



 


 

 

방법2. 스트립트 코드 붙여넣기 방식 GitHub Gist 코드 워드프레스 문서 삽입.

 

본 방법2는 워드프레스에서 추가의 플러그인등의 설치 없이도 가능한 방법이다.

GitHub Gist 사이트에서 보이 는 버튼 "스크립트 복사" 클릭(아래그림)하여 워드프레스 html 편집모드에서 붙여 넣기 한다.


이 경우 편집기의 Visual 모드에서 보면 아래 그림처럼 코드가 보이지는 않고 아이콘으로 표시된다. 웹에서 볼때는 정상적으로 코드 표현된다.

 


///1227.

댓글



 

비트코인




암호화폐       외환/나스닥/골드         암호화폐/외환/나스닥/골드
     
현물 |선물 인버스 |선물 USDT       전략매니저(카피트레이딩)         프랍 트레이더 온라인 지원가능. MT4,MT5