개요 | |
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.
'지속가능티끌 > 웹,워드프레스' 카테고리의 다른 글
워드프레스. JetPack Stats 버그. child theme 에 functions.php 있는 경우. (0) | 2017.03.01 |
---|---|
워드프레스. 파비콘 표현. functions.php (0) | 2017.03.01 |
워드프레스. Featured Image 안보이게 하기. 플러그인. (0) | 2017.02.28 |
워드프레스. 위젯에 PHP 코드 넣기. PHP Code Widget. (0) | 2017.02.26 |
워드프레스. 함수 get_bloginfo. (0) | 2017.02.26 |
댓글