워드프레스 자바스크립트: 초보자 가이드

백만 웹 개발자에게 JavaScript가 무엇인지 묻는다면 백만 가지 다른 답변을 얻을 수 있습니다. 웹에서 상호작용하는 거의 모든 것이 JavaScript를 사용하여 수행됩니다.

최신 콘텐츠 관리 시스템(CMS)인 WordPress와 많은 플러그인은 작업을 완료하기 위해 부분적으로 JavaScript에 의존합니다. 들리는 것과는 달리 JavaScript는 Java 프로그래밍 언어와 관련이 없습니다. 마케팅 목적으로만 호출됩니다.

JavaScript와 WordPress의 결합된 기능을 활용하기 위해 알아야 할 모든 것을 살펴보겠습니다.

자바스크립트란?

오래 전 인터넷은 HTML과 CSS에만 의존했습니다. 이 조합을 통해 콘텐츠의 매우 기본적인 스타일을 지정할 수 있습니다. 그러나 콘텐츠를 동적으로 만들기 위해 할 수 있는 일은 거의 없었고 웹 애플리케이션을 만드는 것은 불가능했습니다.

서버를 유지 관리하는 데 훨씬 더 많은 비용이 들었기 때문에 개발자는 클라이언트 컴퓨터에서 작동하도록 JavaScript를 작성하기로 결정했습니다. 다른 함수형 프로그래밍 언어와 유사한 방식으로 작성된 JavaScript는 데이터를 함수로 가져와 처리하고 데이터를 출력할 수 있습니다.

웹 브라우저에는 JavaScript 코드를 실행하는 방법을 알고 있는 JavaScript 엔진이 있습니다. 예를 들어 Chrome의 JavaScript 엔진은 v8이고 FireFox JavaScript 엔진은 SpiderMonkey입니다. 이러한 이유로 Javascript는 브라우저에 의존하여 데이터 표시를 해석, 처리 및 조작하는 방법을 "이해"합니다.

JavaScript의 기술적 측면

JavaScript 이면의 기술에 대해 더 알고 싶으십니까? 다른 유형의 개발 경험이 있는 사람들이 알아야 할 몇 가지 중요한 차별화 요소가 있습니다. 첫째, JavaScript는 PHP처럼 유형에 구애받지 않습니다. 즉, 변수에는 정의된 유형이 없으며 주어진 변수는 거의 모든 유형의 값에 할당될 수 있습니다.

대부분의 현대 언어는 "객체 지향"입니다. 즉, 문자 그대로의 개체를 나타내는 재사용 가능한 "클래스"에 의존합니다. JavaScript가 이에 가장 근접한 것은 "프로토타입"을 통해서입니다. 이러한 데이터 구조는 재사용할 수 있고 특정 값을 보유할 수 있지만 기능과 유용성은 Java와 같은 객체 지향 개념을 기반으로 구축된 언어보다 훨씬 제한적입니다.

자바스크립트는 무엇을 합니까?

Facebook 및 Netflix와 같은 대기업의 막대한 커뮤니티 지원과 투자로 인해 JavaScript는 웹 브라우저 내에서 작동하는 것 이상의 작업을 수행할 수 있습니다. JavaScript는 웹사이트의 저작권 기호 옆에 표시하기 위해 현재 연도를 잡는 것과 같은 간단한 작업을 수행할 수 있으며, 온라인 이미지 편집기를 위한 대량 처리를 수행하는 것과 같은 보다 복잡한 작업을 수행할 수 있습니다.

간단히 말해서 JavaScript는 개발자가 클라이언트 컴퓨터에서 수행하려는 거의 모든 작업을 수행합니다. JavaScript는 클라이언트가 이를 사용하는 사이트를 방문할 때 클라이언트 컴퓨터에서 로컬로 캐시합니다.

민감한 데이터는 서버에서 처리해야 하지만 많은 웹 기반 응용 프로그램은 클라이언트 컴퓨터의 처리 능력을 활용하기 위해 JavaScript를 많이 사용합니다. 다양한 콘텐츠를 더욱 빠르게 개발할 수 있는 무한한 "프레임워크" 시대에 접어든 지금, 그 가능성은 무궁무진합니다.

