【第5回】Wordpressの自作テーマ作成練習。 ヘッダー、フッターの表示
引き続き、Wordpress自作テーマの勉強をしていきます(^^)/
前回の記事はこちら↓
このnoteではこちらの参考書を参考にしながら自作テーマの作成の練習をしています。
今日のnoteの内容
Wordpress自作テーマに「ヘッダー、フッターを追加する」というのをやります。
完成版はこちらです↓
ヘッダーフッターの表示
まずは「index.php」を見てみましょう。
index.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title><?php bloginfo( 'name' ); ?><?php wp_title(); ?></title>
<link href='http://fonts.googleapis.com/css?family=Acme' rel='stylesheet' type='text/css'>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<div class="siteinfo">
<div class="container">
<h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<p><?php bloginfo( 'description' ); ?></p>
</div>
</div>
</header>
<div class="container">
<?php if(have_posts()): while(have_posts()):
the_post(); ?>
<article <?php post_class(); ?>>
<?php if( is_single() ): ?>
<h1><?php the_title(); ?></h1>
<?php else: ?>
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
<?php endif; ?>
<div class="postinfo">
<time datetime="<?php echo get_the_date( 'Y-m-d' ) ?>">
<i class="fa fa-clock-o"></i>
<?php echo get_the_date(); ?>
</time>
<span class="postcat">
<i class="fa fa-folder-open"></i>
<?php the_category( ', ' ); ?>
</span>
</div>
<?php the_content(); ?>
<?php if( is_single() ): ?>
<div class="pagenav">
<span class="old">
<?php previous_post_link(
'%link',
'<i class="fa fa-chevron-circle-left"></i> %title'
); ?>
</span>
<span class="new">
<?php next_post_link(
'%link',
'%title <i class="fa fa-chevron-circle-right"></i>'
); ?>
</span>
</div>
<?php endif; ?>
</article>
<?php endwhile; endif; ?>
<?php if ( $wp_query->max_num_pages > 1 ): ?>
<div class="pagenav">
<span class="old">
<?php next_posts_link( '<i class="fa fa-chevron-circle-left"></i> 古い記事' ); ?>
</span>
<span class="new">
<?php previous_posts_link( '新しい記事 <i class="fa fa-chevron-circle-right"></i>' ); ?>
</span>
</div>
<?php endif; ?>
</div> <!-- container -->
<footer>
<div class="container">
<small>Copyright © <?php bloginfo( 'name' ); ?></small>
</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>ポイントは2つあります。
１．bloginfo( )関数で、「サイト名」と「サイト説明」を表示する
bloginfo( 'name' )：「サイト名」
bloginfo( 'description' )：「サイト説明」
２．aタグでホームページをリンク先ににする
ホームページのリンクの呼び出しはhome_url()関数を使います。
home_url()はホームページのリンク先を取得することしかしないので、リンク先の出力には「echo」を使います。
<a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a>
ヘッダー、フッターのデザインを追加
次に「style.css」を見てみましょう。
style.css
@charset "UTF-8";
/*
Theme Name: MY THEME (Chapter 2)
Author: TRAVEL SKETCH
Description: This is my original theme.
Version: 1.0
*/
body {margin: 0;
font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif}
.container {max-width: 650px;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
/* 記事 */
article {margin-bottom: 40px;}
article h1 {margin: 0;
font-size: 32px;
font-weight: normal}
article h1 a {color: #000000;
text-decoration: none}
/* 記事の付加情報 */
.postinfo {margin-top: 15px;
font-size: 14px}
.postinfo a {color: #000000;
text-decoration: none}
.postinfo .postcat {margin-left: 20px}
.postinfo i {color: #888888}
/* 前後の記事へのリンク */
.pagenav a {padding: 5px 10px;
border: solid 1px #cccccc;
border-radius: 10px;
color: #666666;
font-size: 12px;
text-decoration: none}
.pagenav .old a {float: left}
.pagenav .new a {float: right}
.pagenav {overflow: hidden;
margin-top: 40px;
margin-bottom: 40px}
/* ヘッダー */
header {margin-bottom: 40px;
background-color: #1e90ff;
color: #ffffff}
header a {color: #ffffff;
text-decoration: none}
.siteinfo {overflow: hidden;
padding-top: 14px;
padding-bottom: 14px}
.siteinfo h1 {
float: left;
margin: 0;
font-family: 'Acme', sans-serif;
font-size: 20px}
.siteinfo p {float: right;
margin: 0;
margin-top: 5px;
font-size: 12px}
/* フッター */
footer {margin-top: 40px;
padding-top: 14px;
padding-bottom: 14px;
background-color: #1e90ff;
color: #ffffff}
ヘッダー、フッターには以下の関数を追加することがルール
<?php wp_head(); ?>
<?php wp_footer(); ?>
これらは何をしているかというと、難しいことは抜きにして、簡単にいうとログイン状態だったら以下のようにWordpressのトップページ上部に「管理バー」が出てくるというものです。
まとめ
これである程度見た目の整ったサイトができあがりました(^^)/
全然見た目はしょぼいですが('ω')
次回から記事のサムネイルを入れれるように設定していきます。
Twitter➡@t_kun_kamakiri
ブログ➡宇宙に入ったカマキリ（物理ブログ）
この記事が気に入ったらサポートをしてみませんか？