Criação de Temas para WordPress – Aula 3 – Instalando a IDE PHPStorm – eXcript

안녕하세요, 모두가 우리 개발 과정의 다른 에피소드에 오신 것을 환영합니다 부트 스트랩 프레임 워크를 사용하여 WordPress의 테마

이 수업에서는 우리가 배울 것입니다 PHPStorm IDE를 다운로드하고 설치하십시오 IDE PHPStorm은 가장 많이 사용되는 도구입니다 PHP 언어 개발 우리는 동일해야하지만 우리는 쉽게 이해할 수 있습니다 HTML 파일, 자바 스크립트, PHP를 조작하고 또한 쉽게 디버깅 할 수 있습니다

이 스크립트들 매우 많은 PHP 스크립트와 JavaScript 스크립트 IDE를 다운로드하려면, 당신은 입력 할 수 있습니다 : "jetbrainscom/phpstorm", 그렇지 않으면 Google에서 입력 할 수 있습니다 : PHPStorm 그런 다음 나타나는 결과에서 첫 번째 링크는 이미 JetBrains의 링크 일 것입니다 그래서 우리는 그것을 클릭 할 것이고, 우리는 여기 PHPStorm 웹 사이트에 간다

그 후 PHPStorm 9 다운로드를 클릭하고, 다운로드를 클릭하면 다운로드가 시작됩니다 사용중인 운영 체제의 버전과 비교하십시오 그렇지 않으면 a 이 화면과 유사한 화면에서 어떤 운영 체제를 선택할 수 있습니다 당신은 PHPStorm을 다운로드하고 싶습니다 제 경우에는 Windows를 선택하고 클릭합니다 여기 "Get PHPStorm 9 Now"에서

다운로드가 끝나면 다음을 수행 할 수있는 실행 파일을 갖게됩니다 PHPStorm을 설치하십시오 그런 다음 두 번 클릭하고 확인을 클릭하십시오 실행 중 환영 화면에서 다음을 클릭하십시오

다음은 우리는 약관에 동의합니다 설치하려는 디렉토리를 선택하십시오 PHPStorm을 입력하고 다음을 누릅니다 여기서 우리는 원하는 유형을 표시합니다 PHPStorm, 즉 파일 형식과 연결하고 다음을 누릅니다

다음을 누르면 시작 메뉴에 PHPStorm을 추가할지 묻는 메시지가 나타납니다 이 설정을 변경하지 말고 "설치"를 클릭하는 것이 좋습니다 이 작업이 완료되면 설치가 완료됩니다 PHPStorm이 시작됩니다 설치가 완료되면 비슷한 여기

"Run PHPStorm"옵션을 선택하고 "마침"버튼을 누릅니다 사용중인 운영 체제에 따라 방화벽 메시지가 열리고, PHPStorm을 추가 할 수있는 권한을 요청합니다 그런 다음 액세스 허용을 클릭하십시오 그런 다음 비슷한 화면이 열립니다 자, 우선 우리가해야 할 일은 플러그인을 설치하는 것입니다

템플릿에서 기본으로 사용할 HTML 템플릿 파일 메뉴로 가서, "설정"옵션을 클릭하거나 Ctrl + Alt + S 키를 누릅니다 그런 다음, 이 화면과 비슷한 화면이 열립니다 그런 다음 플러그인 옵션을 클릭하면됩니다 설치 한 플러그인을 볼 수있는 화면을 열거 나 다른 방법으로 플러그인을 볼 수 있습니다 새 플러그인을 설치하십시오

처음에는 LiveEdit을 입력하자 표시되지 않은 경우 당신에게 아무 것도, 브라우저를 누른 다음 대부분 LiveEdit 옵션으로 필터링 될 가능성이 높습니다 즉, 플러그인이 이미 열려있을 것입니다 나타나지 않으면, if 당신은 그 화면에 도착하지 않고, 여기를 클릭하고 저장소를 탐색 한 다음 이 화면에서 여기에 "LiveEdit"과 같이 LiveEdit을 입력하십시오 그 후에는 클릭 만하면됩니다

"Install Plugin"옵션에서 다운로드 할 것인지 묻는 창이 열립니다 "LiveEdit"라는 플러그인을 설치하십시오 "예"옵션을 클릭하십시오 다운로드 및 설치시 이 버튼은 "Restart PHPStorm"즉 여기에 표시됩니다