자바스크립트는 안전한가요?

대부분의 프로토콜 및 이전 언어와 마찬가지로 JavaScript는 처음에 보안을 염두에 두고 제작되지 않았습니다. 사이버 공격이 얼마나 만연하게 되었는지를 고려할 때 이것은 매우 합리적인 생각입니다.

모든 JavaScript 코드가 실행되는 것을 단순히 차단하는 "NoScript"와 같은 브라우저 확장이 있습니다. 웹의 일반적인 규칙을 따르고 신뢰할 수 없는 사이트를 방문하지 않는 한 JavaScript가 실행되도록 허용해도 됩니다.

프로그래밍 언어이기 때문에 물론 악의적인 사용자가 이를 악용하여 컴퓨터를 공격할 수 있습니다. 최신 브라우저는 이러한 공격의 대부분을 자동으로 감지합니다. WordPress JavaScript의 보안이 걱정된다면 웹사이트 보안의 대부분을 자동 조종 장치에 두는 WordPress 보안 플러그인을 사용하면 마음의 평화를 얻을 수 있습니다.

두 가지 주요 JavaScript 공격 유형

"친구는 가까이, 적은 가까이 하라"는 격언은 개발 및 보안과 관련하여 적절합니다. 나쁜 사람들이 JavaScript를 어떻게 활용하여 그들의 노력을 방해할 수 있는지 이해하는 것이 매우 중요합니다!

교차 사이트 스크립팅(XSS)

XSS(교차 사이트 스크립팅)는 모든 WordPress 사이트에서 사이트 간 취약점을 악용하여 실행되는 맬웨어 공격 유형입니다. 실제로 XSS 취약점이 있는 WordPress 플러그인이 너무 많기 때문에 WordPress 사이트가 해킹되는 가장 일반적인 방법입니다.

페이지에서 데이터 제출을 허용하는 경우 사이트 간 스크립팅 공격이 사용됩니다. 이 공격에서 악의적인 사용자는 데이터에 JavaScript 코드를 삽입하여 대중이 액세스할 수 있는 페이지에 제출합니다.

완화 조치가 없는 경우 이 악성 코드는 실제로 해당 페이지를 방문하는 모든 사람의 컴퓨터에서 JavaScript 코드를 실행합니다. 이것이 입력을 "소독"하는 것이 중요한 이유입니다. 즉, 게시하기 전에 코드를 쓸모 없게 만드는 대괄호 및 따옴표와 같은 항목을 제거합니다.

CSRF(교차 사이트 요청 위조)

이러한 유형의 공격은 이미 로그인되어 있을 수 있는 웹 페이지를 이용합니다. 가장 일반적인 시나리오는 은행에 로그인하는 것입니다.

은행 계좌에 로그인했지만 CSRF가 준비된 토렌트 웹사이트로 이동하기로 결정했다고 가정해 보겠습니다. 브라우저 완화 기능이 없는 경우 CSRF는 링크 패턴을 채택하여 모든 주요 은행에 대해 은행 송금과 같은 작업을 수행한 다음 백그라운드에서 컴퓨터에서 실행합니다.

주요 사이트와 주요 은행에서 실제로 발생한 한 가지 시나리오는 은행의 송금 링크가 www.bankwithbadsecurity.com/transfer&amount=1000&toAccount=12345 와 같이 1,000달러를 계좌 번호 12345 로 이체하는 것이었습니다.

은행에서는 귀하가 요청한 것으로 보이며 귀하의 IP 주소에서 요청이 올 것이기 때문에 귀하가 시작하지 않았다는 것을 증명하기 어렵습니다. 다행히도 대부분의 최신 브라우저는 이를 자동으로 감지하여 방지합니다.

WordPress 내에서 JavaScript를 사용할 수 있습니까?

