WordPress 테마를 사용자 정의하는 방법을 알고 싶습니까? Elementor 플러그인 ?
WordPress 테마를 사용자 정의하는 것은 WordPress 웹 사이트를 구축 할 때 주요 작업 중 하나입니다. 그녀는 웹 사이트의 디자인을 관리하기 때문에 많은 전문가들이 대부분의 시간을 보내는 곳입니다.
사용자 지정 WordPress 테마를 만들려면 일반적으로 테마 파일 및 코드 편집기 작업이 포함됩니다. 레이아웃 변경은 템플릿 파일에서 발생하고 디자인은 CSS를 통해 변경됩니다. 또한 사용자 지정 내용을 표시하려면 브라우저 창을 지속적으로 새로 고쳐야하는데, 이는 다소 번거로울 수 있습니다.
다행히도 Elementor, 이 프로세스는 매우 쉬워 지므로 확인해보십시오.
하지만 전에는 함께 알아 봅시다 워드 프레스 블로그 7 단계를 설치하는 방법 et 어떻게 찾아 설치하고 블로그에 워드 프레스 테마를 활성화하려면.
그런 다음 왜 우리가 여기 있는지 다시 돌아옵니다.
WordPress 테마 란?
WordPress 테마는 본질적으로 WordPress 웹 사이트의 시각적 모양을 정의하는 템플릿 모음입니다.
WordPress 테마는 머리글과 바닥 글에서 색 구성표, 레이아웃 등에 이르기까지 웹 사이트 디자인에 영향을 미치는 모든 것을 포함합니다.
거의 모든 산업에 적합한 무료 및 프리미엄 테마가 많이 있습니다. 사진 웹 사이트, 체육관 클럽 웹 사이트, 헤어 살롱 웹 사이트, 법률 웹 사이트그리고 더.
WordPress 테마를 사용자 정의하는 이유는 무엇입니까?
웹 사이트를 만드는 주요 이유 중 하나는 비즈니스를 홍보하는 것입니다. 그렇게 하는 것보다 더 좋은 방법이 어디 있겠습니까? 웹 사이트 만들기 회사의 스타일과 디자인을 홍보하는 고유합니다.
Amazon, eBay 또는 Google이 고유 한 디자인없이 어떤 존재인지 상상할 수 있습니까?
물론 아닙니다. 이것이 우리가 WordPress 테마를 사용자 정의하려는 이유 중 하나입니다. 우리는 그것을 독특하게 만들고 우리 회사의 메시지에 적응하기를 원합니다.
또한 때로는 또는 오히려 종종 열악한 디자인, 잘 어울리지 않는 색상 또는 너무 무겁고 사이트 성능에만 영향을 미치는 테마로 인해 괴로워하는 WordPress 테마를 실행합니다. 편물. WordPress 테마는 당신을 괴롭히는 것을 제외하고는 강력 할 수 있습니다. 그것을 사용자 정의하고 변경하면 모든 문제를 해결할 수 있으며 더 나은 사용자 경험.
WordPress 테마를 사용자 지정하는 방법
WordPress 테마를 사용자 지정하는 방법에는 여러 가지가 있습니다.
- WordPress 커 스터 마이저를 통해 수동으로
- 코드로
- Elementor와 함께
WordPress 테마를 수동으로 사용자 지정하는 방법
내장된 WordPress Customizer를 통해 원하는 WordPress 테마를 사용자 정의할 수 있습니다. 코드 없이 수행하면 변경할 수 있는 항목이 제한되는 경우가 많습니다. 약간 워드 프레스 테마 프리미엄을 사용하면 더 많은 사용자 정의 옵션을 사용할 수 있지만 본질적으로 디자인 옵션이 많지 않습니다.
이 영역에 대해 자세히 알아보기 전에 기존 WordPress 테마를 사용자 정의 할 때 사용하는 것이 가장 좋다는 점을 지적하고 싶습니다. 부모 테마가 아닌 자식 테마.
WordPress 자식 테마
하위 테마는 다른 WordPress 테마 인 상위 테마와 정확히 동일한 기능과 특성을 가진 WordPress 테마입니다. 하위 테마는 상위 테마에 영향을주지 않고 업데이트 기능을 잃지 않고 테마를 안전하게 사용자 지정하고 수정하는 데 사용됩니다.
WordPress 테마 커 스터 마이저
이제 자식 테마로 작업하는 것이 가장 좋다는 것을 알았으므로 WordPress Customizer로 테마를 사용자 지정하는 방법을 알아 보겠습니다. 액세스하려면 대시 보드로 이동하여 apparence 왼쪽에서 개인화.
이 커 스터 마이저로 수정할 수있는 주요 기능은 다음과 같습니다.
웹 사이트 제목, 로고 및 아이콘 추가
제목, 로고 또는 아이콘을 추가하거나 변경하려면 웹 사이트의 ID 패널로 이동하면됩니다. 각 요소를 선택하여 수정합니다.
WordPress 테마의 색상 변경
어떤 워드 프레스 테마 색 구성표를 변경할 수 있지만 전부는 아니지만 일반적으로 워드 프레스 테마 프리미엄. WordPress 테마에서 색 구성표를 변경할 수 있는 경우 사용자 정의 도구에 액세스할 때 이 옵션이 표시됩니다.
탐색 메뉴 추가
Customizer를 사용하면 웹 사이트 탐색 메뉴를 쉽게 추가하고 수정할 수 있습니다.
코드로 WordPress 테마를 사용자 지정하는 방법
모양 탭 아래에 테마 편집기를 선택할 수 있는 옵션이 있습니다. 그것을 클릭하면 테마 코드가 있는 창이 나타납니다. 이 옵션은 CSS 코딩을 잘 이해해야하며 초보자에게는 권장되지 않습니다.
여기에서 다음과 같은 파일에 액세스 할 수 있습니다. 스타일.css, function.php, 웹 사이트를 손상시키지 않도록 하위 테마가 필요한 것은이 시나리오에 대한 것입니다.
코딩을 통해 테마를 사용자 지정하는 다른 방법은 FTP 솔루션을 사용하여 파일을 업로드하는 것입니다. 이 프로세스에는 호스팅 제공 업체를 통해 FTP 자격 증명을 만들고, FTP 솔루션 (예 : FileZilla)을 다운로드 및 설치하고, 계정에 로그인하고 파일을 편집 한 다음 동일한 방법으로 업로드합니다. FTP 솔루션.
에 대한 우리의 가이드를 발견 FileZilla로 WordPress를 설치하는 방법
코딩에 익숙하지 않은 경우이 옵션을 권장하지 않습니다.
Elementor로 WordPress 테마를 쉽게 사용자 지정
사용자 인터페이스에서 직접이 작업을 수행 할 수 있습니다. 한 줄의 코드를 변경하거나 브라우저 창을 한 번이라도 다시로드 할 필요가 없습니다.
Elementor를 사용하면 몇 번의 마우스 클릭만으로 웹 사이트의 모든 요소를 빠르고 쉽게 변경할 수 있으며 이러한 기능을 모바일 플랫폼에 맞게 최적화 할 수도 있습니다.
Elementor는 동적 콘텐츠를 사용하고 페이지를 미리 볼 수 있도록하여이 프로세스를 훨씬 쉽게 만듭니다. 이렇게하면 디자인 변경이 실제 웹 사이트와 콘텐츠에 어떤 영향을 미치는지 즉시 확인할 수 있습니다.
머리글 및 바닥 글 사용자 지정
Elementor는 머리글과 바닥 글을 디자인 할 때 완벽한 유연성을 제공합니다. 우리 모두는 그것이 얼마나 지루할 수 있는지, WordPress 테마가 있으며 머리글 또는 바닥 글 디자인의 단일 측면을 변경할 수 없다는 것을 알고 있습니다. 특수한 테마, 플러그인 등이 필요합니다.
Elementor를 사용하면 쉽습니다.
1. 헤더 템플릿 만들기
먼저 새 헤더 템플릿을 구성하십시오. 이렇게하려면 Elementor> My Templates로 이동합니다.
시작하는 한 가지 방법은 상단에있는 새로 추가 버튼을 누르는 것입니다. 다음 화면에서 드롭 다운 메뉴를 사용하여 디자인 할 템플릿 유형으로 헤더를 선택합니다.
이전 화면에서 헤더 탭을 클릭 한 다음 나타나는 큰 녹색 버튼을 눌러도이 화면으로 이동할 수 있습니다.
헤더를 템플릿 유형으로 미리 선택합니다. 어느 쪽이든 템플릿에 적절한 이름을 추가 한 다음 (나중에 무엇인지 알 수 있도록) 템플릿 만들기를 클릭하여 계속합니다.
그것은 당신을 여기로 데려 올 것입니다.
Elementor Pro를 사용하면 미리 디자인 된 헤더 블록에서 선택할 수 있습니다. 이러한 템플릿은 사용자 고유의 디자인을위한 시작점으로 사용할 수있는 디자인 템플릿이며,이 경우에 수행 할 작업입니다.
헤더 블록 위로 마우스를 가져 가면 끼워 넣다 즉시 디자인을 시작할 수 있습니다. 그렇지 않으면 더 큰 버전을 보려면 먼저 이미지를 클릭하십시오. 그런 다음 언제든지 끼워 넣다 위.
그렇지 않고 처음부터 시작하려면 클릭하여 창을 닫으십시오. X 오른쪽 상단에
2. 기본 헤더 디자인 변경
새 헤더를 입력한 후 가장 먼저 눈에 띄는 것은 앞서 구성한 로고와 메뉴가 이미 있다는 것입니다.
이것이 바로 우리가 그것들을 모은 이유이며 우리는 그것들을 사용자 정의하는 방법에 대해 이야기 할 것입니다. 그러나 먼저 헤더 섹션 자체를 사용자 정의하는 방법을 살펴 보겠습니다.
이렇게 하려면 위에 마우스를 놓고 상단의 편집 버튼을 클릭하기만 하면 됩니다. 그러면 왼쪽에 편집 옵션 목록이 열립니다.
다음은 다양한 메뉴에서 제어 할 수있는 항목입니다.
- 레이아웃 -섹션의 너비, 열 사이의 간격 크기, 높이, 세로 열 및 콘텐츠 위치, 할당 된 HTML 태그 및 일반 구조를 제어합니다.
- 스타일 -여기에서 다음을 포함한 배경색을 변경할 수 있습니다. 호버 효과심지어 이미지 또는 비디오 추가 원하는 경우 오버레이, 테두리 및 구분선 효과를 추가하고 입력 체계 설정을 변경합니다.
- 고급 -이 부분에서는 여백, z 인덱스, 애니메이션, ID 및 클래스와 같은 CSS 속성을 추가 할 수 있습니다. 또한 섹션을 고정하고 반응 형 설정을 제어하고 일부를 추가 할 수 있습니다. 맞춤 CSS.
위의 모든 내용은 매우 자명하며 원하는 것을 빠르게 얻을 수 있습니다.
3. 헤더 요소 사용자 지정
그러나 헤더 섹션 전체를 편집 할 수있을뿐만 아니라 포함 된 항목도 편집 할 수 있습니다. 예를 들어 웹 사이트 로고를 사용자 지정하려면 클릭하기 만하면됩니다. 이것도 왼쪽에 편집 옵션을 제공합니다.
로고의 경우 다음과 같은 옵션이 제공됩니다.
- 내용 -이미지 크기, 정렬 및 링크 된 위치를 변경합니다.
- 스타일 -너비 및 높이 제어, CSS 효과 및 호버 효과 추가, 원하는 경우 테두리 및 그림자 포함.
- 고급 -여기에서 헤더 섹션과 본질적으로 동일한 옵션을 찾을 수 있습니다.
설정을 사용하여 머리글에 잘 표시되도록 로고를 사용자 지정합니다. 또한 각 항목에는 고유 한 유형의 옵션이 있으므로 각 항목을 확인하십시오.
4. 항목 추가
물론 Elementor를 사용하면 헤더에도 항목을 추가 할 수 있습니다. 사용 가능한 항목을 보려면 오른쪽 상단의 기호를 클릭하십시오.
헤더 템플릿을 편집 할 때 Elementor는 목록 상단에 관련 블록을 자동으로 표시하므로 상황에서 가장 의미가 있습니다. 이 경우 웹 사이트 로고, 탐색 메뉴 및 웹 사이트 제목과 같은 것입니다.
예를 들어 로고 옆에 웹 사이트 제목을 추가하려면 드래그 앤 드롭하면됩니다. 그러나 현재 선택한 헤더 템플릿을 사용하면 로고 위 또는 아래에 추가 할 수 있습니다. 하지만 쉽게 해결할 수있는 문제 다.
이와 같은 경우 헤더 위에 마우스를 놓고 더하기 기호를 사용하십시오.+-위에 섹션을 추가합니다.
보라색 버튼을 클릭하여 XNUMX 열 디자인을 선택하십시오.
그런 다음 기존 헤더 섹션의 요소를 새 섹션으로 드래그하고 중간에 웹 사이트 제목을 추가합니다.
하지만 스타일이 완전히 다릅니다! 문제 없어요. 기존 헤더를 마우스 오른쪽 버튼으로 클릭하고 부. 그런 다음 새 섹션을 마우스 오른쪽 버튼으로 클릭하고 여기를 클릭하십시오. 스타일 붙여 넣기. Elementor는 기존 섹션의 스타일을 적용하며 나중에 닫을 수 있습니다.
다른 헤더 요소와 Elementor에 포함 된 다른 모든 요소에 대해 동일한 프로세스를 수행 할 수 있습니다.
고유 한 게시물 템플릿 사용자 지정
Elementor에서 단일 게시물 템플릿을 사용자 지정할 수도 있습니다. 방법은 다음과 같습니다.
1. 새 모델 생성
템플릿 생성은 일반적인 방식으로 작동합니다. 그러나 이번에는 하나의 모델 유형으로. 그런 다음 아래에서 편집하려는 고유 한 템플릿을 선택합니다. 이 예에서 게시하다.
새 페이지 디자인을 만들려면 404 페이지를 편집하거나 (나중에 자세히 설명) 맞춤 게시물 유형 특히 다른 것을 선택할 것입니다. 두 경우 모두 이름을 입력하고 계속하십시오.
다음 화면에서 평소와 같이 미리 정의 된 템플릿에서 선택할 수 있습니다. 그러나이 경우 처음부터 새 모델을 만들고 싶습니다. 이 창을 닫으려면 오른쪽 상단의 X를 클릭하십시오.
2. 미리보기 구성
그런 다음 미리보기 창을 기존 게시물로 설정합니다. 편집기 옵션 하단에있는 눈 아이콘을 클릭 한 다음 설정.
열리는 메뉴에서 시사 동적 콘텐츠, 선택 게시 그 후 다음 줄에서 기존 게시물을 이름으로 검색하고 선택할 수 있습니다.
완료되면 신청 & 시사. 이 시점에서 아무것도 볼 수 없지만 (페이지에 아무것도 없기 때문에) Elementor에게 지금부터이 게시물의 데이터를 사용하도록 지시합니다. 이것이 무엇을 의미하는지 곧 알게 될 것입니다.
3. 위 섹션을 만들어 보겠습니다.
먼저 위의 섹션을 만듭니다. 여기에서 일반적으로 게시물 제목 및 작성자, 날짜 및 카테고리와 같은 메타 데이터를 찾을 수 있습니다.
첫 번째 단계는 표지판을 클릭하는 것입니다. + 단일 열 섹션을 생성합니다.
그렇게 할 때 레이아웃 섹션에서 너비, 높이, 위치 및 스타일을 제어하는 옵션이 있습니다. 이 경우 여기에서 할 일이별로 없습니다. 또한 걱정하지 마세요. 언제든지 돌아가서 나중에 변경할 수 있습니다.
그런 다음 게시물 제목 위젯을 새 섹션으로 끕니다.
그렇게 할 때 사용 가능한 모든 옵션을 사용하여 디자인과 레이아웃을 원하는대로 조정하십시오. 예를 들어 다음은이를 수행하기위한 내 설정입니다.
배워야 할 멋진 기능도 있습니다. 게시물 제목의 키 기호를 클릭하면 동적 데이터 앞뒤에 정적 콘텐츠를 추가 할 수 있습니다.
예를 들어 뉴스 나 요리법과 같은 특정 게시물 카테고리에 대한 템플릿을 만들면 다음과 같이 게시물 제목에 추가 할 수 있습니다.
이렇게하면 해당 카테고리의 모든 게시물에 대해 해당 데이터가 표시됩니다. 이 시점에서는 사용하지 않을 것이지만 중요한 부수라고 생각했습니다.
게시물 제목 아래에 게시하다 정보 위젯 게시물의 메타 데이터를 볼 수 있습니다.
내가 사용하는 설정은 다음과 같습니다.
또한 스타일링 옵션을 사용하여 페이지의 나머지 부분에 맞게 디자인을 만들었습니다. 당신도 똑같이하는지 확인하십시오.
4. 게시물 본문 설정
헤더 다음에 페이지의 본문을 만들 차례입니다. 이 부분이 헤더와 다른 디자인을 갖도록하려면 새 섹션을 설정해야합니다. 그러나 나는 그것을 단순하게 유지하기 때문에 나는 그것을 할 필요가 없다.
가장 먼저 삽입하고 싶은 것은 추천 이미지입니다. 이를 위해 이미 페이지에있는 항목 아래에 같은 이름의 위젯을 배치 할 수 있습니다.
기본적으로 설정을 변경하지 않고 모든 것을 그대로 두었습니다.
그런 다음 콘텐츠를 게시 할 시간입니다. 여기에도 해당 블록이 있습니다.
추천 이미지 및 게시물 콘텐츠의 경우 Elementor가 웹 사이트에 이미있는 것을 자동으로 가져옵니다. 필요한 새 블록의 디자인을 조정하십시오 (예 : 인쇄 설정을 가지고 놀기).
그 외에는 그게 다입니다. 마지막 부분으로 넘어갈 수 있도록 여기서 할 일이 너무 많지 않습니다.
5. 바닥 글 구성
이 경우 바닥 글에 작성자의 프로필, 공유 옵션 및 독자 댓글이 표시되기를 원합니다. 이렇게하려면 먼저 두 개의 열이있는 새 섹션을 만들어야합니다. 작성자 프로필을 위해 더 많은 공간을 만들려면 66.33 레이아웃으로 설정할 수 있습니다.
그 장소 후에 위젯 저자 상자 왼쪽 섹션에서.
필요에 맞게 스타일을 사용자 정의하십시오. 배경색을 약간 추가하고 타이포그래피 설정을 약간 조정했습니다.
그 후 오른쪽에 공유 버튼 블록을 추가 할 차례입니다.
위 스크린 샷에서 내 설정을 볼 수 있습니다.
그 후 남은 것은 섹션을 한 열 더 아래로 만들고 댓글 게시 위젯을 끌어서 놓는 것입니다.
(그런데 이러한 위젯을 찾는 데 문제가 있으면 검색 기능을 사용하십시오.)
필요하다고 생각되는 댓글 섹션을 수정하면 (있는 그대로 두었습니다) 게시 할 준비가 된 것입니다. 완성 된 디자인은 다음과 같습니다.
아카이브 템플릿 사용자 지정
1. WordPress 아카이브 템플릿 구성
지금 쯤이면 새 모델을 만드는 방법을 이미 알고 있습니다. 유일한 차이점은이 경우에는 아카이브 모델 유형으로.
그 후 평소와 같이 선택할 수있는 블록을 여러 개 얻거나 처음부터 자신의 모델을 만들 수도 있습니다. 그러나 아카이브의 경우 대략 XNUMX 개만 위젯 어쨌든 중요한 Elementor.
2. 아카이브 제목 정의
제가 말씀 드리고 싶은 첫 번째 블록은 아카이브 제목입니다. 보관 제목.
아래의 일반적인 설정 외에도 스타일과 고급, 아래의 키 기호를 클릭하면 중요한 옵션을 찾을 수 있습니다. 표제.
여기에서 Elementor가 아래 Author:라고 표시된 부분과 같이 페이지에 아카이브 유형을 표시할지 여부를 활성화 및 비활성화할 수 있습니다. 이것은 아래의 버튼을 통해 발생합니다. 컨텍스트 포함.
그런데 평소와 같이 미리보기 설정 (눈 기호> 설정)을 사용하여 다른 아카이브를 미리 볼 수 있습니다. 이렇게하면 고유 한 카테고리, 태그, 작성자 등의 디자인을 볼 수 있습니다. 명심 해.
3. 아카이브 출판 블록 사용
아카이브에 대한 두 번째 중요한 위젯은 아카이브 게시물입니다. 이렇게하면 아카이브에 속한 모든 게시물이 한 페이지에 표시됩니다. 템플릿을 선택하면 이미 존재하지만이 블록을 사용하여 직접 쉽게 추가 할 수도 있습니다.
아카이브 페이지를 사용자 정의하기 위해 제공하는 옵션을 살펴 보겠습니다.
- 피부 -게시물을 클래식 또는 카드 스타일 디자인으로 표시하도록 선택합니다.
- 열 -게시물이 표시되는 열 수를 결정합니다.
- 이미지 표시 -아카이브 페이지에서 추천 이미지 활성화
- 콘크리트 공사 – 벽돌 디자인의 항목을 표시합니다.
- 이미지 크기 -이미지 Elementor의 크기는 아카이브 페이지에서 사용해야합니다.
- Title -게시물 제목을 표시 하시겠습니까?
- 제목 HTML 태그 -그렇다면 어떤 HTML 태그를 감싸 야합니까?
- 발췌 록 -게시물의 발췌문을 포함하거나 제목 만 표시합니다.
- 발췌 길이 -추출물의 길이를 결정하십시오.
- 메타 데이터 -방문자가 사용할 수있는 게시물 메타 데이터를 정의합니다.
- 사이 구분자 -메타 데이터 정보 사이의 구분 기호.
- 상세 보기 - "더 읽기"링크를 포함 하시겠습니까?
- 배지 -카테고리 및 태그와 같은 게시물에 더 많은 정보를 추가 할 수 있습니다.
- 분류 배지 -여기에서 포함 할 정보를 결정할 수 있습니다.
- 화신 – 이를 통해 기사 작성자의 프로필 사진을 변경할 수 있습니다.
위의 것 외에도 몇 가지 옵션이 더 있습니다. 아래에 페이징, 아카이브 페이징을 처리하는 방법을 정의 할 수 있습니다. 예를 들어 표시 방법, 포함 할 페이지 수 및 텍스트 정렬 등이 있습니다.
어쨌든, Advnaced 방문자가 빈 아카이브에 도착할 때 표시할 메시지를 설정할 수 있습니다. 다른 모든 것은 친숙해야 합니다. 선택한 스킨에 따라 스타일 옵션이 변경됩니다.
4. 아카이브 당 출판 수 제어
아카이브 템플릿에 대한 빠른 참고. 아카이브 (또는 블로그 페이지)에 표시되는 게시물 수를 변경하려면 WordPress에서 다음을 수행해야합니다. 설정> 읽기.
여기에 방문자에게 표시 할 게시물 수를 입력하기 만하면됩니다.
개인화 손쉬운 Elementor가있는 WordPress 테마
WordPress 테마 사용자 정의는 많은 전문가의 빵과 버터입니다. 이것은 일반적으로 파일의 많은 코딩 및 편집을 포함하지만 Elementor를 사용하면 더 이상 필요하지 않습니다.
위에서 보았 듯이 플러그인은 본격적인 WordPress 테마 편집기입니다. 사용자 인터페이스에서 모든 부분을 사용자 정의 할 수 있습니다. 웹 사이트 머리글, 바닥 글, 페이지 및 게시물 템플릿, 아카이브 템플릿 등을 편집 할 수 있습니다.
동적 콘텐츠를 사용하고 웹 사이트의 모든 부분을 미리 볼 수있는 기능을 통해 모든 최신 사용자 지정을 구현할 수 있습니다.
간단히 말해 Elementor를 사용하면 WordPress 테마를 쉽게 사용자 지정할 수 있습니다. 수십 개의 파일과 수백 줄의 코드로 힘들게 변경하는 대신 한 곳에서 모든 작업을 신속하게 수행 할 수 있습니다.
지금 Elementor Pro를 받으세요!
결론
거기는 ! Page Builder Elementor를 사용하여 WordPress 테마를 사용자 지정하는 방법을 보여주는 이 기사의 내용은 여기까지입니다. 가는 방법에 대해 우려 사항이 있는 경우 내부에 알려주십시오. commentaires.
그러나 상담 할 수도 있습니다 우리의 자원, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
