2017년 WordPress 개발자를 위한 10개 이상의 유용한 자바스크립트 튜토리얼

Matt Mullenweg의 2015 State of the Word 주소에서 그는 전체 WordPress 커뮤니티에 "자바스크립트 배우기, 깊이 있게"라는 숙제를 주었습니다. Calypso 및 REST API와 같은 개발과 함께 이러한 초점은 초보자가 JavaScript를 시작하기 위한 기본 JavaScript 자습서 게시물을 게시한 이유입니다.

하지만 이 게시물은 전적으로 기본 JavaScript 자습서에 중점을 둡니다. 이 게시물에서는 조금 더 나아가 WordPress에 적용되는 JavaScript에 특히 중점을 둔 JavaScript 자습서 콘텐츠 목록을 제공합니다.

기본이 아닌 적용된 JavaScript에 중점을 두고 있기 때문에 이러한 자습서에서 가치를 얻으려면 최소한 JavaScript에 대한 기본적인 이해가 필요합니다. 그렇게 들린다면 WordPress에 적용할 수 있는 JavaScript를 자세히 살펴보고 배우도록 초대합니다!

WordPress 개발자를 위한 유용한 JavaScript 자습서

자습서 목록에 도달하기 전에 이 목록을 실제로 구성하는 방법에 대한 배경 지식을 제공하는 데 시간을 할애하고 싶습니다.

소개에서 언급했듯이 이것은 JavaScript를 배우는 데 도움이 되는 일반적인 자습서 목록이 아닙니다 . 오히려 이 목록에 올리기 위해 두 가지를 찾고 있었습니다.

• 리소스는 특히 WordPress에 JavaScript를 적용하는 방법에 관한 것입니다.
• 내용은 "고기"를 다루고 있습니다. 즉, 짧은 코드 조각이나 간단한 설명 그 이상입니다.

이 두 가지 요구 사항 외에도 이 목록의 자습서에서는 상당히 다양한 응용 프로그램을 다룹니다. 또한 일부는 더 광범위한 코스 또는 모음이지만 대부분은 독립 실행형 자습서입니다.

마지막으로 대부분의 자습서는 무료이지만 목록에 일부 유료 옵션이 섞여 있습니다. 나는 당신이 당신의 예산에 맞는 것을 찾을 수 있도록 어느 것이 무엇인지 반드시 기록할 것입니다.

알겠습니다. 채팅으로 충분합니다. 목록으로 가자...

1. AngularJS를 WordPress 프론트엔드로 사용

Andrea Terzani의 이 튜토리얼에서는 포스트 콘텐츠를 제공하는 간단한 AngularJS 애플리케이션을 구축하는 과정을 안내합니다. Andrea는 이탈리아어이므로 문법이 항상 완벽하지는 않지만( 비판은 아닙니다. 이중 언어 사용에 감사합니다!) 하지만 그는 수많은 코드 예제를 포함하고 있으며 그의 GitHub 페이지에서 항상 전체 패키지를 가져올 수 있습니다.

가격: 무료 | 추가 정보

2. 워드프레스용 자바스크립트

Zac Gordon은 그의 Treehouse 튜토리얼과 수많은 WordCamp 이벤트에서의 연설 덕분에 WordPress 커뮤니티에서 꽤 유명합니다.

워드프레스용 자바스크립트는 워드프레스에 적용되는 자바스크립트를 배우기 위한 그의 "마스터 코스" 프로그램입니다.

이 과정은 공개적으로 제공되거나 무료가 아닙니다. 사실, 코스에 참여하기 전에 좌석을 예약해야 합니다.

Zac은 학습에 대해 "설정하고 잊어버리는" 접근 방식보다 일대일 또는 소규모 집단을 선호하기 때문입니다.

그 개인적인 관심은 저렴하지 않습니다. 코스 시계는 멋진 $697입니다. 그러나 WordPress 개발을 위한 JavaScript 학습에 대해 진지하게 생각하고 있다면 Zac의 자격 증명이 높은 가격표를 확실히 뒷받침합니다.

가격: $697 | 추가 정보

3. 반응형 WordPress 플러그인 구축

많은 개발자들에게 사랑받는 WP Migrate DB 플러그인의 제작자인 Delicious Brains는 WordPress 블로그에 수많은 양질의 개발자 중심 튜토리얼을 게시했습니다. 반응형 WordPress 플러그인 구축에 대한 이 3부작 시리즈도 예외는 아닙니다.

이 시리즈의 세 게시물은 각각 다른 프론트 엔드 기술을 사용하여 동일한 간단한 WordPress 플러그인을 구축하는 데 중점을 둡니다.

전체 시리즈에서 다음을 사용하여 플러그인을 구축하는 방법을 확인할 수 있습니다.

• 백본.js
• 뷰.js
• 느릅나무

자습서는 길고 잘 설명되어 있으므로 이 시리즈에서 확실히 많은 가치를 얻을 수 있습니다.

가격: 무료 | 추가 정보

4. WordPress 관리자 내에서 백본 사용

Envato Tuts+의 두 부분으로 구성된 이 튜토리얼에서는 먼저 WordPress 백엔드 내에서 Backbone JS를 적용하는 방법을 배우고 두 번째 부분에서는 Backbone을 사용하는 방법에 대해 배웁니다.

Shane Osbourne은 많은 코드 예제와 스크린샷을 포함하여 모든 것을 안내합니다.

표준에 따라 코드 품질에 대한 몇 가지 토론에 대해 주석 섹션을 확인할 수도 있습니다.