PHPStorm에서 플러그인을 활성화하면 다시 시작해야합니다 그런 다음, 우리는 "Restart PHPStorm"버튼을 클릭합니다 여기 그는 다시 묻고 있습니다 다시 시작하십시오 그런 다음 PHPStorm이 다시 시작될 것입니다

즉, 즉, PHPStorm을 다시 시작한 후에 우리는 다시 플러그인에 가서 플러그인 LiveEdit, 성공적으로 설치되었습니다 그래서 Ctrl + Alt + S를 누른 다음 이미 지시를 받았습니다 여기에 세션 플러그인이 있습니다 그렇게 해보자 "LiveEdit"을 타이프하자

LiveEdit이 PHPStorm에 설치되어 있습니다 이제 OK를 눌러 봅시다 우리는 브라우저에 확장 기능을 설치해야합니다 일하는 것이 좋습니다 PHPStorm과 Chrome 브라우저를 사용하면 브라우저가 업데이트되는 플러그인이기 때문에, 원래 Chrome 용으로 작성되었습니다

브라우저에서 여기를 클릭하십시오 이 옵션, 즉 Chrome 메뉴를 연 다음 클릭합니다 "설정" Chrome 설정이 열립니다 자, 확장 옵션에서 여기를 클릭하십시오

설치 한 확장 프로그램이 열립니다 Chrome 브라우저에서 여기서는 페이지를 아래로 스크롤하여 클릭합니다 '추가 확장 프로그램 가져 오기'옵션에서 이 작업이 완료되면 우리가 다운로드 할 수있는 화면이 열립니다 확장 기능을 설치하십시오 여기에 "JetBrains"를 입력하겠습니다

이 경우, Jetbrains는 모두 함께, 그런 다음 Enter 키를 누릅니다 그런 다음 확장 프로그램이 표시됩니다 확장 목록에 있습니다 이 작업을 완료하면 Chrome에서 사용 옵션을 클릭하기 만하면됩니다 이 "새 확장 확인"화면이 나타나면 추가 버튼을 누릅니다

그런 다음 "Jetbrains IDE Support"(Jetbrains IDE 지원) 성공적으로 추가되었습니다 보시다시피, 여기에 나타납니다 브라우저의 오른쪽 구석에 아이콘이 표시됩니다 여기에는 초기 문자가 있습니다 PHPStorm을 개발하는 회사의 Jetbrains의 경우

그럼 클릭하자 이 확장 프로그램의 PHPStorm을 열었 으면 여기에서 아이콘을 클릭하십시오 Jetbrains의 경우, 운영 체제가 포커스를 보낼 것입니다 PHPStorm의 경우, 즉, 또는 동일한 것이 화면에 표시되거나, 운영 체제가 포커스가 전송되었다는 메시지를 표시합니다 PHPStorm을 표시하는 옵션을 클릭하면 아무 것도 표시되지 않습니다

즉, 클릭하면 Jetbrains 아이콘에 메시지가 PHPStorm으로 보내지는 것이 발생합니다 브라우저와 PHPStorm이 성공적으로 대화하고 있다고 알려줍니다 자, LiveEdit 플러그인이 작동하고 새 프로젝트를 만든 다음 HTML 파일을 작성하고 동기화 중인지 확인하십시오 그런 다음 "File -> New Project"로 가서이 파일을 임시 폴더에 넣으려고합니다 여기에 "C : Users Claudio tmp"를 입력하십시오 시험 프로젝트라면 전화 할게, 그럼 우리는 아래의 URL이 변경되었으므로 "tmp test"를 입력합니다

여기에 "프로젝트 유형 "을 선택하고"빈 프로젝트 "옵션을 선택하십시오 작업중인 창에서 프로젝트를 열려면 화면이 나타납니다 "이 창"옵션을 클릭하십시오 즉,이 창에서 프로젝트를여십시오 여기에 창을 놓고이 창과 비슷한 창이 열립니다

