Nobutake Dogen.com

WordPress オリジナルテーマ作り 第2話

第2話「まだ、はじめに」

ホームページを作る時、まずやることは「仕様書」を作ることです。

・ホームページの構成
・各ページのデザイン
・各ページへの道筋
・ターゲット
など色々決めなければいけないことがあります。
はたしてそうでしょうか。
もっと自由でもいいと思うんですよね。
落書きみたいにホームページ作ってもいいんじゃないでしょうか。

という理由とはあんまり関係ないですが、ホームページ作りたいわけじゃなくて、WordPressのオリジナルテーマを作る方法を理解したいだけなので、今回仕様書作りません。

また、進めていくうちにやりたいことが出てきたらその時に考えます。

WordPressの設定

ローカル環境作る時に入れたかもしれませんが、WordPressのダッシュボード内の
「外観 > カスタマイズ > サイトの基本情報」
からホームページのタイトルなどを設定できます。
ひとまず入れておいてください。

wp_theme_02_01

僕は「サイトのタイトルマン」と「キャッチフレーズマン」にしました。

あと、確認用に1記事でいいのでダッシュボードから投稿しておきましょう。
消していなければ、Hello world!という記事がもともと投稿されているかと思いますので、それが残っていればそのままで大丈夫です。

この状態で確認しても何にも変わっていません。
「Congratulations!」のままです。

サイトのタイトルとキャッチフレーズの表示

前回作った「index.php」というファイルを開いてください。

<html lang="ja">
<head>
<title></title>
</head>
<body>
<p>Congratulations!</p>
</body>
</html>

の6行目を消して下のソースコードを入れてください。

<?php bloginfo('name'); ?><!-- サイトのタイトル -->
<?php bloginfo('description'); ?><!-- キャッチフレーズ -->

ここまでやってサイトの確認をしていただくと

wp_theme_02_02

左上の方見ていただくと「Congratulations!」から「サイトのタイトルマンキャッチフレーズマン」に変わりました。

<?php bloginfo('name'); ?>

これがWordPressでさっき設定した「サイトのタイトル」が反映されていて

<?php bloginfo('description'); ?>

で、「キャッチフレーズ」が反映されてます。

記事の反映

まだ、記事が見えません。次は記事です。ホームページの命です。

記事の反映もやることはほとんど一緒です。
さっき追加したキャッチフレーズの次の行に下のソース追加してください。

<?php if(have_posts()): while(have_posts()): the_post(); ?> <!-- ループ開始 -->
<?php echo get_the_date(); ?> <!-- 投稿日時を表示 -->
<?php the_category(', '); ?> <!-- カテゴリーを表示 -->
<?php the_title(); ?> <!-- 記事タイトルを表示 -->
<?php the_content(続きを読む); ?> <!-- 記事本文を表示 -->
<?php endwhile; endif; ?> <!-- ループ終了 -->

「ループ開始」と「ループ終了」ってのがわかりづらいかもしれませんが、後はコメント通りです。
「ループ」もこういうもんだ、って思ってください。
僕もよくわかりません。よくわからなくてもなんとかなるからホームページは楽しい。
ここまで出来たらもう一回サイトの確認してみてください。

wp_theme_02_03

こんな感じで記事まで反映されます!
これでもう、最低限の状態にはなりましたね。
後はもうこれを公開すれば、立派なITマンです。おめでとうございます。

index.php

一応今回までのindex.phpは下の通りです。
見やすいように行開けたりしていますよ。
そこらへんは、みなさんお好きなように。
DOCTYPE宣言もしておきますよ。1行目のやつですね。

<!DOCTYPE html>
<html lang="ja">

<head>
	<title></title>
</head>

<body>
	<?php bloginfo('name'); ?>
	<!-- サイトのタイトル -->
	<?php bloginfo('description'); ?>
	<!-- キャッチフレーズ -->
	<?php if(have_posts()): while(have_posts()): the_post(); ?>
	<!-- ループ開始 -->
	<?php echo get_the_date(); ?>
	<!-- 投稿日時を表示 -->
	<?php the_category(', '); ?>
	<!-- カテゴリーを表示 -->
	<?php the_title(); ?>
	<!-- 記事タイトルを表示 -->
	<?php the_content(続きを読む); ?>
	<!-- 記事本文を表示 -->
	<?php endwhile; endif; ?>
	<!-- ループ終了 -->
</body>

</html>

次回は見た目を少し変えてみましょう。

目次

スポンサーリンク

Web Design | 2016年12月20日