WordPress에서 코드를 추가 및 편집하는 방법(HTML, CSS, PHP)

WordPress 사용의 주요 장점 중 하나는 코드를 건드리지 않고도 웹사이트를 구축할 수 있지만 원하는 경우 소스 코드를 편집할 수 있는 완전한 자유가 있다는 것입니다.

WordPress에 코드를 안전하게 추가하는 방법을 알고 있다면 웹사이트 디자인과 기능을 변경하여 작업을 훨씬 쉽게 할 수 있습니다. 삽입하기로 결정한 코드 유형은 사용자에게 달려 있습니다. WordPress에서는 일반적으로 HTML, CSS 및 PHP를 다룹니다.

이 기사에서는 WordPress에서 코드를 추가하고 편집하기 전에 해야 할 일을 알려 드리겠습니다. 그런 다음 HTML, CSS 및 PHP를 웹사이트에 삽입하는 방법을 보여드리겠습니다. 각 언어에 대한 코드 추가 및 편집에 대한 여러 접근 방식을 다룰 것입니다.

WordPress에서 코드를 편집하기 전에 해야 할 일

사이트의 핵심 파일 내에서 기존 코드를 편집하거나 추가하는 것은 항상 위험을 수반합니다. 오류가 있거나 기존 기능이 중단되면 웹사이트가 작동을 멈출 수 있습니다.

코드에 오류가 있는 웹사이트를 수정할 수 있습니다. 그러나 개발 경험이 없으면 문제를 일으키는 정확한 코드를 좁히는 것이 어려울 수 있습니다.

이를 염두에 두고 코드를 추가하거나 편집하기 전에 웹사이트 보안을 위한 몇 가지 단계를 수행하는 것이 좋습니다. 이 프로세스를 도로에서 발생할 수 있는 문제를 피하기 위해 안전한 환경을 만드는 것으로 생각하십시오.

1. 웹사이트 백업

사이트 유형에 관계없이 백업은 절대적으로 중요합니다. 왜요? 해킹, 플러그인 충돌 또는 코드 오류와 같은 문제가 발생하면 최근 백업을 복원하여 사이트를 다시 가동할 수 있기 때문입니다.

즉, 사이트를 백업하는 것이 문제가 발생하는 경우 웹사이트를 보호 하는 가장 좋은 방법입니다.

이 프로세스를 쉽게 하려면 플러그인을 사용하여 모든 것을 자동으로 처리하거나 요청 시 웹사이트 사본을 생성하는 것이 가장 좋습니다.

물론 실시간으로 작동하는 완벽한 솔루션인 Jetpack Backup을 권장합니다.

Jetpack을 사용하면 백업이 오프사이트 클라우드에 안전하게 저장되므로 서버에 부하가 걸리지 않습니다. 또한 사이트에서 변경 사항이 있을 때마다 백업이 수행되기 때문에 사이트가 완전히 오프라인 상태인 경우에도 오류가 발생하기 직전부터 빠르게 복원할 수 있습니다.

그러나 다른 백업 플러그인을 사용하기로 선택한 경우 아래 단계를 계속하기 전에 전체 수동 백업을 수행하는 것이 좋습니다.

2. WordPress 자식 테마 사용

이 측정값은 테마를 편집하려는 경우에만 적용됩니다. WordPress를 사용하면 테마의 코드를 원하는 대로 변경할 수 있지만 테마의 새 버전으로 업데이트하면 사용자 지정 내용이 손실됩니다.

이를 방지하려면 자식 테마를 사용해야 합니다. 하위 테마는 상위 테마에서 기능, 기능 및 스타일을 가져오는 보조 테마이지만 상위 테마를 업데이트할 때 변경되지 않습니다. 즉, 상위 테마를 업데이트할 때 하위 테마에 추가한 코드는 지워지지 않습니다.

자식 테마를 수동으로 만들 수 있지만 대신 플러그인을 사용하는 것이 좋습니다. 작업에 가장 적합한 도구 중 하나는 Child Theme Configurator입니다.

