テーマ解析:ブランクテーマ『underscores』
ワードプレスのテーマを制作したくても、何からしたらいいか迷いませんか?
子テーマでカスタマイズが一番楽な方法だと思いますが
テーマを制作を理解するためにブランクテーマを利用したテーマ制作をしてみます。
ブランクテーマはワードプレスのテーマで最小限のファイル・機能のみで作成しているのでカスタマイズして新たなテーマを制作するのに適しています。
そこで人気のブランクテーマ『underscores』を解析して最低限の機能・構造を調べました。
まずはテーマ名(例:test)を記入してGENEATEをクリック
Advanced Optionsをクリックで他の項目を設定可能
すぐにダウンロードが完了するので解凍してください。
まずは必要のないファイルを削除します。
README.md:説明文
公式テーマ作成の場合に必要なファイル
license.txt:ライセンスの記載
重要な部分から
index.php
<?php
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
if ( have_posts() ) :
if ( is_home() && ! is_front_page() ) : ?>
<header>
<h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
</header>
<?php
endif;
/* Start the Loop */
while ( have_posts() ) : the_post();
/*
* Include the Post-Format-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Format name) and that will be used instead.
*/
get_template_part( 'template-parts/content', get_post_format() );
endwhile;
else :
get_template_part( 'template-parts/content', 'none' );
endif; ?>
</main><!-- #main -->
</div><!-- #primary -->
<?php
get_sidebar();
get_footer();
動作の流れ
index.php
・ヘッダーを読み込む。header.php テンプレートファイルを読み込みます。
get_header();
関数リファレンス/get header - WordPress Codex 日本語版
・コンテンツ開始部分のHTMLコード
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
・投稿データが存在するかの確認
if ( have_posts() ) :
関数リファレンス/have posts - WordPress Codex 日本語版
分岐(1):投稿データがある場合
分岐(2):ブログ投稿インデックスページでフロントページでなければ
・個別記事ページでループ外に記事のタイトルを出力します。
テンプレートタグ/single post title - WordPress Codex 日本語版
分岐(2):その他の条件
ループで投稿データを出力
while ( have_posts() ) : the_post();
the_postループで次の投稿データを表示する時にテンプレートを読み込む
template-parts/content.php
get_template_part( 'template-parts/content', get_post_format() );
関数リファレンス/get post format - WordPress Codex 日本語版
投稿記事の投稿フォーマットを返します。
ループ終了時
the_posts_navigation() | Function | WordPress Developer Resources
次の投稿ページ、または前の投稿ページへのナビゲーション用
分岐(1):投稿データがない場合
関数リファレンス/get template part - WordPress Codex 日本語版
template-parts/content-none.phpを読み込む
・コンテンツ終了部分のHTMLコード
</main>
</div>
・サイドバーの読み込み。sidebar.phpを読み込む
get_sidebar();
関数リファレンス/get sidebar - WordPress Codex 日本語版
・フッターの読み込み。footer.phpを読み込む
get_footer();
次のテンプレート調査は次回更新します。
ワードプレス関連リンクまとめ
NAVERまとめ:460件ぐらいのまとめmatome.naver.jp
LIGブログ:140ぐらいの記事
WordPress初心者が覚えておきたいテーマ・プラグイン選びとSEOに関する基礎知識 | LIG LIBRARY | 株式会社LIG
固定ページ系リンクまとめ(作成途中)
ワードプレスのテーマ作成系のリンクまとめ(作成途中)
ワードプレスのテンプレート構造は自由に組み合わせて利用する事ができます。
それらをパズルのように組み合わせてテーマを制作する必要があります。
テーマを作成するには必要な知識ですのでテーマ作成時には覚えてください。
テンプレート入門 - WordPress Codex 日本語版
◆ワードプレスの単純なページ構造
header.php:ヘッダー
コンテンツ部分
footer.php:フッター
◆基本的なテンプレートファイル
インクルードして各テンプレートを読み込む
ヘッダー:header.php
<?php get_header(); ?>
フッター:footer.php
<?php get_footer(); ?>
index.phpを作成
ヘッダーとフッターの間に投稿データをループさせる必要があります。
ループ内で利用する投稿データを取得するテンプレートタグ
投稿のタイトルの表示
<?php the_title( $before, $after, $echo ); ?>
$before:オプション:タイトルの前に置くテキスト
$after:オプション:タイトルの後に置くテキスト
$echo:オプション:タイトルを表示(true)または変数へ返す(false)
例
<?php the_title( '<h3>', '</h3>' ); ?>
結果
<h3>タイトル</h3>
現在の投稿の公開時刻を表示
<?php the_time( $d ); ?>
$d:オプション:時間の表示フォーマット指定
例)24時間表記
<p>投稿時刻: <?php the_time('g:i'); ?></p>
結果
投稿時刻: 10:36
例)日付
<div><?php the_time('Y年n月j日'); ?></div>
結果
2016年9月19日
例)日付と時間
<p>投稿日: <?php the_time('Y年n月j日'); ?> @ <?php the_time('g:i a'); ?></p>
結果
投稿日:2016年9月19日 @ 10:36
参考
日付と時刻の書式 - WordPress Codex 日本語版
記事が属するカテゴリ
<?php the_category( $separator, $parents, $post_id ); ?>
$separator:オプション:カテゴリを表示するときの区切る文字列や記号
デフォルトでは、番号なし箇条書き(<ul>)でリンクを並べます。
例)半角空白区切り指定
<p>Categories: <?php the_category(' '); ?></p>
結果
Categories: WordPress Computers Blogging
例)コンマ区切り指定
<p>Categories: <?php the_category(', '); ?></p>
結果
投稿以外のデータ取得
サイドバーから検索フォームを表示
<?php get_search_form(); ?>
関数リファレンス/get search form - WordPress Codex 日本語版
◆条件分岐で自動的に読み込まれるテンプレートファイル
- アーカイブタイトル(タグ別、カテゴリー別、年月日別、作成者別アーカイブ)の表示。
- 投稿リストを概要もしくは全文形式で表示する。(概要か全文かは)どちらか1つ、適切な方を選ぶ。
- 分割された投稿のナビゲーションリンクをサポートする為に wp_link_pages() を記述しておく。
アーカイブインデックスページの作り方 - WordPress Codex 日本語版
singular.php (V4.3~)
single.phpとpage.php共通のテンプレートファイル。固定ページと投稿ページで同一テンプレートを使用したい場合
個別投稿表示:single.php
- 分割された投稿のナビゲーションリンクをサポートする為に wp_link_pages() を記述しておく。
- 投稿のタイトルと本文を表示する。
- タイトルはその投稿へのセルフリンクではなく、プレーンテキストとする。
- 投稿日を表示する。
- デザイン適理由で重要でない限り、日付のフォーマットと時刻のフォーマットの設定を尊重すること。 (日付のフォーマットと時刻のフォーマットに関するユーザー設定は 管理画面 > 設定 > 一般 の中にある)
- ユーザー設定に応じた出力には the_time( get_option( 'date_format' ) ) を使う。
- (適切であれば) 作成者名を表示する。
- 投稿カテゴリーと投稿タグを表示する。
- 編集権限のあるログイン中のユーザーには "Edit" (編集) リンクを表示する。
- コメントリストとコメントフォームを表示する。
- previous_post_link() と next_post_link() を使って、次の記事とひとつ前の記事へのナビゲーションリンクを表示する。
固定ページ:page.php
- 固定ページのタイトルと本文を表示する。
- コメントリストとコメントフォームを表示する。(コメント機能がオフの場合を除く)
- 分割された投稿のナビゲーションリンクをサポートする為に wp_link_pages() を記述しておく。
- タグ、カテゴリー、日付、作成者などのメタデータは表示しない。
- 編集権限のあるログイン中のユーザーには "Edit" (編集) リンクを表示する。