예, WordPress용으로 개발할 때 JavaScript를 사용할 수 있습니다. WordPress는 두 가지 편집 모드가 있는 유연한 콘텐츠 관리 시스템입니다. 그 중 하나를 사용하면 코드를 직접 편집할 수 있고, 다른 하나는 "WYSIWYG" 편집기라고도 하는 워드 프로세서에서 볼 수 있는 것과 유사한 편집기를 사용할 수 있도록 합니다. 최신 버전의 WordPress에서 WYSIWYG 편집기는 Gutenberg라고 합니다.

WordPress용 확장 프로그램을 개발할 때도 JavaScript를 사용할 수 있습니다. WordPress의 서버측은 PHP인 반면 클라이언트측은 거의 100% JavaScript입니다.

WordPress용 JavaScript를 배워야 하나요?

이 질문에 대한 답은 WordPress로 무엇을 하려는지에 따라 다릅니다. 플랫폼을 사용하여 생성하는 정적 페이지 몇 개만 원한다면 JavaScript를 배우지 않아도 괜찮을 것입니다.

반대로 JavaScript를 시작하는 것은 매우 쉽고 HTML과 CSS가 작동하는 방식에 대해서도 많은 것을 배울 수 있습니다. 그러나 워드프레스 교육 외에도 역동적이고 기억에 남는 사이트를 만들고 싶다면 자바스크립트를 배우는 작업을 하고 싶을 것입니다.

빠른 경고: 초보 웹 개발자라면 며칠 만에 JavaScript를 마스터할 수 있을 것이라고 기대하지 마십시오. JavaScript는 매우 모호한 오류 메시지로 악명이 높으며 종종 "스파게티 코드"라는 비판을 받습니다. 이것은 수년에 걸쳐 개발자들이 적절하게 구성하지 않고 많은 코드를 쌓아왔다는 것을 의미합니다. 게다가 대부분의 개발자는 JavaScript를 사용 하지만 구문적으로는 약간 다른 프레임워크에서 프로그래밍하는 방법을 배웁니다.

프리랜서나 클라이언트 사이트를 관리하는 에이전시라면 특히 JavaScript 학습에 시간을 투자해야 합니다. 여러 WordPress 사이트를 관리할 수 있는 최고의 도구가 있지만 플러그인은 사이트를 만들 수 없습니다!

또한 웹 개발자가 되고자 하는 열망이 있다면 JavaScript를 배우는 것이 다음 직업에 도움이 됩니다.

• 프론트엔드 개발자
• 백엔드 개발자
• 풀스택 개발자

또한 고급 HTML, CSS 및 PHP와 함께 JavaScript를 학습하면 간접비를 줄일 수 있는 견고한 WP 기반 역할을 합니다. 실제로 완료하는 데 몇 분이 걸릴 수 있는 작업을 수행하기 위해 더 이상 외부 계약자에게 비용을 지불할 필요가 없습니다. JavaScript를 마스터하면 React 및 Angular와 같은 인기 있는 프레임워크로 이동하여 WordPress 내에서 진정으로 고유하고 반응이 빠른 애플리케이션을 만들 수 있습니다.

WordPress에서 코딩할 때 JavaScript를 어떻게 작성합니까?

WordPress 사이트에 JavaScript를 추가하는 것이 CSS와 HTML을 추가하는 것만큼 간단하지는 않지만 시작하는 데 오래 걸리지는 않습니다. 접근 방식에는 두 가지가 있으며 각각 목적이 다릅니다.

방법 1: 모든 페이지에서

WordPress 사이트의 모든 페이지에서 동일한 스크립트를 실행하려는 경우 각 페이지에 수동으로 코드를 추가하는 것은 매우 지루할 것입니다. HTML 내에 JavaScript를 삽입하는 적절한 위치는 페이지의 머리글과 바닥글 내에 있습니다.

사용자 정의 JavaScript를 가져와 WordPress 사이트의 모든 페이지의 머리글 및/또는 바닥글에 드롭하는 몇 가지 무료 플러그인이 있습니다. WordPress 관리자는 Google Analytics와 완벽하게 작동하여 모든 페이지 조회수가 계산되어 SEO 순위를 더 빠르게 높일 수 있기 때문에 이러한 플러그인을 좋아합니다.