플러그인을 활성화하고 도구 → 하위 테마 로 이동합니다. 새 하위 테마를 만들고 현재 테마를 상위 테마로 선택하는 옵션을 선택합니다.

분석을 클릭하면 플러그인이 선택 항목에 대한 하위 테마를 생성할 수 있는지 확인합니다. 새 스타일을 저장할 위치 선택에서 기본 스타일시트 옵션을 선택합니다.

상위 테마 선택 스타일시트 처리 옵션 의 경우 WordPress 스타일 대기열 사용 을 클릭하십시오.

하위 테마의 속성을 사용자 정의할 수도 있습니다. 여기에는 모양 → 테마 로 이동할 때 표시되는 이름, 작성자 및 설명이 포함됩니다.

선택한 속성은 내부 전용입니다. 설정에 만족하면 새 하위 테마 만들기를 클릭합니다.

Themes → Appearance 로 이동하면 사용 가능한 테마 중 새 하위 테마가 나타납니다.

하위 테마가 설정되면 사용자 정의 코드를 추가할 수 있습니다. 해당 프로세스가 어떻게 작동하는지 잘 모르겠다면 계속 읽으십시오. 다음 섹션에서는 WordPress에서 CSS 및 HTML을 편집하는 방법을 보여줍니다.

3. 준비 웹 사이트 사용

스테이징 웹사이트의 전체 목적은 안전한 환경에서 새로운 코드와 사이트 변경 사항을 테스트할 수 있도록 돕는 것입니다. WordPress 스테이징 사이트를 사용하면 라이브 웹사이트에서 치명적인 오류나 다운타임에 대해 걱정할 필요 없이 코드를 추가할 수 있습니다.

일반적으로 웹 호스트는 스테이징 기능을 제공합니다. WordPress 스테이징 플러그인에는 여러 옵션이 있지만 사용하기가 약간 불편할 수 있습니다. 호스팅 제어판을 통해 스테이징 기능에 액세스할 수 있으면 사이트 사본을 만들고 스테이징에서 프로덕션으로 변경 사항을 푸시하는 것이 훨씬 더 쉬워집니다.

WordPress에서 HTML, CSS 및 PHP 코드를 편집하는 방법(10가지 방법)

WordPress에 HTML을 추가하는 방법을 배우는 것은 생각보다 훨씬 쉽습니다. 그러나 사용하려는 코드 유형에 따라 프로세스가 변경됩니다. 먼저 블록 및 클래식 편집기를 사용하여 HTML을 추가하는 방법에 대해 이야기해 보겠습니다.

1. 블록 편집기에서 HTML을 편집하는 방법

이 방법을 사용하면 블록 편집기 내에서 HTML을 사용하여 기존 페이지나 게시물을 편집할 수 있습니다. 블록 편집기에 익숙하다면 문제가 발생하지 않는 간단한 방법입니다.

시작하려면 편집기를 엽니다. 페이지 또는 게시물의 본문이 표시되면 화면 오른쪽 상단에 있는 점 3개 아이콘을 클릭합니다.

이제 코드 편집기 라는 옵션을 클릭하십시오.

편집기 본문의 보기가 블록에서 코드로 전환됩니다. 각 블록에 대해 HTML 코드의 다른 섹션이 표시됩니다.

WordPress 코드 편집기에는 강조 표시 기능이 포함되어 있지 않습니다. 즉, 모든 코드가 일반 텍스트로 표시됩니다. 변경하거나 추가하려면 주의 깊게 읽어야 합니다.

블록 편집기에서 시각적 인터페이스와 코드 인터페이스 간에 전환할 수 있습니다. 결과가 만족스러우면 게시물이나 페이지의 변경 사항을 저장합니다.

2. 클래식 편집기에서 HTML을 편집하는 방법

