사용자 정의 WordPress 웹 사이트 만들기 – 옵션

오늘날 수많은 WordPress 웹사이트가 사전 제작된 테마를 사용하여 생성됩니다. 많은 경우 이 테마는 가져올 수 있는 몇 가지 '데모' 웹사이트를 제공합니다. 비즈니스나 블로그에 가장 적합한 시각적 스타일을 얻기 위해 WordPress 웹사이트를 사용자 정의하고 싶을 수도 있습니다.

WordPress 웹 사이트를 사용자 정의하기 전에 먼저 새 디자인에서 원하는 것이 무엇인지 신중하게 생각하는 것이 중요합니다. 이는 부분적으로 이를 구현하는 데 사용되는 방법을 결정하기 때문입니다. 중요한 것은 예를 들어 테마 파일이나 워드프레스 코어 자체를 업데이트할 때 수행하는 모든 업데이트를 저장하고 덮어쓰지 않는 것이 중요하다는 것입니다.

일반적인 오해는 WordPress 웹 사이트를 사용자 정의할 때 '올바른' 단계는 먼저 하위 테마를 만드는 것입니다. 이 자식 테마는 부모 테마 옆에 있으며 디자인 변경(특히 테마의 CSS 파일)이 수행되는 곳입니다. 의심할 여지 없이 사이트의 스타일을 사용자 정의하거나 기능을 조정할 때 하위 테마를 만들고 사용하는 것이 모범 사례가 될 수 있습니다. 그러나 이를 필요로 하지 않는 WordPress 웹 사이트를 사용자 정의하는 방법이 많이 있습니다. 자식 테마가 웹사이트의 복잡성을 가중시키기 때문에 특히 코더가 아닌 경우 뉴스를 생성합니다. 복잡성을 줄이고 사이트 디자인을 더 쉽게 편집할 수 있는 모든 것을 환영해야 합니다!

테마에 대한 광범위한 사용자 지정이 필요한 경우 하위 테마를 사용하는 것이 좋습니다. 그러나 간단한 조정 및 업데이트의 경우 하위 테마는 과도합니다. 하위 테마 없이 사이트를 빠르고 쉽게 사용자 지정할 수 있는 방법에 대한 몇 가지 제안 사항이 있습니다. 가장 중요한 것은 나중에 테마 또는 WordPress 코어를 업데이트하는 경우 업데이트를 보존하는 강력한 방법입니다. 한 번 보자.

워드프레스 커스터마이저

WordPress는 웹사이트가 어떻게 보이는지 조정하고 싶어한다는 것을 이해합니다. 이를 돕기 위해 사용 중인 테마에 관계없이 웹사이트 디자인을 다양하게 업데이트할 수 있는 기본 내장 사용자 지정 도구가 포함되어 있습니다. WordPress Customizer는 사용하기 정말 쉽고 WP-Admin에서 Appearance > Customize 메뉴로 이동하여 액세스할 수 있습니다. 이것이 실제로 어떻게 작동하는지 살펴보겠습니다.

아래 이미지는 현재 기본 WordPress 테마(Twenty Twenty)가 활성화되었을 때 간단한 게시물이 어떻게 보이는지 보여줍니다.

이제 사용자 지정 옵션을 조금 사용해 보겠습니다. WP-Admin 내에서 또는 페이지 및 게시물에 나타나는 검은색 메뉴 표시줄에서 사용자 정의 링크를 클릭하여 모양 > 사용자 정의로 이동합니다.

로드되면 색상 구성표 및 로고와 같이 웹사이트의 다양한 요소를 제어하는 ​​다양한 옵션이 표시됩니다. 이 경우 '사이트 ID'를 클릭하여 웹사이트 로고를 변경할 수 있습니다. 이 섹션에 새 로고를 업로드했을 뿐만 아니라 파비콘과 제목/슬로건도 추가했습니다.

그렇게 하면 '색상'을 클릭하고 거기에서 웹사이트의 배경색을 변경하고 배경 텍스처 이미지를 추가했습니다.

몇 번의 클릭만으로 기본 WordPress 사용자 지정 프로그램을 사용하여 웹 사이트의 모양과 모든 것을 근본적으로 변경했습니다. 멋진!

일부 CSS 기술을 보유하고 있다면 CSS를 사용하여 사이트 디자인을 변경하는 데 훨씬 더 많은 노력을 기울일 수 있습니다. 워드프레스 커스터마이저에는 CSS를 추가하고 실시간으로 그 영향을 확인할 수 있는 뛰어난 '추가 CSS' 편집기가 있습니다. 그러나 변경 사항은 사용자 정의 도구의 왼쪽 상단에 있는 '게시' 버튼을 클릭할 때까지 적용되지 않습니다.

다음은 간단한 CSS로 달성한 것입니다.