가격: 무료 | 추가 정보

5. AngularJS 및 WP REST API를 사용한 테마 빌드에 대한 Yoren Chang의 자습서

2014년 10월부터 Yoren Chang의 취미는 AngularJS로 WordPress 테마를 구축하는 것입니다. 그것이 당신에게 왜 중요합니까? 그 시간 동안 그는 자신의 사이트에 있는 여러 자습서 게시물에 취미를 문서화했습니다.

현재 그는 WordPress 테마와 함께 AngularJS를 사용하는 데 전념하는 21개의 다른 자습서를 게시했습니다.

튜토리얼 중 일부는 짧은 퀵히터이고, 다른 튜토리얼은 조금 더 자세히 설명합니다. 하지만 그것들을 모두 모아두면 꽤 오랜 시간 동안 바쁘게 지낼 수 있는 깊은 컬렉션을 갖게 됩니다.

가격: 무료 | 추가 정보

6. 자바스크립트와 워드프레스로 작업하기

JavaScript 및 WordPress 작업은 개발자 Brian Hogg의 짧은 PluralSight 과정입니다.

2시간 미만의 코스는 그다지 많은 노력을 기울이지 않습니다. 플러그인 및 테마에서 JavaScript를 사용하고 AJAX를 사용하여 데이터를 보내고 저장하는 간단한 소개를 안내합니다.

기술적으로 과정에 액세스하려면 PluralSight 멤버십이 필요하지만 과정을 사용하기에 충분한 시간을 제공하는 10일 무료 PluralSight 평가판을 얻을 수 있습니다.

가격 : 무료 w/ 무료 평가판 | 추가 정보

7. WordPress와 Angular.js로 단일 페이지 애플리케이션 만들기

이 JavaScript 튜토리얼은 Envato Tuts+의 Tom Whitbread가 최근에 추가한 것입니다. 이름에서 알 수 있듯이 AngularJS를 사용하여 WordPress를 기반으로 한 단일 페이지 애플리케이션을 빌드하는 프로세스를 안내합니다.

또한 그의 GitHub 페이지에서 Tom의 모든 코드를 찾을 수 있습니다.

가격: 무료 | 추가 정보

8. WordPress REST API 위에 React 앱을 빌드하는 방법

이것은 제목에서 무엇을 다루고 있는지 꽤 좋은 아이디어를 얻을 수 있는 또 다른 하나입니다!

저자인 Andrey가 깊이 있게 다룬 것 외에도 이 튜토리얼에 추가 토론을 위한 견고한 주석 섹션이 있다는 점도 마음에 듭니다.

빌드할 기본 프런트 엔드의 데모와 모든 코드가 포함된 Andrey의 GitHub 페이지도 확인할 수 있습니다.

가격: 무료 | 추가 정보

9. WordPress 플러그인에서 React.js 앱을 작성하는 간단한 경로

WPShout은 개발자 중심의 WordPress 자습서로 커뮤니티에서 잘 알려져 있습니다. 결코 JavaScript에만 초점을 맞추는 것은 아니지만 Fred의 이 튜토리얼은 WordPress 플러그인 내에서 React.js 앱을 작성하는 방법을 보여줌으로써 이전 튜토리얼과 유사한 주제를 파헤칩니다.

게시물의 코드 예제 외에도 Fred는 데모의 전체 코드가 포함된 ZIP 파일도 포함합니다.

가격: 무료 | 추가 정보

10. WPMUDev의 WordPress 개발자를 위한 JavaScript

Smashing Magazine의 WordPress 편집자이자 Elegant Themes의 저자인 Daniel Pataki는 WPMUDev에서 WordPress 개발자를 위한 여러 부분으로 구성된 JavaScript 시리즈를 작성했습니다.

이 과정은 기초부터 고급 주제까지 구성됩니다. 이 목록의 고급 자습서보다 JavaScript 초보자에게 조금 더 친숙합니다. 따라서 지금까지 약간 길을 잃은 느낌이 들었다면 여기에서 시작하는 것이 좋습니다.

가격: 무료 | 추가 정보

11. AngularJS 및 WordPress REST API를 사용하는 단일 페이지 앱

이것은 SitePoint의 Almir에서 제공하는 자세한 자습서입니다. AngularJS를 사용하여 WordPress 및 REST API를 기반으로 하는 단일 페이지 앱을 빌드하는 방법을 자세히 살펴봅니다.

Almir에는 예제에서 사용하는 Angular 앱과 WordPress 자식 테마에 대한 별도의 GitHub 페이지가 포함되어 있으므로 진행 중인 모든 것을 쉽게 따라갈 수 있어야 합니다.

가격: 무료 | 추가 정보

정리하기

REST API에 대한 관심이 높아짐에 따라 JavaScript와 WordPress는 점점 더 가까워질 것입니다. 2017년 3월 현재 WordPress.org 저장소에서 JavaScript 기반 테마를 찾을 수도 있습니다.

따라서 워드프레스 커뮤니티를 따라잡고 싶다면 Matt가 말한 것처럼 "JavaScript를 깊이 있게 배우십시오"가 필요합니다.

이 목록에 있는 하나 이상의 JavaScript 자습서가 도움이 되었기를 바랍니다. 그리고 이 목록에 포함될 만한 훌륭한 튜토리얼을 알고 있다면 댓글로 공유하여 이 리소스를 더 잘 만들 수 있도록 하는 것이 좋습니다.

Teguh Jati Prasetyo의 기사 축소판 이미지 / shutterstock.com