WordPress에 사용자 정의 코드 조각을 추가하는 방법(가장 쉬운 방법)

웹사이트에 WordPress 코드 조각을 추가하는 쉽고 간단한 방법을 찾고 계십니까?

WordPress를 배우는 것은 단지 테마와 도구에 관한 것이 아닙니다. 때로는 코드 조각의 미묘한 힘이 사이트에 고유한 특징을 부여하는 경우도 있습니다.

당신이 찾고 있는 완벽한 맞춤 설정이요? 올바른 코드를 사용하면 달성할 수 있지만 문제는 아주 작은 오류라도 웹 사이트를 손상시킬 수 있다는 것입니다.

이 글에서는 웹사이트를 손상시키지 않고 WordPress에 사용자 정의 코드 조각을 쉽게 추가하는 방법을 보여 드리겠습니다.

WordPress의 코드 조각이란 무엇입니까?

WordPress의 사용자 친화적인 인터페이스 아래에는 모든 움직임을 지원하는 코드의 세계가 있습니다.

코드 조각이라고 불리는 이 작은 코드 조각은 WordPress에 특정 기능을 지시하는 작지만 강력한 도구입니다.

이러한 스니펫의 힘을 활용하면 일반적인 WordPress 웹사이트와 귀하의 정확한 요구 사항에 맞춰진 웹사이트 사이의 차이를 만들 수 있습니다.

제대로 시전하면 프런트엔드에서 탁월한 결과를 가져올 수 있는 WordPress 주문과 동일하다고 생각하세요.

WordPress에 사용자 정의 코드 조각을 추가하는 방법

WordPress에 사용자 정의 코드 조각을 추가하려면 WPCode의 단순성과 기능을 활용할 수 있습니다. 시작하려면 아래 단계를 따르세요.

1. WPCode 플러그인 설치 및 활성화

WPCode는 WordPress 사용자가 functions.php 파일을 망칠 필요 없이 사이트에 사용자 정의 코드 조각을 추가하거나 사소한 오류로 인해 사이트가 손상되는 것을 걱정할 필요가 없는 가장 좋은 방법입니다.

코드 조각 플러그인을 사용하면 바닥글과 헤더를 포함하여 WordPress 사이트의 모든 부분에 조각을 쉽게 추가할 수 있습니다. functions.php 파일을 직접 편집하는 대신 대시보드에서 직접 원하는 사용자 정의 코드를 삽입할 수 있습니다.

시작하려면 웹사이트에 WordPress 플러그인을 설치하고 활성화해야 합니다. 그러면 WordPress 대시보드의 왼쪽 메뉴 패널에 플러그인이 추가되어 사용자 정의 코드를 빠르게 추가할 수 있습니다.

2. 사용자 정의 코드(PHP, CSS, HTML) 생성

사용자 정의 코드가 이미 준비되어 있는 경우 이 단계를 건너뛰고 다음 단계로 이동하세요. 처음부터 사용자 정의 코드를 생성하는 경우 다음 예를 참조하세요.

이 가이드에서는 라디오 및 체크박스 값이 WPForms에 올바르게 표시되지 않게 하는 테마 충돌을 방지하는 사용자 정의 코드를 만듭니다.

.wpforms-container input[type=radio] {
	-webkit-appearance: radio !important;
	-moz-appearance: radio !important;
	appearance: radio !important;
}

.wpforms-container input[type=checkbox] {
	-webkit-appearance: checkbox !important;
	-moz-appearance: checkbox !important;
	appearance: checkbox !important;
}

.wpforms-container input[type=radio]:checked:before,
.wpforms-container input[type=radio]:before,
.wpforms-container input[type=checkbox]:checked:before,
.wpforms-container input[type=checkbox]:before,
.wpforms-container input[type=radio]:checked:after,
.wpforms-container input[type=radio]:after,
.wpforms-container input[type=checkbox]:checked:after,
.wpforms-container input[type=checkbox]:after {
	display: none !important;
}

위 코드는 테마 충돌 문제를 해결하기 위해 CSS를 사용하지만 앞서 언급한 것처럼 PHP와 HTML로도 코드를 생성할 수 있습니다.

3. 사용자 정의 코드 추가(새 스니펫)

WordPress 관리 메뉴 표시줄에서 코드 조각 옵션을 클릭한 다음 새로 추가 버튼을 클릭하세요. 방금 플러그인을 설치했으므로 목록은 비어 있습니다.

그러면 코드 조각 추가 페이지로 이동됩니다. 여기에서 자신만의 고유 코드를 추가하거나 미리 만들어진 라이브러리에서 코드 조각을 선택할 수 있습니다.

새 코드를 삽입하려면 사용자 정의 코드 추가(새 코드 조각) 옵션 옆에 있는 코드 조각 사용 버튼을 클릭하세요.

이제 스니펫에 이름을 지정하고 생성한 사용자 정의 코드를 WPCode 플러그인의 코드 미리 보기 공간에 복사하여 붙여넣기만 하면 됩니다.

CSS로 코드를 생성했으므로 코드 유형 드롭다운 메뉴에서 CSS Snippet을 선택했습니다. 생성한 코드에 따라 변경할 수 있습니다.

