WordPress 사이트에 사용자 정의 코드를 추가하는 방법

WordPress 사이트를 수정하기 위해 PHP, CSS 및 HTML5를 작성하는 것은 꽤 실망스러울 수 있지만 좋은 가이드를 사용하면 더 쉽게 만들 수 있습니다. 이것은 그 가이드가 아닙니다. 이것은 이미 완료된 후 사이트에 코드를 추가하는 방법에 관한 것입니다. 하지만 걱정하지 마세요. 그것도 마찬가지로 중요합니다. 이를 해결하는 데는 여러 가지 방법이 있으므로 다양한 옵션 간의 차이점을 아는 것이 도움이 됩니다. 하지만 먼저 두 가지 경고가 있습니다.

수정하기 전에 백업하세요. 실제로 프로세스 전반에 걸쳐 작업을 계속 백업하십시오. 또한 폐기되었거나 곧 사용될 코드 조각을 붙여넣을 수 있는 별도의 파일을 갖는 것도 도움이 됩니다.
다른 사람의 테마를 설치한 경우 테마의 functions.php 또는 style.css 파일에 코드를 추가하지 마세요. 그렇게 하면 테마가 업데이트되면 모든 노력이 사라질 것입니다.

이 기사의 나머지 부분에서는 가장 단순한 것부터 가장 복잡한 것까지 배열된 몇 가지 대안을 살펴보겠습니다.

WordPress 플러그인

여러 유형의 코드 수정이 있는 것처럼 여러 유형의 사용자 정의 코드 플러그인이 있습니다. 가장 일반적인 두 가지 유형은 PHP와 CSS입니다. 아시다시피 PHP는 WordPress의 아키텍처와 기능을 제어합니다. 따라서 웹 사이트의 핵심 기능을 수정하거나 기능을 추가 또는 수정하려는 경우 다운로드할 수 있는 PHP 플러그인이 많이 있어 도움이 됩니다.

마찬가지로 CSS가 무엇을 하는지도 알고 계실 것입니다. 수정하고 싶은 것이 그게 전부라면 맞춤 CSS 플러그인을 사용하면 번거로움을 최소화할 수 있습니다. 그 배경에는 플러그인과 복잡한 관계를 맺고 있는 JavaScript가 숨어 있습니다. 명확히 말하면 머리글, 바닥글, 하위 테마에 추가하면 완벽하게 작동한다는 점에서 조금 다릅니다. 하지만 게시물에서 사용하려면 특수 플러그인을 사용해야 합니다. CSS 및 Javascript Toolbox와 같은 것이 트릭을 수행해야 합니다. 참고로, 페이지 속도를 위해 바닥글에 넣는 것이 좋습니다.

나만의 플러그인 작성

인터넷에는 특정 기능을 변경, 비활성화 또는 수정하는 데 사용할 수 있는 수많은 WordPress 코드 조각이 있습니다. 그러나 어디에 배치할지 아는 것은 기능을 위해 매우 중요합니다. 예를 들어 플러그인 기능을 수정하는 스니펫이 있는 경우 활성화한 테마에 관계없이 플러그인이 작동하기를 원할 것입니다. 사이트 전체 변경을 처리하는 스니펫도 마찬가지입니다. 따라서 두 경우 모두 새 플러그인을 만드는 것이 좋습니다. 걱정하지 마십시오. 보이는 것만큼 위협적이지는 않습니다.

플러그인 생성의 주요 이점 중 하나는 필요에 따라 플러그인을 활성화하거나 비활성화할 수 있다는 것입니다. 또한 플러그인 페이지에서 플러그인에 대한 상황별 정보를 볼 수 있습니다. 유일한 주요 단점은 사이트 수정을 허용한 다른 사람이 실수로 사이트를 비활성화할 수 있다는 점이지만, 이들에게 엄중한 경고를 하면 이를 방지할 수 있습니다.

참고로 wp-content 폴더에 mu-plugins라는 폴더를 만들 수도 있습니다. 여기에 삽입된 모든 PHP 파일은 항상 실행되며 활성화하거나 비활성화할 수 없습니다. 이렇게 하면 사용자 정의 코드가 테마 및 플러그인 폴더에서 멀리 떨어져 있습니다. 하지만 항상 백그라운드에서 편안하게 실행할 수 있는 플러그인으로만 수행하세요.

사용자 정의 CSS 파일

계획 중인 변경 사항이 사소한 경우 custom-style.css 파일을 만들 수 있습니다. 변경사항을 적용하기 전에 미리 보려면 Chrome이나 유사한 애플리케이션을 실행 중인 경우 언제든지 DevTools를 사용할 수 있습니다. 또 다른 가능성은 WordPress 테마를 통해 사용자 정의 CSS를 추가하는 것입니다. Total 프레임워크와 같은 일부 프리미엄 테마에는 쉽게 찾고 조정할 수 있는 사용자 정의 CSS를 추가할 수 있는 테마 패널 옵션이 포함되어 있습니다. 또한 테마를 업데이트해도 테마 패널 설정은 변경되지 않고 유지되므로 사용자 정의 CSS는 그대로 유지됩니다.

