WordPress 개발 세계에서는 올바른 도구를 사용하면 큰 변화를 가져올 수 있습니다. 이것이 바로 우리가 코딩 작업 흐름을 간소화하고 WordPress에서 코드 조각을 쉽게 관리할 수 있도록 설계된 다재다능하고 강력한 도구인 Assistant의 새로운 코드 앱 출시를 발표하게 된 것을 기쁘게 생각합니다.

Code App은 Assistant 플러그인 내에 있으며 이를 통해 웹 사이트의 CSS 및 JavaScript 코드 조각을 생성, 편집 및 관리할 수 있습니다. Code App을 사용하면 쉽게 새 조각을 추가하고 특정 섹션에 할당하고 활성화 상태를 제어할 수 있습니다. 기능에는 조각 복제, 내보내기 및 라이브러리에 저장(Assistant Pro 사용)이 포함됩니다. 직관적인 인터페이스를 통해 활성화된 조각과 비활성화된 조각 사이를 빠르게 전환할 수 있어 웹사이트 사용자 정의 프로세스가 간소화됩니다.

혁신적인 기능과 기능 중 일부를 자세히 살펴보겠습니다.

어시스턴트 코드 앱이란 무엇입니까?

Assistant Pro Libraries에 코드 조각을 저장할 수 있다는 것을 이미 알고 계실 것입니다. 이제 Code App이 추가되어 Assistant 플러그인 내에서 WordPress 사이트의 코드 조각을 모두 쉽게 추가, 편집 및 관리할 수 있습니다.

Code App은 여러 플러그인의 필요성을 대체하고 액세스하기 쉬운 한 위치에 모든 웹 사이트 코드 조각을 저장하여 생산성을 향상시킵니다.

• 간편한 코드 조각 관리: Code App 내에서 바로 웹사이트의 CSS 및 JavaScript 코드를 관리하세요. 더 이상 여러 도구와 플랫폼을 저글링할 필요가 없으며 필요한 모든 것이 바로 손끝에 있습니다.
• Assistant Pro 클라우드에 코드 조각 저장: Assistant Code App은 Assistant Pro 계정과 원활하게 통합되어 클라우드 라이브러리 내에 코드 조각을 저장하고 구성할 수 있습니다. 여러 웹 사이트 프로젝트에서 코드 조각을 쉽게 재사용하여 작업 흐름을 간소화하고 귀중한 시간을 절약하세요.
• 팀과 협업: 협업이 핵심이며, Code App을 사용하면 팀과 함께 작업하는 것이 그 어느 때보다 쉬워집니다. 실시간 편집을 사용하면 WordPress 사이트에서 실시간으로 공동 작업하고 어디에 있든 팀과 동기화를 유지할 수 있습니다.

이러한 기능 외에도 Assistant의 Code App은 개발자를 염두에 두고 설계된 세련되고 직관적인 인터페이스도 제공합니다. 노련한 전문가이든 이제 막 시작하는 사람이든 상관없이 우리의 Code App은 탐색하기 쉽고 사용하기 쉽다는 것을 알게 될 것입니다.

WordPress에 코드 조각을 추가하는 방법

Assistant Code App은 사용자 정의 CSS 및 JavaScript 스니펫을 사용하여 웹사이트를 향상시키는 원활한 방법을 제공합니다. 시작하는 방법은 간단합니다.

1단계: 어시스턴트에서 코드 앱 열기

아직 설치하지 않았다면 Assistant 플러그인을 설치하고 활성화하세요. 설치가 완료되면 연필 아이콘을 클릭하여 어시스턴트 사이드바를 엽니다. 앱 및 설정으로 이동한 다음 앱 목록에서 코드를 클릭하세요.

코드 앱 아이콘을 사이드바에 표시하려면 목록에서 코드 앱을 위로 끌어서 앱 순서를 변경할 수 있습니다.

2단계: Code App을 사용하여 코드 조각 만들기

이제 첫 번째 코드 조각을 만들 준비가 되었습니다. 이 예에서는 먼저 CSS 탭이 선택되었는지 확인한 다음 제목을 입력하고 돌아가기 버튼을 클릭하여 CSS 파일을 만들어 보겠습니다.

다음 화면에서는 Code App이 다음을 허용하는 것을 볼 수 있습니다.

• 제목: 코드 조각의 고유한 이름입니다.
• 설명: 코드가 사용되는 용도나 귀하 또는 귀하의 팀이 기억해야 할 기타 중요한 정보를 설명하십시오.

• 코드 조각 : 코드 블록에 코드 조각을 입력합니다.

위치 섹션까지 아래로 스크롤하고 스니펫에 상태와 규칙을 할당합니다.

• 상태 : 코드 조각의 상태를 활성화 또는 비활성화하도록 전환합니다.
• 규칙 : 이 스니펫을 로드할 위치를 선택하세요. 이는 Themer Location 규칙과 유사해 보입니다. 추가 규칙을 활성화하려면 규칙 추가를 클릭합니다.

3단계: 업데이트를 클릭하여 변경 사항을 저장하세요.

Assistant Code App 내에서 코드 조각 추가를 마친 후 오른쪽 상단에 있는 업데이트 버튼을 클릭하여 변경 사항을 저장하세요.

그런 다음 변경 사항을 적용하려면 페이지를 새로 고치세요.

복제, 라이브러리에 저장, 코드 조각 내보내기 또는 삭제

Code App을 사용하여 첫 번째 코드 조각을 추가한 후 몇 가지 추가 기능을 살펴보겠습니다. 위치 섹션을 지나 아래로 스크롤하여 작업 섹션 내에서 옵션을 찾습니다.

