워드프레스 플러그인 wp-git-code-snippet 개발

wp-git-code-snippet

이번주 일요일부터 오늘 새벽까지 4일동안 워드프레스 플러그인을 만들었다.
약 하루 평균 14시간씩 붙들고 구글링해 가면서 개발했던것 같다. 계획에 없던 일이었다.
PHP, Javascript 를 제대로 공부한적도 없었고, 단순히 HTML, CSS 공부를 하면서 완전 기초적인 부분만 알고 있었다.
그럼에도, 내가 상상하고 코딩하는대로 작동하는 플러그인을 만들어가는 과정에 재미를 느껴서API문서, 다른사람들이 올린 질문들을 공부해가면서 만들었다.

개발언어
PHP, Javascript

배경
자바 공부하는 코드를 블로그에 올리려면 Gist라는걸 사용해야 했다. 물론 Gist를 안써도 코드를 올리는데 문제는 없지만 귀찮다. 그런데 이 Gist를 쓰려면 직접 이 사이트로 가서, 코드를 새로 만들어야 했다.

이런식으로 코드를 입력하고 public gist를 만들면 아래처럼 코드를 예쁘게 공유할 수 있다.

사전조사
찾아보니 깃허브 코드를 gist로 만들어주는 라이브러리들이 소수 있었다. 하지만 궁극적으로 기존 깃허브 코드에 주석을 달아야 했고, 부가적인 작업들이 더 필요했다. 또 그렇게 gist를 만들어도 직접 스크립트를 복사해서 embed 시켜야 해서 메리트가 없다고 생각했다.

아이디어
그래서 떠올린 방법이 내 깃허브 raw 데이터를 위의 gist처럼 만들기로 했다. 그래서 gist가 어떤식으로 이 코드들을 꾸미는지 알아보았다.
Gist가 로드하는 파일들을 보니 CodeMirror 을 사용하는 것을 알 수 있었고, 구글링해본 결과 워드프레스에서도 codemirror block 을 제공하는 플러그인이 있었다. (물론 코드를 표시하는 스타일이 미세하게 다르다.)
그렇게 CodeMirror 플러그인을 설치하고, css를 조금 다듬어 Gist와 거의 유사하게 만들었다.

디테일
문제는 깃허브에서 가져온 rawdata를 코드블럭에 넣는것과, 이를 어떤식으로 실행하게해야할지 에 대한 것이었다.
우선은 워드프레스 API 에서 권장하지 않는 방법이지만, 머리속에 떠오른 유일한 방법은 shortcode를 사용하는 것이었다.
일반적으로 shortcode 는 에디터에서 [shortcode 변수명=”값”] 이런식으로 사용하고 에디터안에서의 동작은 없다.
글을 저장하고나면 나중에 대괄호 안에 있는 코드를 플러그인에서 변환해주는 식이다. (API 문서에서도 절대 output을 가지면 안된다고 한다.)

어쩃든 shortcode를 이용하면 변수를 받아올 수 있고, 내가 원하는 코드를 실행할 수 있었다. 개인적으로 제일 간단할 것 이라고 생각했다.
Editor에 블럭으로 등록하는 방법도 있을 것 같긴한데 찾는게 좀 힘들었다. 다른 사람이 만든 플러그인 뜯어보고 이해하는데도 한나절은 소비한것 같다.

로직
그렇게 받아온 변수로 github 파일 주소에 해당하는 raw data url로 접속하고, 그 내용을 codeblock 에 저장했다.
그리고 나서 코드 블록이 삽입되는 위치와 codeblock 을 배열에 저장한 후, 모든 코드블럭이 생성되고나서 에디터에 블록이 삽입되도록 코드를 작성했다.
구글링과 함께 개발자 도구 콘솔을 켜놓고 명령어를 하나씩 처보면서, 워드프레스 편집기에서 코드 블록을 표시하는 스크립트를 꾸역꾸역 만들었다.

복병
엄청 간단해 보이지만, 엄청난 복병을 만났다. shortcode를 여러게 삽입하게 되는 경우 , 각 shortcode 별로 php 에서 javascript로 변수를 할당해야하는데, 처음에 함수를 작성할때 shortcode가 동일한 변수를 선언하게 되어서, 가장 마지막 shortcode 만 실행하는 식으로 되버렸다.