이제 마우스 오른쪽 단추로 방금 작성한 프로젝트의 이름 위에 표시하십시오 그런 다음 "새로 만들기"옵션을 선택하고 "HTML 파일"옵션을 선택하십시오 전화하자 이 연구 HTML 그리고 우리는 OK 버튼을 누른다 이 작업이 완료되면 여기에 비슷한 코드가 있습니다

자, 우리가 여기에 몸으로 들어가서 타이프하면 예를 들어 "Test"와 같은 뭔가를 입력하면 마우스가 오른쪽 부분에옵니다 IDE에서 Chrome 옵션을 클릭하면 Chrome을 열어야합니다 우리 IDE에 입력 한 것으로 표시됩니다 즉, 브라우저가 열렸습니다 우리가 편집하고있는 페이지

예를 들어, 여기에 약간의 변경을하면, IDE 프로 측을두고 브라우저 프로 측을 놓아 두자 지금 우리가 어떤 변화를하면, 그것은 전혀 일어나지 않습니다 자바 스크립트 코드 디버깅 모드에 들어가야하기 때문에, 편집기에 대한 변경 사항을 브라우저에 자동으로 반영합니다 그래서 여기서는 "실행"에서 여기를 클릭 한 다음 "구성 편집"옵션을 클릭합니다 이 화면과 비슷한 화면이 열립니다

여기를 클릭하십시오 + 새로운 실행 방법을 만들려면 JavaScript Debug 옵션을 클릭하십시오 이 작업이 완료되면이 화면이 열리므로 여기서는 스크립트를 실행하고 싶습니다 그런 다음 "name"에서 "JavaScript Debug" 여기 URL에서 필드 끝에있는 3 개의 점을 클릭하면 열립니다 파일을 선택할 수있는 화면 그런 다음 우리가 끝낸 파일을 선택하십시오 "study

html"파일을 만드십시오 이 작업이 완료되면 확인 버튼을 누릅니다 우리는 우리의 스크립트를 실행하기 위해 여기 URL과 PHPStorm이 사용된다는 것을 알 수 있습니다 따라서 방금 작성한 파일을 선택한 순간부터, PHPStorm은 전체 URL을 변경할 필요가 없습니다 내부 서버, 파일 실행 및 디버깅을 가능하게합니다

그런 다음, 방금 작성한 파일을 선택한 후, Chrome과 같은 7 가지 '브라우저'옵션 'Defaut'옵션에 'Chrome'아이콘이 표시되는 경우에도 ' Chrome 옵션을 선택했는지 확인하고 'Defaut'옵션을 유지하지 마세요 Chrome에서 여기를 클릭하고 마지막으로 '이 페이지 표시'옵션을 선택합니다 이 옵션은 스크립트를 실행할 때마다 만듭니다 화면이 열리면 실행 설정을 확인합니다 그래서 처음에는 이 옵션을 선택한 상태로두면 PHPStorm의 작동 방식을 이해 한 후, 그러면이 옵션을 여기에서 변경하면됩니다

그런 다음이 화면이 이 옵션이 열려 있으면 여기에서이 옵션을 선택 취소 할 수있는 옵션이 있습니다 따라서 지금 당장 걱정할 필요가 없습니다 즉, 적용 옵션에서 여기를 클릭 한 다음 확인 버튼을 클릭합니다 여기 PHPStorm에서, 프레젠테이션 옵션에있어 도구 모음이 비디오 상단에 표시되지 않습니다 그래서 저는이 프리젠 테이션 옵션을 떠날 것입니다

그것이 우리가 방금 만든 것입니다 그래서 "보기"를 클릭하고 이어서 "프리젠 테이션 모드 종료"가 표시됩니다 이제 기본 화면이 나타납니다 PHPStorm 우리가 볼 수 있듯이, "JSDebug"실행 모드는 우리는 방금 그것을 만들었습니다, 그것은 메인 툴바에 여기에 표시됩니다

여기서 스크립트를 실행하기위한 작은 설정에서 우리가 구성하는 방식으로 실행될 것입니다 여기에 "JSDebug" 오른쪽 모서리에있는 옵션을 확장하려면 여기를 클릭하십시오 "Edit Configurations"에서 다음과 같은 구현 구성이 있습니다 우리는 방금 만들었습니다