여기에서 Assistant Pro를 사용하여 활성화, 복제, 내보내기 또는 라이브러리에 저장과 같은 스니펫 설정을 관리할 수 있으므로 웹 사이트 사용자 정의를 더 강력하고 유연하게 제어할 수 있습니다.

• 복제: 현재 코드 조각의 정확한 복사본을 만듭니다. Code App에서 코드 유형의 목록 보기를 볼 때 복제 아이콘을 클릭할 수도 있습니다.
• 라이브러리에 저장: 클라우드 라이브러리에 저장하려면 Assistant Pro 연결이 필요합니다. 조각을 라이브러리에 저장하면 조각에 할당한 위치가 저장되지 않습니다. 라이브러리에서 조각을 가져올 때 조각을 위치에 할당해야 합니다.
• 내보내기: 코드 조각 파일을 .txt 파일로 내보냅니다.
• 삭제: 어시스턴트에서 코드 스니펫이 영구적으로 삭제됩니다. 코드 조각 삭제를 확인하는 확인 메시지가 표시됩니다. 이 작업은 취소할 수 없습니다.

이제 코드 앱 아이콘을 클릭하면 모든 코드 조각이 목록 보기에 표시되고 모두 한 위치에 표시됩니다.

목록 보기에서는 각 조각을 개별적으로 편집할 필요 없이 개별 조각을 켜거나 끌 수 있으므로 시간과 노력을 절약할 수 있습니다. 스니펫이 비활성화된 경우 비활성화됨이 표시되고, 활성화된 경우 녹색 점과 함께 활성화됨이 표시됩니다. 해당 표시기를 클릭하면 빠르게 전환할 수 있습니다.

WordPress 코드 조각 예

기능을 향상하고 요소를 스타일 지정하거나 웹 사이트에 상호 작용을 추가하는 데 일반적으로 사용되는 WordPress용 CSS 및 JavaScript 코드 조각이 많이 있습니다. 다음은 몇 가지 인기 있는 예입니다.

CSS 코드 조각

• 맞춤 글꼴: Google Fonts 또는 기타 소스의 CSS를 사용하여 맞춤 글꼴을 구현합니다.
• 양식 스타일 지정: WordPress 사이트 양식의 모양과 느낌을 사용자 정의합니다.
• 요소 숨기기: 사이트의 특정 요소나 섹션을 숨기는 CSS 코드입니다.
• 애니메이션: 요소에 시각 효과를 추가하는 CSS 애니메이션 또는 전환입니다.
• 호버 효과: 버튼, 링크, 이미지 등에 호버 효과를 추가합니다.
• 탐색 메뉴 사용자 정의: 사이트 디자인 및 레이아웃에 맞게 탐색 메뉴 스타일을 지정합니다.
• 고정 머리글/바닥글: 사용자가 스크롤할 때 머리글이나 바닥글이 페이지 상단이나 하단에 고정되도록 만듭니다.
• 다크 모드: CSS를 사용하여 사이트에 다크 모드 테마를 구현합니다.

JavaScript 코드 조각

• 부드러운 스크롤링: 사용자가 내부 링크를 클릭할 때 부드러운 스크롤을 활성화하는 JavaScript 코드입니다.
• 지연 로딩 이미지: 필요할 때만 이미지를 로드하여 페이지 로드 시간을 개선하기 위해 지연 로딩을 구현합니다.
• 모달 창: 추가 콘텐츠나 메시지를 표시하기 위한 모달 창이나 팝업을 만듭니다.
• 아코디언/접이식 섹션: 클릭하면 확장되거나 축소되는 아코디언 스타일 섹션을 생성하는 JavaScript 코드입니다.
• 가시성 전환: 페이지 요소의 가시성을 전환하는 JavaScript 코드입니다.
• 무한 스크롤: 사용자가 페이지 매기기 링크를 클릭하지 않고도 페이지를 아래로 스크롤하면 더 많은 콘텐츠를 로드합니다.
• 드롭다운 메뉴: JavaScript를 사용하여 드롭다운 기능으로 탐색 메뉴를 향상합니다.
• 슬라이더/회전판: 이미지 슬라이더 또는 회전판을 만들어 콘텐츠를 시각적으로 매력적인 방식으로 선보입니다.
• Ajax Load More: 전체 페이지를 다시 로드하지 않고도 추가 콘텐츠를 동적으로 로드할 수 있어 블로그나 포트폴리오에 유용합니다.

이는 단지 몇 가지 예일 뿐이며, WordPress 사이트를 사용자 정의하고 향상하는 데 사용할 수 있는 수많은 CSS 및 JavaScript 코드 조각이 있습니다. 항상 그렇듯이, 시작하기 전에 사이트를 백업하고 추가하는 모든 코드가 적절하게 테스트되었으며 기존 테마 또는 플러그인과 충돌하지 않는지 확인하세요.

결론

웹 디자인 작업흐름을 한 단계 더 발전시킬 준비가 되셨나요? 어시스턴트 플러그인의 최신 추가 기능인 Code App 만 살펴보세요. 다음 WordPress 프로젝트를 진행 중이거나 코딩 문제를 해결 중일 때 이 도구는 작업 흐름을 간소화하고 생산성을 향상시키도록 설계되었습니다.

하지만 그게 다가 아닙니다. 무료 Assistant Pro 계정을 사용하면 더 많은 기능을 잠금 해제하여 개발 프로세스를 강화할 수 있습니다. 동료 웹 개발자와 함께 귀중한 시간을 확보하고 프로젝트를 손쉽게 구성하세요. 더 이상 기다리지 마세요. 지금 가입하고 차이를 직접 경험해 보세요!