해결
다행히 구글링(키워드 : multiplze wp_localize_script shortcode) 으로 실마리를 얻을 수 있었다.
1. wp_localize_script 를 이용해서 shortcode가 실행될때 php에서 js로 변수를 전달할때의 변수명을 uniqueid()로 만들어서 전달한다.
2. html tag 클래스 이름에 이 uniqueid 정보를 포함시킨다.
3. javascript 에서 클래스를 검색해서 변수 이름을 가져오고, 다시 이를 토대로 값을 불러온다.
스스로는 상상도 못한 방법이었다. 누군가가 한 답변의 코드를 바탕으로 내 코드를 수정해 나갔다.

결과
어떻게 만들긴 했는데, 코드를 실행 시키려면 코드를 입력하고 새로고침 한 후에 콘솔창을 켜서 함수를 직접 실행시켜야 한다. shortcode를 인식할 때 바로 실행시켜보려고 했으나, 애초에 shortcode가 아웃풋을 만들면 안되는 지라.. 이 쯤에서 만족했다.

플러그인을 설치하고 shortcode로
[‘gsnip’ author=’chlyoo’ repo=’jstudy’ branch=’master’ loc=’Hello.java’]
!!!주의!!! ‘gsnip’ 주위의 작은 따옴표는 없애주어야 한다.
값을 알맞게 입력하고 console 창에서 snipit() 함수를 실행시키면 코드블럭과 하단부분을 위한 div클래스가 생성이 된다. 그리고 코드가 생성되고나서는 shortcode를 지워줘야 정상적으로 업데이트가 된다.

class Hello{
	public static void main(String[] args){
		System.out.println("Hello, world."); 
	}
}
view raw Hello.java hosted with ❤ by GitHub

플러그인 깃 허브 주소: https://github.com/chlyoo/wp-git-code-snippet

여전히 남은 문제점들
1. 자바스크립트 로딩 순서에 문제가 있는것 같다.
body onload 에서 javascript 를 실행시킬때 values 함수를 사용하려고 하면 ReferenceError 가 발생한다. 이부분 때문에 고생을 많이했다.

2. 두번 snipit을 실행해야 코드가 실행된다. 잘 모르겠지만 jQuery가 어딘가에서 제대로 실행이 안되고 걸리는것같다. => 임시방편으로 플러그인이 로드 될때 한번 자동으로 실행하기 때문에 콘솔에서는 한번만 실행하면 된다.
추후 javascript 공부하면서 업데이트가 되길 바란다.

배운것
jQuery, javascript 기초 문법, for 문, if else, 문자열 포함(includes), document.ready
php 일부 명령어(uniqueid(); echo;)
워드프레스 API 일부, javascript로 워드프레스 에디터 다루는법, plugin css 수정하는법, 워드프레스 작동방식 조금.

느낀점
뜬금없이 워드프레스 플러그인에 꽂혀서 4일동안 밤을 새워가며 플러그인을 만들었다. 자바스크립트도 굉장히 매력적이었고, 기능을 하나씩 구현해가는 과정이 즐거웠던 것 같다.
또 한편으로는 너무 열심히 불태워서 에너지가 별로 안남은 것 같다.
자바 공부 해야하는데.. 웹도 개발해야되고… lostring.site 는 거의 멈춰있다. 26일까지 사이트 주요기능 완성하고 보고서 까지 제출해야되는데 ㅋㅋㅋ 모르겠다. 할 수 있을지

사실 이 글이 누군가에게 도움이 될 것이라고 기대하지는 않는다. 나도 내가 작성한 코드를 100% 이해하고 사용하진 못했다. 특별히 php 에서 add_action을 가지고 내가 작성한 함수를 워드프레스가 로딩될때 작동하게 하는부분이라든지, jQuery문에 대한 이해나 비동기 함수 콜 은 아직 모자란 것 같다.

하지만 그래도 혹시나 내가 만든 허접한 플러그인을 보고 힌트를 얻을 사람이 있길 바라며 또 질문이 있는 분은 편하게 댓글을 달아주면 감사하겠다.