WordPress基礎講座6 テーマの作成実習

1
WordPress基礎講座(6)
WordPressテーマの作成手順
2015年6月
小三ツ星インターフェイス　川満昭範

2
注意点
● 公式ディレクトリに登録されるようなクオリティでは
ありません
● 出力はとりあえずエスケープ
● WordPressの便利な機能の大半は使ってません
● 必要最小限のことだけしか書いてません
● HTML,CSSはちゃんと理解しているという前提

3
手順
1.トップページ、アーカイブページ、個別ページのデザ
インをHTMLとCSSで作る。
2.どれか一つのHTMLから、モジュールテンプレートを
作る。
3.ベーステンプレートと関数テンプレートを作成
※テンプレートについては公式レファレンスを読ん
で把握しておくこと。

4
header.phpの作成(1)
● ベースとなるHTMLファイルのコードを、以下のようにWordPress関数へ置き換える。
● <html lang=”ja”>を<html <?php language_attributes(); ?>に置き換え。
– 表示されるものは変わらないが、公式ディレクトリに登録する場合、必須。
● スタイルシートへのリンク
– <link rel="stylesheet" href="<?php echo esc_url( get_stylesheet_uri() ); ?>"
type="text/css" />とする。
– functions.phpを使って読み込ませる方法もある。（参照：wp_enqueue_style）
●
画像やその他のcss,jsファイル等へのリンクの出力
– <?php echo esc_url( get_template_directry_uri() ) ;?>/[テーマフォルダ以降のパス]
– 例(テーマフォルダないのjsフォルダにあるexample.jsへのリンク)：<?php echo
esc_url( et_template_directry_uri() ) ;?>/js/example.js
– ※子テーマの場合は<?php echo esc_url( get_styleseet_directry_uri() ); ?>

5
● サイトのタイトルの出力
– <title><?php bloginfo('name') ; ?></title>
● サイトのキャッチフレーズの出力
– <?php bloginfo('description') ; ?>　
● トップページurlの出力
– <?php echo esc_url( home_url('/') ) ; ?>　
– ()内の文字列は、トップページのURLの後に続く文字列を付加します。
– 固定ページなどへのリンクに使うことも可能。
●
</head>の直前に<?php wp_head(); ?>を挿入。
– wp_headがないとプラグインが動作しないなどの問題が生じる。

6
リンクの出力例
<ul class="gmenu">
<li><a href="<?php echo esc_url ( home_url ( '/' ) ) ;?>about/">概要</a></li>
<li><a href="<?php echo esc_url ( home_url ( '/' ) ) ;?>access/">アクセス</a></li>
<li><a href="<?php echo esc_url ( home_url ( '/' ) ) ;?>contact/">お問合せ</a></li>
</ul>
<h1 class="logo-home">
<a href="<?php echo esc_url ( home_url ( '/' ) ) ;?>">
<img src="<?php echo esc_url ( get_stylesheet_directory_uri() );?>/img/logo.svg"
alt="<?php bloginfo('name') ;?>">
</a>
</h1>

7
● テーマフォルダに“header.php”ファイルを作成。
● 全ページ共通のヘッダーができたら、共通部分を切り出
してheader.phpファイルに貼り付け。
● 切り出したコードの跡に
<?php get_header() ; ?>
を入れる。これでheader.phpを読み込むことができる。

8
footer.phpとsidebar.phpの作成
● </body>タグ直前に<?php wp_footer() ; ?>を挿入。
● その他のリンクなどはheader.phpと同様に作成できる。
● フッター、サイドバーに該当するコードを切り出
し、footer.phpとsidebar.phpを作成する。
● ベーステンプレートでの呼び出しはそれぞれ
– <?php get_footer() ; ?>
– <?php get_sidebar() ; ?>
で行う。

9
functions.phpの作成
● テーマディレクトリに関数ファイルを作成。
● functions.phpを開き、先頭に<?php を作成する。
このphpタグは閉じません。
– <?php タグの前には改行やスペースなども含め、いか
なる文字も書いてはいけません。不具合が出ます。
– また、phpタグを閉じて改行コードなどが2つ入ると不具
合が出ます。phpのみのファイルは閉じタグはつけない、
と覚えておいてください。

10
functions.php各種機能の有効化
● アイキャッチ画像の有効化
– add_theme_support( 'post-thumbnails' );
● ビジュアルエディタのCSS
– add_editor_style( 'css/editor-style.css' );
– ()内はエディタースタイルへのパス
● RSSフィードの有効化
– add_theme_support( 'automatic-feed-links' );

