1,192 views
この記事は最終更新から 2188日 が経過しています。
1. やりたいこと
WORDPRESSでブログを立ち上げた直後にやること、
それはテーマの選択だ。
数千もあるテーマの中からお気に入りの一つを見つけるのは結構大変。
これに１時間以上も費やすこともある。
そこで…
自分の好みに合う物を自分で作ってしまえばよいのでは？
と思い、作り方を学習してみることにした。
2. 実装方針
1) 初めてなので多くを望まない。これだけできればよい。
・メニューを表示できること。
・固定ページを表示できること。
・投稿記事ページを表示できること。
・サイドバーを一つ表示できること。
2) スマホ用レイアウトを考慮しない。（非レスポンシブ）
3. やってみる！
Step1 : テーマに必要な物を揃える。
「テーマ」に求められる以下の８個のテンプレートファイルを作る。
・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
// ドキュメントのタイトルを管理するためのプラグインやテーマを可能にします。
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
<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. 所感
・一先ず非レスポンシブのミニマム実装が出来た。（少し霧が晴れた）
・人様が作った仕組みを利用させていただくのだから、まだまだ未知のルールを覚えなければならない。
・個人的にはスマホ迎合型サイトが好きではないので、レスポンシブには対応しないかも…