워드프레스 테마 만들기 | 레이아웃 만들고 사이트 제목 출력하기

레이아웃 만들기

HTML 마크업을 하고 CSS로 꾸미는 것은 이 강좌의 목적이 아닙니다. HTML, CSS, JavaScript, PHP 등 웹프로그래밍은 기본적으로 할 수 있는 분들을 위한 강좌에요.

따라서 코드는 아주 단순하게, 스타일링도 거의 없는 테마를 만들 거에요.

제목은 레이아웃 만들기라고 했지만, 출력하는 위치를 잡는 정도입니다. 다단 구성도 아니고, 반응형 웹디자인도 아닙니다.

index.php를 다음과 같이 만듭니다.

<!doctype html>
<html <?php language_attributes(); ?>>
  <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <?php wp_head(); ?>
  </head>
  <body <?php body_class(); ?>>
<div class="jb-container">
  <div class="jb-header">
    <h1>Header</h1>
  </div>
  <div class="jb-content">
    <h2>Content</h2>
  </div>
  <div class="jb-sidebar">
    <h2>Sidebar</h2>
  </div>
  <div class="jb-footer">
    <h2>Footer</h2>
  </div>
</div>
    <?php wp_footer(); ?>
  </body>
</html>

style.css는 다음처럼 만듭니다. 각 부분이 구분될 수 있도록 테두리를 만들고 여백을 준 거에요.

/*
  Theme Name: CMS FACTORY
  Author: JB
  Version: 1.0
*/
/* Layout */
* {
  box-sizing: border-box;
}
body {
  margin: 0px;
  padding: 0px;
  font-family: sans-serif;
}
a {
  text-decoration: none;
  color: #2196f3
}
.jb-container {
  width: 960px;
  margin: auto;
}
.jb-header {
  margin: 30px;
  padding: 0px 30px;
  border: 1px solid #cccccc;
}
.jb-content {
  margin: 30px;
  padding: 0px 30px;
  border: 1px solid #cccccc;
}
.jb-sidebar {
  margin: 30px;
  padding: 0px 30px;
  border: 1px solid #cccccc;
}
.jb-footer {
  margin: 30px;
  padding: 0px 30px;
  border: 1px solid #cccccc;
}

결과는 다음과 같습니다.

사이트 제목 출력하기

<h1>Header</h1>

을 다음 코드로 바꿉니다.

<header>
  <h1 class="jb-site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
</header>

그러면 홈으로 가는 링크가 달린 사이트 사이트 제목이 출력됩니다.

 

카피라이트 출력하기

하는 김에 카피라이트 문구도 넣어볼게요.

<h2>Footer</h2>

를 다음 코드로 바꿉니다.

<footer>
  <p>Copyright © <?php bloginfo( 'name' ); ?> All Rights Reserved.</p>
</footer>

참고

  • 어떤 것을 출력하기 위해 어떤 코드를 넣어야 하는지 찾는 것은  Twenty Seventeen 같은 워드프레스 기본 테마를 참고하는 게 편합니다.
  • Reference
    bloginfo(), esc_url()

지금까지 만든 테마 파일

/functions.php

<?php
// Setup
  function cmsfactory_setup() {
    add_theme_support( 'title-tag' );
    add_theme_support( 'automatic-feed-links' );
  }
  add_action( 'after_setup_theme', 'cmsfactory_setup' );
// Styles & Scripts
  function cmsfactory_scripts() {
    wp_enqueue_style( 'cmsfactory', get_theme_file_uri( '/style.css' ) );
  }
  add_action( 'wp_enqueue_scripts', 'cmsfactory_scripts' );

/index.php

<!doctype html>
<html <?php language_attributes(); ?>>
  <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <?php wp_head(); ?>
  </head>
  <body <?php body_class(); ?>>
<div class="jb-container">
  <div class="jb-header">
    <header>
      <h1 class="jb-site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
    </header>
  </div>
  <div class="jb-content">
    <h2>Content</h2>
  </div>
  <div class="jb-sidebar">
    <h2>Sidebar</h2>
  </div>
  <div class="jb-footer">
    <footer>
      <p>Copyright © <?php bloginfo( 'name' ); ?> All Rights Reserved.</p>
    </footer>
  </div>
</div>
    <?php wp_footer(); ?>
  </body>
</html>

/style.css

/*
  Theme Name: CMS FACTORY
  Author: JB
  Version: 1.0
*/
/* Layout */
* {
  box-sizing: border-box;
}
body {
  margin: 0px;
  padding: 0px;
  font-family: sans-serif;
}
a {
  text-decoration: none;
  color: #2196f3
}
.jb-container {
  width: 960px;
  margin: auto;
}
.jb-header {
  margin: 30px;
  padding: 0px 30px;
  border: 1px solid #cccccc;
}
.jb-content {
  margin: 30px;
  padding: 0px 30px;
  border: 1px solid #cccccc;
}
.jb-sidebar {
  margin: 30px;
  padding: 0px 30px;
  border: 1px solid #cccccc;
}
.jb-footer {
  margin: 30px;
  padding: 0px 30px;
  border: 1px solid #cccccc;
}

Created on 2017-11-06 10:48 | Updated on 2017-11-20 13:14

이 글을 공유하기

Kakao

워드프레스 프리미엄 테마 사이트