그런 다음 삽입 탭까지 아래로 스크롤합니다. 이제 자동 삽입을 선택하고 위치 드롭다운에서 사이트 전체 헤더 옵션을 선택하세요.

생성하는 코드 유형에 따라 페이지/게시물에 [/] 단축 코드 로 추가하도록 선택할 수도 있습니다.

코드 조각에 태그를 할당하려면 기본 정보 섹션까지 아래로 스크롤하세요. 이는 주제와 기능별로 코드 샘플을 분류하는 데 도움이 됩니다.

동일한 위치에 여러 조각을 표시하려는 경우 우선순위 매개변수를 사용하면 조각이 처리되는 순서를 선택할 수 있습니다.

다음으로, 정교한 스마트 조건부 논리 기능을 사용하면 일련의 기준에 따라 자동 삽입된 조각을 표시하거나 숨길 수 있습니다.

마지막으로, 플러그인에서 나가기 전에 활성 옵션을 선택하고 스니펫 저장 버튼을 누르기만 하면 됩니다!

4. 사용자 정의 코드의 오류 처리

사이트별 플러그인 또는 테마 파일에 오타가 있으면 코드 조각을 사용할 때 방문자가 사이트를 즉시 사용할 수 없게 될 수 있습니다.

사이트에 구문 오류 또는 500 내부 서버 오류가 나타납니다. 변경 사항을 수동으로 되돌리려면 FTP 클라이언트를 사용해야 합니다.

WPCode 플러그인의 고유한 기능은 코드의 구문 오류 인스턴스를 자동으로 식별하고 비활성화한다는 것입니다.

오류 디버깅에 사용할 수 있는 유용한 오류 메시지가 표시됩니다. 사용자 정의 코드를 추가하면 WPCode의 영리한 코드 조각 유효성 검사가 실수를 찾아냅니다.

문제 위에 마우스를 올리면 해결 방법을 안내하는 팝업이 나타납니다.

5. 사용자 정의 코드 조각 관리

여러 코드 조각이 있는 경우 WPCode를 사용하면 사용자 친화적인 인터페이스와 조각 라이브러리를 통해 코드 조각을 매우 쉽게 관리할 수 있습니다.

코드 조각은 웹사이트에서 활성화되지 않은 상태로 저장될 수 있으며 나중에 원할 때마다 코드 조각을 활성화하거나 비활성화할 수 있습니다.

또한 태그를 사용하여 코드 조각을 분류하고 종류와 위치를 기준으로 필터링할 수 있습니다.

특정 코드 조각을 내보내거나 모든 코드 조각을 대량으로 내보낼 수도 있습니다. 코드 조각 » 도구 로 이동하여 내보내기 옵션을 선택하기만 하면 됩니다.

웹사이트를 새 서버로 이동하는 경우 플러그인을 사용하면 스니펫을 가져올 수도 있습니다. 코드 조각 » 도구 » 가져오기 로 이동하여 내보내기 파일을 업로드합니다.

사용자 정의 코드 조각에 대한 FAQ

사용자 정의 코드 조각을 추가하는 것은 독자들 사이에서 유용성에 대한 인기 있는 주제입니다. 다음은 가장 자주 묻는 몇 가지 질문에 대한 빠른 답변입니다.

WordPress에 가장 적합한 코드 조각 관리자는 무엇입니까?

WPCode는 WordPress에서 코드 조각을 관리하고 실행하기 위한 최고의 선택으로, 간소화된 구성과 원활한 통합 기능을 제공합니다.

WordPress의 코드 조각에 CSS를 어떻게 추가하나요?

WPCode 내에서 + 새로 추가 섹션으로 이동하여 원하는 CSS를 입력하고 저장 및 활성화하기 전에 CSS 유형을 선택했는지 확인하세요.

플러그인 없이 WordPress에 사용자 정의 코드를 어떻게 추가하나요?

테마의 functions.php 파일에 직접 사용자 정의 코드를 도입할 수 있습니다. 그러나 WPCode와 같은 전용 도구를 사용하면 더 안전하고 체계적인 스니펫 관리가 보장됩니다.

WordPress에 사용자 정의 PHP 코드를 어떻게 추가합니까?

PHP의 경우 WPCode 인터페이스로 이동하여 + Add New 를 선택하고 PHP 코드를 붙여넣은 다음 저장하세요. 항상 준비 하위 테마 사이트에서 먼저 테스트되었는지 확인하세요.

다음으로, 파일 다운로드에 이메일 주소를 요구하는 방법을 알아보세요.

WordPress 사용자가 파일을 다운로드하기 전에 자신의 이메일 주소를 제공해야 한다면 좋지 않을까요? WordPress 사이트 방문자가 파일을 다운로드할 수 있도록 이메일 주소를 공유하도록 유도하는 방법을 알아보세요.

지금 WordPress 양식 만들기

양식을 작성할 준비가 되셨나요? 가장 쉬운 WordPress 양식 작성 플러그인으로 지금 시작해보세요. WPForms Pro에는 다양한 무료 템플릿이 포함되어 있으며 14일 환불 보장을 제공합니다.

이 기사가 도움이 되었다면 Facebook과 Twitter에서 우리를 팔로우하여 더 많은 무료 WordPress 튜토리얼과 가이드를 확인하세요.