검색결과 리스트

워드프레스 테마에 해당되는 글 7건

글

[워드프레스 테마] 포스트 꾸미기2 #7

워드프레스 테마 2018. 5. 17. 23:57

[워드프레스 테마 만들기] 포스트 꾸미기2





test-thema.zip


1. 먼저 이 소스 파일을 테마가 있는 곳으로 가서 압축을 풀자. 같은 파일이 있으면 덮는 것을 추천한다.  오늘은

포스트에 대표하는 이미지 파일을 추가해서 index.php 파일에서 적당한 크기로 꾸미는 것을 할 것이다.





2. http://localhost/wordpress/admin으로 접속을 해서 워드프레스에 이미지 파일을 업로드 시키자. 이미지 파일을

업로드 시키려면 미디어로 들어가서 피씨에 있는 파일을 선택해서 올리면 wordpress로 올라간다. localhost로 접속을

하기 때문에 결국에 저장되는 장소는 내 컴퓨터지만 wordpress를 웹서버에 업로드 시킨 후 이미지 파일을 올리면 웹

서버에 올라갈 것이다. 






3. 이미지 파일을 미디어에 업로드를 하고난 후 작성된 글로 편집으로 들어가서 우측 제일 하단에 보면 특성이미지를

선택하는 부분이 있다. 업로드된 파일 중 하나를 선택해서 올려주면 된다.






4. 이미지 파일을 업로드 시킨 후  functions.php 파일을 열어서 제일 하단에 이 코드를 추가하자. 

function my_theme_setup(){


}


이 코드 안에 위에 있는 register_nav_menus(~)); 함수를 넣어주자. menu 함수를 만들어준 장소도 

포스트에 있는 내용에 추가되기 때문에 따로 따로 나눠놓고 보기보단 안 쪽으로 정리를 하면 더 보기

쉬우니깐 말이다. 


저 함수를 사용하는 이유는 테마 혹은 플러그인이 특정한 지원(theme feature)을 만드는 것을 허용하게

하기 때문이다.

관련 링크 : https://codex.wordpress.org/ko:%ED%95%A8%EC%88%98_%EB%A0%88%ED%8D%BC%EB%9F%B0%EC%8A%A4/add_theme_support




1
2
3
4
5
6
<?php if( has_post_thumbnail() ) : ?>
     <?php the_post_thumbnail( 'custom' ); ?>
<?php else : ?>
     <img class="not-found" src="./wp-content/uploads/2017/07/image-not-found.png" alt="">
<?php endif; ?>
 
cs

5. index.php의 <article> 바로 밑에 추가가 되어있다. has_post_thumbnail()함수는 포스트 내용에
이미지 파일의 여부를 확인한다. 그래서 이미지 파일이 있으면 the_post_thumbnail() 함수를 이용해서
썸네일을 표시하라는 뜻이다. 

만약에 없다면 다른 이미지를 출력한다는 소스다.

- has_post_thumbnail() :
https://developer.wordpress.org/reference/functions/has_post_thumbnail/

- the_post_thumbnail() :
https://developer.wordpress.org/reference/functions/the_post_thumbnail/






'워드프레스 테마' 카테고리의 다른 글

[워드프레스 테마] 포스트 꾸미기 #6  (0) 2018.05.16
[워드프레스 테마 만들기] 서브 메뉴 만들기 #5  (0) 2018.05.14
[워드프레스 테마] 템플릿 #4  (0) 2018.05.10
[워드프레스 테마] Header, Footer #3  (0) 2018.05.09
[워드프레스 테마] 테마만들기 #2 sytle.css  (0) 2018.05.08

설정

트랙백

댓글

글

[워드프레스 테마] 포스트 꾸미기 #6

워드프레스 테마 2018. 5. 16. 22:23

[워드프레스 테마 만들기] 포스트 꾸미기



