(52) 【WORDPRESS】独自テーマを作成する。『第1回 入門編』

投稿者: | 2018年10月15日

この記事は最終更新から 399日 が経過しています。

1. やりたいこと

WORDPRESSでブログを立ち上げた直後にやること、
それはテーマの選択だ。

数千もあるテーマの中からお気に入りの一つを見つけるのは結構大変。
これに1時間以上も費やすこともある。

そこで…
自分の好みに合う物を自分で作ってしまえばよいのでは?

と思い、作り方を学習してみることにした。

2. 実装方針

1) 初めてなので多くを望まない。これだけできればよい。
 ・メニューを表示できること。
 ・固定ページを表示できること。
 ・投稿記事ページを表示できること。
 ・サイドバーを一つ表示できること。
2) スマホ用レイアウトを考慮しない。(非レスポンシブ)

3. やってみる!

Step1 : テーマに必要な物を揃える。

「テーマ」に求められる以下の8個のテンプレートファイルを作る。
・style.css
・functions.php
・header.php : ヘッダ表示テンプレート
・footer.php : フッタ表示テンプレート
・sidebar.php : サイドバー表示テンプレート
・index.php :
・page.php : 固定ページ表示テンプレート
・single.php : 投稿ページ表示テンプレート

1) style.css

@charset "UTF-8";

*{
  color: #333;
  box-sizing: border-box;
}
html{
  font-size: 16px;
  line-height: 1.5;
}

/******************
 レイアウト
*******************/
.header-inner,
.container,
.footer-inner,
.header-nav {
  width: 1300px;
  margin-right: auto;   /* centering */
  margin-left: auto;    /* centering */
}
.contents {
  float: left;
  width: 75%;
}
.sidebar {
  float: left;
  width: 25%;
}
.container:after {
  display: block;
  clear: both;
  content: '';
}
.sidebar-inner{
  list-style-type: none;
}

/******************
 サイト・タイトル
*******************/
.site-title h1 {
  font-size: 2.5rem;
  margin: 0;
  padding: 1rem;
}
.site-title h1 a {
  display: block;
  text-decoration: none;
  color: #333;
}

2) functions.php

<?php
// ドキュメントのタイトルを管理するためのプラグインやテーマを可能にします。
add_theme_support('title-tag');

// コメントフォーム、検索フォーム、コメントリスト、ギャラリーでHTML5マークアップの使用を許可します。
add_theme_support('html5', array('comment-list', 'comment-form', 'search-form', 'gallery', 'caption'));

// headerでの投稿とコメントのRSSフィードのリンクを有効にします。
add_theme_support('automatic-feed-links');

// custom menu
register_nav_menu('header-nav', 'Header Navigation');

//サイドバーにウィジェット追加
function widgetarea_init() {
  $args = array(
    'name'          => 'MySideBar',
    'id'            => 'side-widget',
    'description'   => '',
    'class'         => '',
    'before_widget' => '<li id="%1$s" class="widget %2$s">',
    'after_widget'  => '</li>',
    'before_title'  => '<h2 class="widgettitle">',
    'after_title'   => '</h2>' );
  register_sidebar($args);
}
add_action('widgets_init', 'widgetarea_init');

3) header.php

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
 
<?php wp_head(); ?> <!-- プラグイン展開エリア -->
</head>
     
<body <?php body_class(); ?>>
<header>
  <div class="header-inner">
    <div class="site-title">
      <h1><a href="<?php echo home_url(); ?>">
        <?php bloginfo('name'); ?>
      </a></h1>
    </div>
  </div>
<?php
  $defaults = array(
    'menu'            => '',
    'menu_class'      => 'menu',
    'menu_id'         => '',
    'container'       => 'nav',
    'container_class' => 'header-nav',
    'container_id'    => '',
    'fallback_cb'     => 'wp_page_menu',
    'before'          => '',
    'after'           => '',
    'link_before'     => '',
    'link_after'      => '',
    'echo'            => true,
    'depth'           => 0,
    'walker'          => '',
    'theme_location'  => 'header-nav',
    'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
  );
  wp_nav_menu( $defaults );
?>
</header>

4) footer.php

<footer>
  <div class="footer-inner">
    <div class="copyright">
      <p>copyright ©<?php bloginfo('name'); ?> All Rights Reserved.</p>
    </div>
  </div>
</footer>
<?php wp_footer(); ?> <!-- プラグイン展開エリア -->
</body>
</html>

5) sidebar.php

<div class="sidebar">
  <div class="sidebar-inner">
    <?php dynamic_sidebar('side-widget'); ?>
  </div>
</div>

6) page.php

固定ページを表示するためのテンプレート

<?php get_header(); ?> <!-- header.phpを展開 -->
<div class="container">
  <div class="contents">
    <?php if(have_posts()): the_post(); ?>
      <article>
        <div>
          <span><?php echo get_the_date(); ?></span>
          <?php if(has_category() ): ?>
            <span><?php echo get_the_category_list( ' ' ); ?></span>
          <?php endif; ?>
        </div>
        <h1><?php the_title(); ?></h1>
        <?php the_content(); ?>
      </article>
    <?php endif; ?>
  </div>
  <?php get_sidebar(); ?> <!-- sidebar.phpを展開 -->
</div>
<?php get_footer(); ?> <!-- footer.phpを展開 -->

7) single.php

投稿記事を表示するためのテンプレート
※今回は page.phpと同じ

8) index.php

archive.php, category.php, home.php, tag.php などのテンプレートを作成していない場合、index.phpが表示される。
※今回は page.phpと同じ

Step2 : テーマをインストールする。

1) 全ファイルを ZIPファイルにパックする。

2) WORDPRESS管理画面でアップロードする。

「外観」-「テーマ」メニューを選択する。
「新規追加」ボタンを押下する。
「テーマのアップロード」ボタンを押下する。

こんな感じにできた。

レスポンシブではないので、ウィンドウ幅を狭くすると水平スクロールバーが出てくる。

4. 所感

・一先ず非レスポンシブのミニマム実装が出来た。(少し霧が晴れた)
・人様が作った仕組みを利用させていただくのだから、まだまだ未知のルールを覚えなければならない。
・個人的にはスマホ迎合型サイトが好きではないので、レスポンシブには対応しないかも…


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)