본문 바로가기
지속가능티끌/웹,워드프레스

워드프레스 테마 만들기 5편. header.php 다듬기, 메뉴 추가, functions.php, page.php 추가하기.

by i.got.it 2014. 10. 22.

 

 

본 글은 "워드프레스 테마 만들기" 시리즈 글 5편이며, 4편에 연결된 내용임.

 

워드프레스 테마 만들기 4편. 테마에 single.php 추가하여 포스트 1개 보기 구현하기. 보기 -> http://igotit.tistory.com/126  

 

 

 

 

개요.

   
 

본 글에서는,

 

1. 테마의 header.php 에서의 요구사항을 검토하고,

2. 1의 요구사항대로 header.php 를 코드정리한다.

3. functions.php를 테마에 추가하고, 우리의 테마에서 메뉴 편집 가능하게 하고,

4. header.php에서 메뉴를 표현하는 코드 추가하여 웹페이지에서도 메뉴가 보이게 하고,

5. 페이지를 볼 수 있는 page.php 를 테마에 추가한다.  


테마만들기 4편(http://igotit.tistory.com/126 ) 의 코드상태에서 추가되는 부분만 정리됨. 

 

 

 

 

 

 

 

1. 워드프레스 테마의 header.php 의 요구사항.

   
 

워드프레스에서 테마의 header.php 에서의 요구사항은 codex에서 제공하고 있다. 보기 -> http://codex.wordpress.org/Theme_Development#Document_Head_.28header.php.29 

 

복사해온다. (아래)

 

  • Use the proper DOCTYPE.
  • The opening <html> tag should include language_attributes().
  • The <meta> charset element should be placed before everything else, including the <title> element.
  • Use bloginfo() to set the <meta> charset and description elements.
  • Use wp_title() to set the <title> element. See why.
  • Use get_stylesheet_uri() to get the URL of the current theme stylesheet.
  • Use Automatic Feed Links to add feed links.
  • Add a call to wp_head() before the closing </head> tag. Plugins use this action hook to add their own scripts, stylesheets, and other functionality.

    •  

    위의 요구사항을 요약하면,

     

    html 버전 명시하고, 언어 명시하고,meta 태그에 charset 명시하는것을 head 젤 앞에 배치하고, 테마의 스타일시트를 얻는 URL명시하고, 피드링크 설정하고, 마지막으로 wp_head() 를 호출하란다.

     

    위 요구사항중 특별한 건 없다. 단,  3가지 사항 (wp_head,automatic feed link,het_stylesheet_uri )에 대해서는 조금 더 상세하게 살펴보자.

     

    wp_head(); 는 다른 플러그인들의 스크립트, 스타일시트, 그외 다른 기능들이 작동가능하게 해주는 처리다. 우리의 테마에서 이것을 넣어둔다고 시각적으로 변경되는것은 없다. 다른 플러그인을 설치해서 이 부분을 건드리는 처리를 하게되면 변화가 생길 것이다. 우리의 테마에서는 다른 플러그인 들이 그런 처리를 수행가능하게 해주는 것임.

    wp_head() 에 대한 codex의 상세설명 -> http://codex.wordpress.org/Function_Reference/wp_head

     

    Automatic Feed Links : 워드프레스 3.0 이후부터는 functions.php 에 add_theme_support() 를 사용하여 feedlinks 를 지원함이 요구된단다. feedlink 는 add_theme_support( 'automatic-feed-links' );  와 같은 식으로 함수 내 인자로 활용된다. 우리가 이를 header.php에서 구현할 때는 아래처럼 기록하면된다.

    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

    codex 의 상세설명 -> http://codex.wordpress.org/Automatic_Feed_Links

     

    한편, pingback 이 활용되는 곳은 functions.php 에서 add_theme_support()에서 사용되는데, 우리 테마는 아직 functions.php를 만들지 않았기에 .. 이것은 기록해도 별 작용은 없을 것이다.

     

    get_stylesheet_uri() : 테마가 사용하는 스타일 시트를 연결시킬 때 이 함수를 이용하라는 말이다. 우리가 이를 header.php 에서 구현할때는 아래처럼 기록하면 된다. 우리 테마의 스타일 시트는 style.css 파일로 만들어져 있다. 이 함수를 통하여 이 파일로 연결된다는 말이다.

    <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" />
    codex의 상세설명 -> http://codex.wordpress.org/Function_Reference/get_stylesheet_uri

     

    위 요구사항이란 단편적인것들이다. (구조적으로 다른 데이터 요소등과 연관되어 있어서, 설정이 까다롭다든지 하는 요소는 없다. 하라는 대로 하면 됨.)

     

     

    끝. - 워드프레스에서 테마의 head 부분의 요구사항 확인.

     

     

     

    2. skeleton 테마의 header.php 수정하기.

       
     

    현재 제작중인 테마의 header.php 를 상기1의 요구사항을 만족하도록 수정하자.

     

    현재의 header.php 는 아래 코드와 같다. 단지 html 형식만 준수하고 있을 뿐이다.

     

    jeader.php 현재상태.

    <!DOCTYPE html>

    <html>

    <head>

    <title>Skeleton Theme</title>

    </head>

    <body>

     

     

    워드프레스에서 요구하는 방식으로 변경하면 아래코드와 같다.

     

    header.php 수정본.

     <!DOCTYPE html>
    <html <?php language_attributes(); ?>>
        <head>
            <meta charset="<?php bloginfo( 'charset' ); ?>" />
            <title><?php wp_title(); ?></title>
            <link rel="profile" href="http://gmpg.org/xfn/11" />
            <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" />
            <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
            <?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
            <?php wp_head(); ?>
        </head>

    <body>
    header.php
    <hr>

     

    위와 같이 수정된 jeader.php 를 테마폴더에 올리고, 웹페이지를 보면 아래그림과 같다. 화면상에서 보이는 것이 달라지는것은 없다.

    (단, 브라우저 의 제목창에 wp_title() 에 의한 워드프레스 관리자에서 설정한 사이트의 타이들이 표시된다.)


     

     

     

    끝. 테마의 header.php 를 워드프레스의 기준에 맞게 수정반영함.

     

     

     

     

    3. 테마에 functons.php 추가하고 메뉴 활성화 하기.

       
     

     

    우리의 테마는 현재 워드프레스 관리자에서 외모부분을 보면 "메뉴"가 안보여서 메뉴를 구축할 수 없다.(아래그림의 붉은 박스에 보면 메뉴도 없고, 위젯도 없고..).  이는 현재 우리가 제작중인 skeleton 테마에서는  메뉴기능을 사용하는 셋팅이 되어있지 않기 때문이다.


     

    다른 테마들은 활성화시키면 저 자리에 메뉴가 보이는데, 우리가 지금 제작 중인 테마에서는 메뉴항목이 보이지 않는 이유는 우리의 테마에 functions.php 를 만들지 않았기 때문이다.

     

    functions.php 파일에서 Navigaton Menus 를 사용가능하도록 설정하고, functions.php 파일을 테마폴더에 넣어둬야 정상적으로 워드프레스관리자 화면에서 메뉴가 보이게 된다.

     

    functions.php 파일만들기.

    코드내용을 아래처럼 하여 우리의 테마폴더에 둔다.

    <?php
    function register_my_menu() {
      register_nav_menu('header-menu',__( 'Header Menu' ));
    }
    add_action( 'init', 'register_my_menu' );
    ?>

     

    참고 : functions.php 의 기능이해 와 코딩방법 별도 정리글 보기 -> http://igotit.tistory.com/130

     

    위의 hunctions.php 가 테마 폴더에 있는 상태에서 워드프레스 관리자 좌메뉴의 외모 부분을 보면 이제 "메뉴" 항목이 생겼다..

    "메뉴"를 클릭했을때 보이는 우측 화면의 메뉴편집기능이 모두 가능한 상태로 된다. 단 몇줄 안되는 코드로 많은 것을 얻었다.

     

    우리가 새롭게 만든 메뉴는 계층 구조를 가진 페이지들로 구성하였다. 홈은 우리가 추가하지 않아도 자동으로 들어온다.

     

     

    끝. 테마에 functions.php 파일 추가하고 메뉴 활성화시키기.

     

     

     

    4. skeleton 테마의 header.php에서 메뉴 표현하기.

       
     

    워드프레스의 메뉴 표현은 보통 header.php 에서 이뤄진다.

    메뉴표현하는 함수는 wp_nav_menu() 이다. 이 함수는 워드프레스 관리 사이트에서 외모 -> 메뉴 에서 만들어진 메뉴를 표현한다.

    wp_nav_menu() 의 codex 상세설명 -> http://codex.wordpress.org/Function_Reference/wp_nav_menu

     

    header.php 에 메뉴 표현하는 코드 추가.

     - 아래 파란색 부분이 메뉴표현하는 코드임.

     <!DOCTYPE html>
    <html <?php language_attributes(); ?>>
        <head>
            <meta charset="<?php bloginfo( 'charset' ); ?>" />
            <title><?php wp_title(); ?></title>
            <link rel="profile" href="http://gmpg.org/xfn/11" />
            <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" />
            <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
            <?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
            <?php wp_head(); ?>
        </head>
    <body>
    <?php wp_nav_menu();?>
    header.php
    <hr>

     

    header.php 가 수정된 상태에서 웹페이지를 보자. (아래그림.)

     

    위 그림에서 빨간색 부분에 들어와 있는 것이 메뉴이다. 우리가 앞의 3 에서 설정했던 페이지로 구성된 메뉴의 깊이도 반영되고 있다.

    이 메뉴를 눌러보면 해당 페이지 글이 안보이고, index.php 를 이용하여 디스플레이하게된다.

     

    우리가 아직 페이지 표현전용 템플릿인 page,php 를 테마에 추가하지 않았기 때문이다.

     

    이제 아래 글에서 page,php 를 추가하여 페이지도 정상적으로 보이게 한다.

     

     

    끝. header.php 에 메뉴표현 코드 추가하여 메뉴 보이게 함.

     

     

     

    5. 테마에 page.php 추가하여 페이지 보이게 하기.

       
     

    현재의 우리테마에는 페이지를 웹에 표현하는 page.php 를 추가하지 않은 상태이기 때문에 페이지 표현이 안되고 있다.

    page.php 를 새로 만들어서 추가하여 메뉴에서 페이지를 클릭한 경우 해당 페이지가 보이도록 한다.

     

    테마 만들기 4편에서의 포스트를 보이게 하기 위하여 single.php 를 만들었던 것과 완전히 동일한 방식이다.

     

    page.php 만들기.

    아래 코드내용으로 하여 page.php 만들어서 테마 폴더에 넣어두자.

    <?php get_header(); ?>

    <p>현재 페이지는 page.php 로 표현되는 중임</p>

    <?php

    if (have_posts()) :
       while (have_posts()) : the_post(); ?>
             <p>제목 : <?php the_title();?> </p>
             <?php the_content();?>
             <br>
    <?php
       endwhile;
    endif;

    ?>

    <?php get_footer(); ?>

     

     

     

    메뉴의 페이지 클릭한 경우 보이는 모습.(아래그림)

    이제 페이지도 정상적으로 보인다.


     

     

    끝 - 테마에 page.php 추가하였고, 페이지 표현되게 함.

     

    위  테마를 시험 운영 중인 워드프레스 사이트 보기 -> http://igotit.kr/theme-skeleton/

     

     

    본 글은 "워드프레스 테마만들기" 시리즈 글 5편이며, 5편에 연결된 6편 보기.

     

    워드프레스 테마만들기 6편. 사이드바,위젯추가, sidebar.php 템플릿파일 추가하기. 보기 -> http://igotit.tistory.com/135

     

     

     

    본 글이 포함된 통합 정리 글

     

    WordPress 활용정보 정리 : http://igotit.tistory.com/23

     

     

     ///129.

     

     


    저작자표시 비영리 변경금지

    '지속가능티끌 > 웹,워드프레스' 카테고리의 다른 글

    워드프레스 테마 만들기 6편. 사이드바 위젯 추가, sidebar.php 템플릿 추가.  (0) 2014.10.23
    워드프레스 사이드바,위젯 개요. 활용예, 개발 정보.  (0) 2014.10.23
    워드프레스 테마의 functions.php 기능 이해, 코딩 방법 개념잡기  (1) 2014.10.22
    워드프레스 테마 만들기 4편. 포스트 표현용 템플릿 single.php 추가하기  (0) 2014.10.22
    워드프레스 테마 만들기 3편. Loop 구현하기.  (0) 2014.10.22

    관련글

    댓글


     
    .

    비트코인



    암호화폐       외환/나스닥/골드         암호화폐/외환/나스닥/골드
         
    현물 |선물 인버스 |선물 USDT       전략매니저(카피트레이딩)         프랍 트레이더 온라인 지원가능. MT4,MT5



    티스토리툴바