index.php


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?php get_header(); ?>
    <?php
      if(have_posts()) :
          while(have_posts()) : the_post(); ?>
              <article class="post">
                  <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                  <p class="post-info"><?php the_time('Y년 n월 j일 a g:i');?>
                   | 글쓴이 <a href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>">
                     <?php the_author(); ?></a> | 카테고리
                     <?php
                        $categories = get_the_category();
                        $separator = ", ";
                        $output = '';
 
                        // 카테고리 변수의 값이 있으면 $category에 변수에 하나씩 담
                        // 는 다는 이야기다.
                        if($categories) :
                            foreach($categories as $category) :
                                $output .= '<a href="' . get_category_link($category->term_id) .'">'. $category->cat_name.$separator. '</a>';
                            endforeach;
                            echo trim($output, $separator);
                        endif;
                      ?>
                   </p>
                  <?php the_content(); ?>
              </article>
    <?php endwhile;
      else :
          echo '포스트가 존재하지 않습니다.';
      endif;
   ?>
<?php get_footer(); ?>
 
cs



1. 7번째 줄에 있는 <p class="post-info"><?php the_time('Y년 n월 j일 a g:i');?>

함수는 글이 쓰여진 시간을 출력하는 함수다.  시간 출력함수 사용법은 

http://www.everdevel.com/PHP/date.php 이 주소로 찾아서 사용을 하면 된다.



2. 8번째 줄에 있는 <a href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>">

                     <?php the_author(); ?></a>

함수는 포스트의 글쓴이를 불러오는 함수다.




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
    $categories = get_the_category();
    $separator = ", ";
    $output = '';
 
    // 카테고리 변수의 값이 있으면 $category에 변수에 하나씩 담
    // 는 다는 이야기다.
    if($categories) :
        foreach($categories as $category) :
            $output .= '<a href="' . get_category_link($category->term_id) .
                '">'. $category->cat_name.$separator. '</a>';
        endforeach;
        echo trim($output, $separator);
    endif;
?>
cs


3. 중간에 있는 이 소스는 포스트 내용의 카데고리를 읽어들어와서 반복문으로 포스트 끝까지 돌아서

$category변수에 넣는코드다. 그리고 반복문을 다 돌고나면 읽어들인 카데고리명을 출력한다.

trim()함수는 뒤에 문자열과 반복된 부분을 제거하는 함수다.



index.php

style.css





'워드프레스 테마' 카테고리의 다른 글

[워드프레스 테마] 포스트 꾸미기2 #7  (0) 2018.05.17
[워드프레스 테마 만들기] 서브 메뉴 만들기 #5  (0) 2018.05.14
[워드프레스 테마] 템플릿 #4  (0) 2018.05.10
[워드프레스 테마] Header, Footer #3  (0) 2018.05.09
[워드프레스 테마] 테마만들기 #2 sytle.css  (0) 2018.05.08

설정

트랙백

댓글

글

[워드프레스 테마 만들기] 서브 메뉴 만들기 #5

워드프레스 테마 2018. 5. 14. 21:06

[워드프레스 테마] 서브메뉴 만들기



test-thema.zip


- 알집을 워드프레스 테마가 있는 곳에 풀어준다.(똑같은 이름의 폴더가 있으면 삭제후 압축을 풀거나

덮어쓴다.)




1. 워드프레스 메뉴를 보면 하위메뉴가 있는 것을 확인할 수 있다. 이것을 서브메뉴라고 한다. 블로그에서

자주 이용되는 것인데, 대분류 밑에 중분류, 중분류 밑으로 소분류로 나뉘어 지듯이 비슷한 성격의 카데고리나

메뉴지만 서로 가지는 성격은 다르기 때문에 중분류 밑에 소분류로 또 나눈다. 그래서 워드프레스

소분류로 나누는게 서브메뉴라고 한다.






2. 일단 서브메뉴를 만들기 위해서는 상위메뉴와 하위메뉴로 나눈다. 나누기 위해서는 모든 페이지에 들어가서

몇 개의 글을 작성한 후 글 편집해서 들어가면 오른쪽 하단에 보게 되면 페이지 속성 부분에서 [상위]라고 있다.

그곳에 상위메뉴를 선택하면 된다.





