WordPressのテーマを自作する – その1
用意する前に
自作テンプレート作成にあたって必要じゃないかなーと思うもの(個人の主観)
| index.php | ホームとなるページ。必須。 |
|---|---|
| header.php | ヘッダー部分(DOCTYPE宣言から各ページ共通部分を記載)のモジュール。 |
| footer.php | フッター部分のモジュール。 |
| category.php | 投稿のカテゴリ別アーカイブ表示。記事一覧とか。 |
| archive.php | 投稿のアーカイブ表示。記事一覧とか。 |
| page.php | 固定ページ用テンプレート。 |
| single.php | 投稿記事ページ用テンプレート。 |
| 404.php | リクエストされたページがない場合に表示させるテンプレート。 |
| functions.php | 機能の追加用。 |
| style.css | 全体のCSSを書いていく。必須。 |
| screenshot.png | 880 px × 660 px の png 画像。テーマを選択する際のサムネイル。 |
| 必須ではないが 場合によって |
serach.php ・・・・検索結果の表示用。 searchform.php・・検索フォーム。 sidebar.php・・・・サイドバーを設置する場合は作っておくと管理が楽。 comments.php ・・記事等に対してユーザーがコメントをつけられるようにするには必須。 image.php ・・・・記事内の画像クリックで表示するテンプレート。 |
ちなみに私がいつも使っている構成
| index.php | 特に大したこと書かない。体だけ。 |
|---|---|
| header.php | ヘッダーモジュール。 |
| footer.php | フッターモジュール。 |
| front-page.php | 固定ページの中の一つをインデックス(フロントページ)扱いにするので、それ用。 |
| archive.php | 投稿のアーカイブ表示。通常の投稿も、カスタム投稿もこれいっこ。 |
| page.php | 固定ページ用。 |
| single.php | 投稿記事ページ用。 |
| 404.php | Not found用。 |
| functions.php | 機能の追加用。長くなりそうなときは、別のphpファイル作ってインクルードしてる。 |
| style.css | 全体のCSS用。 |
| screenshot.png | サムネイル。 |
基本の記述
要は「どんなサイトを作るか」なんですよね。自分は音楽系のアーティストのサイト等の作成をしたりするので、上記みたいな構成になるのです。
ということで、ひとまず上記のファイルを用意できたら、中身を書いていきます。
header.php と footer.php
header.php
<!DOCTYPE html>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="<?php bloginfo('description'); ?>">
<meta name="keywords" content="">
<title><?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php echo get_stylesheet_uri() .'?' .filemtime(get_stylesheet_directory() .'/style.css'); ?>" type="text/css">
<?php wp_head(); ?>
</head>
<body>
bloginfo は、ブログの情報を引っ張ってきます。
スタイルシートの読み込み部分は、更新表示がちゃんとされるように、スタイルシートの最終更新日時を取得しています。
wp_head(); がないと正常に動作しないプラグインもあるので、入れておきましょう。
footer.php
<?php wp_footer(); ?> </body> </html>
wp_footer();がないと正常に動作しないプラグインもあるので、入れておきましょう。
index.php
ひとまず、投稿の一覧を表示させてみます。
<?php get_header(); ?>
<div class="content">
<h1><?php bloginfo('name'); ?></h1>
<h2>投稿一覧</h2>
<?php if(have_posts()): ?>
<ul>
<?php while(have_posts()): the_post(); ?>
<li><a href="<?php the_permalink(); ?>"><?php the_category(', '); ?> <?php the_time('Y.m.d'); ?> <?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>
<?php else: ?>
<p>投稿はありません。</p>
<?php endif; ?>
</div>
<?php get_footer(); ?>
get_header(); と get_footer(); で先ほど作っておいたヘッダー部分とフッター部分をインクルードします。
h1 にはサイトのタイトルを入れています。
if(have_posts()) で「投稿がある場合」 、 while(have_posts()) the_post() で内容を取り出します。
the_permalink() で投稿へのリンクURL、 the_category(‘, ‘) で投稿のカテゴリ、 the_time(‘Y.m.d’) で日付、 the_title() で投稿のタイトルを表示させます。
日付の Y.m.d は、 2017.03.06 の形になり、 Y/m/d だと 2017/03/06。 Y/m/d(D) で 2017/03/06(Mon)。
西暦 ： Y → 2017 ／ y → 17
月 ： M → Mar ／ m → 03 ／ F → March ／ n → 3
日付 ： d → 06 ／ ｊ → 6
曜日 ： D → Mon ／ l → Monday
時間 ： 午前午後 ： a → pm ／ A → PM
時間 ： g → 3(1から12) ／ G → 15(1から24) ／ h → 03(01から12) ／ H → 15(01から24)
分、秒 ： i → 05(分) ／ s → 05(秒)
ちなみにtはその月の日数。(30とか31とか) Lは閏年かどうか。(1なら閏年、0なら閏年ではない。)
archive.php
<?php get_header(); ?>
<div class="content">
<h1><?php bloginfo('name'); ?></h1>
<h2><?php single_cat_title(); ?></h2>
<?php if(have_posts()): ?>
<ul>
<?php while(have_posts()): the_post(); ?>
<li><a href="<?php the_permalink(); ?>"><?php the_category(', '); ?> <?php the_time('Y.m.d'); ?> <?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>
<?php else: ?>
<p>投稿はありません。</p>
<?php endif; ?>
<?php previous_posts_link('前のページへ'); ?>
<?php next_posts_link('次のページへ'); ?>
</div>
<?php get_footer(); ?>
gsingle_cat_title() は現在のカテゴリーです。
previous_posts_link(‘前のページへ’) と、 next_posts_link(‘次のページへ’) でページ送りを実装しています。
page.php と single.php
page.php
<?php get_header(); ?>
<div class="content">
<h1><?php bloginfo('name'); ?></h1>
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<h2><?php the_title(); ?></h2>
<p><?php the_time('Y.m.d'); ?> </p>
<p><?php the_content(); ?></p>
<?php endwhile; endif; ?>
</div>
<?php get_footer(); ?>
single.php
<?php get_header(); ?>
<div class="content">
<h1><?php bloginfo('name'); ?></h1>
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<h2><?php the_title(); ?></h2>
<p><?php the_category(', '); ?> <?php the_time('Y.m.d'); ?> </p>
<p><?php the_content(); ?></p>
<?php endwhile; endif; ?>
<?php previous_post_link('%link','前のページへ'); ?>
<?php next_post_link('%link','次のページへ'); ?>
</div>
<?php get_footer(); ?>
404.php
<?php get_header(); ?>
<div class="content">
<h1><?php bloginfo('name'); ?></h1>
<h2>404 File not found.</h2>
<p>お探しのページは見つかりませんでした。</p>
</div>
<?php get_footer(); ?>
functions.php
これは少しでもミスるとページ全体が真っ白になって動かなくなる可能性がありますので、バックアップを取りながら、慎重に編集しましょう。
また、長くなるので、別の記事で書いとくといいやつとかを紹介できたらと思います。
style.css
はじめに以下を書いてから、続けてcssを書いていきましょう。
@charset "UTF-8"; /* Theme Name: テーマの名前 Theme URI: テーマを配布しているURL Description: 説明文 Version: バージョン Author: テーマの作成者 Author URI: 作成者のWebページ */
ひとまず終わり
結構最低限の記述ではありますが、基本的にはこんな感じで書いていきます。
あとはそれぞれもっとつっこんだところや、serach.phpやcomment.php、sidebar.phpとか紹介できれば。
続く…といいな(伏目がちに)