방법 2: 각 페이지에 다른 JavaScript

작동하기 위해 적어도 하나의 "라이브러리"에 의존하는 각 페이지에 다른 도구가 있는 WordPress 사이트를 실행하고 있다고 가정해 보겠습니다. 자바 스크립트의 전부를 강제로이 사이트에, 것이다 단순히 천천히 아래로 액세스를 필요로 아니에요 특히, 매 페이지에로드합니다. 상식적으로 방문자의 경험을 늦추는 것이 비즈니스를 이기는 가장 좋은 방법은 아닙니다!

웹에는 이 프로세스를 수행하는 엄청나게 복잡한 방법이 있는 자습서가 많이 있습니다. functions.php 파일 내에서 복잡한 편집을 하여 이것이 가능하다는 것은 사실이지만, 골치 아픈 일을 즐기지 않는 한 이 접근 방식을 취할 필요는 없습니다.

대신 사이트에 Code Embed 플러그인을 설치하세요. 이렇게 하면 JavaScript를 추가하고 페이지 내에서 원하는 곳에 삽입할 수 있습니다.

CodeEmbed 플러그인 사용

Code Embed 플러그인을 설치한 후 화면 옵션으로 이동하여 "사용자 정의 필드"라는 확인란을 누르십시오. 이렇게 하면 페이지에 JavaScript를 추가할 수 있습니다.

편집 페이지에 "새로 입력" 사용자 정의 필드 옵션과 함께 "사용자 정의 필드"라는 상자가 표시됩니다. 그것을 클릭하면 JavaScript 코드의 이름과 코드 자체를 입력할 수 있는 빈 텍스트 상자가 생깁니다.

기존 WordPress 코드와 충돌을 방지하려면 JavaScript 코드 이름을 대문자 "CODE"로 시작 해야 합니다. "CODEtimer"와 같은 것이 좋을 것입니다. 그런 다음 실제 JavaScript를 다른 상자에 추가합니다. 스크립트 열기 및 닫기 태그를 포함해야 합니다!

완료되면 "사용자 정의 필드 추가"라는 버튼을 클릭하기만 하면 됩니다. 마지막으로 페이지에서 JavaScript 코드를 실행할 위치를 식별합니다. 예를 들어 코드가 타이머를 로드하는 경우 페이지에서 해당 타이머를 삽입할 위치를 찾으십시오. 그런 다음 정확한 구문 [[CODEtimer]] 을 사용하여 WordPress가 여기에 JavaScript를 삽입하도록 하면 완료됩니다!

WordPress에 JavaScript 및 CSS 파일을 어떻게 포함합니까?

WordPress에는 기본 제공 테마가 있지만 많은 웹 개발자는 더 독특한 디자인을 선호하고 자체 CSS를 사용합니다. 이러한 JavaScript 파일을 저장하는 방법도 필요합니다.

이 부분에서는 파일 관리자로 이동하여 "functions.php"라는 파일을 찾아야 합니다. 이것은 사이트의 기본 테마가 있는 폴더에 있습니다.

functions.php에 CSS 추가하기

functions.php 파일에 있으면 다음 단계를 따르세요.