Classic Editor를 사용하여 HTML 코드를 편집하는 것은 간단합니다. 작업하려는 페이지나 게시물을 열고 문서 본문 위에 있는 텍스트 탭을 찾습니다.

텍스트 탭을 클릭하면 시각적 탭의 내용이 일반 텍스트 형식으로 표시되는 것을 볼 수 있습니다. 기본적으로 서식 없이 추가하는 텍스트에는 HTML 코드가 포함되지 않습니다.

편집기 상단에 있는 버튼을 사용하여 서식 및 HTML 코드를 빠르게 추가할 수 있습니다. 클래식 편집기에는 굵게 또는 기울임꼴 텍스트, 링크, 이미지, 목록 및 기타 유형의 코드에 대한 옵션이 포함되어 있습니다.

HTML 코드를 수동으로 추가하는 옵션도 있습니다. HTML에 익숙하다면 원하는 대로 텍스트 탭에 삽입하거나 편집할 수 있습니다. 편집기를 사용하면 시각적 탭과 텍스트 탭 간에 전환하여 결과를 볼 수 있습니다.

3. 테마 편집기를 사용하여 HTML을 편집하는 방법

WordPress를 사용하면 대시보드에서 직접 테마 파일에 액세스하고 편집할 수 있습니다. 그러나 테마 파일을 편집할 계획이라면 미리 자식 테마를 설정하는 것이 좋습니다.

테마 편집기에 액세스하려면 모양 → 테마 파일 편집기 로 이동하십시오. 다음 페이지에서 왼쪽에는 일반 텍스트 편집기가 표시되고 오른쪽에는 파일 목록이 표시됩니다. 해당 파일 목록은 오른쪽 상단 드롭다운 메뉴에서 선택한 테마에 해당합니다.

기본적으로 테마 편집기는 작업 중인 테마의 Style.css 파일과 함께 열립니다. 편집기를 사용하여 액세스할 수 있는 대부분의 테마 파일에는 CSS 또는 PHP가 포함됩니다. 그러나 HTML을 사용하여 여러 테마 구성 요소를 편집할 수 있습니다.

그러나 대부분의 경우 자식 테마는 기본적으로 style.css 및 functions.php 파일만 가져옵니다. 따라서 footer.html 과 같은 HTML 파일을 편집하려는 경우 파일 전송 프로토콜(FTP) 도구 또는 호스팅 제공업체의 제어판을 사용하여 변경하기 전에 해당 파일을 하위 테마로 복사해야 합니다.

선택한 도구를 사용하여 public_html → wp-content → 테마 → 상위 테마로 이동합니다. 편집할 HTML 파일을 찾아 하위 테마 폴더에 복사합니다. 그러면 해당 파일이 WordPress 테마 편집기에 표시됩니다.

페이지 오른쪽 상단의 드롭다운에서 하위 테마를 선택한 다음 나타나는 목록에서 파일을 클릭하면 테마 편집기에서 HTML 파일을 찾을 수 있습니다.

코드가 하는 일을 정확히 이해하지 않는 한 테마 파일을 편집할 때 변경하지 않는 것이 좋습니다. 그렇지 않으면 테마 및 웹 사이트 내의 중요한 기능이 손상될 위험이 있습니다.

4. 테마 편집기에서 CSS 및 PHP를 편집하는 방법

WordPress 테마 편집기에 액세스하려면 모양 → 테마 파일 편집기 로 이동하십시오. 다음 화면에서 활성 테마에 대해 편집할 수 있는 파일 목록이 표시됩니다. 왼쪽에 선택한 파일의 내용을 표시하는 편집기 탭이 표시됩니다.

기본적으로 테마 편집기는 스타일시트로 열립니다. style.css 파일에는 테마에 대한 모든 CSS 스타일이 포함됩니다. 여기에는 클래스, ID, 버튼 스타일 등이 포함됩니다.

style.css 파일을 원하는 대로 변경할 수 있습니다. 완료되면 파일 업데이트 를 클릭하여 변경 사항을 저장합니다.