11
ベーステンプレートの作成
● 条件分岐、ループ、WP-Queryを活用することでサ
イトを構築していく。
● 条件分岐の基本的な書き方
<?php if (　[ 条件式 ]　）{ [ 条件に合うときの処理 ]　; }　?>
<?php if (　[ 条件式 ]　)　:　?> ←ここはコロンで終了。
[ 条件に合うときの出力 ]
<?php elseif ( [ 条件式 ] ) : ?> ←ここもコロン。
[ 2つ目の条件に合うときの出力 ]
<?php else : ?> ←ここもコロン。
[ いずれの条件にも合わないときの出力 ]
<?php endif ;?> ←最後はセミコロン。

12
条件分岐に使うタグ
● 詳しくは公式レファレンス「条件分岐タグ」を参照。
トップページ if ( is_front_page() && is_home() ) :
記事ページ is_single()
固定ページ is_page()
カテゴリーアーカイブ is_category()
タグアーカイブ is_tag()
アーカイブ is_archive()
日付　is_date() 月別　is_month() 年別　is_year()
検索結果ページ is_search()
404ページ is_404()

13
条件分岐に使うタグ
● 詳しくは公式レファレンス「条件分岐タグ」を参照。
アイキャッチ画像を持っているか has_post_thumbnail()
記事に指定したカテゴリーが割り当てられているか
in_category( )
()内に指定するカテゴリーID、名前またはスラッグを指定する。
記事に指定したタグがつけられているか has_tag()
()内に指定するカテゴリーID、名前またはスラッグを指定する。
記事に抜粋があるか has_excerpt()
クエリが記事を持っているか have_posts()

14
ループ
記事の有無をチェック→条件を満たすまで繰り返し処理
<?php if ( have_posts() ) : while ( have_posts() ) :　the_post(); ?>
　　記事がある場合の出力内容
<?php endwhile; else: ?>
　　記事が無い場合の出力内容
<?php endif; ?>
if ( have_posts() ): 「もしも投稿記事があるのなら。（条件分岐）」
while ( have_posts() ): 　「投稿記事が残っている限り繰り返し。」
the_post(); 「一つの記事を抜き出し、出力する。」
endwhile(); 「繰り返し処理はここまで」
else: 「投稿記事が無い場合」
endif; 「条件分岐処理の終了」

15
ループの実例
<div>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="roop">
<?php if(has_post_thumbnail()):?>
<div class="thumbnail">
<a href="<?php the_permalink();?>"><?php the_post_thumbnail() ;?></a>
</div>
<?php endif ;?>
<h2><a href="<?php the_permalink();?>"><?php the_title();?></a></h2>
</div>
<?php endwhile;
else :?>
<?php endif; ?>
</div>
ここがループ。記事ごとに同じ処理。
記事が無い場合の処理はこの間に書く。

16
WP_Queryの活用
● 「”info”のスラッグのカテゴリーに登録した最新の記事4件を、トッ
プページの”お知らせ”コーナーからリンクしたい」といった要望を
実現したい
● 検索して出てくるブログ記事などでは「query_posts()」関数を使っ
て制御する方法が数多く見られますが、これは良くない方法です。
– パフォーマンスが低下したり、ページ送り機能が働かなくなるなどの問題
が発生します。
● サブループを作成するWP_Query()やget_posts()を使うことが推
奨されています。
● WP_Queryを使った後はwp_reset_postdata() でメインループに
戻す。

17
WP_Queryを使う
● メインクエリはそのままに、新しいクエリを読んで処理をする。
● 読み込み後の取り扱いがメインクエリとほぼ同じなので使いやすい。
読み込む条件が一つの場合（例：カテゴリid=1の記事を扱いたい）
$my_query = new WP_Query('cat=1');
複数の条件で読み込む場合
$my_query = new WP_Query(
array(
'cat' => 1,
'posts_per_page' => 10,
'orderby' => 'date',
'order' => 'DESC'
)
)
そのほかの条件の詳細は公式レファレンスなどを読みましょう。

18
ループはどうなる？
↓こうなる
<?php if ($my_query -> have_posts() ) :
while ($my_query -> have_posts() ) : $my_query -> the_post() ;?>
<?php endif; wp_reset_postdata() ; ?>
※最後にwp_reset_postdata()を必ず入れる。これで$my_queryのループが終
わったことをWordPressに教えてあげないと、メインループが戻ってこれない。
ここでメインループと比較。メインなので、$wp_query -> が省略されている。
<?php if ( have_posts() ) : while ( have_posts() ) :　the_post(); ?>
<?php endif; ?>

19
ループ内での出力
● 記事タイトル
– <?php the_title() ;?>
● 記事のコンテンツ
– <?php the_content() ;?>
●
記事の抜粋
– <?php the_excerpt() ;?>
● 記事のアイキャッチ画像
– <?php the_post_thumbnail() ;?>
● 記事のURL
– <?php the_permalink() ;?>
● 記事のカテゴリーと、そのカテゴリー一覧へのリンク
– <?php the_category(', '); ?>

20
ループ外での出力
● 一つ前/次の記事へのリンク
– <?php previous_post_link(); ?>
– <?php next_post_link(); ?>
● 前の一覧/次の一覧へのリンク
– <?php previous_posts_link(); ?>
– <?php next_posts_link(); ?>

21
その他
● 条件分岐、ループおよび各種の関数を駆使して目的のページを組み立て
る。
● データの抽出には記事やカテゴリー、タグのID,スラッグ、名前を使うことが
できる。
● 少し複雑なことをしたいときは、まず検索。
● 検索で出てきた関数（後ろに()が付いている）を公式レファレンスで検索し、
非推奨や廃止予定になっていないかをチェックして使う。
● 変数以外の文字列を検索して調べることで、WordPressやPHPの知識が
増える。どんどん調べよう。
● スペルミスで動かないことは結構多い。タイプミス対策としてのコピペは大
事です。（でもやってることの意味はなるべく理解するようにしよう）

WordPress基礎講座6 テーマの作成実習

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to WordPress基礎講座6 テーマの作成実習

Similar to WordPress基礎講座6 テーマの作成実習 (20)

More from Akinori Kawamitsu

More from Akinori Kawamitsu (6)

WordPress基礎講座6 テーマの作成実習