게시물 및 페이지에 사용할 게시물 조각 라이브러리를 만드는 방법

많은 WordPress 웹 사이트는 게시물 및 페이지 내 어딘가에서 사용자 정의 코드 또는 기능을 사용합니다. 플랫폼을 사용하면 이 코드를 쉽게 추가할 수 있지만 사이트 전체에서 스니펫을 재사용하려는 경우 필요할 때마다 수동으로 코드를 추가하는 것이 어려울 수 있습니다.

필요할 때마다 손으로 코드 조각을 삽입하는 대신 플러그인을 사용하여 구성하고 저장하는 것이 더 합리적입니다. 이 기사에서는 코드 조각을 정리하는 것의 이점에 대해 설명한 다음 두 단계로 Code Snippets Extended 플러그인을 사용하여 이를 수행하는 방법을 보여줍니다. 일하러 가자!

코드 조각을 구성해야 하는 이유

개발자가 아니더라도 웹사이트에 일부 코드를 수동으로 추가해야 할 가능성이 있습니다.

많은 WordPress 사용자가 게시물과 페이지에 사용자 정의 코드 조각을 추가합니다. 틈새 시장과 규모에 관계없이 사이트에 약간의 코드를 추가해야 하는 상황이 많이 있습니다. 예를 들어 구글 애드센스나 페이스북 픽셀을 보자. 둘 다 작동하기 전에 웹사이트에 몇 줄의 자바스크립트를 추가해야 한다. 많은 WordPress 플러그인도 단축 코드를 사용해야 하므로 웹 사이트에 사용자 정의 코드를 추가할 가능성이 높습니다.

이를 감안할 때 사이트에서 사용 중인 코드 조각을 모두 저장할 수 있는 방법을 찾는 것이 좋습니다. 이유는 다음과 같습니다.

• 필요할 때마다 코드를 참조할 수 있습니다. 때로는 파일에 추가한 사용자 정의 코드 행을 잊어버릴 수 있으므로 라이브러리를 사용하여 스니펫을 구성하는 것이 좋습니다.
• 코드 조각을 더 쉽게 재사용할 수 있습니다. 동일한 코드를 여러 번 사용해야 하는 경우 나중에 사용할 수 있도록 저장하는 것이 좋습니다.

물론 컴퓨터나 클라우드에서 일반 텍스트 파일을 사용하여 해당 코드 조각을 저장할 수 있습니다. 그러나 올바른 WordPress 플러그인을 사용하면 사이트 내에 이를 저장하는 더 적합한 방법을 제공할 수 있습니다. 그렇게 하면 작업하는 각 특정 웹사이트에 어떤 코드를 추가했는지 알 수 있습니다.

코드 조각 확장 플러그인 소개

Code Snippets Extended 플러그인은 WordPress 내에서 간단한 코드 라이브러리를 설정할 수 있는 흥미로운 도구입니다. 사용자 지정 코드를 저장하고 원하는 이름을 사용하여 식별한 다음 몇 번의 클릭으로 게시물과 페이지에 추가할 수 있습니다.

또한 플러그인을 사용하면 간단한 JavaScript 또는 CSS인 경우 코드 조각의 효과를 미리 볼 수 있습니다. 또한 PHP를 지원하지만 이러한 스니펫은 일반적으로 도구의 미리보기 기능을 사용하여 잘 표시되지 않습니다.

플러그인은 전체적으로 Divi Builder와 잘 작동하지만 해결 방법이 필요한 한 가지 문제가 있습니다. 기본적으로 도구는 편집기에 새 버튼을 추가하므로 라이브러리의 스니펫을 게시물이나 페이지에 추가할 수 있습니다. 그러나 Divi Builder로 전환하면 버튼이 사라집니다. 수정 사항은 간단하며 잠시 후에 더 살펴보겠습니다.

주요 특징들:

• 모든 사용자 지정 코드 조각을 대시보드 내의 중앙 라이브러리에 저장합니다.
• 고유한 이름을 사용하여 각 스니펫을 식별합니다.
• 라이브러리의 각 항목에 사용하기 쉬운 단축 코드를 할당하십시오.
• 코드를 건드릴 필요 없이 WordPress 편집기의 새로운 옵션을 사용하여 게시물과 페이지에 스니펫을 추가하세요.

가격: 무료 | 추가 정보

게시물 및 페이지에서 사용할 게시물 조각 라이브러리를 만드는 방법(2단계)