3. page.php에   <?php wp_list_pages( $args ); ?> 를 추가한다. 그러면 하위메뉴를 볼 수 있다. 하지만 하고나서

모든 페이지의 목록을 다 보여주기 때문에 적절하게 수정을 해야한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
              <article class="post page">
                   <h2><?php echo get_the_title( get_top_parent_id() ); ?></h2>
                   <div class="content-box">
                        <nav class="site-nav sub-nav">
                            <ul>
                            <?php
                                $args = array(
                                    'child_of' => get_top_parent_id(),
                                    'title_li' => '',// 타이틀 없앰
                                );
                             ?>
                            <?php wp_list_pages( $args ); ?>
                            </ul>
                        </nav>
                        <?php the_content(); ?>
                    </div>
                </article>
cs


6째줄 ~ 10째줄 사이에 있는 소스에서 $args = arrary ( ~ ) 안에 'child_of' => get_top_parent_id() 부분이

상위 id값에서 나온 자식 메뉴만 보이게 하는 소스다.




4. functions.php에 아래의 소스코드를 하단에 추가를 해준다. 이 소스코드를 추가를 하는 이유는 

위의 코드에서 부모의 코드를 가지고 와서 고정시켜주기 위해서 아래의 소스코드를 추가해준다.

 'child_of' => get_top_parent_id(), // 뒤에 부분에 고정 get_top_parent_id()


1
2
3
4
5
6
7
8
9
// 상위 페이지 아이디 가져오기
function get_top_parent_id(){
    global $post; // post변수를 다른 곳에서 사용하기 위해서 전역변수로 사용
    if( $post->post_parent ){ // 포스트가 부모페이지가 있다면
        $ancestors = array_reverse( get_post_ancestors( $post->ID ) );
        return $ancestors[0];
    }
    return $post->ID;
}
cs


(functions.php에서 함수와 전역변수로 선언한 이유는 다른 파일에서도 사용하기 위함이다.)









'워드프레스 테마' 카테고리의 다른 글

[워드프레스 테마] 포스트 꾸미기2 #7  (0) 2018.05.17
[워드프레스 테마] 포스트 꾸미기 #6  (0) 2018.05.16
[워드프레스 테마] 템플릿 #4  (0) 2018.05.10
[워드프레스 테마] Header, Footer #3  (0) 2018.05.09
[워드프레스 테마] 테마만들기 #2 sytle.css  (0) 2018.05.08

설정

트랙백

댓글

글

[워드프레스 테마] 템플릿 #4

워드프레스 테마 2018. 5. 10. 21:46

[워드프레스 테마] 템플릿 적용하기




1. 관리자 페이지에서 페이지의 다른 이름으로 변경을 하면 기존 index.php에서 연결되어 있는 링크로 연결이

제대로 안 되어서 페이지에는 포스트가 존재하지 않습니다란 문구를 표시하고, 저 글로 이동을 할려면

변경된 이름으로 따로 들어가거나 별도의 지정을 해줘야 한다.



[페이지의 이름 변경 후 모습]




페이지 1개를 표시하는 것

브라우저에서 페이지1개를 보려고 하는 경우, 워프에서의 처리


페이지는 템플릿을 여러개 만들어 둘 수 있고, 페이지마다 템플릿을 다르게 지정할 수 있다.

워프에서 표현할 때도 먼저 지정된 별도의 템플릿을 먼저 표현하게 된다.

지정된 템플릿이 없다면 page.php에서 표현된다.  이 파일이 없으면 index.php에서 표현이 된다.


템플릿 우선순위는 아래와 같다.


1. custom template file

2. page-[slug].php

3. page-[id].php

4. page.php

5. index.php



페이지를 설정을 해주면 별도의 레이아웃이나 이미지 등을 첨부하여 붙여줄 수 있어서

사용을 해서 각각 설정이 가능하도록 하는 것이다.


test-thema.zip



새로 추가된 파일은 page.php, page-about-us.php, page-profolio.php, first-template.php 추가가

되었다.


page.php에서 class 명을 다르게 설정을 한 이유는 css에서 index나 다른 페이지와 섞이지 않게 별도로

