티스토리 뷰
일단 테마를 하나 가지고 옴니다.
다운받는곳은 http://freelec.co.kr/bbs/list_book_pds.asp
내려받은 파일을 압축풀기를 해주신 다음에
C:\xampp\htdocs\myblog\wp-content\themes
이 경로로 들어가셔서 테마를 가지고 와 줍니다.
이제 simplesimple 폴더로 들어가시면
이렇게 화면이 뜹니다.
style.css 라는 파일이 있는데요
이 파일을
이 프로그램으로 열어주시기 바랍니다.
참고로 워드프레스에서 사용하는 스타일시트는 style.css라는 이름으로 정해져 있습니다.
그러면 막 어쩌고 저쩌고 영어로 글씨가 쓰여져 있을것 입니다.
그중에서 주석부분을 잘 봐주시기 바랍니다.
|
Theme Name |
테마 이름(필수적으로 적어줘야 한다.) |
|
Theme URL |
테마의 URL |
|
Description |
테마에 대한 설명 |
|
Author |
테마를 만든 사람 |
|
Author URL |
만든이의 URL |
|
Version |
테마의 버전 |
|
Tags |
테마에 붙인 태그 |
이제 header.php파일을 열어주셔서
<body>태그부분을 봐주시기 바랍니다.
<body>태그부분 아래쪽에는 <div>,<h1>,<a>,<p> 태그등 HTML태그가 사용되고 있는데요
각 태그에대해 간략히 설명하겠습니다.
DIV태그
문법은 <div></div>이렇게 쓰이며 벽돌 쌓듯이 척척 쌓아가는것입니다. 그래서 <br>태그가 필요없습니다.
이거랑 비슷한 태그기 있는데 바로 table이라는 태그입니다.
table태그는 table과 tr태그로 틀을 잡은다음 td라는 태그로 채워가는 것 입니다.
예제를 보고 알아보도록 하겠습니다.
이렇게 벽돌처럼 척척 쌓아가는 것 입니다. 그래서 <br>태그가 필요 없는 것 입니다.
※<div>태그는 레이아웃 구조를 나눌때 사용합니다.
<h1>태그
h1태그는 문법이 <h1></h1>이고 글씨크기를 크게 해주는 것 입니다.
<p태그>
문단을 나누는 태그로 사용합니다.
참고로 p태그는 div태그랑 많이 비슷하지만 레이아웃 구조는 나누진 않습니다.
<a태그>
a태그는 문법은 <a></a>이며
가장 기초적인 페이지 이동이 가능하게 하는 태그입니다.
a태그에는 속성들이 있는데요
|
href |
링크이름과 연결되어 있는 리소스(resource)의 주소 |
|
title |
연결되어 있는 리소스에 대한 설명 |
|
target |
문서가 로드될 대상으로 3가지의 속성들이 있습니다. |
<target>의 속성
-
_self : 현재의 문서가 로드된 frame, 현재 문서가 사라집니다.
-
_blank : 새로운 창을 띄우고 거기에 문서드를 로드시킵니다.
-
_parent : 현재문서가 frame이나 iframe에 로드된 경우 현재문서를 로드한 프레임에 문서를 로드합니다.
<span태그>
span 태그는 인라인의 요소로서 한줄에 스타일을 적용시킵니다.
인라인 요소는 몇가지 있는데요 대표적으로는
-
<img태그>
-
<span태그>
-
<strong태그>
등이 있습니다. 인라인 요소의 특징은
-
줄바꿈 태그<br> 을 사용하지 않으며
-
block태그 안에 단독으로 포함되지 않는이상 가로로 쭉 나열됩니다.
-
이 요소 주변에는 공간이 생기질 않습니다.
지금까지 태그들에 대해서 알아봤으니 다시 header.php파일로 가셔서 설명을 해보도록 하겠습니다.
idfmf logo라고 해준거고
<a>태그안에 href속성이 쓰였습니다. 그리고 제 사이트 주소는 http://localhost/myblog 입니다. 그리고 span태그를 사용해서 출력을 하겠다는 의미인데 <?php bloginfo('name'); ?> 이라는 php내용이 쓰였습니다. 이것은 html을 직접 서술하지 않고 템플릿 태그를 사용하므로써 동적으로 html을 출력하는 것 입니다.
제가 설정하는곳으로 가서 이렇게 사이트 제목에다가
Sensibility IT 라고 적어주었습니다.
그러면
<?php bloginfo('name'); ?>
이 문법에 의해 아래와 같이 동적으로 HTML을 출력 해 줍니다.
만약 동적으로 출력을 하기 싫다면 어떻게 해야될까요???
이렇게 <span>태그 내용을 지운다음 Sensibility IT라고적어주면 됩니다.
여기서 사용된 템플릿 태그가 2개가 있는데요
-
home_url()
-
bloginfo()
일단 저 두개의 템플릿 태그를 알아보기 전에 템플릿 태그가 무엇인지 알아보겠습니다.
템플릿 태그(template tags)
워드프레스 테마템플릿에서 루트 콘텐츠를 출력하고 사용하는 php함수를 일컷는 말입니다.
이 태그를 사용한다면?!?!?!?!
->웹사이트에 어느위치에 어떻게 콘텐츠를 출력할것인지 결정을할 수 있습니다.
템플릿 태그를 이용하는 가장 중요한 이유는!!!!!
->php코드를 몰라도 사용하는데 전혀 지장이 없는것이 특징입니다.
템플릿 태그가 무엇인지 알아보았으니 home_url()과 bloginfo()에 대해 알아보겠 습니다.
home_url
-
사이트의 홈 URL을 반환합니다.
-
형식은 home('path', 'scheme')
-
path : 홈 URl로부터의 상대 경로 (생략 가능)
-
scheme : URL 스키마. 'http' 또는 'https'를 지정 (생략가능)
bloginfo()
-
bloginfo는 blog information이라는 뜻이며 블로그 정보를 알려주는 템플릿 태그입니다.
-
블로그와 관련된 여러가지 정보를 출력하며
-
bloginfo('인수')
|
name |
블로그 제목 |
|
description |
블로그 설명 |
|
url |
블로그 사이트의 URL |
|
template_url |
사용 중인 템플릿의 URL |
|
stylesheet_url |
style.css의 URL |
|
rss2_url |
RSS2.0 형식의 RSS 피드 URL |
|
comments_rss2_url |
RSS2.0 형식의 댓글 RSS 피드 URL |
여기에
템플릿 태그인 bloginfo내용을 빼버렸습니다.
이말은 즉, HTML을 동적으로 출력하지 않겟다는 의미입니다.
그래서 수동으로 바꾸어주어서 출력을하니 아래처럼 보여지는 것 입니다.
이상 워드프레스 테마 내마음대로 만들기 -part1-을 마치겠습니다.
'허접한 프로그래밍 > 워드프레스' 카테고리의 다른 글
| [WordPress] 워드프레스 테마 내마음대로 만들기-part3 (0) | 2013.09.07 |
|---|---|
| [WordPress] 워드프레스 테마 내마음대로 만들기-part2 (2) | 2013.09.07 |
| [WordPress] 워드프레스 로그인 및 기본설정 (0) | 2013.09.06 |
| [WordPress] 워드프레스 설치(wordpress.org) (0) | 2013.09.05 |
| [Wordpress] XAMPP 설치 (0) | 2013.09.05 |
