2020년 7월 27일

통계지리 정보(sgis) 개발자 지원센터 자바스크립트 코드를 워드프레스에 넣을때 주의 사항

통계지리 정보(sgis) 개발자 지원센터에서 코드를 복사하여 붙여넣기 하시면 CSS style 이 정의되지 않아 자바스크립트 가 로드되지 않는 문제가 발생합니다.( 지리 정보가 표시된 페이지가 표시되지 않습니다.)

SGIS 를 운용하려면 CSS 코드( <style type=”text/css”></style> ) 를 넣어야 하는 경우가 많습니다. CSS 코드( <style type=”text/css”></style> ) 는 <head></head>와 <body></body>사이에서 정의하게 되는데 sogo 플러그인에는 header 와 body 사이에 javascript 를 선언해줄 수 있는 부분이 없어 css를 넣을 수 없는 것이 치명적인 약점이 있는 것으로 파악됩니다.

해결책은 elementor 플러그인의 html code를 이용하는 방법과 외부 HTML 및 JavaScript 코드를 스스로 만든 작은 컨테이너에 먼저 삽입하고 스니펫을 편집기 내에 shortcode로 추가하는 방법과 이 있습니다. xyz html Snippet 플러그인은 css 도 추가가 가능하므로 sogo보다는 xyz html Snippet 플러그인을 사용하세요.

워드프레스에서 자바스크립트 추가하기

1. elementor 플러그인의 html code를 이용하는 방법

체험하기에서 코드를 copy하여

통계지리정보 sgis-elemnetor로 간단히 코딩하기-체험하기에는 css 코드가 있는데 이것을 놓침

elementor 의 html code로 편집하면 preview가 제공되고 실시간으로 변경되는 것을 보며 수정할 수 있습니다.

elementor 플러그인의 개요 및 상세 사용법은 아래의 게시글을 참조하세요. elemtntor 는 쉽게 자바스크립트 코드를 넣을 수 있는 장점이 있으나 페이지/포스트 전체를 만들어야 합니다. 특정 테마의 디자인을 전체적으로는 이용하면서 특정 페이지/포스트 또는 특정 페이지/포스트 내의 특정 부분에만 자바스크립트 코드를 넣는 경우, 전체 페이지/포스트를 만들어야 하는 단점이 있습니다.

Elementor Page Builder : 모든 웹 사이트에 필요한 필수 무료 워드프레스 페이지 빌더 플러그인( WordPress plugin )

2. 외부 HTML 및 JavaScript 코드를 스스로 만든 작은 컨테이너에 먼저 삽입하고 스니펫을 편집기 내에 shortcode로 추가하는 방법 (Add Custom JavaScript and CSS to WordPress )

이하의 주황색은 Add Custom JavaScript and CSS to WordPress 의 내용입니다.

워드프레스에 플러그인을 추가하는 것은 애들 놀이 같은 것입니다. 그러나 불행히도 외부 자바스크립트 그리고 CSS를 워드프레스에 추가하는 것은 말처럼 쉽지 않습니다.

한편, 대다수의 훌륭한 기능을 가진 외부 자바스크립트 또는 CSS 코드들은 Github, Codepen(코드팬은 주로 자바스크립트 / CSS / HTML를 테스트 할때 사용합니다.) 그리고 귀하가 작성한 코드들와 같은 저장소에서 발견할 수 있습니다.

이 짧은 글에서는 JavaScript, CSS 및 HTML 코드를 WordPress 사이트에 추가하여 사용자 경험을 향상시키는 새로운 3 가지 쉬운 방법을 제시합니다. 가장 일반적인 것부터 시작하여 특정 게시물이나 특정 페이지, 심지어 특정 위치에 스크립트와 CSS 코드를 추가할 수 있습니다.

# 1 WordPress의 모든 페이지에 사용자 정의 JavaScript 및 CSS 추가 (머리글 또는 바닥 글 섹션)

SOGO Add Script to Individual Pages Header Footer 플러그인

SOGO Add Script to Individual Pages Header Footer

버전:3.9
최근 업데이트:6 months 전
활성 설치:40,000+
워드프레스 버전:3.5 또는 그 이상
다음까지 시험됨:5.3.4
언어: English (US)