시작하기 전에 플러그인을 설치하고 활성화해야 합니다. 준비가 되었다면 1단계로 넘어갑니다!

1단계: 라이브러리에 새 스니펫 추가

플러그인을 설치하면 WordPress 대시보드에 Snippets 라는 새 탭이 표시됩니다. 그것을 클릭하고 조각 추가 옵션을 찾으 십시오 . 다음 화면에서 이름을 설정하여 라이브러리 내에서 코드를 식별하고 코드 실행에 필요한 미디어 파일을 업로드할 수 있습니다.

이 페이지에서 필요한 미디어를 업로드하지 않아도 라이브러리에 있는 한 코드는 계속 작동합니다. 이 기능은 페이지 하단에 있는 테스트 버튼을 사용하여 코드의 효과를 미리 볼 수 있는 유일한 기능입니다.

계속 진행하면 CSS, JavaScript, PHP 및 jQuery 코드를 입력할 편집기도 표시됩니다. 그러나 각 언어에 대한 특정 태그로 래핑해야 합니다. 다음은 참조를 위한 몇 가지 빠른 예입니다.

<style>CSS goes between these tags.</style>

<?php PHP tags, on the other hand, are different, so keep that in mind. ?>
<script type="text/javascript"> Same goes for JavaScript, which uses this tag type. </script>
<script type="text/javascript"> jQuery(function($) {
$(document).ready(function(){
// jQuery uses the most complex tags – they need to be set up exactly as shown, and any code should go within this section.
});
});
</script>

새 스니펫을 추가할 때마다 편집기 아래에서 이러한 모든 태그를 참조할 수 있으며, 각 언어마다 다른 언어가 필요하다는 것을 기억하는 한 기억할 필요가 없습니다. 또한 동일한 스니펫 내에서 여러 언어를 사용할 수 있습니다. 각각의 태그를 사용하여 언어를 감싸야 합니다.

코드를 입력하거나 붙여 넣은 후 페이지 하단의 스 니펫 저장 버튼을 사용하면 WordPress 대시보드의 스니펫 > 스니펫 탭에 표시됩니다.

이제 WordPress 편집기와 Divi Builder를 모두 사용하여 새 스니펫을 테스트하는 일만 남았습니다.

2단계: Divi 게시물 및 페이지에 스니펫 삽입

Divi Builder를 사용하지 않는 경우 일반 WordPress 편집기를 사용하여 게시물이나 페이지를 열 수 있습니다. 상단에 새로운 스 니펫 삽입 버튼이 표시됩니다.

그것을 클릭하면 라이브러리의 모든 항목을 표시하는 오버레이가 표시되며 원하는 항목을 선택할 수 있습니다.

이제 플러그인이 편집기에 코드를 추가하면 설정이 완료됩니다. 간단합니다. 그러나 Divi Builder를 사용하는 경우 이 옵션에 액세스할 수 없습니다. 이 문제를 해결하는 가장 쉬운 방법은 새 창에서 대시보드의 조각 탭을 열고 추가하려는 코드에 해당하는 단축 코드를 복사하는 것입니다. 일단 가지고 있으면 Divi Builder로 돌아가서 작업 중인 페이지에 코드 모듈을 추가하십시오.

들어가면 콘텐츠 필드에 단축 코드를 붙여넣고 변경 사항을 저장합니다.

이제 스니펫이 평소와 같이 작동합니다. Divi Builder를 사용하면 프로세스에 한 단계가 추가되지만 액세스하기 쉬운 내부 라이브러리에 모든 코드 조각을 계속 저장할 수 있습니다.

결론

우리와 같은 사람이라면 모든 프로젝트에서 효율성을 중요하게 생각합니다. 손으로 여러 페이지나 게시물에 동일한 코드를 추가하는 것은 가능하지만 시간을 잘 활용하지 못합니다. 대신 코드를 한 번 테스트하고 라이브러리에 저장한 다음 필요할 때마다 가상 백 포켓에 보관하는 것이 훨씬 좋습니다.

Code Snippets Extended 플러그인을 사용하면 바로 이 작업을 수행할 수 있습니다. 간단히 설치하고 다음 두 단계를 따르십시오.

1. 라이브러리에 새 스니펫을 추가합니다.
2. Divi 게시물과 페이지에 스니펫을 삽입하세요.

Divi 웹사이트에 코드 조각을 추가하는 방법에 대해 질문이 있습니까? 아래 댓글 섹션에서 문의하세요!

Andrii Bezvershenko/Shutterstock.com의 기사 축소판 이미지.