• 홈페이지
  • 조항
  • 주제
  • Divi의 블로그 게시물 형식에 사용자 지정 템플릿 및 디자인을 추가하는 방법(3/1부)

Divi의 블로그 게시물 형식에 사용자 지정 템플릿 및 디자인을 추가하는 방법(3/1부)

게시 됨: 2017-05-02

Divi의 블로그 게시물 형식에 사용자 정의 스타일을 추가하는 방법에 대한 시리즈의 3일차 중 1일차에 오신 것을 환영합니다. 기본적으로 Divi에는 표준, 비디오, 오디오, 견적, 갤러리 및 링크의 6가지 블로그 게시물 형식이 제공됩니다. 이 시리즈에서는 php와 css를 사용하여 사용자 정의하는 방법을 알려줍니다.

앞으로 3일 동안 표준, 견적, 링크, 비디오, 오디오 및 갤러리와 같은 Divi의 모든 블로그 게시물 형식을 사용자 지정하는 방법을 안내해 드리겠습니다. 그것들을 모두 편집하려면(제가 염두에 두고 있는 디자인에 대해) single.php 템플릿 파일을 편집해야 합니다. 이를 제대로 수행하려면 변경된 Single.php 템플릿 파일을 포함할 Divi 하위 테마를 만들어야 합니다. 그리고 그 전에 Desktopserver를 사용하여 WordPress의 로컬 설치도 생성해야 합니다. 이것은 우리가 라이브 웹사이트에서 어떤 위험도 감수하지 않고 놀 수 있는 안전한 개발 공간을 제공할 것입니다.

이 게시물의 제목에서 알 수 있듯이 처음부터 끝까지 모든 것을 다루려면 3일이 필요합니다. 오늘은 Desktopserver를 사용하여 WordPress의 로컬 설치를 만들고 변경된 블로그 게시물 형식을 저장하는 데 사용할 하위 테마를 만드는 방법을 보여 드리겠습니다.

나는 이 시리즈가 여기에 게시된 대부분의 튜토리얼보다 더 "고급"이라고 생각합니다. 그러나 초보자인 경우 이 시리즈는 실제로 개발 기술을 향상하고 안전하고 무료 가이드 포스트 시리즈에서 새로운 것으로 분기할 수 있는 좋은 기회입니다.

시작하자!

앞으로의 일을 살짝 엿보기

다음은 이 시리즈에서 달성할 디자인을 간략히 살펴보겠습니다. 오늘 포스트에서 기초를 다진 후에는 single.php 파일(모든 블로그 포스트 형식의 템플릿)을 편집하는 방법과 CSS를 사용하여 각 형식에 대한 템플릿 스타일을 추가로 지정하는 방법을 보여드리겠습니다. 그것은 꽤 여행이 될 것입니다!

개발 자산 준비

다음은 오늘의 튜토리얼과 앞으로 2일 동안 만든 튜토리얼을 따라야 하는 내용입니다.

  • Atom, Sublime, Brackets 또는 Notepad ++와 같은 코드 편집기(원하는 모든 것)
  • DesktopServer를 사용한 로컬 WordPress 설치(이미 있는 경우 제외)
  • Divi 차일드 테마 – 우리가 만들 것입니다!

이 시리즈를 따라가려면 테스트 및 개발용으로 설정된 WordPress 설치에서 수행하는 것이 좋습니다. 내가 마지막으로 원하는 것은 사람들이 라이브 웹사이트를 실험하고 무언가를 엉망으로 만드는 것입니다.

WordPress의 로컬 개발 설치를 설정하는 방법을 잘 모르겠다면 무료 버전의 데스크탑 서버를 사용하는 것이 좋습니다. 몇 분 안에 로컬 WordPress 설치를 시작하고 실행할 수 있어야 합니다(과장 없음).

컴퓨터에 DesktopServer 설정

다음은 DesktopServer를 시작하는 몇 가지 단계입니다.

웹사이트를 방문하여 오른쪽 열에 있는 "무료 – 장바구니에 추가" 버튼을 클릭하여 무료 버전을 다운로드하십시오.

결제 페이지에서 개인 정보를 입력하고 약관에 동의한 후 구매를 클릭합니다.