CSS 캐스케이드가 역순으로 진행된다는 점을 기억하세요. 즉, 나중에 나타나는 규칙이 항상 이전에 나타나는 규칙보다 우선한다는 의미입니다. 따라서 별도의 시트에 적용된 CSS는 페이지의 기본 코드를 재정의합니다. 이는 다음에 삽입된 CSS에도 적용됩니다.

WordPress 어린이 테마

초보자를 위해 하위 테마는 다른 테마의 기능을 상속하므로 마음대로 디자인을 수정할 수 있습니다(알고 싶은 모든 내용은 WordPress 하위 테마 가이드에서 알아볼 수 있습니다). 업데이트 시 변경 사항을 잃지 않고 테마를 수정할 수 있도록 하는 특정 목적으로 고안되었습니다. 하위 테마는 외부 또는 '상위' 테마에 대한 모든 변경 사항을 반영합니다. 따라서 Photoshop 레이어 효과를 적용하는 것처럼 실제로 콘텐츠를 편집하는 것이 아닙니다. 언제든지 제거하여 원래대로 되돌릴 수 있습니다.

코드를 수정하고 싶을 때 하위 테마를 생성하면 많은 어려움을 덜 수 있고 상당히 쉽습니다(WordPress 수정과 마찬가지로). FTP를 통해 사이트에 액세스하고 폴더를 만든 다음 해당 폴더에 해당하는 style.css 파일을 만드세요. 테마 이름-자식으로 이름을 지정하는 것이 표준 관행입니다. 그런 다음 템플릿을 정의하기 위해 새 style.css' 헤더에 한 줄만 있으면 됩니다. 하지만 있으면 도움이 되는 몇 가지 항목도 있습니다. 이는 WordPress Codex 페이지에서 찾을 수 있습니다.

그런 다음 @import 줄 아래의 현재 테마에 필요한 사항을 변경합니다. 하위 테마의 한 가지 단점은 상위 테마를 수정하기 전에 충돌이나 이상한 부작용을 일으키지 않고 상위 테마에 대해 조사해야 하는 양이 있다는 것입니다. 그리고 하위 테마의 경우 원래 테마와 다른 점만 지정하면 된다는 점을 기억하세요. 변경 사항을 적용하려면 압축하여 WordPress 대시보드의 외관 > 테마 페이지를 통해 업로드하고 WordPress를 통해 활성화하세요. 물론 상위 테마도 업로드되었다고 가정합니다.

코드 표시

우리가 다루지 않은 코드 추가 유형이 하나 더 있습니다. 바로 표시입니다. 당신이 웹 디자이너이고 어떤 일이 어떻게 이루어졌는지 보여주고 싶고, 시청자가 복사하여 붙여넣을 수 있는 방식으로 제시하고 싶다면, 올바른 방식으로 기록하는 것이 중요합니다. WordPress에서 코드를 해석하는 방식은 Visual Post Editor의 HTML 섹션을 사용하는지 여부에 따라 다릅니다. 비주얼 편집기에 직접 입력하면 무력화될 수 있지만 올바른 형식이나 코드 상자에 넣을 수 있는 방법은 없습니다. 시각적 편집기는 일반 텍스트와 동일한 방식으로 형식을 지정합니다. 반면에 HTML 편집기는 이를 코드로 변환하여 웹사이트를 망칠 것입니다. 걱정하지 마세요. 취소할 수 있습니다.

그러나 타협이 있습니다. 및 태그를 사용하여 코드를 강조 표시하고 블록에 넣을 수 있지만 코드 활성화가 중단되지는 않습니다. 그것이 할 일은 공식 코드임을 보여주기 위해 상자에 montoype 글꼴로 넣는 것뿐입니다. 활성화를 중지하려면 활성 기호를 재미있는 캐릭터 개체라고 하는 것으로 변경해야 합니다. 이들 중 가장 일반적인 버전과 대부분의 코드를 무력화하는 데 충분한 버전은 < 및 >를 각각 < 및 >로 변경하는 것입니다(자세한 내용은 WordPress 게시물에 사용자 정의 코드를 작성하는 방법에 대한 게시물에 코드를 표시하는 방법에 대해 알아보세요.

보시다시피 WordPress에 사용자 정의 코드를 추가하는 방법은 많이 있습니다. 실험하고 실험해보고 어떤 것이 자신에게 적합한지 확인하시기 바랍니다. 제가 놓친 사용자 정의 코드를 추가하는 다른 방법이 있나요? 댓글로 알려주세요.