WordPress自作テンプレートを作る

WordPress自作テンプレートを作る
WordPress 複数デザイン

今回はWordPressの自作テンプレートの作り方を紹介します。

複数のデザインを記事ごと固定ページごとに利用できるテンプレートを目指します。

複数デザインの使い分けの方法は次の記事で紹介しますがこの記事で作成するテンプレートを元に説明するので併せて読んで下さい。

 

 

  1. 必要なファイルを作る。
  2. フォルダをアップロードする。
  3. ページをHTML+CSSで作成する。
  4. header.phpを編集する。
  5. leftcontent.phpとrightconte.phpを編集する。
  6. footer.phpを編集する。
  7. index.phpを編集する。
  8. style.cssを編集する。
  9. function.phpを編集する。
  10. single.phpを編集する。
  11. comments.phpを編集する。

 

必要なファイルを作る。

適当な名前でフォルダを作りその中に以下のファイルを作成します。

テキストドキュメントを作成しファイル名と拡張子を変更し、文字コードをUTF-8にします。

作るファイルは10個です。

index.phpとstyle.cssさえあればテンプレートして認識してくれます。

  • index.php　-　固定ページを生成させるファイル
  • header.php　-　ヘッダー部分を生成
  • footer.php　-　フッター部分を生成
  • style.css　-　ページデザインのCSS
  • function.php　-　このテンプレートで利用する関数をまとめるファイル
  • single.php　-　記事ページを生成させるファイル
  • comments.php　-　記事内のコメントを生成
  • rightcontent.php　-　右カラムを生成
  • leftcontent.php　-　左カラムを生成
  • single.css　-　記事ページ専用のCSS

この10個には必須でないファイルも含まれていますが今は全て作っておいてください。
各ファイルの中身を書く時に説明するので必要がないと思ったらスキップしてください。

 

 

フォルダをアップロードする。

作った10個のファイルが入ったフォルダをデフォルトのthemesフォルダにアップロードしてください。
テーマフォルダの中にはWordPressデフォルトテーマのtwentyfifteenなどのフォルダがあると思います。
私の場合
wp-content / themes / twentyfifteen となっています。
このthemesフォルダの中に上で作ったファイルが入ったフォルダを配置するようにしてください。

ファイルの配置が完了したらWordPressのダッシュボードから 外観 > テーマ と進んでもらうと新しくアップロードしたフォルダの名前でテーマが追加されています。

テーマを有効化すること反映されますが、まだ何もコードを書いていないので全てのページが真っ白な状態だと思います。これから中身のコードを書いていきます。

 

 

ページをHTML+CSSで作成する。

HTMLを生成させるパーツの各phpファイルを作る前に一度全体をHTMLとCSSで作ります。

今回説明するうえで使うサンプルページは3カラムで構成しています。

sample.html

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”ja” lang=”ja”>
<head>
<meta charset=”UTF-8″>
<link rel=”stylesheet” href=”style.css”>
<title>テストページ</title>
</head>
<body>
<div id=”header”>
ヘッダー
</div>
<div id=”left-content”>
<a href=”#”>左カラム</a>
</div>
<div id=”content” role=”main”>
メインコンテンツ
</div>
<div id=”right-content”>
<a href=”#”>右カラム</a>
</div>
<div id=”footer”>
Copyright
</div>
</body>
</html>

style.css

html{
width: 100%;
background: #ccc;
}
body{
background: #fefefe;
margin: auto;
padding: 0;
width: 1280px;
}
#header{
background: #fec0c0;
height: 120px;
}
#content{
width: 760px;
float: left;
}
#left-content{
background: #b5faa2;
width: 200px;
float: left;
}
#right-content{
background: #a6d3fd;
width: 320px;
float: left;
}
#footer{
background: #5e5e5e;
clear: both;
height: 120px;
}

 

2つのファイルをダウンロードするかコピーしてファイルを準備してください。

ファイルの準備ができたら一度HTMLの方を開いてページを確認しておいてください。

このHTMLを元に分離させたphpファイルを作っていきます。

 

 

header.phpを編集する。

準備しておいたHTMLファイルのヘッダー部分を変更します。