이 플러그인은 Add Custom JavaScript and CSS to WordPress 에서 소개하는 플러그인으로 사이트의 모든 페이지에서 Header 또는 Footer 섹션에 JavaScript 또는 CSS를 추가하는 가장 일반적인 방법을 제공하는 플러그인입니다.

이 플러그인을 이용하면 header and Footer 에 Google Analytics 또는 Facebook Pixels와 같은 추적 코드등을 넣을 수도 있고 JavaScript 나 CSS를 변경, 추가할 수 있습니다.

저는 같은 기능을 하는 플러그인으로 아래의 header and Footer 플러그인을 많이 이용했는데, header and Footer 플러그인은 페이지/게시글 단위 등 전체에 일괄 적용하는데 반해 SoGo 플러그인은

페이지/게시글 단위 등 전체에 일괄적으로 넣을 수도 있고 선택적으로 특정 게시물이나 페이지에 코드를 삽입할 수도 있다는 장점이 있습니다.

Header and Footer plugin(워드프레스 플러그인, 사이트 소유권확인, 애널리틱스 분석코드, 구글 애드워즈의 리마케팅 태그를 편집할 수 있는 플러그인)

장점

포함 된 (<script>) 및 링크 된 (<script src =””>) JavaScript 및 CSS를 사이트의 Header 및 Footer에 추가 할 수 있습니다.
코드 삽입은 게시물, 페이지또는 특정 게시물 유형으로만 제한 될 수 있습니다.( 페이지는 일반 페이지, 상품 페이지 모두 가능하고, 태그, 카테고리에서는 작동하지 않습니다.)

단점

