차례:
비디오: 두잇 워드프레스 강좌 #12. 페이지 템플릿 2024
기본 WordPress 템플릿 중 일부를 사용하여 새 WordPress 테마를 만듭니다.
-
FTP를 통해 웹 서버에 연결하고 / wp-content 폴더를 클릭 한 다음 / themes 폴더를 클릭하십시오.
이 폴더에는 현재 WordPress 사이트에 설치된 테마가 포함되어 있습니다.
-
새 폴더를 만들고 이름을 mytheme으로 지정합니다.
대부분의 FTP 프로그램에서 마우스 오른쪽 버튼을 클릭하고 새 폴더를 선택할 수 있습니다. 폴더를 만드는 방법을 모르는 경우 FTP 프로그램의 도움말 파일을 참조하십시오.
-
메모장 (Windows) 또는 TextMate (Mac)와 같은 선호하는 텍스트 편집기에서 헤더 템플릿을 만든 다음 저장하십시오 파일 이름 헤더. php.
템플릿을 입력 할 때는 메모장이나 텍스트 메이트와 같은 텍스트 편집기를 사용해야합니다. Microsoft Word와 같은 워드 프로세서 프로그램을 사용하면 코드에서 많은 문제가 발생합니다. 워드 프로세싱 프로그램은 숨겨진 문자를 삽입하고 WordPress에서 읽을 수없는 방식으로 따옴표를 묶습니다.
-
테마 함수 파일을 만들고 파일 이름 함수로 저장하십시오. php.
테마 기능 파일은 대시 보드의 위젯 페이지에서 사용 가능한 WordPress 위젯을 사용하여 사이드 바에 위젯을 추가 할 수 있도록 사이트의 위젯 영역을 등록합니다.
-
사이드 바 템플릿 파일을 만든 다음 파일 이름 사이드 바를 사용하여 저장하십시오. php.
여기에있는 코드는 WordPress 위젯을 테마에 표시 할 위치를 WordPress에 알려줍니다. 이 경우 위젯은 사이트의 사이드 바에 나타납니다.
-
바닥 글 템플릿 파일을 만든 다음 파일 이름 바닥 글과 함께 저장합니다. php.
-
스타일 시트 파일을 생성하고 파일 이름 스타일로 저장하십시오. CSS.
이 예제는 샘플 테마를 만들기위한 아주 기본적인 스타일링을 제공합니다.
다음은 헤더 템플릿을 만드는 코드입니다.
이제 테마 함수 파일을 만드는 코드를 확인하십시오.
'사이드 바')); ? >
다음으로 사이드 바에 대한 코드를 추가해야합니다.
그런 다음 바닥 글을 추가해야합니다. 바로 여기에 코드가 있습니다.
© 저작권 . All Rights Reserved
마지막으로 스타일 시트 파일의 코드를 추가해야합니다.
/ * Theme Name: My Theme Description: WordPress Dummies의 기본 테마 예제 저자: Lisa Sabin-Wilson 저자 URI: http: // lisasabin-wilson. com * / body {font-family: verdana, arial, helvetica, sans-serif; 글꼴 크기: 16px; color: # 555; 배경: #ffffff;} 헤더. 마스트 헤드 {너비: 950 픽셀; 여백: 0 자동; 배경: 검은 색; 색깔: 백색; 패딩: 5px; text-align: center;} 헤더.마스트 헤드 h1 a {색상: 흰색; 글꼴 크기: 28px; font-family: Georgia; 텍스트 장식: 없음;} 헤더. 마스트 헤드 h2 {글꼴 크기: 16px; font-family: Georgia; color: #eee;} 헤더. 마스트 헤드 nav {background: #ffffff; 텍스트 정렬: 왼쪽; 높이: 25px; padding: 4px;} 헤더. 마스트 헤드 nav ul {list-style: none; margin: 0;} #main {width: 950px; 여백: 0 자동; 패딩: 20 픽셀;} #main 섹션 {너비: 500 픽셀; float: left;} #main. hentry {마진: 10px 0;} 사이드 바 {width: 290px; 여백: 0 15px; float: right;} 따로. 사이드 바 ul {list-style: none;} 바닥 글 {clear: both; 너비: 960px; 높이: 50px; 배경: 검은 색; 색깔: 백색; margin: 0 auto;} 꼬리말 p {text-align: center; 패딩: 15px 0;} 바닥 글 {색상: 흰색;}