표시가 될 수 있게 표시를 했다. 




★ 압축파일에 있는 파일을 압축풀기를 해서 나온 소스 코드를 이용하면 되는데, page-about-us나

page-profolio.php는 모든 페이지에서 페이지의 이름을 변경된 것을 지정해준 대로 해줘야 소스파일이

적용이 된다.






'워드프레스 테마' 카테고리의 다른 글

[워드프레스 테마] 포스트 꾸미기 #6  (0) 2018.05.16
[워드프레스 테마 만들기] 서브 메뉴 만들기 #5  (0) 2018.05.14
[워드프레스 테마] Header, Footer #3  (0) 2018.05.09
[워드프레스 테마] 테마만들기 #2 sytle.css  (0) 2018.05.08
[워드프레스 테마] 테마 만들기 #1  (0) 2018.05.07

설정

트랙백

댓글

글

[워드프레스 테마] Header, Footer #3

워드프레스 테마 2018. 5. 9. 20:59

[워드프레스 테마] #3

Header.php파일과 Footer.php 파일로 분리하기





1. 먼저 워드프레스 관리자페이지에서 새글을 몇 개 추가를 한다. 추가를 하고나서 작성된 페이지를 끌어다

쓸 것이라서 몇 개의 페이지가 필요하다.




index.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php get_header(); ?>
  
          <?php
              if(have_posts()) :
                  while(have_posts()) : the_post(); ?>
                      <article class="post">
                          <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                          <?php the_content(); ?>
                      </article>
            <?php endwhile;
              else :
                  echo '포스트가 존재하지 않습니다.';
              endif;
           ?>
<?php get_footer(); ?>
 
cs