구매 확인 페이지에서 운영 체제에 맞는 다운로드를 선택합니다. 최신 버전의 Mac 또는 Windows를 설치하는 것이 좋습니다.

다운로드의 압축을 풀고 컴퓨터에 애플리케이션 설치를 실행합니다.

이제 로컬 디스크(C:) 드라이브의 루트에 있는 "xampplite"라는 폴더에서 DesktopServer 응용 프로그램을 찾을 수 있습니다.

Desktopserver를 설치했으면 로컬 WordPress 설치 설정을 시작하는 데 도움이 되는 지침을 읽으십시오.

이 시리즈의 Divi 하위 테마 만들기

Divi 하위 테마를 만들려면 WordPress 테마 파일에 액세스해야 합니다. DesktopServer를 설치할 때 기본값을 따랐다면 테마 파일은 "Websites" 폴더 안의 문서 폴더에 있어야 합니다.

테마 폴더를 찾아 "child"라는 새 폴더를 추가합니다.

이제 style.css 파일을 자식 테마 폴더에 추가합니다. 이것은 자녀 테마를 구성할 3개의 파일 중 첫 번째 파일입니다.

텍스트 편집기를 열고 문서 맨 위에 다음 CSS 헤더가 있는 새 파일을 만듭니다. 

/*
 Theme Name:     Divi Child
 Theme URI: 
 Description:	   Divi Child Theme
 Author:
 Author URI:   
 Template:       Divi
 Version:        1.0.0
 License:  
 License URI:  
 Tags:  
 Text Domain: 
*/

필요에 따라 사이트에 맞게 하위 테마 CSS 헤더에 대한 나머지 정보를 추가할 수 있습니다.

이름과 확장자가 "style.css"인 새 파일을 저장합니다. 그리고 하위 테마 폴더에 추가합니다.

하위 테마 폴더에 추가해야 하는 다음 파일은 functions.php 파일입니다.

텍스트 편집기로 돌아가서 다른 새 파일을 만들고 문서 맨 위에 다음 PHP 코드를 추가합니다. 

<?php 
function my_theme_enqueue_styles() {
    $parent_;
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

정확한 이름과 확장자 "functions.php"로 파일을 저장하고 하위 폴더에 추가합니다.

자식 테마에 필요한 마지막 파일은 Divi의 single.php 파일입니다. 자식 테마 style.css 파일에 새 CSS를 추가하는 것과 함께 Divi의 single.php 파일 복사본을 사용하여 다양한 게시물 유형의 레이아웃을 편집합니다.

single.php 파일을 찾으려면 Divi(부모) 테마 폴더로 이동합니다.

single.php 파일을 복사하여 하위 테마 폴더에 붙여넣습니다.

이제 자식 테마의 single.php 파일을 사용자 정의할 준비가 되었습니다.

새 하위 테마 활성화

single.php 템플릿 파일 사용자 정의를 시작하기 전에 새 하위 테마를 활성화하십시오.

워드프레스 대시보드에서 모양 → 테마로 이동하여 Divi Child라는 새 하위 테마에서 활성화 버튼을 선택합니다.

지금은 그게 다야!

나는 이것이 아직 너무 흥미롭지 않다는 것을 알고 있지만 당신이 나와 함께 있기를 바랍니다. 프로젝트에 적합한 토대를 마련하는 것이 중요하며 이 게시물은 시작하기에 좋은 곳입니다.

내일은 무엇이 올까?

이제 WordPress의 로컬 설치 및 하위 테마가 활성화되었으므로 이 시리즈의 다음 부분에 대한 준비가 되었습니다. 내일 저는 Divi의 single.php 파일을 편집하여 블로그 게시물 형식에 대해 완전히 고유한 레이아웃을 만드는 방법을 보여 드리겠습니다.

아래에서 귀하의 피드백을 기다리겠습니다. 로컬 서버에서 자식 테마를 설정하는 것은 처음 사용하는 사람들에게 약간의 문제를 일으킬 수 있으므로 가능한 한 모든 질문에 답하려고 합니다. 그러나 기술적인 문제가 더 있는 경우 지원 팀이 준비되어 있으며 기꺼이 도와드릴 것입니다. Desktop Server의 사람들은 말할 것도 없습니다!

건배!