동일한 프로세스가 PHP 파일에 적용됩니다. 오른쪽 메뉴를 사용하여 편집할 .php 파일을 선택합니다. 이 예에서는 functions.php 파일을 편집하고 있습니다.

PHP 코드를 편집하는 것은 HTML이나 CSS로 작업하는 것보다 더 섬세할 수 있습니다. 후자의 경우 오류가 발생하면 웹사이트의 스타일에 영향을 줄 수 있습니다. 반대로 작동하지 않는 PHP 코드는 기능이 손상될 수 있습니다.

5. WordPress 위젯에서 HTML 편집

아시다시피 최신 버전의 WordPress에서는 블록을 사용하여 위젯을 편집할 수 있습니다. 즉, 클래식 위젯 대신 위젯화된 영역에서 전체 블록 편집기 요소 제품군을 사용할 수 있습니다.

위젯 영역을 편집하려면 모양 → 위젯 으로 이동합니다. 여기에서 테마에 사용 가능한 위젯 섹션을 편집할 수 있습니다.

일부 블록은 위젯 영역에 사용자 정의 HTML을 추가할 수 있습니다. 위젯 제목 옆에 있는 더하기 기호 버튼을 클릭하고 사용자 정의 HTML 블록을 선택합니다.

블록 내에 원하는 코드를 추가하고 이리저리 움직여 위치를 변경하십시오. 완료되면 화면 오른쪽 상단 모서리에 있는 업데이트 버튼을 클릭합니다.

6. cPanel을 통한 HTML 편집

웹 호스트가 계정에 대해 cPanel 설치를 제공하는 경우 이를 사용하여 웹사이트 파일을 관리하고 편집할 수 있습니다.

시작하려면 cPanel 계정에 로그인하고 파일 아래에서 파일 관리자 옵션을 찾으십시오 .

파일 관리자 를 사용하면 호스팅 계정의 파일을 탐색할 수 있습니다. 서버 구조에 따라 여러 폴더에 직면할 수 있습니다.

public_html 이라는 옵션을 찾으십시오. 또는 www . 해당 디렉토리에는 WordPress 사이트의 파일이 포함되어야 합니다.

이것을 WordPress 루트 라고 합니다. 예배 규칙서. 열면 WordPress 웹 사이트에 해당하는 여러 하위 디렉토리와 파일을 찾을 수 있습니다. 이러한 파일 중 하나를 마우스 오른쪽 버튼으로 클릭하면 편집 옵션이 표시됩니다.

해당 옵션을 클릭하면 cPanel 텍스트 편집기가 실행됩니다. 이 편집기는 로컬에 설치된 소프트웨어에 비해 매우 단순합니다. 사소한 HTML 편집에만 사용하는 것이 좋습니다.

더 복잡한 코드 업데이트의 경우 FTP(파일 전송 프로토콜) 및 로컬 텍스트 편집기를 사용하는 것이 좋습니다. 다음 섹션에서 이를 수행하는 방법을 보여 드리겠습니다.

7. FTP를 사용하여 HTML, CSS 및 PHP 편집

FTP를 사용하면 웹사이트 서버에 연결하여 파일을 편집하고 업로드할 수 있습니다. FTP를 사용하면 많은 수의 파일을 쉽게 업로드할 수 있습니다. 이 프로세스는 WordPress 대시보드를 통해 직접 수행하려고 하면 시간이 많이 걸리고 어려울 것입니다.

더 중요한 것은 FTP가 WordPress 파일을 편집하고 선택한 로컬 텍스트 편집기를 사용하여 HTML, CSS 또는 PHP 코드를 추가할 수 있다는 것입니다.

FTP를 통해 웹사이트에 연결하려면 클라이언트(예: FileZilla)와 자격 증명 세트가 필요합니다. 대부분의 웹 호스트는 등록 시 FTP 자격 증명을 제공합니다. 그렇지 않은 경우 호스팅 제어판을 통해 새 FTP 계정을 만들 수 있습니다.