style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
/*
Theme Name: My Theme
Author: Jake Song
Author URI: http://www.wpjake.com
Description: 나의 첫 테마입니다!!!
Version: 1.0.0
*/
body{
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #333;
}
p{
  line-height: 1.65em;
}
a{
  color: #006ec3;
}
/* 일반 레이아웃 */
div.container{
  max-width: 920px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
article.post{
  border-bottom: 2px dotted #bbb;
}
article.post:last-of-type{
  border-bottom: 0;
}
/* 헤더 */
.site-header{
  border-bottom: 2px solid #999;
}
/* 푸터 */
.site-footer{
  margin-top: 30px;
  border-top: 2px solid #999;
}
/* 메뉴  */
.site-nav ul{
  margin: 0;
  padding: 0;
}
.site-nav ul li{
  list-style: none;
  float: left;
}
/* 클리어 픽스 */
.site-nav ul::before, .site-nav ul::after{
  content: "";
  display: table;
}
.site-nav ul::after{
  clear: both;
}
/* 주 메뉴 */
.site-header .site-nav ul li a{
  display: block;
  padding: 10px 18px;
  border: 1px solid #999;
  border-bottom: 0;
  margin-right: 5px;
}
.site-header .site-nav ul li a:hover{
  background-color: #ececec;
}
/* 메뉴의 색깔이 변경됨 */
.site-header .site-nav ul li.current-menu-item a{
  background-color: #006ec3;
  color: white;
}
/* 하단 메뉴 */
.site-footer .site-nav ul li{
  margin-right: 5px;
  padding-right: 5px;
  border-right: 1px dotted #999;
}
.site-footer .site-nav ul li:last-of-type{
  border-right: 0;
cs




header.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
    <head>
        <meta name="viewport" content="width=device-width">
        <meta charset="<?php bloginfo('charset'); ?>">
        <title><?php bloginfo('name'); ?></title>
        <?php wp_head(); ?>
    </head>
    <body <?php body_class(); ?>>
      <div class="container">
          <header class="site-header">
              <h2><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h2>
              <h5><?php bloginfo('description'); ?></h5>
              <nav class='site-nav'>
                  <?php
                      $args = array(
                        'theme_location' => 'primary'
                      );
                   ?>
                  <?php wp_nav_menu(); ?>
              </nav>
 
          </header>
 
cs


foo





footer.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<footer class="site-footer">
          <nav class='site-nav'>
              <?php
                  $args = array(
                    'theme_location' => 'footer',
                  );
               ?>
              <?php wp_nav_menu($args); ?>
          </nav>
   <p><?php bloginfo('name') ?> - &copy; <?php echo date('Y'); ?></p>
</footer>
</div>
<?php wp_footer(); ?>
</body>
</html>
 
cs



functions.php

1
2
3
4
5
6
7
8
9
10
<?php
function dev_enqueue_scripts(){
    wp_enqueue_style( 'style', get_stylesheet_uri() );
}
add_action('wp_enqueue_scripts', 'dev_enqueue_scripts');
 
register_nav_menus( array(
  'primary' => __('Primary Menu'),
  'footer' => __('Footer Menu'),
));
cs



2. header.php 부분은 index.php에 있는 내용 중에서 제일 상단에 있는 <!-- 이 부분부터 </header>까지 잘라서 

header.php 파일로 만들었다. 만들고 나서 index.php에서 사용할 수 있게 하려면 상단에

<?php get_header(); ?>

이 php문이 선언이 되어 있어야 한다.


footer.php는 <footer> 선언부부터 index.php 제일 하단 부분까지 잘라내서 footer.php 파일로 만들어주면

된다. 그리고 footer.php를 index.php에서 가져다 쓰려면 제일 하단에 <?php get_footer(); ?>

가 선언이 되어 있어야 한다.



3. functions.php에 새로 들어가 있는 부분이 

1
2
3
4
5
6
 
register_nav_menus( array(
  'primary' => __('Primary Menu'),
  'footer' => __('Footer Menu'),
));
 
cs


register_nav_menus()에 인자를 추가해서 css에 네비게이션 id를 main-nav로 만들어 주었고, 관리자 페이지

에서 확인 가능하다.



소스코드를 이용해서 메뉴를 따로 추가를 하는 것이다. 왼쪽에 있는 primary는 메뉴명이고, 오른쪽에 있는

Primary Menu는 관리자 페이지에서 나타나는 부분이다.




4. style.css에 별도로 추가되어 있는 부분 있는데 


1
2
3
4
5
6
7
.site-nav ul::before, .site-nav ul::after{
  content: "";
  display: table;
}
.site-nav ul::after{
  clear: both;
}
cs


클리어 픽스라고 한다. html은 따로 레이아웃의 값을 설정해주지 않으면 서로의 경계선 부분에서 겹치는

경우가 발생한다. 그래서 그 영향을 덜 받고자하거나 좌표 따는게 귀찮거나 해당 요소의 width값이 각각 다를때

사용한다.




그래서 소스코드를 이용해서 예제를 만들어보면 아래의 화면이 나타나야 한다.




[상단]




[하단]











'워드프레스 테마' 카테고리의 다른 글

[워드프레스 테마] 포스트 꾸미기 #6  (0) 2018.05.16
[워드프레스 테마 만들기] 서브 메뉴 만들기 #5  (0) 2018.05.14
[워드프레스 테마] 템플릿 #4  (0) 2018.05.10
[워드프레스 테마] 테마만들기 #2 sytle.css  (0) 2018.05.08
[워드프레스 테마] 테마 만들기 #1  (0) 2018.05.07

설정

트랙백

댓글

글

[워드프레스 테마] 테마만들기 #2 sytle.css

워드프레스 테마 2018. 5. 8. 18:17

[워드프레스 테마] 테마만들기 style.css 파일 적용하기


1. 아래의 파일들을 만든다. 파일을 만들어 줄 때 Bitnami가 설치된 폴더 안에 

C:\Bitnami\wampstack-7.1.17-1\apache2\htdocs\wordpress\wp-content\themes\my-tema

경로에 만들어준다.

(맨 마지막의 my-tema폴더는 임의로 지정한 폴더명이기 때문에 꼭 폴더명이 저것일 필요는 없다.)

※ 파일명은 그대로 따라야한다.




index.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html><!--<?php language_attributes(); ?>-->
  <head>
    <meta name="viewport" content="width:content-width">
    <meta charset="<?php bloginfo('charset'); ?>">
    <title><?php bloginfo('name'); ?></title>
    <?php wp_head(); ?>
  </head>
  <body <?php body_class(); ?>>
    <div class="container">
 
      <header class="site-header">
          <h2><a href="<?php echo home_url() ?>"><?php bloginfo('name'); ?></a></h2>
          <h5><?php bloginfo('description'); ?></h5>
      </headder>
 
      <?php
        if(have_posts()): // 포소트의 내용이 있다면
            while(have_posts()) : the_post();?>
            <h2><a href="<?php echo home_url(); ?>"><?php the_title(); ?></a></h2>
            <?php the_content(); ?>
            <?php
          endwhile; // 포스트 끝까지 출력
        else:
          echo "포스트가 존재하지 않습니다.";
        endif;
      ?>
      <?php wp_footer(); ?>
 
      <footer class"site-footer">
          <p><<?php bloginfo('name'); ?> - &copy; <?php echo date('Y'); ?>></p>
</footer>
    </div>
  </body>
</html>
 
cs



style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/*
  Theme Name: My Theme
  Author: Rhcshu
  Author URI: http://www.wpjake.com/
  Description: 나의 첫 테마 입니다!!
  Version: 1.0.0
*/
body{
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #333;
}
/* 라인 높이 */
p{
  line-height: 1.65em;
}
/* 글씨 색상 */
a{
  color: #006ec4
}
/*  일반 레이아웃 */
div.container{
  max-width: 920px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
 
cs



functions.php

1
2
3
4
5
6
7
8
9
10
<?php
// 스타일시트가 작동할 수 있도록 해줌, css연결
function my_enqueue_script(){
  wp_enqueue_style('style', get_stylesheet_uri());  // style 시트가 있는 곳을 알려줌
}
 
add_action('wp_enqueue_scripts', 'my_enqueue_script');
 
 ?>
 
cs




2. style.css를 설정하게 되면 html문서에 head부분에 따로 설정을 하고, link로 끌어다가 쓰면 되는데, 워드프레스에서는

style.css 파일을 별도로 만들어 준 후 functions.php 파일이 끌어와서 사용할 수 있게끔 도와준다.



Functions.php 파일은 워드프레스테마를 만들때 테마를 위한 특정 기능을 추가 하는 파일이다.

워드프레스가 실행 될때 이파일은 자동으로 인클루드 되기때문에 이 파일에 있는 함수는 모든 템플릿 파일에서 

사용 할 수 있다.



훅(hook)

 

훅을 이용해 워드프레스가 실행 되는 도중에 임의의 함수를 실행하여 기존의 함수나 출력을 변경 할 수 있다.

훅에는 액션훅(add_action)과 필터훅(add_filter)이 있습니다.

액션훅은 워드프레스에서 이벤트가 발생할때 실행하는 것 이며,필터훅은 콘텐츠의 내용을 변경할 때 사용하는 것 이다.

 


훅이란? : https://codex.wordpress.org/ko:Plugin_API

수정전


수정후





'워드프레스 테마' 카테고리의 다른 글

[워드프레스 테마] 포스트 꾸미기 #6  (0) 2018.05.16
[워드프레스 테마 만들기] 서브 메뉴 만들기 #5  (0) 2018.05.14
[워드프레스 테마] 템플릿 #4  (0) 2018.05.10
[워드프레스 테마] Header, Footer #3  (0) 2018.05.09
[워드프레스 테마] 테마 만들기 #1  (0) 2018.05.07

설정

트랙백

댓글

글

[워드프레스 테마] 테마 만들기 #1

워드프레스 테마 2018. 5. 7. 21:04


[워드프레스 테마 만들기 #1 - 기본 설정]


1. 기본적으로 워드프레스 테마를 제작하려고 하면 먼저 Bitnami와 워드프레스 압출 파일을 다운받고, atom이란

프로그램을 설치해야 한다.

※ Bitnami는 Apache와 mysql이 복합접으로 묶여서 설치를 도와주는 프로그램이다. 


- Bitnami : https://bitnami.com/stack/wamp (WIndow10환경)

- 워드프레스 : https://ko.wordpress.org/download/

- atom : https://atom.io/


설치는 위 사이트에 이동을 하셔서 다운받으시면 됩니다. Bitnami와 atom은 자신이 사용하는 컴퓨터 환경에 맞춰서

다운로드를 하면 된다. 나는 windows10 환경에 설치를 했다.


간혹 BItnami를 설치를 하고, Wordpress 압축파일을 Bitnami 폴더에 넣어서 localhost로 DB를 설정하다보면

오류가 발생하는데, 수정할 부분이 있으면 wp_config.php 파일을 열어서 수정을 하면된다.


wordpress 압축파일은  C:\Bitnami\wampstack-7.1.17-1\apache2\htdocs 이 경로에 풀어주면 된다.

그러면 localhost에서 바로 접속하여 wordpress에 접근할 수 있다.



2. wordpress에 테마를 구성할려면 기본 구성 파일은 index.php파일과 style.css파일이 필요하다. 왜 그렇냐고

물어본다면 wordpress에 테마를 적용할 시 적용되는 파일이 index.php파일과 style.css파일로 설정이 되어

있기 때문에 2가지 파일은 필수적으로 있어야 한다. 그리고 header.php부분과 footer.php부분이 필요한데,

하면서 천천히 해보기로 하겠다.





3. 테마를 만들면서 볼려면 wordpress → wp_content → themes 폴더에 새로운 폴더를 만들어서 새로운 테마

를 연습해보자.




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html><?php language_attributes(); ?>
  <head>
    <meta name="viewport" content="width:content-width">
    <meta charset="<?php bloginfo('charset'); ?>">
    <title><?php bloginfo('name'); ?></title>
    <?php wp_head(); ?>
  </head>
  <body <?php body_class(); ?>>
    <header class="site-header">
        <h2><?php bloginfo('name'); ?></h2>
        <h5><?php bloginfo('description'); ?></h5>
    </headder>
    <?php
      if(have_posts()): // 포소트의 내용이 있다면
          while(have_posts()) : the_post();?>
<!--          <h2><?php the_title(); ?></h2>
          <?php the_content(); ?>  -->
          <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
          <?php the_content(); ?>
          <?php
        endwhile; // 포스트 끝까지 출력
      else:
        echo "포스트가 존재하지 않습니다.";
      endif;
    ?>
    <?php wp_footer(); ?>
 
    <footer class"site-footer">
        <p><<?php bloginfo('name'); ?> - &copy; <?php echo date('Y'); ?></p>
  </body>
</html>
 
cs


4. index.php 소스파일엔 위의 코드대로 치자.

(15째줄의 if문은 포스트 내용이 있는지 여부를 확인하는 함수인데, 워드프레스에서 새글쓰기로 글을 2~3개

써야한다.)



1
2
3
4
5
6
7
8
/*
  Theme Name: My Theme
  Author: Rhcshu
  Author URI: http://www.wpjake.com/
  Description: 나의 첫 테마 입니다!!
  Version: 1.0.0
*/
 
cs

5. style.css 파일의 내용이다.

두 파일을 저장을 했으면 인터넷 창에 localhost/wordpress에 접속을 해서 테마에서 추가된 테마를 확인할 수 있다.








6. 테마를 적용한 상태에서 입력된 소스코드를 볼 수 있다.






'워드프레스 테마' 카테고리의 다른 글

[워드프레스 테마] 포스트 꾸미기 #6  (0) 2018.05.16
[워드프레스 테마 만들기] 서브 메뉴 만들기 #5  (0) 2018.05.14
[워드프레스 테마] 템플릿 #4  (0) 2018.05.10
[워드프레스 테마] Header, Footer #3  (0) 2018.05.09
[워드프레스 테마] 테마만들기 #2 sytle.css  (0) 2018.05.08

설정

트랙백

댓글

1
지역로그 : 태그 : 방명록 : 관리자 : 글쓰기
래빗풋's Blog is powered by Daum & Tattertools / Designed by Tistory

티스토리툴바