sample.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>テストページ</title>
</head>
<body>
<div id="header">
 ヘッダー
</div>

これを以下の様に変更します。
header.php

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>">
<?php if(is_single()): ?>
<title><?php echo wp_get_document_title(); ?></title>
<link rel="stylesheet" href="/wp-content/test/single.css" type="text/css" />
<?php else: ?>
<title>サンプルホームページ</title>
<?php endif; ?>
<?php wp_head(); ?>
</head>
<div id="header">
 ヘッダー
</div>

 

5.<link rel=”stylesheet” href=”<?php bloginfo( ‘stylesheet_url’ ); ?>“>

この部分で設定しているテンプレートのルートディレクトリにあるstyle.cssのパスを生成してくれます。

 

6.<?php if(is_single()): ?>

このページがsingle（記事用のページ）だったら、という条件式です。

6から11行目<?php endif; ?>までが分岐後のコードです。

 

7.<title><?php echo wp_get_document_title(); ?></title>

タイトルを自動生成する関数です。今回は詳しくは取り上げませんが細かく調整することができます。デフォルトのままでも良い感じに設定してくれるのでこのまま使用します。

 

8.<link rel=”stylesheet” href=”/wp-content/test/single.css” type=”text/css” />

記事ページ専用のCSSファイルを設定するHTMLコードです。single.cssのパスは自身の環境に合わせて変更してください。

 

9.<?php else: ?>

else文です。singleでない場合のタイトルは固定するという感じです。

 

12.<?php wp_head(); ?>

</head>終了直前のイベント処理用の関数です。今回はなにも処理を起こさないので必要ありませんが一応書いておきます。

 

 

leftcontent.phpとrightcontent.phpを編集する。

準備しておいたHTMLファイルの左カラムと右カラムの部分を編集します。

sample.html

<div id="left-content">
<a href="#">左カラム</a>
</div>

これを以下の様にします。

leftcontent.php

<div id="left-content">
<a href="#">左カラム</a>
</div>

見ての通りなにも変更していません。右カラムも同様です。

rightcontent.php

<div id="right-content">
<a href="#">右カラム</a>
</div>

 

今回は左右のカラムの中身を考えてないのでphpファイルの読み込み方法を紹介するために作りました。別記事でカラムの中身になるようなものを作りたいと思います。

 

 

footer.phpを編集する。

footer.phpも特に変更するところはありません。

footer.php

<div id="footer">
Copyright
</div>
</body>
</html>

 

これであとはindex.phpとsingle.phpを作ればページが生成されるようになります。

 

 

index.phpを編集する。

準備したHTMLファイルのメインコンテンツ部分を編集してindex.phpを作ります。

index.php

<?php get_header(); ?>
<?php include(TEMPLATEPATH . '/leftcontent.php'); ?>
<div id="content" role="main">
<?php if (have_posts()) :
while (have_posts()) : the_post(); ?>
<article>
<header>
<h1><a href="<?php the_permalink(); ?>"title="<?php the_title_attribute(); ?>">
<?php the_title_attribute(); ?></a></h1>
<div class="post_meta">
<div class="time"><?php the_date(); ?></div>
<div class="category"><?php the_category(', '); ?></div>
<div class="tag"><?php the_tags('', ', '); ?></div>
</div>
</header>
<a href="<?php the_permalink(); ?>"title="<?php the_title_attribute(); ?>">
<?php if(has_post_thumbnail()) {the_post_thumbnail(); } ?></a>
</article>
<?php endwhile; ?>
<?php else : ?>
<p>Not found</p>
<?php endif; ?>
<?php previous_posts_link('新しい投稿ページへ'); ?>
<?php next_posts_link('古い投稿ページへ'); ?>
</div>
<?php include(TEMPLATEPATH . '/rightcontent.php'); ?>
<?php get_footer(); ?>

 

ページのの発火点となるindex.phpの中身を見ていきます。

1.<?php get_header(); ?>

テーマのルートディレクトリにあるheader.phpを読み込みます。

 

2.<?php include(TEMPLATEPATH . ‘/leftcontent.php’); ?>

パスを指定してleftcontent.phpを読み込みます。

