WordPressのテーマを作ってみる その2 静的HTMLをPHPに

/ WordPress / Comment[0]

デザインを考えて静的HTMLを書く


WordPressが動くことが分かったところで、今度はページのデザインを考えてみましょう。
A4紙（サイズはどうでもいいですが）をウェブブラウザに見立てて配置と大まかなタグを書いておくとコーディングしやすくなります。
そこらへんはHTML/CSSを習得している方なら大丈夫でしょう。

というわけで適当にHTMLとCSSを書いてみました。

こんな感じでどうでしょう。自分のブログを参考に目コピしました。
ヘッダー、左にコンテンツ、右にサイドバー、フッターという基本的な構成です。

index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Untitled 1</title>
</head>
<body>

<div id="all">

	<div class="header">
		<h1 id="title">title</h1>
		<p id="descript">description.</p>
	</div><!--/header-->
	
	<div class="left">
		<!--記事ループ開始-->
		<h2 id="pagetitle">
			<a href="" id="entry">ページのタイトル</a>
		</h2>
		<div id="contents">
			ここに記事内容
		</div>
		<ul id="sub">
			<li>date</li>
			<li>category</li>
			<li>trackback</li>
			<li>comment</li>
			<li>top</li>
		</ul>
		<!--記事ループ終了-->
	</div><!--/left-->

	<div class="sidebar">
		<h3 id="sidebar-title">sidemenu</h3>
		<ul>
			<li>link</li>
			<li>link</li>
			<li>link</li>
		</ul>
	</div><!--/sidebar-->
	
	<div class="footer">
		<div id="copy">
				<address>© 2014 hogehoge inc.</address>
		</div>
	</div>

</div><!--/all-->

</body>
</html>

まだclassとidの使い分けの恩恵を受けたことが無いのでこんなHTMLになってしまいましたが、とりあえず練習なので表示されりゃいいでしょう。

style.css
長くなるのでプレビュー省略



出来上がった静的HTMLをphpに分割


デザインが決まったところで、いよいよphpに分割していきます。
分割して作成するファイルは次の通りです。基本的な構成なのでたったの４つです。
  • index.php　左カラムのコンテンツ 以下パーツの組み込み
  • header.php　ヘッダー
  • sidebar.php　右カラムのサイドバー
  • footer.php　フッター


index.htmlからheader.php, sidebar.php, footer.phpにコピペしてテーマディレクトリ内に作成します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Untitled 1</title>
</head>
<body>

<div id="all">

	<div class="header">
		<h1 id="title">title</h1>
		<p id="descript">description.</p>
	</div><!--/header-->
	
	<div class="left">
		<!--記事ループ開始-->
		<h2 id="pagetitle">
			<a href="" id="entry">ページのタイトル</a>
		</h2>
		<div id="contents">
			ここに記事内容
		</div>
		<ul id="sub">
			<li>date</li>
			<li>category</li>
			<li>trackback</li>
			<li>comment</li>
			<li>top</li>
		</ul>
		<!--記事ループ終了-->
	</div><!--/left-->

	<div class="sidebar">
		<h3 id="sidebar-title">sidemenu</h3>
		<ul>
			<li>link</li>
			<li>link</li>
			<li>link</li>
		</ul>
	</div><!--/sidebar-->
	
	<div class="footer">
		<div id="copy">
				<address>© 2014 hogehoge inc.</address>
		</div>
	</div>

</div><!--/all-->

</body>
</html>

最後にindex.phpにこれらを集結させます。
<?php get_header();?>

        <div class="left">
                <!--ループ開始-->
                <h2 id="pagetitle">
                        <a href="" id="entry">ページのタイトル</a>
                </h2>
                <div id="contents">
                        ここに記事内容
                </div>
                <ul id="sub">
                        <li>date</li>
                        <li>category</li>
                        <li>trackback</li>
                        <li>comment</li>
                        <li>top</li>
                </ul>
                <!--ループ終了-->
        </div><!--/left-->

<?php get_sidebar();?>
<?php get_footer();?>

とりあえず表示してみましょう。

こんな感じです。
今の段階ではheader.phpのlinkタグにCSSを読み込む関数を入れていないためCSSは適応されていません。



phpファイルに命を吹き込む


ページのタイトルや説明、コンテンツ部分やサイドバーなど動的にしたい部分にPHPの関数を差し込みます。
他のテーマを参考にしてもいいですし、それでも分からない場合は関数リファレンスをみましょう。
http://wpdocs.sourceforge.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9

header.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url');?>" />
<title><?php bloginfo('name');?></title>
<?php wp_head(); ?>
</head>
<body>

<div id="all">

        <div class="header">
                <h1 id="title"><?php bloginfo('name');?></h1>
                <p id="descript"><?php bloginfo('description');?></p>
        </div><!--/header-->

sidebar.php
        <div class="sidebar">
                <ul>
                        <?php dynamic_sidebar();?>
                </ul>
        </div><!--/sidebar-->

footer.php
        <div class="footer">
                <div id="copy">
                                <address>© <?php echo date('Y');?> <?php bloginfo('name');?> inc.</address>
                </div>
        </div>

</div><!--/all-->

</body>
</html>

index.php

<?php get_header();?>

<div class="left">
        <!--ループ開始-->
        <?php if(have_posts()) : ?>
                <?php while(have_posts()) : the_post(); ?>
                <h2 id="pagetitle"><?php the_title();?></h2>
                <div id="contents"><?php the_content();?></div>
                    <ul id="sub">
                            <li><?php the_time('Y-m-d')?> | </li>
                            <li><a href="<?php echo home_url();?>">top</a> | </li>
                            <li><?php the_category(', ');?></li>
                    </ul>
<!--ここまだようわからん-->
        <?php endwhile; ?>
        <?php else : ?>
        <?php endif; ?>
        <!--ループ終了-->
</div><!--/left-->

<?php get_sidebar();?>
<?php get_footer();?>


functions.phpを新たに作成しregister_sidebar();と書き込むとダッシュボードの外観にウィジェットが追加されます。
<?php
        register_sidebar();
?>

ウィジェットは「ダッシュボード 外見→ウィジェット」で自由に編集できます。


大体形になったでしょうか




dynamic_sidebar()で追加されるパーツを装飾してみます。



どのようなid,classが割り当てられているか分からないので、とりあえず表示してみて
chromeやfirefoxのインスペクタを見ながらCSSを書いていきます。


ウィジェットのタイトルの装飾
h2.widgettitle {
        padding: 5px 10px;
        background-color: teal;
        color:white;
        border-radius: 10px;
}

ウィジェットのul liの位置調節
li.widget ul {
        margin: 10px 5px 10px;
}
li.widget li {
        margin: 3px;
}
こんな風に細かいところを調節していきます。HTML/CSSが分かれば問題ないでしょう。

いい感じに超基本的な構造を持ったブログのようなテンプレが出来上がりました。
我ながらwordpress始めてにしては上出来だと思います（＾ω＾）
あとはHTMLをがしがし書いて色々なレイアウトを組んだりしてスキルを上げて行こうと思います。
関数とか色々ありすぎてもうこれは慣れて覚えるしか無いですね。

次:loop.php 記事のループ表示
関連記事

コメント

:
:
:
:
:
管理人のみ表示を許可

↑