1. 새 줄에 코드 함수를 추가하여 빈 함수를 만듭니다.
   addMyCSS() { #나중에 채우기 }
2. 다음 단계에서 wp_register_style 이라는 내장 함수를 사용하여 CSS 파일을 WordPress에 "등록"하십시오.
3. 코드에 넣은 필러를 제거하고 대신 wp_register_style('name_of_css_style',plugins_url('file-location.css',__FILE__));
4. 이제 WordPress에 CSS 스타일의 이름과 위치를 알려 주었습니다. 이제 스타일을 "대기열에 추가"하거나 WordPress에 사용할 준비가 되었다고 알릴 때입니다.
5. addMyCSS 함수 블록 내에서 코드를 추가하십시오. wp_enqueue_style('name_of_css_style'); 마지막 단계에서 입력한 코드 바로 아래에 있습니다.
6. 마지막 단계가 하나 있지만 먼저 PHP 파일의 일반 부분과 우리가 만든 전체 함수의 외부에 있는지 확인하십시오.
7. addMyCSS 외부에 다음 행을 추가하기만 하면 됩니다. add_action('wp_enqueue_scripts','name_of_css_style'); . 이것은 페이지 로드 시 이 파일의 로드를 트리거하도록 WordPress에 지시합니다.

우리는 스타일 시트에 대한 ADD_ACTION 기능에 wp_enqueue_scripts을 왜 당신이 궁금 할 것이다. 이것은 단순히 WordPress가 항상 기능을 구현한 방식입니다.

WordPress에 JavaScript 파일 추가

함수를 생성하고, 파일을 등록하고, 액션을 추가하는 과정을 살펴보았으니, 이 부분은 아주 간단합니다!

1. addMyCSS 에서 했던 것처럼 functions.php에서 addMyJS 라는 함수 를 만드세요 .
2. 우리는 wp_register_script 함수를 사용할 것이지만 조금 더 복잡합니다. 여기에는 5개의 "매개변수"(괄호 안의 항목)가 있습니다. 아래에서 각 매개변수가 무엇인지 확인하십시오.
3. wp_register_script(1. 스크립트 이름, 2. plugins_url(location_of_script.js, __FILE__), 3. JS 종속성 배열, 일반적으로 array(jquery), 4. (선택 사항) 작은 따옴표로 묶인 JS 파일 버전, 5. 다음과 같아야 합니다. 바닥글에 JS를 포함하려면 true, 머리글에 포함하려면 false),
4. 다음은 테마 바닥글에서 실행할 JavaScript의 실제 예입니다. wp_register_script('timer_js', plugins_url('timer_file.js', __FILE__), array('jquery'),'1.0', true);
5. 다시 말하지만, addMyJS 함수의 OUTSIDE 에서 이것을 PHP의 일반 영역에 넣어 스크립트를 "대기열에 넣습니다": add_action( 'wp_enqueue_scripts', 'addMyJS' );

복잡해 보일 수 있지만 일단 익숙해지면 1분도 채 걸리지 않으니 두려워하지 마세요!

WordPress에 JavaScript를 추가하는 데 사용할 수 있는 플러그인은 무엇입니까?

이 목적을 위한 많은 완전 무료 플러그인이 있습니다. 각각은 약간씩 다르게 작동하므로 커밋하기 전에 몇 가지를 실험해 보십시오. 다음은 시도해 볼 5가지 주요 기능입니다.

• ASync – 고유하게 이 플러그인은 JS 및 CSS 파일을 페이지의 나머지 부분과 별도로 로드합니다. 이는 페이지 로드를 무기한 중지하는 코딩 오류가 있는 경우 특히 유용할 수 있습니다.

• 위젯의 JS – Google Analytics와 같은 코드에 몇 줄만 추가하면 됩니까? 이 플러그인은 번거로움을 없애고 WordPress 사이트에 작은 스니펫을 추가할 수 있습니다.

• Zia CSS/JS Helper – 이것은 클래식 HTML/CSS/JS 웹 개발 경험이 있는 사람들에게 단연 최고입니다. cPanel의 파일 관리자를 통해 사이트를 편집하는 것처럼 WordPress 편집 기능을 만듭니다. 인라인 CSS 및 JavaScript를 활용하여 코드를 빠르게 추가하고 외부 파일을 생성 및 관리하는 등의 작업을 수행할 수 있습니다.

항상 먼저 사이트를 백업하십시오!

대다수의 WordPress 플러그인은 사이트에 아무런 해를 끼치지 않지만 항상 문제가 발생할 가능성이 있습니다. 추가 플러그인을 설치하거나 사이트를 수정하기 전에 BackupBuddy와 같이 WordPress 설치의 전체 백업을 처리할 수 있는 WordPress 백업 플러그인을 사용하여 사이트를 백업하십시오. 가능한 재작업 시간을 절약하고 모든 노력이 헛되지 않도록 하십시오.

JavaScript를 사용하여 WordPress API를 사용할 수 있습니까?

아시다시피 WordPress에는 광범위한 일련의 API 또는 응용 프로그래밍 인터페이스가 있습니다. API는 본질적으로 JavaScript와 같은 언어에서 활용할 수 있는 서버 측 기능입니다. 개발자가 WordPress API 기능을 배울 수 있는 더 새롭고 현대적인 방법은 WordPress API 코드 참조 페이지를 사용하는 것입니다.

여기에서 이전에 사용한 "내장 함수"를 얻었습니다. 우리는 API의 각 기능과 JavaScript와 함께 작동하는 방법에 대해 며칠 동안 계속할 수 있습니다. 그러나 그것은 단순히 배우기 위해 개인의 시간과 헌신이 필요한 고급 주제입니다.

WordPress에 맞게 설계된 JavaScript 라이브러리가 있습니까?

예! 많은 개발자가 WordPress API 콘텐츠 전체를 마스터하지 못했다는 사실을 인식하고 많은 프로그래머가 이전에 논의한 플러그인을 사용하여 쉽게 포함할 수 있는 JavaScript 라이브러리를 만들었습니다.

대부분의 JavaScript 라이브러리는 GitHub에서 찾을 수 있으며 완전 무료입니다. WordPress에 재미있는 효과를 추가하는 것부터 Pinterest와 레이아웃이 매우 유사한 사이트를 만들 수 있는 것까지, WordPress와 호환되는 수십만 개의 JavaScript 라이브러리가 있습니다!

WordPress(및 대부분의 사이트)에서 사용되는 가장 잘 알려진 라이브러리는 jQuery입니다. jQuery는 JavaScript의 복잡성을 없애고 일단 익숙해지면 함수를 빠르고 쉽게 작성할 수 있습니다.

돕다! 내 WordPress JavaScript가 작동하지 않습니다!

JavaScript의 덜 운이 좋은 부분 중 하나는 오류가 명확하지 않다는 것입니다. 그리고 그 위에 WordPress를 추가하면 상당히 혼란스러울 수 있습니다.

일부 오류는 잊어버린 따옴표처럼 쉽게 발생할 수 있습니다. 다른 것들은 쉽게 식별되지 않는 주요 코딩 오류로 인해 발생할 수 있습니다. 그렇다면 전문 개발자는 그 차이를 어떻게 구분할까요?

문제 해결에는 console.log JavaScript 기능과 브라우저 디버깅 콘솔의 두 가지 주요 키가 있습니다. 특히 Chrome의 콘솔은 이에 적합합니다.

console.log

이것은 함수의 주어진 지점에서 변수 값이 무엇인지 확인하고 함수의 일부가 실제로 도달하고 있는지 확인하는 데 사용할 수 있습니다. JavaScript 파일 내에서 간단히 console.log("test"); .

디버깅 콘솔

사용 중인 브라우저에 따라 콘솔 설정이 다릅니다. 일반적으로 F12 키를 눌러 연 다음 "콘솔" 탭을 클릭하기만 하면 됩니다.

콘솔에 오류가 발생한 JavaScript 파일의 행이 표시됩니다. 일반적으로 전체 "스택 추적" 또는 범인을 잡을 때까지 거쳐야 하는 일련의 파일을 보여줍니다. 이것은 또한 console.log 메시지가 인쇄되는 곳이기도 합니다.

마무리: JavaScript + WordPress

훨씬 더 많은 통찰력을 제공하는 전문 도구가 있지만 일반적으로 비용이 꽤 많이 듭니다. 좋은 소식은 세계 최고의 WordPress JavaScript 개발자로 확장하면 도구도 함께 확장된다는 것입니다!

크리스틴 라이트

Kristen은 2011년부터 WordPress 사용자를 돕기 위해 튜토리얼을 작성해 왔습니다. 일반적으로 그녀가 iThemes 블로그의 새 기사를 작성하거나 #WPprosper를 위한 리소스를 개발하는 것을 볼 수 있습니다. 직장 밖에서 Kristen은 일기 쓰기(그녀는 두 권의 책을 썼습니다!), 하이킹과 캠핑, 요리, 가족과 함께 하는 일상적인 모험을 즐깁니다.