26行目では右カラム(rightcontent.php)を読み込んでいます。

 

4.<?php if (have_posts()) :

22行目<?php endif; ?>で終わる条件式です。関数have_posts()は記事があるかを判定します。

 

5.while (have_posts()) : the_post(); ?>

4行目と併せて記事がある間は以降の処理をループし続けるという内容です。

 

the_permalink()　記事のパーマリンクを取得します。

the_title_attribute()　記事のタイトルを取得します。

the_date()　記事の投稿日時を取得します。

the_category(‘, ‘)　カテゴリーを取得します。複数ある場合は引数（’区切り文字’）で区切り文字を設定します。今回はコンマとスペースを入れてあります。

the_tags(’’, ‘, ‘)　タグを取得します。複数ある場合は第二引数に区切り文字を、

第一引数はタグの前に挿入される文字です。引数を設定しないと「Tags: 」が入るので今回は空にしてあります。the_tags(‘第一引数’, ‘第二引数‘)

 

17.<?php if(has_post_thumbnail()) {the_post_thumbnail(); } ?></a>

記事にアイキャッチ画像があればアイキャッチ画像を<a></a>内に挿入する。

アイキャッチ画像を有効にするには、使用しているテーマの functions.php ファイルに add_theme_support( ‘post-thumbnails’ ); を追加する必要があります。

詳しくはfunction.phpを編集するときに説明します。

 

23.<?php previous_posts_link(‘新しい投稿ページへ’); ?>

次の記事○ページ分を表示するリンクを生成します。

have_posts()の記事取得用ループで取得する記事件数はダッシュボードの 設定 > 表示設定 より変更可能です。

 

27.<?php get_footer(); ?>

footer.phpを読み込む関数です。

 

 

style.cssを編集する。

準備したHTMLを装飾するCSSの中身をそのままコピーします。

style.css

html{
width: 100%;
background: #ccc;
}
body{
background: #fefefe;
margin: auto;
padding: 0;
width: 1280px;
}
#header{
background: #fec0c0;
height: 120px;
}
#content{
width: 760px;
float: left;
}
#left-content{
background: #b5faa2;
width: 200px;
float: left;
}
#right-content{
background: #a6d3fd;
width: 320px;
float: left;
}
#footer{
background: #5e5e5e;
clear: both;
height: 120px;
}

 

 

function.phpを編集する。

function.phpの中身を以下のようにしてください。
function.php

<?php
add_filter( 'show_admin_bar', '__return_false' );
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size(240, 135, false);

1.add_filter( ‘show_admin_bar’, ‘__return_false’ );

WordPressのナビゲーションバー用の余白を無くします。

 

2.add_theme_support( ‘post-thumbnails’ );

アイキャッチ画像（投稿サムネイル）機能を有効にします。

 

3.set_post_thumbnail_size(240, 135, false);

サムネイルのサイズ変更設定。引数は（横幅、高さ、クロップの有無）です。

 

?>閉じるタグは必要ありません。付けても問題はありません。

以上7つのファイルでトップページの構造は完成しました。かなり簡素な作りですが記事一覧の生成ができたのでブログの構造はできました。

あとはsingle.php、single.css、comments.phpと記事ページ用のファイルです。

 

 

single.phpを編集する。

編集したindex.phpの中身をコピーしておいてください。index.phpを書き換えてsingle.phpを作ります。

single.php

<?php get_header(); ?>
<?php include(TEMPLATEPATH . '/leftcontent.php'); ?>
<div id="content" role="main">
<?php if (have_posts()) :
while (have_posts()) : the_post(); ?>
<article>
<header>
<div class="single_title">
<a href="<?php the_permalink(); ?>"title="<?php the_title_attribute(); ?>">
<?php the_title_attribute(); ?></a>
</div>
<div class="single_meta">
<div class="time"><?php the_date(); ?></div>
<div class="post_category"><?php the_category(','); ?></div>
</div>
</header>
<a class="single_post_image" href="<?php the_permalink(); ?>"title="<?php the_title_attribute(); ?>">
<?php if(has_post_thumbnail()) {the_post_thumbnail(); } ?></a>
<div id="post_content">
<?php the_content(); ?>
</div>
</article>
<?php endwhile; ?>
<?php comments_template(); ?>
<?php else : ?>
<?php endif; ?>
</div>
<?php include(TEMPLATEPATH . '/rightcontent.php'); ?>
<?php get_footer(); ?>