선호하는 FTP 클라이언트에 FTP 자격 증명을 입력하고 서버에 연결합니다. 연결을 설정하면 폴더 및 파일 목록이 표시됩니다.

FTP 연결을 사용하면 계정 내의 모든 파일과 폴더에 대한 전체 액세스 권한을 얻을 수 있습니다. WordPress 파일을 찾으려면 public , public_html 또는 www 라는 디렉토리를 찾으십시오. WordPress 루트 의 가장 일반적인 이름입니다. 예배 규칙서.

디렉토리를 열고 편집할 파일을 찾으십시오. 그것을 마우스 오른쪽 버튼으로 클릭하고 편집 옵션을 선택하십시오. 이 예에서는 FileZilla를 사용하므로 메뉴에 보기/편집 이 표시됩니다.

보기/편집 옵션은 로컬 기본 텍스트 편집기를 사용하여 파일을 엽니다. cPanel 또는 WordPress와 달리 전용 편집기를 사용하면 코드를 훨씬 쉽게 추가하고 상호 작용할 수 있습니다.

이 예에서는 WordPress 코어 파일인 wp-config.php 를 편집하고 있습니다.

텍스트 편집기를 사용하여 원하는 모든 유형의 코드를 추가하거나 편집할 수 있습니다. 여기에는 HTML, CSS 및 PHP가 포함됩니다. 유일한 제한은 각 특정 언어에 대한 지식입니다.

WordPress 코드 추가 또는 편집을 마치면 변경 사항을 파일에 저장하고 닫습니다. FTP 클라이언트는 서버에 있는 해당 파일의 기존 버전을 재정의할 것인지 묻습니다. 예를 선택하면 됩니다.

8. 블록 편집기를 사용하여 CSS 클래스 추가하기

CSS를 사용하여 블록 모양을 사용자 정의하려는 경우 블록 편집기를 사용하여 모든 요소에 클래스를 추가할 수 있습니다. 이 과정도 매우 간단합니다.

블록에 CSS 클래스를 추가하려면 블록을 클릭하고 설정 탭을 엽니다. 그런 다음 차단 설정 하단에서 고급 탭을 찾습니다.

추가 CSS 클래스 필드를 사용하여 특정 블록에 하나 이상의 CSS 클래스를 추가할 수 있습니다. 이러한 클래스의 효과는 추가하는 WordPress 사용자 정의 CSS에 따라 다릅니다.

9. 워드프레스 커스터마이저에서 CSS를 편집하는 방법

WordPress Customizer는 시각적 인터페이스를 통해 웹사이트의 스타일과 레이아웃을 사이트 전체에서 변경할 수 있습니다.

사용자 지정 프로그램에 액세스하려면 모양 → 사용자 지정 으로 이동합니다. 다음 화면에서 왼쪽에는 메뉴가 표시되고 오른쪽에는 사이트 미리보기가 표시됩니다.

추가 CSS 탭에서는 기본 편집기에 액세스하여 웹사이트에 사용자 정의 CSS를 추가할 수 있습니다.

WordPress 사용자 지정 프로그램을 사용하여 CSS를 추가하면 변경 사항을 즉시 미리 볼 수 있습니다.

10. WordPress 플러그인을 사용하여 CSS 편집

일부 WordPress 플러그인은 WordPress에 사용자 정의 코드를 추가하기 위한 대체 방법을 제공합니다. 대부분의 경우 이러한 플러그인은 WordPress 사용자 정의 CSS 또는 JavaScript를 추가하는 데 중점을 둡니다.

한 가지 예는 Simple Custom CSS와 JS입니다. 이 특정 플러그인은 간단한 메뉴에서 사용자 정의 CSS, JS 및 HTML 코드를 WordPress에 추가할 수 있습니다.

CSS 코드 추가 옵션을 선택하면 편집기가 열립니다. 해당 편집기를 사용하여 사용자 정의 CSS를 삽입하고 파일 내에서 코드가 들어갈 위치를 선택할 수 있습니다.