이제 색상이 훨씬 더 잘 어울린다는 데 동의할 것입니다. 또한 돋보기 아이콘 아래에서 '검색'이라는 단어가 사라지게 하여 더욱 깔끔해졌습니다. 또한 글꼴 패밀리와 색상을 변경했습니다.

테마 커스터마이저

웹사이트에 적합한 테마를 선택하면 사이트를 '적절하게' 보이게 만드는 많은 작업이 이미 테마 개발자가 수행했기 때문에 사용자 지정하는 데 드는 엄청난 시간을 절약할 수 있습니다. 결국, 처음에 원하는 것에 더 가까운 디자인을 제공하는 테마를 선택할 수 있었는데 CSS를 작성하고 옵션을 업데이트하는 데 시간을 할애하는 이유는 무엇입니까?

많은 테마에는 맞춤형 '옵션 패널'을 통해 자주 제공되는 추가 사용자 지정 옵션이 포함됩니다. 이 옵션 패널의 기능과 유용성은 테마마다 크게 다릅니다. 아마도 당연히 더 잘 코딩되고 잘 관리된 테마는 덜 정교한 테마보다 더 풍부하고 강력한 옵션 패널을 갖는 경향이 있습니다.

우리가 가장 좋아하는 테마 중 하나는 Astra입니다. 1,000,000명 이상의 사용자를 자랑하는 이 앱은 강력하게 코딩되고, 잘 설계되고, 정기적으로 업데이트되기 때문에 분명히 엄청난 인기를 누리고 있습니다.

예상대로 Astra에는 색상, 사이드바 옵션, 레이아웃 스타일 등을 포함한 다양한 설정을 변경할 수 있는 유용한 옵션 패널이 있습니다. 테마를 설치하고 WP-Admin 내에서 모양 메뉴로 이동하면 'Astra 옵션 하위 메뉴'를 통해 이 패널에 액세스할 수 있습니다.

많은 테마에는 유사한 기능을 제공하는 옵션 패널이 포함되어 코드 한 줄을 건드릴 필요 없이 또는 하위 테마 없이 웹사이트를 빠르고 쉽게 사용자 정의할 수 있습니다. 이러한 사용 용이성은 테마와 결합된 WordPress가 놀라운 웹사이트를 빠르게 만드는 강력한 방법인 많은 이유 중 하나입니다.

CSS 플러그인으로 사용자 정의

의심할 여지 없이 디자인 관점에서 웹사이트에 변경 사항을 구현하는 가장 강력한 방법 중 하나는 CSS 코드를 추가하거나 변경하는 것입니다. CSS(또는 Cascading Style Sheets)는 HTML 요소가 화면에 표시되는 방식, 즉 보이는 방식을 설명합니다. CSS가 없으면 웹사이트에 스타일 요소가 전혀 없으므로 매우 중요합니다.

이전에 코딩한 적이 없더라도 CSS는 실제로 배우고 사용하기가 매우 쉽습니다. 물론 고급 CSS는 작성을 배우는 데 시간이 걸릴 수 있지만 약간의 인터넷 검색과 연습으로 얻을 수 있는 것에 놀랄 것입니다!

웹사이트에서 CSS를 업데이트하려면 a) 사이트에 이미 있는 CSS 파일을 직접 편집하거나 b) CSS를 업데이트할 수 있는 플러그인을 사용해야 합니다. 옵션 A는 웹사이트의 CSS 파일에 액세스하기 위해 FTP 클라이언트를 사용해야 하기 때문에 더 어렵습니다. 반면 플러그인은 WordPress 관리자 내에서 바로 액세스할 수 있는 사용하기 쉬운 편집기를 제공할 수 있습니다. 아래에서 몇 가지 CSS 플러그인 옵션을 살펴보겠습니다.

간단한 CSS 플러그인

인기 있는 CSS 플러그인은 Tom Usborne의 Simple CSS입니다.

Simple CSS를 사용하면 웹사이트에 CSS를 빠르고 쉽게 추가할 수 있습니다. 훨씬 더 나은 것은 사용자 정의 프로그램에서 실시간 미리 보기 편집기를 제공하므로 코드가 원하는 모양을 생성하는지 즉시 확인할 수 있음을 의미합니다. 보너스로 CSS 변경 사항이 사이트 전체에 업데이트되는 대신(일반적으로 발생하는 것처럼) 특정 페이지나 게시물에 CSS를 추가할 수도 있습니다.

간단한 사용자 정의 CSS 및 JS

Simple Custom CSS & JS는 또 다른 훌륭한 CSS 플러그인입니다. WordPress 관리자 내에서 사이트의 CSS(및 다른 프로그래밍 언어인 JS) 코드를 업데이트할 수 있도록 하여 위에서 언급한 Simple CSS 플러그인과 유사하게 작동합니다. 또한 사용자 정의 CSS가 웹사이트의 머리글, 바닥글 또는 본문에 코드를 인쇄해야 하는지 여부를 지정할 수 있어 더 많은 유연성을 제공합니다.