20.the_content();

記事の本文を取得します。

 

24.comments_template();

comments.phpを読み込みます。comments.phpはfunction.phpと共に編集する必要があります。

 

 

comments.phpを編集する。

comments.php

<div id="comments" class="comment_form">
<?php if(have_comments()): ?>
<h2 class="comments-title">この記事へのコメント</h2>
<ol class="commets-list">
<?php wp_list_comments('callback=mytheme_comment');?>
</ol>
<?php endif; ?>
<?php $args = array(
'title_reply' => 'コメントを残す。',
'label_submit' => '送信',
'comment_notes_before' => '<p class="commentNotesBefore">メールアドレスが公開されることはありません。</p>',
'comment_notes_after' => '<p class="commentNotesAfter">内容をご確認の上、送信してください。URLを含むコメントは承認待ちになります。</p>',
'fields' => array(
'author' => '<p class="comment-form-author">' .
'<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' placeholder="名無しさん" /></p>',
'email' => '<p class="comment-form-email">' .
'<input id="email" name="email" ' . ( $html5 ? 'type="email"' : 'type="text"' ) . ' value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . 'placeholder="メールアドレス" /></p>',
'url' => '',
),
'comment_field' => '<p class="comment-form-comment">' . '<textarea id="comment" name="comment" cols="75" rows="6" aria-required="true"' . $aria_req . ' placeholder="コメント欄" /></textarea></p>',
);
comment_form( $args ); ?>
</div>

5.<?php wp_list_comments(‘callback=mytheme_comment’);?>

コメントをカスタムする為の関数を呼びます。function.phpにmytheme_commentを作成します。

 

function.phpに以下のコードを追加します。

function mytheme_comment($comment, $args, $depth) {
$GLOBALS['comment'] = $comment; ?>
<li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
<div id="comment-<?php comment_ID(); ?>">
<div class="comment-listCon">
<div class="comment-info">
<?php printf(__('名前:<cite class="fn comment-author">%s<span class="admin"></span></a></cite>'), get_comment_author_link()); ?>
<span class="comment-datetime"><?php printf(__('%1$s at %2$s'), get_comment_date('Y/m/d(D)'), get_comment_time('H:i:s')); ?></span>
<span class="comment-edit"><?php edit_comment_link(__('Edit'),' ',''); ?></span>
</div>
<?php if ($comment->comment_approved == '0') : ?>
<em><?php _e('Your comment is awaiting moderation.') ?></em>
<?php endif; ?>
<div class="comment-text"></div>
<?php comment_text(); ?>
</div>
</div>
<?php
}

 

以上で自作テンプレートの全てのファイルが完成しました。

single.cssは？

記事ページようのCSSを読み込む設定はheader.phpに書いてあるのでsingle.cssの内容は自由に変更してください。

 

デザインを変えた個別ページ、記事ページを設定するにはもう少し工事が必要なので次の記事で紹介します。この記事で作成したテーマを元に説明するので残しておいてください。

1つのWordPressで複数のデザインを利用する。

関連記事

Visual Studioを使ったFTP機能で特定のファイルをWebサーバから取得できない問題を解決
WordPress定期処理とキャッシュ（静的ファイル）でphpの負荷軽減
WordPress コメントの返信でページが遷移してしまう時の対処法
【2018年1月】ドメイン変更後のSearch Consoleの設定、アドレス変更の通知
WordPressの埋め込みカードが表示されない問題を解決 oEmbed
WordPress データベースに独自テーブルを作る方法とその使い方
　(´ ･ω･`)　コメント 0件
＿(__つ/￣￣￣/
　　＼/　　　/
　　　 ￣￣￣
　(´･ω･`)
＿(　つ　ミ　　ﾊﾞﾀﾝｯ
　　＼￣￣￣＼ミ
　　　 ￣￣￣￣

コメントを残す

メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。URLを含むコメントは承認待ちになります。