플러그인으로 사용자 정의 CSS를 추가하는 것은 간단하지만 이 방법을 사용하지 않는 것이 좋습니다. WordPress는 CSS 코드를 추가하고 편집하기 위한 다양한 내장 옵션을 제공합니다. 보다 실용적인 접근 방식을 원하면 항상 FTP를 사용할 수 있습니다.

플러그인을 사용하여 사용자 정의 CSS를 추가하는 경우 플러그인을 제거하면 코드가 사라질 수 있습니다. 또한 다른 플러그인은 고유한 방법을 사용하여 코드를 추가하므로 사용하는 도구에 따라 결과가 달라집니다.

WordPress에 JavaScript 코드를 추가할 수 있습니까?

WordPress는 웹사이트에 JavaScript 코드를 추가하기 위한 내장 기능을 제공하지 않습니다. HTML 및 CSS와 달리 JavaScript의 유일한 옵션은 플러그인을 사용하거나 테마 편집기 또는 FTP를 통해 수동으로 코드를 추가하는 것입니다.

일반적으로 JavaScript 코드를 추가하는 가장 쉬운 방법은 플러그인을 사용하는 것입니다. 수동 접근 방식을 선택하면 PHP "대기열" 기능과 함께 WordPress에서 JavaScript를 사용할 수 있습니다.

더 나은 성능을 위해 WordPress 코드를 최적화해야 합니까?

코드 최적화는 여러 사례를 포괄하는 광범위한 용어입니다. 이렇게 하면 코드가 최대한 원활하게 실행되고 서버 공간을 많이 차지하지 않습니다.

대체로 코드 스니펫은 너무 많은 저장 공간을 차지하지 않아야 합니다. 그래도 "축소화"를 사용하여 차지하는 공간을 줄일 수 있습니다.

축소는 사용자 정의 HTML 및 CSS를 가져와서 빈 공간이나 불필요한 문자를 제거합니다. 예를 들어 다음은 간단한 사용자 정의 CSS 스니펫입니다.

 p { text-align: center; color: red; }

해당 코드를 가져 와서 축소하면 다음과 같이 보일 것입니다.

 p{text-align:center;color:red}

코드의 출력은 동일하게 유지되지만 결과 파일 크기는 더 작을 수 있습니다. 실제로 HTML 및 CSS 코드를 축소해도 의미 있는 결과를 얻을 수 없는 경우가 많습니다.

예외는 방대한 코드 라이브러리를 다룰 때입니다. 크기를 줄이면 방문자의 로딩 시간이 단축됩니다.

또한 타사 코드 소스를 신중하게 선택하십시오. 평판이 좋은 웹사이트와 전문 개발자 포럼에 의존하면 코드가 효과적이고 안전하며 기능적인지 확인할 수 있습니다. 대조적으로 알 수 없는 블로그의 임의 스니펫은 문제를 일으키고 사이트 속도를 늦추고 잠재적으로 손상시킬 가능성이 더 큽니다.

HTML, CSS 및 PHP를 사용하여 WordPress 사용자 정의

WordPress에서 코드를 추가하고 편집하는 방법을 배우는 것은 생각보다 쉽습니다. 개발자가 아니더라도 약간의 인터넷 검색으로 필요에 맞는 코드를 찾을 수 있습니다. 해당 코드를 안전하게 삽입하는 방법을 알면 플러그인만으로는 불가능한 방식으로 웹사이트를 사용자 정의할 수 있습니다.

사이트 코드를 변경하기 전에 전체 백업을 만드는 것이 좋습니다. 테마의 CSS 또는 PHP를 편집하려는 경우 하위 테마도 사용하고 싶을 것입니다. 사용 중인 웹 호스트에 따라 스테이징 기능에 액세스할 수도 있습니다. 안전을 위해 코드를 편집할 때 스테이징 웹사이트를 사용하는 것이 좋습니다.