テーマの基本構造
基本ファイル
- index.php
- style.css
- functions.php
- header.php
- footer.php
- front-page.php(トップページ用）
- page-〇〇.php(各固定ページ用・固定ページの数だけ必要）
- single.php（投稿ページ用）
- assetsフォルダ（css/img/js フォルダ収納）
- 最初の3つのファイルはテーマとして認識されるために必須のファイルになります。 テーマフォルダ直下にあるstyle.cssはテーマの宣言だけ書いて中身は空でもOK。（実質反映するcssはassetsフォルダ内のcssを使用。）
- page-〇〇.php…例えばabout.htmlを反映させる（固定ページのスラッグをaboutにする）場合、page-about.phpにすると、自動で表示されるようになります。
style.css
テーマフォルダ直下のstyle.cssに記すテーマの宣言は以下です。
/*
Theme Name: テーマの名前
*/ Author:制作者
Description:テーマについての説明
Version:バージョン情報
URL:アドレス
などの情報を含めても。
固定ページ用 page-〇〇.php
テンプレート名（例：aboutなら会社情報など）を記載します。
<?php
/*
* Template Name: テンプレート名
*/
?>固定ページの編集画面からプルダウンでテンプレートファイルを選択できるようになります。
ファイルの分割（共通パーツに分ける作業）
画像パスの修正
以下のコードでパスを修正します。
<!--修正前-->
<img src="assets/img/sub_logo.png" alt="">
<!--修正後-->
<img src="<php echo get_template_directory_uri(); ?>/assets/img/sub_logo.png" alt="">header.php
header.phpとして共通化する部分を切り出します。
（<!DOCTYPE html> ～ グローバルナビあたりまでになると思います。）
必須コード
</head>（headの閉じタグ）直前に以下のコードを入れます。
<?php wp_head(); ?>※メタタグの出力、JSのライブラリの読み込み、WordPressツールバーの表示など、Wordpressが自動的にHTMLを出力するために必要なコードです。（footer.phpで記載するwp_footer()も同様）
タイトル・メタタグなどをWP化
<title><?php bloginfo( 'name' ); ?></title>
<meta name="description" content="<?php bloginfo( 'description' ); ?>">管理画面の「設定」>「一般」で設定された「サイトのタイトル」、「キャッチフレーズ」がここに反映されます。
※タイトルは、functions.php に書いたadd_theme_support( ‘title-tag’ ); でページに応じて吐き出されるので設定不要。
head部分で読み込むcssやjsをfunctions.phpで一元管理できるようにする
functions.phpに以下で読み込むことができるようにします。
<?php
function my_enqueue_scripts(){
wp_deregister_script('jquery');//wpデフォルトのjQueryを削除
wp_enqueue_script( 'jquery', '//code.jquery.com/jquery-1.12.4.min.js', array(), '1.12.4');
wp_enqueue_script( 'script.js',get_template_directory_uri().'/assets/js/script.js',array() );
wp_enqueue_style( 'style',get_template_directory_uri().'/assets/css/style.css',array() );
}
add_action( 'wp_enqueue_scripts','my_enqueue_scripts' );functions.phpに記載後、head内のcss,jsを読み込む記述を削除します。
トップページとサブページのheader.phpを出し分けたい場合
トップページ用にheader.php、サブページ用にheader-sub.phpを作成し、サブページではheader-sub.phpを読み込むように設定します。以下のコードで読み込みます。
<?php get_header( 'sub' ); ?>その他、header.php内にif文を使って読み分ける方法もあります。
<?php if(is_front_page()): ?>
<!--この間にトップページにだけ表示したい部分を記述する-->
<?php else: ?>
<!--この間にトップページ以外の場合に表示したい部分を記述する-->
<?php endif; ?>is_front_page()は表示しているページがトップページの場合TRUEを返す条件分岐タグです。
footer.php
footer.phpとして共通化する部分を切り出します。
（<footer>タグ以下～</html>までの部分）
必須コード
</body>(body閉じタグ)の直前に追記します。
<?php wp_footer(); ?>
</body>front-page.php、page-〇〇.php や single.php
共通化したヘッダー部分を以下のコードで置き換えます。
<?php get_header(); ?>同様にフッター部分を以下のコードで置き換えます。
<?php get_footer(); ?>静的HTMLから切り分けた部分以外の残ったコードを、各該当ページに移します。
リンク先のWP化
ホームのURLを取得す“home_url”を使います。
<!-- ■トップページ -->
<?php echo esc_url( home_url( '/' ) ); ?>
<!--下層ページ -->
<!-- ■aboutページ -->
<?php echo esc_url( home_url( '/about/' ) ); ?>
<!-- ■newsページ -->
<?php echo esc_url( home_url( '/news/' ) ); ?>
<!-- ■contactページ -->
<?php echo esc_url( home_url( '/contact/' ) ); ?>実際の使用例（トップページの場合）：
<a href="<?php echo esc_url( home_url('/') ); ?>">ホーム</a>about（会社情報）ページの場合：
<a href="<?php echo esc_url( home_url( '/about/' ) ); ?>">会社情報</a>固定ページ用テンプレート(page.php）を作成する
※この項目は新たにテーマを作成するときに必要です。静的HTML→WP化の時は不要かもしれませんが一応記載します。（各固定ページの内容がすでにHTMLで作られているため。）
固定ページのコンテンツを表示したい部分に、以下のWordpressループを記述します。
<?php
if(have_posts()):
while(have_posts()):the_post();
?>
<?php the_content(); ?>
<?php
endwhile;
endif;
?>WordPressループは、投稿や固定ページ、アーカイブページにおいて、記事を共通の方法で処理するための基本的な仕組みです。処理すべき記事の数だけ繰り返し処理を行います。
ページごとに適切なクラスを出力してくれる以下のテンプレートタグをbody開始タグ部分に入れておくと、テンプレートごとにcssが当てやすくなります。
<body <?php body_class(); ?>>WordPressループ外で、該当ページタイトルを取得するテンプレートタグはこちら。
<h2><?php echo get_the_title(); ?>投稿ページ(single.php)を作成する
こちらもWordpressループを使用して記事を出力します。
<?php
if(have_posts()):
while(have_posts()):the_post();
?>
<!-- 記事タイトル -->
<h2><?php the_title(); ?></h2>
<!-- 記事公開年月日 -->
<p><?php echo the_time('Y.m.d'); ?><p>
<!-- アイキャッチ画像 -->
<div class="thumb">
<?php if (has_post_thumbnail()) {
the_post_thumbnail();
} ?>
</div>
<!-- 本文 -->
<p><?php the_content(); ?></p>
<?php
endwhile;
endif;
?>archive.php（投稿記事一覧ページ）を作成する
functions.phpに以下のコードを記し、投稿の一覧ページを作成できるようにします。
//投稿アーカイブページの作成
function post_has_archive( $args, $post_type ) {
if ( 'post' == $post_type ) {
$args['rewrite'] = true;
$args['has_archive'] = 'blog';
}
return $args;
}
add_filter( 'register_post_type_args', 'post_has_archive', 10, 2 );archive.phpにループを使用して出力します。
<ul>
<?php if(have_posts()): while(have_posts()):the_post(); ?>
<li>
<!--投稿記事のパーマリンクを出力-->
<a href="<?php echo get_permalink(); ?>">
<!--アイキャッチ画像を出力-->
<figure>
<?php if (has_post_thumbnail()) : ?>
<?php the_post_thumbnail(); ?>
<?php else: ?>
<!--アイキャッチ画像がない場合以下のイメージを出力-->
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/index/thumb_01.jpg" alt="">
<?php endif; ?>
</figure>
<div class="text">
<!--タイトル-->
<p class="title"><?php the_title();?></p>
<!--抜粋文-->
<div class="excerpt"><span><?php the_excerpt();?></span></div>
<div class="row">
<!--日付-->
<span class="date"><?php the_time('Y/n/j'); ?></span>
<!--投稿の作成者名-->
<span class="author"><?php the_author(); ?></span>
</div>
</div>
</a>
</li>
<?php endwhile; endif; ?>
</ul>front-page.phpに投稿ページの情報を掲載する
サブループを用い出力します。
<?php
$args = array(
'post_type' => "post",//投稿タイプ設定
'posts_per_page' => 2,// 取得記事数
);
$my_query = new WP_Query($args);
if ($my_query->have_posts()): while ( $my_query->have_posts() ) : $my_query->the_post(); ?>
<dl>
<dt><?php the_time('Y.m.d'); ?></dt>
<dd><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></dd>
</dl>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>このほか、ページネーションを付ける、とかお問い合わせページを作成する、とか、カスタムメニューを作成する、とかまだまだ順次書き足していきますがとりあえずここまで。