무료 버전은 관리자 패널 내부에 광고를 표시합니다.(관리자 페이지에만 표시되고 외부 컨텐츠에는 표시되지 않으므로 문제되지는 않습니다.

추가 설명

코드 일괄 입력 방법

관리자 패널을 통해 SOGO add Script to Individual Pages Header Footer 플러그인을 설치 한 후 ” 설정 “-> ” Header footer Settings “로 이동하시면 원하는 코드를 사이트 전체를 추가할 수 있습니다.

링크된 JavaScript 또는 CSS 파일을 포함하는 경우에도 먼저 FTP (예 : myscript.js 또는 mystyle.css)를 통해 해당 파일을 사이트에 수동으로 업로드해야합니다.

체크박스를 사용하여 “게시물”만 또는 “블로그”게시물 유형 등과 같이 사이트의 특정 섹션에서 코드를 사용하는 것을 제한할 수 있습니다.

sogo add script to individual pages header footer-1

특정 페이지/게시글에 코드 입력 방법

<!DOCTYPE html>
<html>
<head>
<title>지도 줌레벨 변경</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<script type=”text/javascript” src=”https://code.jquery.com/jquery-latest.js”></script> // 플러그인의 “add script / style to be added to the header of the page” 섹션에 넣어주세요. 아래의 이미지의 파랑색 부분입니다.
<script type=”text/javascript” src=”https://sgisapi.kostat.go.kr/OpenAPI3/auth/javascriptAuth?consumer_key=36a9a6a*****478d8527″></script>
</head>
<style type=”text/css”>// css 는 워드프레스 테마와 충돌하므로 코드로 입력하지 않는 것이 좋습니다. sogo 플러그인은 css를 넣을 수 없는 것이 치명적인 약점 같습니다.
.divCon {
margin: 5px 0;
width: 100%-20px;
height: 160px;
overflow-x:hidden;
overflow-y:auto;
border: 2px dotted #3388ff;
}
</style>
<body>
<div id=”map” style=”width:100%-20px;height:400px”></div> // 주황색 부분은 워드프레스 편집 페이지에서 [비주얼] -> [텍스트]로 변경후 원하는 위치에 넣어주시면 됩니다. 다시 [비주얼]로 전환후 워드프레스 편집기로 디자인해주시면 깔금하게 원하는 디자인으로 변경할 수 있습니다.
<div>
<input type=”button” value=”확대” onclick=”zoomIn()”>
<input type=”button” value=”축소” onclick=”zoomOut()”>
<select id=”level”>
<option value=”1″>1</option>
<option value=”2″>2</option>
<option value=”3″>3</option>
<option value=”4″>4</option>
<option value=”5″>5</option>
<option value=”6″>6</option>
<option value=”7″>7</option>
<option value=”8″>8</option>
<option value=”9″>9</option>
<option value=”10″>10</option>
</select>
<input type=”button” value=”변경” onclick=”setZoom($(‘#level’).val())”>
</div>
<script type=”text/javascript”> // “add script to be added to the footer of the page before the (e.g Google Re-Marketing / Google Conversion )… You should put the code with the script tags <script type=’text/javascript’> the code </script>”섹션에 넣어주세요. 아래의 이미지의 분홍색 부분입니다.
var map = sop.map(“map”);
map.setView(sop.utmk(953820, 1953437), 1);
map.zoomIn();
map.zoomOut();
function zoomIn(){
map.zoomIn(); // 줌 레벨 한단계 확대
}
function zoomOut(){
map.zoomOut(); // 줌 레벨 한단계 축소
}
function setZoom(val){
map.setZoom(val);
}
</script>
</body>
</html>

sogo add script to individual pages header footer-2

아래의 페이지는 SOGO Add Script to Individual Pages Header Footer 플러그인 을 이용하여 지도 줌 레벨 변경이 가능하도록 구현한 페이지 입니다.

sgis_test : [지도API 체험하기]중 지도 > 지도 줌 레벨 변경

# 2 특정 게시물 또는 페이지에 사용자 정의 JavaScript 및 CSS 추가 (머리글 또는 바닥 글 섹션)

경우에 따라 랜딩 페이지와 같은 특정 게시물이나 페이지 에 JavaScript 또는 CSS 코드를 추가하고 싶을 수도 있습니다 . 스니펫은 재사용 가능한 소스 코드, 기계어, 텍스트의 작은 부분을현명한 우리는 여전히 HEAD 또는 Footer 섹션에 대해 이야기하고 있습니다. 예를 들어 삽입 콘텐츠 상자 스크립트 는 대상 페이지의 HEAD 섹션에 일부 코드를 삽입하도록 요청합니다. 코드가 중복 될뿐만 아니라 속도가 느려질뿐만 아니라 모든 페이지에 콘텐츠 상자가 팝업되기 때문에 모든 페이지에 코드를 추가하는 것을 원하지 않습니다.

이와 같은 경우, 우리가 제안하는 플러그인은 첫 번째 섹션에서와 동일하며 SoGo Header 및 Footer Script Plugin입니다.

명령

SoGo 머리글 및 바닥 글이 이미 설치되어 있다고 가정하면 WordPress 관리자 패널에서 해당 게시물 또는 페이지로 이동하고 아래로 스크롤하여 해당 페이지에 코드를 추가하는 데 사용하는 두 개의 입력 상자를 확인합니다.

WordPress의 특정 게시물의 HEAD 또는 Footer 섹션에 JavaScript 및 CSS 추가 — Sogo 플러그인-HEAD 또는 Footer 섹션에 게시물 특정 코드 추가

여기에는 위의 섹션 # 1에서 지정한 사이트 전체 외부 코드가 포함되지 않도록 비활성화하는 옵션도 있습니다. 꽤 편리합니다.

# 3 특정 게시물 또는 페이지에 사용자 정의 JavaScript 및 CSS 추가 (콘텐츠 내)

마지막으로, 많은 경우, 추가할 외부 코드에는 슬라이드 쇼와 같이 컨텐츠에 직접 포함되어야하는 부분이 있습니다. WordPress wysiwyg 편집기를 사용하여이 작업을 수행할 수 있지만 추가된 코드가 나머지 내용의 서식을 망칠 위험이 있으며 편집기를 사용할 수 없게 될 위험이 있습니다.

해결책은 외부 HTML 및 JavaScript 코드를 자체 작은 컨테이너에 먼저 삽입하고 스니펫^{(스니펫은 재사용 가능한 소스 코드, 기계어, 텍스트의 작은 부분을 일컫는 프로그래밍 용어이다. 사용자가 루틴 편집 조작 중 반복 타이핑을 회피할 수 있게 도와준다. 위키백과, 여기서는 귀하가 이용하고자 하는 일련의 외부 HTML 및 JavaScript 코드 모음을 의미합니다.)}을 편집기 내에 shortcode로 추가하는 것입니다. 이 작업을 수행하는데 사용할 수 있는 두 가지 멋진 플러그인이 있습니다.( So what’s the solution? A better way is to insert any external HTML and JavaScript code into its own little container first, and add the snippet as a shortcode inside the editor. There are two awesome plugins you can use to accomplish this:)

Insert HTML Snippet (xyzscripts.com)
Reusable Content Blocks (loomisoft) : 24.1.27 기준, 이 플러그인은 워드프레스 지침 위반으로 2022년 5월 7일에 종료되었으며 다운로드할 수 없습니다.

참고 : Insert HTML Snippet (xyzscripts.com) 는 클래식 편집기용 플러그인이고 Reusable Content Blocks (loomisoft) 는 구덴베르크용 플러그인입니다.

Insert Html Snippet 플러그인

By xyzscripts.com

Insert Html Snippet

Version:1.3.1
Last updated:9 months ago
Active installations:30,000+
WordPress Version:3.0 or higher
Tested up to:5.2.7
Languages: See all 2

개요

Loomisoft의 재사용 가능한 컨텐츠 및 텍스트 블록 플러그인을 사용하면 모듈식 및 반복적인 텍스트 및 기타 컨텐츠 블록을 정의하고 페이지, 게시물, 사이드 바, 위젯화된 영역 또는 짧은 코드, 제공된 위젯 또는 PHP를 통해 사이트의 어느 곳에 나 배치 할 수 있습니다.

이 플러그인의 기본 개념은 두 가지입니다.

첫 번째는 반복되는 컨텐츠를 모듈화하여 여러 페이지, 게시물 및 기타 장소에서 동일한 컨텐츠를 사용할 수 있으므로 수십 페이지 및 게시물이 아닌 한 곳에서 관련 컨텐츠를 변경할 수 있습니다.

두 번째는 사이드 바 및 위젯 내에 복잡한 사용자 정의 컨텐츠를 쉽게 추가 할 수있는 방법을 제공하는 것입니다.

WPBakery의 페이지 빌더 (이전의 Visual Composer)와 호환되는 Avada의 Fusion Builder, Beaver Builder 및 SiteOrigin Page Builder는 내장된 블록이 다양한 요소, 레이아웃 및 스타일을 가질 수 있음을 의미합니다.

WordPress.org에서 또는 WordPress 사이트의 관리 페이지를 통해 직접 사용할 수있는 이 플러그인은 완전히 무료로 제공되므로 제공하는 모든 이점을 활용할 수 있습니다.

위의 플러그인들 중 하나는 우리가 필요로 하는 것을 달성시켜 줍니다.

XYZ Html 플러그인 페이지로 이동하여 HTML code부분에 지리정보통계(SGIS)의 Html code 를 넣어주세요. Tracking Name(snippet)의 이름은 영문만 가능합니다. (한글 지원 안 됩니다.)

지리정보통계(SGIS)의 html code를 넣어줄때는 아래의 파랑색 부분은 원래 페이지/게시글의 meta tag중 title, charset 부분과 겹칠 수 있으므로 지우고 넣어주세요.

….
<head>
<title>지도 정보 가져오기</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<script type=”text/javascript” src=”https://code.jquery.com/jquery-latest.js”></script>
<script type=”text/javascript” src=”https://sgisapi.kostat.go.kr/OpenAPI3/auth/javascriptAuth?consumer_key=[사용자서비스키]”></script>
</head>
……

스니펫을 저장한 후 생성된 단축 코드를 사용하여 아마겟돈 위험없이 게시물의 wysiwyg 편집기 내부에 추가하십시오.(Once you’ve saved a snippet, use the generated shortcode to add it anywhere inside a post’s wysiwyg editor without risking Armageddon:) 아래의 이미지처럼 로 묶인 쇼코드=snippet를 넣어주면 끝입니다.

아래의 페이지는 XYZ Html 플러그인으로 작성한 코드를 숏코드로 변환하고 숏코드를 워드프레스에 넣어 지도 타입을 지도와 위성사진간에 변경하는 것을 성공한 test 입니다. 깔끔하게 잘 들어갑니다. 이 플러그인, 매우 만족스럽습니다.

sgis_test : [지도API 체험하기]중 지도 > 지도 타입 변경(지도위성)

loomisoft-content-blocks

By Loomisoft

https://wordpress.org/plugins/loomisoft-content-blocks/

이 플러그인은 2022년 5월 7일에 종료되었으며 다운로드할 수 없습니다. 이유: 지침 위반.

Version:1.4.3
Last updated:2 years ago
Active installations:4,000+
WordPress Version:3.9 or higher
Tested up to:4.9.15
PHP Version:5.2.4 or higher

기타

위에 방법들을 사용해서도 문제가 해결되지 않으면 아래의 글을 다시 살펴보아주세요.

문제가 해결되면 더 이상 살펴볼 필요 없습니다.

아래의 두개의 글을 참조하여 함수에 넣어주고 다시 sgis 를 실행보세요.

워드프레스 테마나 플러그인에서 올바르게 jQuery 또는 자바스크립트를 등록하고 작동시키는 방법

워드프레스에서 js 스크립트 파일과 스타일시트를 올바르게 로드하는 방법 – 워드프레스 중급

이하 초록색은 워드프레스에서 자바스크립트 다루기 의 글입니다.

자바스크립트 코드 추가하기

jQuery가 등록된 것을 확인했고 필요한 플러그인도 추가했다면 이제 할 일은 나만의 자바스크립트 코드를 추가하는 일이겠죠. 여기서는 간단하게 “안녕하세요, 여러분!” 텍스트를 화면에 표시하는 간단한 자바스크립트 코드를 실행하겠습니다. 다만 앞서 설치한 jquerytypewriter 플러그인( 워드프레스 플러그인이 아니고 jquery 플러그인입니다.)도 같이 사용해 보도록 하죠. 사용할 자바스크립트 코드는 아래와 같습니다. 페이지 속 typewriter 클래스(class)로 지정된 문서 객체(DOM)를 찾아 타이핑 효과를 적용합니다.

jQuery(function($) {
    // ready!
    $('.typewriter').typewrite();
});

이 코드를 어디에 어떻게 넣으면 좋을까요?

포스트/페이지 속에 직접 삽입하기

특정 페이지나 포스트에서만 필요로 하는 코드라면 굳이 번거롭게 할 것 없이 바로 포스트나 페이지 속에 입력하면 되겠죠? 예를 들어 랜딩페이지(landing page)를 하나 만드는데 그 페이지 속에서만 필요한 자바스크립트 코드라면 페이지 편집기 속에서 직접 다음과 같이 입력하면 될 것입니다. (주의: 편집기의 텍스트 모드에서 입력하세요!)

이렇게 스크립트를 직접 포스트 속에 넣는 방식이 마음에 들지 않거나(사실 별로 좋은 방식은 아니죠^^. 워드프레스 코덱 문서에서는 아주 간단한 스크립트만 사용하라고 하고 있구요)

사실 이렇게 직접 편집기에서 자바스크립트를 입력하는 방식은 좋은 방법이 아닙니다. 웬만하면 사용하지 마세요!!

비주얼 편집기 모드로 인해 잘 작동하지 않는 분들은 플러그인을 이용하면 간단합니다. 포스트나 페이지 단위로 스크립트를 포함시킬 수 있도록 해주는 Scripts n Styles 같은 플러그인을 사용하거나 숏코드(shortcode) 등으로 처리할 수 있도록 해주는 플러그인들이 많이 있습니다. 예를 들면 다음과 같은:

Shortcoder 스크립트를 숏코드로 만들어 숏코드를 편집기에 추가
Raw Html 스크립트를 raw 숏코드로 감싸 워드프레스의 자동 포매팅을 방지
Code Embed 커스텀 필드를 이용한 코드 입력 방식

Scripts n Styles 플러그인

By unFocus Projects

Scripts n Styles

Version:3.5.1
Last updated:1 year ago
Active installations:30,000+
WordPress Version:5.0 or higher
Tested up to:5.1.6
PHP Version:5.4 or higher

참고자료 : 1. 워드프레스에서 자바스크립트 다루기

2. 워드프레스에서 js 스크립트 파일과 스타일시트를 올바르게 로드하는 방법 – 워드프레스 중급

3. Add Custom JavaScript and CSS to WordPress

상희 김

검색엔진최적화, 인바운드마케팅, 유튜브최적화 전문

1 Comment

sgis_test : [지도API 체험하기]중 지도 > 지도 줌 레벨 변경 See&Buy : 검색상위노출과 매출증대를 이끄는 검색엔진최적화/인바운드마케팅/유튜브 전자상거래 전문 기업 검색엔진최적화, 인바운 댓글:

2020년 8월 29일, 6:18 오후

[…] 워드프레스에서 자바스크립트 추가하기(add custom javascript to wordpress) […]

응답

워드프레스에서 자바스크립트 추가하기(add custom javascript to wordpress)