다운로드하고 설치하여 시작하십시오. 그런 다음 메뉴에서 새로운 Custom CSS & JS 링크로 이동하여 플레이하십시오. 예제로 일부 HTML 코드를 추가했습니다.

그리고 헤더에 나타나도록 설정

또한 다음과 같이 CSS 스타일을 추가했습니다.

그리고 여기, 간단합니다!

페이지 빌더로 사용자 정의

사용자 지정 WordPress 웹 사이트를 만드는 또 다른 인기 있는 방법은 WordPress 사이트에 사용할 수 있는 빌더 중 하나를 사용하는 것입니다. WordPress에는 Gutenberg라는 자체 내장 페이지 빌더가 있습니다. 타사 페이지 빌더에는 Beaver Builder 및 Elementor가 있습니다.

이러한 도구를 사용하면 웹사이트의 모양을 매우 쉽게 개인화할 수 있습니다. 드래그 앤 드롭 편집기가 모두 포함되어 있어 한 줄의 코드를 건드리지 않고도 페이지에서 구성 요소를 이동하고 색상, 글꼴 크기, 스타일 등을 변경할 수 있습니다.

구텐베르크

언급했듯이 WordPress는 Gutenberg라는 기본 내장 블록 편집기를 제공합니다. 2018년 후반에 도입된 비교적 새로운 기능입니다. 간단한 드래그 앤 드롭 편집기로 페이지의 요소를 빠르게 사용자 정의할 수 있는 쉬운 방법을 제공합니다.

사용자 정의 코드를 사용하지 않고 멀티미디어 콘텐츠를 삽입하고 스타일을 지정할 수 있을 뿐만 아니라 Gutenberg를 사용하면 WordPress REST API, JavaScript 및 React를 기반으로 사용자 정의 게시물과 페이지를 작성할 수도 있습니다.

비버 빌더

단순 사용자와 고급 사용자 모두에게 인기 있는 Beaver Builder는 시장에서 가장 오래된 페이지 빌더 플러그인 중 하나입니다.

훌륭한 인터페이스와 스타일, 바로 사용할 수 있는 많은 위젯과 템플릿이 포함되어 있어 간단한 포스트 템플릿 수정에서 더 복잡한 비즈니스 웹사이트 업데이트에 이르기까지 무엇이든 이상적인 선택을 제공합니다.

엘리멘터

Elementor는 WordPress 웹 사이트를 사용자 정의하기 위한 또 다른 강력한 도구입니다. 많은 코더가 아닌 사람들을 위한 최선의 선택으로 여겨지는 Elementor는 멋진 웹사이트를 빠르고 쉽게 만들거나 이미 구축된 웹사이트의 스타일을 변경할 수 있는 광범위한 기능을 제공합니다.

이 강력한 페이지 빌더에 대한 보다 광범위한 비교에 관심이 있는 경우 Elementor 대 Beaver Builder 기사를 확인할 수 있습니다.

Elementor를 사용하여 처음부터 비즈니스 양식을 위한 완전히 새로운 웹사이트를 구축하는 방법에 관심이 있다면 8부 시리즈를 확인하십시오!

하위 테마를 사용하여 사용자 정의

보시다시피 자식 테마를 사용하지 않고 웹사이트 디자인을 수정하는 방법에는 여러 가지가 있습니다. 그러나 상황이 항상 그렇게 간단하지는 않습니다. 경우에 따라 웹 사이트에서 다음 작업 중 하나 이상을 수행해야 할 수도 있습니다.

• CSS 파일을 직접 편집
• 테마의 PHP 템플릿 수정
• functions.php 파일 편집
• 일부 JavaScript 추가 또는 포함

위의 작업을 수행해야 하는 경우 하위 테마를 사용하여 사용자 지정 WordPress 웹 사이트를 구축해야 합니다. 그렇지 않으면 나중에 테마 파일을 업데이트할 때 수정 사항을 잃을 위험이 있습니다.

결론

보시다시피 WordPress 웹 사이트에서 디자인 요소를 업데이트하려는 경우 하위 테마를 사용할 필요가 항상 있는 것은 아닙니다. CSS 플러그인이나 페이지 빌더를 사용하는 것이 디자인 변경을 구현하는 최적의 방법이 될 수 있으며 일반적으로 하위 테마를 통해 콘텐츠를 편집하는 것보다 훨씬 사용하기 쉽습니다. 이 기사가 몇 가지 유용한 옵션과 하위 테마를 사용해야 하는지 여부를 결정하는 데 필요한 지식을 제공했기를 바랍니다.