그래서, 당신이 바꾸고 싶을 때마다, 그렇지 않으면, 당신은 스크립트를 실행하는 새로운 방법을 만들고 싶습니다 그냥 화면에 나타나기 만하면됩니다 실행을 구성합니다 그래서 제가 말씀 드렸듯이, 여기를 클릭하여 실행하면, 이 화면을 열어서 실행 모드를 확인하도록 요청할 것입니다 더 이상이 화면을 보지 않으려는 순간부터 선택을 취소하면됩니다

여기에 "이 페이지 보여주기"옵션이 있습니다 그래서 우리 과정의 첫 번째 부분에서이 옵션 여기서 "JSDebug"는 동영상에 표시되지 않지만 스크립트가 아니라 혼자서 스크립트가 실행될 때마다이 작업이 수행됩니다 왜이 옵션이 선택되어 있는지 이제 프리젠 테이션 모드로 돌아가겠습니다 우리는 "보기 -> 프리젠 테이션 모드로 들어가기"로 들어가고, 우리는 디스플레이 스크린을 가지고 있습니다

완료되면 "실행"을 클릭 한 다음 여기 "실행"옵션에 머물러있게됩니다 보시다시피 바로 가기 키는 Alt + Shift + F10입니다 여기에서 "실행"을 클릭 한 다음, 우리는 "Run JSDebug"옵션을 클릭합니다 이 작업이 완료되면이 화면이 여기에 표시됩니다 나는 그것을 극대화 할 것이고, 그런 다음 우리는 여기에서 "실행"옵션, 즉, "study

html"스크립트를 실행 해 봅시다 보시다시피 HTML이 실행되었습니다 여기에 "Test aaaaasss"라는 문구가 인쇄되었습니다 간단히 말해서 시험의 나는 브라우저의 크기를 줄이려고 할 것이고, 여기에 넣을 것이고, 나는 다시 여기로 갈 것이다

pro PHPStorm, "View"프로젝트를 닫습니다 PHPStorm의 크기를 줄이면, 옆에 놓자이 화면을 너무 귀여워서 지금 설정해 보자 IDE에서 여기에 입력하고 동시에 업데이트를 볼 수 있습니다 여기 브라우저에서 일어나고, 우리는 "실행"옵션을 선택한 다음 "디버그"를 선택합니다

JSDebug ", 즉 업데이트가 적용되는 순간에 적용됩니다 문서를 생성 할 때 디버그 모드로 들어가는 것이 중요합니다 그러나 자바 스크립트 디버깅, 거기에 PHP 디버깅, 당신이 상기시켜야한다, 우리는 "Debug PHP"가 아니라 "Debug JavaScript"를 실행하는 방법을 만들었습니다 그런 다음 우리가 만든 "JSDebug"모드에서 디버그 옵션을 클릭합니다 그리고보세요, 우리는 우리의 문서가 표시되고 우리에게 노란색 줄무늬가 보입니다

이 스트라이프는 스크립트 실행 모드가 아니라는 것을 의미합니다 즉, PHP는 우리에게 플러그인이 "JetBrains IDE Support"라고 말합니다이 플러그인의 경우에는 우리는 방금 설치했고 실행 중이며 PHPStorm과 연락하고 있습니다 예를 들어, 우리가 여기에 와서 우리가 가진 것을 선택한다면 유형이 지정되고 텍스트가 변경되면 같은 순간에 변경 될 수 있습니다 여기 브라우저에서

그래서, 우리가 테스트를 타이핑한다면, 여기에 테스트 1, 2, 3, 우리는 동시에 브라우저와 이미 동기화되어 있습니다 그래서 그것은 여러분입니다 이 수업에서 우리는 PHPStorm을 설치하는 방법을 배웠고 또한 자동 업데이트 모드에서 작동하도록 PHPStorm을 구성해야합니다 즉, 스크립트를 실행할 때마다 스크립트를 실행할 필요가 없습니다 변경, 우리는 그냥 플러그인을 LiveEdit을 설치 한 다음 플러그인을 설치 "JetBrains IDE 지원" 마지막으로 자바 스크립트 디버그 모드에서 스크립트를 실행하십시오

우리의 스크립트는 브라우저와 IDE가 연결 상태를 유지할 수 있도록합니다 그게 다야, 다음 수업에서 너희들을 볼거야, 고마워, 나중에 보자!