WordPress Theme Development with UnderStrap for Beginners. Step By Step Guide – 2017.

이봐 요, 잘 됐네요 이것은 Arjun이고 내 채널로 돌아온 것을 환영합니다

오늘 우리는 부트 스트랩 기반의 WordPress 테마 프레임 워크 인 언더 스트랩 (Understrap)을 설정하는 방법을 보게 될 것입니다 어떻게 자신 만의 테마를 만들기 시작할 수 있을까요? 이제는 이것이 기본적인 것이 아니라는 것을 알고 있습니다 WordPress 테마 만들기를 시작하십시오 오늘의 설치 과정과 곧 나오는 비디오에 대해 논의 할 것입니다 우리 자신의 주제를 개발하는 것과 같은 다른 일들에 대해 토론하십시오 언더 스트랩에 대해서 말하자면 부트 스트랩을 기반으로합니다

즉, 데스크톱, 랩톱 및 모바일 장치에 아무런 문제가 없습니다 그래서, 더 심해지자 먼저 브라우저를 시작하고 UnderStrap을 검색하십시오 맨 처음 결과를 클릭하면 즉시 최신 버전을 다운로드 할 수 있습니다 실제로 자세한 설명서가 여기에서 제공되므로 어딘가에 걸리면 항상이 가이드를 참조하십시오

내가 여러분에게 보여줄 것은 거의 똑같습니다 따라서 어떤 이유로 내 동영상에 액세스 할 수 없으며이 사본을 보관하고 싶을 수도 있습니다 그것을 인쇄하거나 아시거나, 그냥 가지고 계시므로 언제든지 참조 할 수 있습니다 너는 오프라인이야 이제 언더 스트랩의 복사본을 다운로드 한 후 다음 작업을 수행해야합니다

WordPress 테마 디렉토리에 업로드합니다 이를 위해서는 사용자 이름과 비밀번호를 사용하여 WordPress 대시 보드에 로그인해야합니다 테마 섹션으로 이동하여 새로 추가를 클릭 한 다음 zip 파일을 업로드하십시오 너라면 성공적으로 업로드되면 다음과 같은 메시지가 표시됩니다 이제 활성화를 클릭하여 테마를 활성화하십시오

이제 WordPress 웹 사이트에 적용된 기본 언더 스트랩 테마를 사용해 보았습니다 너는 티크하고 싶을지도 모른다 그래서, 전에 CSS와 SASS를 배우십시오 당신이 그것을 안다면, 우리는 멋지다! 하지만 네가 몰라? 하하, 그냥 키딩! 당신이 그것을 모르는 경우, 나는 확실히 당신이 그것을 배우는 것이 좋습니다 많은 리소스가 온라인에서 제공되며 YouTube에서 비디오를 시청하고 그런 다음 다시 컴백하여 테마를 조정하십시오

그렇지 않으면 막힐 수 있습니다 이제 언더 스트랩을 설치하기 전에 의존성을 설치해야합니다 그래서, 당신은 스포트라이트에 ternminal을 타이핑해야합니다 그러면 터미널에로드됩니다 언더 스트랩을 설치 한 메뉴로 이동하십시오

제 경우에는 HTDocs, WP, WP Content, 테마 및 UnderStrap입니다 따라서 언더 스트랩 (Under Strap)을 터미널로 드래그하면 경로가 표시됩니다 이제 return을 누르고 npm install을 입력하십시오 앞에서 언급 한 문서에서이 모든 명령을 찾을 수 있습니다 설치와 그것이 약 130 메가 바이트의 그것과 같은 것이기 때문에, 어느 정도 걸릴 것입니다

그래서 조금 시간이 걸릴거야 설치가 성공적으로 완료되면 node_modules라는 폴더가 이런 언더 스트랩 디렉토리 따라서, 만약 당신이 이것을 보았다면 당신은 Node와 필요한 모든 의존성을 성공적으로 설치했을 것입니다 언더 스트랩과 함께 일할 수 있습니다 이제 모든 것이 준비되었으므로 여기서 SASS와 협력 할 것입니다

저는 여러분에게 보여줄 것입니다, 기본 언더 스트랩과 함께 오는 것을 어떻게 바꿀 것인가? SASS를 사용합니다 그래서 여기에 텍스트 편집기를여십시오 Sublime Text를 사용하고 있습니다 모든 텍스트 편집기가 잘되고 프로젝트를 추가하십시오 폴더

HTDocs로 이동 한 다음 WordPress 폴더, WP 콘텐츠, 테마, 언더 스트랩을 선택해야합니다 그런 다음 SASS를 선택하고 열기를 클릭하십시오 따라서,이 디렉토리와 내부 테마 폴더, _themescss 파일, 이것이 우리가 정의한 스타일을 정의하는 곳입니다 여기에 뭔가 정의 해 봅시다

몸, 배경 어 빨간색 배경

이중 F, 4 개의 0을 중요하게 설정하십시오 이제이 변경 사항이 웹 사이트에 적용되는지 확인해 보겠습니다 아니! 변경 사항이 적용되지 않습니다 SASS 파일을 컴파일하지 않았기 때문입니다 그렇게하려면 터미널에 가서 설치 한 폴더로 이동해야합니다

언더 스트랩 이번에는 UnderStrap 디렉토리의 SASS 폴더로 이동해야합니다 따라서 WP 콘텐츠 및 테마, 언더 스트랩 및 내부에서는 SASS라는 폴더를 볼 수 있습니다 이제 터미널로 끌어다 놓으십시오 좋아요, 이제 돌아 오면 SASS 폴더에 성공적으로 들어 왔습니다

이제 sudo gulp watch 명령을 입력하십시오 이렇게하면 관리자 암호와 예를 들어, 일단 이것을 얻으면 그것은 그것이 변경 사항을 감시합니다 이제 다시 저장하고 브라우저로 가서 붐을 새로 고 보자 변경 사항이 성공적으로 적용되었습니다 이 방법을 사용하면 원하는대로 많은 조정 작업을 수행 할 수 있습니다

나는 내 고객을 위해서 한 것이고 이것은 내가 워드 프레스와 언더 스트랩으로했던 것과 나는 여기에 많은 사용자 정의를 만들었습니다 PaceJS를 사용하여 로더를 추가했습니다 여기에서 볼 수 있습니다 여기

그렇습니다, understobcom 에의 한 주제 bu UnderStrap 나는 그것을 아직 바꾸지 않았다 현재 공사 중입니다 만, 어 이것은 단지 예일뿐입니다 어쨌든 원하는대로 만들 수 있습니다 SASS와 UnderStrap을 사용하면 원하는대로 편집 할 수 있습니다 이것은 내 웹 사이트의 반응적인보기입니다 음, 오늘은 감사합니다

감사합니다 비디오가 끝날 때까지 많은 사람들 좋아한다면 친구와 공유하고 내 채널에 대해 알리고 할 수 있습니다 서브 구독자가 너무 적기 때문에 구독하십시오 그래서 구독 해주세요

그러면 더 많은 동영상을 업로드 할 수있는 동기가됩니다 그러니, 그렇게 해주세요 구독하고 감사 할 때 종 아이콘을 누르는 것을 잊지 마십시오 너는 대단한 날을 보낸다 내 다음 비디오에서 너희들을 볼거야