CMS演習⑦~⑨ 講義内容 「WordPressのテーマづくり」

遅くなってすみません。もう少し追記・修正していきますが一次アップします。説明漏れあれば教えてください。追記します。

WordPressのテーマづくり

普段お世話になっているWordPressのテーマ。もちろん、誰かが作っているものなので、自分で作ることも出来る。
「0から全て制作する」という点においてはテーマのカスタマイズよりも大変な部分もあるが、しっかり習得するとより自由なデザインのページが作れるし、なによりWordPressの構造自体の理解も進むので、カスタマイズにも役立つ。
まずはどんな風に作られているのか、ざっと理解しておくと、仕事の幅が広がる。

テーマ作成において、WordPressは通常のブログよりも自由度が圧倒的に高く、様々な形式のサイトに利用される理由の一つでもある。

はじめてWordPressのオリジナルテーマを作るときの参考になればと思って書きました
僕が初めてテーマを作った時に参考にしたページです。ちょっとだけ今回の手順と違いますが、図解が分かりやすいので参考にしてみてください

WordPress テーマのディレクトリ構造

WordPress本体には、様々なフォルダやファイルが存在している。
テーマのデータも、その中の一部である。

wp_structure
テーマフォルダにある有効化されたテーマを、wordpress/index.phpが読み込む

wordpressフォルダを開くと、大きく三つのフォルダに分かれており、その中の
「wp_content」→「themes」
フォルダの中に、インストール(ないし初期から入っていた)テーマが保存されている。
自分でテーマを作成するときも、ここに作っていく形になる。

テンプレートファイル

WordPressには、いくつかの名前の定められたテンプレートファイルがある。
基本的に、これらのファイルはテーマフォルダの直下に保存する必要がある。
種類がいくつかあるので、種別で紹介したい。

絶対に必要なファイル

子テーマの際にも触れたが、index.phpstyle.cssはWordPressのテーマを公開するうえで、最低限必要なファイル。
存在しなかったり、ファイル名が違ったりすると、テーマの有効化すら出来ない。
もし「外観」画面に作ったはずのテーマが出ていなかったら、この辺りのファイルをきちんと確認しよう。
詳細はこちらの記事へ。

この二つに加えて、「functions.php」も重要なファイルになっている。
このファイルには、WordPressで使用したい機能や、元々ある機能の部分変更など、様々な命令を書き加えていく事が出来る。なくてもテーマの有効化は出来るが、ここへの記述がないと、WordPressのほとんどの機能は使えないので、必須と言っても過言ではない。

パーツになるファイル

WordPressは、headerやfooterなど、共通部分を多数のページに読み込む為のファイル。
作成しているテーマフォルダ直下に、特定の名前で保存しておく必要がある。
WordPressでは、特別な名前のファイルが特別な意味を持つことが多い。

wp_structure2
共通部分を別ファイルとして保存しておくことで、修正があった場合に作業量を大きく減らすことが出来る。テンプレートが増えれば増えるほど、有効な手段になる。
header.php
読んで字のごとくページのヘッダー部分を記述するファイル。
読み込むCSSやナビゲーション部分など、全ページに共通する項目を書いておき、色んなテンプレートで読み込むことが出来る。
また、if文による条件分岐で、特定のページだけに情報を読み込ませることも可能。
表示させたい場所に「get_header()」と記述することで読み込める。
footer.php
headerと同様、ページ下部も共通する場合が多いので、ファイルを分けておくと便利。
表示させたい場所に「get_footer()」と記述することで読み込める。
sidebar.php
サイドバーを個別に保存しておけるファイル。
名前は「sidebar.php」だが、ようは共通部分であればどの部位でも構わないので、テーマによってはこのファイルに特定部位の設定が書かれている事もある。
表示させたい場所に「get_sidebar()」と記述する事で読み込める。

ページを表示する為のテンプレートファイル

切り分けたパーツ(header.phpなど)を、表示用のテンプレートで読み込み、実際にサイト上に表示させる。
WordPressでは、「投稿ページ」「固定ページ」などを表示する為の専用ファイルがそれぞれ用意できる。
因みに、index.phpは表示用テンプレートの親玉みたいなもので、該当するファイルがなかった場合(例えば固定ページを表示するのに、page.phpがないなど)、代わりにindex.phpで表示される仕様になっている。

また、細分化すると今日までに使用したファイルよりもかなりの数のテンプレートが存在するので、一緒に掲載する。

single.php
投稿ページを表示する為のテンプレート。
タイトル、日付、本文、カテゴリーなど、必要な情報を選定して載せる。
今回は抜粋文→全文表示への変更だけだったが、テーマによっては色々と載せ方を変更したり、工夫がみられる。
page.php
固定ページを表示する為のテンプレート。
single.phpと似通る部分が多いので、別名保存などで作ってあげると楽。
こちらはsingle.phpよりも更に情報が少なくなることが多い。
404.php
wordpress/以後、存在しないURLにアクセスすると表示してくれるテンプレート。
用意しておくと、記事を消してしまった時などを含めてよりユーザーフレンドリーなページになる。
archive.php,category.php,tag.php
日別一覧、カテゴリー一覧、タグ一覧を表示する専用ページ。
なくてもindex.phpで一覧表示してくれるので問題はないが、それぞれ個別に設定することで見た目を変更できる。
一般のテーマで多いのは、ページ上部に何のカテゴリーを表示しているかなどを出すパターン。

制作フロー

今回は大本になるHTMLとCSSがあること前提。
既にできているサイトに、WordPressの機能を当て込める形で作成した
デザイン→コーディング→テーマ化
という手順を踏むと、作業工程が分かりやすく、役割分担もしやすい。
ただしデザイン時点で、WordPressのどんな機能を当て込めるかを考える必要は出てくるので、デザイナーも予備知識として、大まかな動きが分かると尚良い。

順番は人それぞれではあるので、参考程度に。

  1. ベースになるHTMLやCSS等のファイルを一つのフォルダにまとめ、wp-content/themesフォルダの中に保存する。
    一応、HTML等のバックアップを取っておくとなお良い。
  2. style.cssにテーマ設定を入力。

    /*
    Theme Name: Simple WebB
    Auther: Interplan IT School ShinYkohama
    Description: テーマ作りの練習です
    version:1.0
    */
    

    上部にコメントアウトで情報を記入する。
    最低限Theme Nameだけ記述されていれば動くので、とりあえず好きな名前を付けてみよう

  3. index.phpを作成する。
    元々htmlファイルがあるなら、名前をindex.phpに変更すればOK。
    この時点で、wordpressダッシュボードの「外観」→「テーマ」から、有効化が出来るようになる。
  4. 有効化し、サイトを表示してみると、CSSや画像が読み込まれていないことが分かる。
    これはthemesフォルダの中で、相対パスで読み込もうとしている為。

    WordPressは、有効化したテーマのindex.phpをwordpress/index.phpで読み込む設計になっている(実際に表示する時にアドレスがシンプルになる)為、実際にはwp_content/themes/有効化したテーマ/の中に入っているファイルの位置が正確に読み取れなくなってしまう。

    そこで使われるのが、「get_template_directory_uri」というテンプレートタグ。
    有効化したテーマまでの絶対パスを取得してくれるので、パスが変わってしまったcssやimgをちゃんと読み込めるようになる。

    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">
    

    パスを読み込む部分の手前に設定することで、特定のファイルを読み込めるようになる。

  5. テーマに必要な情報を読み込むためのテンプレートタグを書いていく。
    各テンプレートタグには、サイトのタイトルや、投稿ページへのリンクなど、様々な情報が入っている。
    該当する箇所に、該当するテンプレートタグを書き込むことで、それぞれの投稿等の情報がきちんと表示される。
  6. 投稿を表示する、メインループを作る。
    投稿を表示する際に繰り返し文、whileを利用する事がから、WordPressでは投稿記事を表示する部分を「メインループ」と呼ぶ。

    <?php if(have_posts()): ?>
    	<?php while(have_posts()): the_post(); ?>
    		//記事部分のHTMLを記載
    	<?php endwhile; ?>
    <?php endif; ?>
    

    「もし記事が一件でもあれば」「記事のある限り」「記事を表示する」
    といった意味合いになる。
    色んなテンプレートに記載するので、最近では「共通のパーツ」として別ページに記載する事も増えている。

  7. functions.phpを作成し、カスタムメニューやウィジェット機能を有効化する。
    もちろん、利用しないという選択肢もあるが、ウィジェットはともかくカスタムメニューは大抵の場合使った方が楽なので、きちんと記述してあげると良い。
    functions.phpには他にも様々な設定を書けるので、必要に応じて記述を増やしていく。
  8. index.phpの機能が整ったら、パーツを分割する。
    「全ページに共通する部分」を抜き出し、「header.php」「footer.php」等として保存し、「get_header」「get_footer」等で読み込む。
  9. single.php、page.phpといった、index以外のファイルを必要なもの分だけ作成する。
  10. 完成!

使用したテンプレートタグ一覧

WordPressの中だけで使える関数(機能)を、まとめてテンプレートタグと呼ぶ。
header.phpなどのテンプレートを読み込んだり、データを出力したり、その種類は多岐に渡る。
WordPress Codex 日本語版に、それぞれの設定方法などが詳しく載っているので、詳細はこちらを参考に。

get_template_directory_uri()
有効化しているテーマまでのhtttp:からの絶対パスを取得してくれるテンプレートタグ。
テーマを作る際、cssやimg等を読み込むときに重宝する。
wp_head()
wordpressテーマに必要なファイルを読み込む。テーマには必ず必要なので、最初に記述しよう。
headの一番下、</head>の手前に書いてあげよう。
wp_footer()
管理画面と表示サイトを行き来する黒いバー(通称アドミンバー)を表示してくれる他、js等の必要ファイルを読み込む。
テーマには必ず必要なので、最初に記述しよう。
こちらはbodyの一番下、</body>の手前に書いてあげると良い。
bloginfo()
様々な情報を引き出せる便利タグ。例えば
bloginfo(‘name’);
なら、設定画面で登録されたサイト名を表示してくれる。
他の設定:テンプレートタグ/bloginfo
home_url()
サイトのトップページへのリンクを出力できるタグ。
実際に利用する際は、

と記述してあげる必要がある。echoしないと出力できない。
have_posts()
利用しているWordpressに、「投稿があるか」を判別してくれるタグ。
記事を読み込むメインループでは、まずこのタグを使って、
「もし投稿が一つでもあったら、投稿がある限り記事を出してね」
という指定になる。
the_post()
記事を読み込むメインループにて、次の記事を取得する為のタグ。
for($i=0; $i<10; $i++) でいうところの「$i++」と同じ役割になる。 これがないと無限ループに陥るので、忘れない様に。
the_title()
ループ中で読み込まれた記事のタイトルを表示する為のタグ。
the_excerpt()
記事本文の抜粋文を表示する為のタグ。
表示の長さの設定や、後ろにつく文字列をfunnctions.phpで変更できる。
index.phpなど、記事一覧を出すページで用いられることが多い。
the_content()
記事本文の全文を表示する為のタグ。
single.phpやpage.phpなど、記事の詳細画面で記述し、全文読める様にする。
画像等が使われているとそちらも出てしまうので、トップページなどで使う時には注意が必要。
the_permalink()
記事詳細へのURLを取得してくれるテンプレートタグ。
記事タイトルやアイキャッチ画像等、色んなところにリンクを貼っておくと、個別の記事ページに誘導しやすい。
get_the_date()
日付を表示してくれるテンプレートタグ。
the_dateだと同一の日付の投稿があると一番新しいものしか表示してくれないのだが、
「echo get_the_date();」と書いてあげるとちゃんと出てくる。
WordPressの設定画面で使われている日付を利用する場合は、「echo get_the_date(get_option(date_format));」
と記述する。
has_post_thumbnail() , the_post_thumbnail()

記事にアイキャッチ画像があるかどうかの判定と、アイキャッチ画像の表示。サムネイルのスペルに注意。

<a href="<?php echo the_permalink(); //投稿ページへのリンク ?>">
	<?php if(has_post_thumbnail()): //もしアイキャッチ画像があったら ?>
		<?php the_post_thumbnail(表示サイズを指定); //アイキャッチ画像を表示 ?>
	<?php else: //無かったらno-image.pngを表示 ?>
		<img src="<?php echo get_template_directory_uri(); ?>/images/no-image.png" alt="NO IMAGE" width="260" height="260">
	<?php endif; //if文終わり ?>
</a>

上記の様に、条件文とセットで使われることが多い。

the_category()

記事に登録されているカテゴリー一覧を表示してくれる。

のように、括弧の中にそれぞれのカテゴリーの区切り文字を入れることが出来る。

edit_post_link()
投稿記事や固定ページに「編集」ボタンを付けることが出来る。
わざわざダッシュボードや個別ページに跳ばなくても記事の編集が出来るので、投稿者には便利な機能。
ログアウト時(お客さんが見る時)は自動で消えてくれるので安心。
wp_nav_menu()
functions.phpで設定した、カスタムメニューを表示するテンプレートタグ。
オプションが多いので、配列で入力する必要性がある。

$menu_setting = array(
	'theme_location' => 'gloval', //表示したいカスタムメニュー名
	'container' => 'nav', //囲う為のタグ
	'container_class' => 'wrap' //囲うタグに付けるクラス名
);
wp_nav_menu($menu_setting);

オプション一覧はこちら

the_posts_pagenation()
「ページャー」「ページング」「ページネーション」等と呼ばれる、記事数が表示数を超えた時に次のページへ移動できるリンクを精製するテンプレートタグ。

the_posts_pagination( array(
	'prev_text'          => '&lt;',//prevに表示するテキスト
	'next_text'          => '&gt;',//nextに表示するテキスト
	'before_page_number' => '<span></span>',//ページナンバーの手前に付ける文字列
) );

比較的新しく、以前は大変だったページングの実装を大幅に簡単にしてくれた。
出力されるタグやクラスが決まっているので、それに合わせてCSSを作り、見た目を変更すると良い。

dynamic_sidebar()
functions.phpで設定したウィジェットエリアを表示してくれる、なんだかカッコイイ名前のタグ。
sidebarとつくが、サイドバー以外でも問題なく使用できる。

と書くと、ダッシュボードで設定されたウィジェットを表示することが出来る。
get_header()
header.phpを読み込んでくれるテンプレートタグ。
各テンプレートにしっかりつけてあげよう。
get_footer()
footer.phpを読み込んでくれるテンプレートタグ。
get_sidebar()
sidebar.phpを読み込んでくれるテンプレートタグ。
貼る場所を間違えない様にしよう。他二つと違い、使われない事も多い。
previous_post_link,next_post_link
投稿ページに使用できる、「前の記事」ないし「次の記事」へのリンクを精製してくれる。single.phpの下の方に搭載されているテーマが多い。

<ul class="pager">
	<li class="prev"><?php previous_post_link('&lt; %link'); ?></li>
	<li class="next"><?php next_post_link('%link &gt;'); ?></li>
</ul>

括弧の中には表示文字列を書く。
「%link」は、記事タイトル付で前後のページへのリンクを表示してくれる。

functions.phpで使用したテンプレートタグ・命令

functions.phpは、WordPress初心者の壁ともいえるとっつきにくいファイル。
主に使いたい機能を有効化したり、各種設定を書き込むのに使われる。

add_theme_support()
デフォルトでは使えない、様々な機能を有効にする設定。
括弧の中に有効にしたい機能を書く。
add_theme_support(‘post-thumbnails’);はアイキャッチ画像が、
add_theme_support( ‘menus’ );ならカスタムメニューが使えるようになる。
また、多数のテーマで使われている、「カスタムヘッダー」や「カスタム背景」もこの機能で有効にできる。
add_image_size();
WordPressメディアに画像を上げる時、複数のサイズで登録される。
この指定を書くことで、好きなサイズの画像をアップロードさせられる。
add_image_size(‘blog_thumbnail’, 260, 260,true);
名称、縦横のサイズの後に「true」を入れると、size比の合わない画像の中央を自動でトリミングしてくれる。
register_nav_menus()
カスタムメニューの設定。
カスタムメニューは同じテーマに何個でも設定できるので、それぞれに「メニューの名前」と「説明」を付ける必要がある。

register_nav_menus(array(
        'メニュー名称(好きな名前)' => 'ダッシュボード側に表示される説明',
         //何個も同時に設定できる
	'gloval' => 'グローバルナビゲーション',
	'foot_nav' => 'フッターナビゲーション'
));

ここで名前を設定し、wp_nav_menu();に名前を入れる事で、ようやくカスタムメニューが使えるようになる。

register_sidebar()
ウィジェットエリアを作成する設定。これがあって初めて「ウィジェット」メニューがダッシュボードに現れる。

register_sidebar(array(
	 'name' => 'widget名',
	 'id' => 'widgetID',//呼び出す時に名前の代わりに使える
	 'description' => 'widgetエリアの説明(ダッシュボードに表示)',
	 'before_widget' => '<div class="widget">'//ウィジェットを囲うタグや文章の設定,
	 'after_widget' => '</div>',
	 'before_title' => '<h3 class="widget_title">'//ウィジェットタイトルを囲うタグや文章の設定,
	 'after_title' => '</h3>'
));

複数のエリアを作る時は、その分だけ上の様な設定を書いてあげる必要がある。

番外:抜粋文の設定
//抜粋文の文字数設定
function custom_excerpt_length( $length ) {
	return 100;	
}	
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );

	
//抜粋文省略時に続く文字列の設定
function new_excerpt_more( $more ) {
	return '[ … ]<a class="more" href="'. get_permalink( get_the_ID() ) . '">more</a>';
}
add_filter( 'excerpt_more', 'new_excerpt_more' );

WordPressデフォルトの設定を変更する時、「add_filter()」という命令が使われる。
これは「フィルターフック」と呼ばれる、WordPressのどこかで設定されている変数に、データを上書きできるという優れた機能。……なのだが、見た目に分かりにくく、初心者の壁の一つとなっている。
「excerpt 文字数変更」などの検索ワードで出てくるので、色々と試してみよう。

他にもいろいろな設定ができるが、今回は抜粋文の文字列と、後に続く文章を変更した。
こういった設定も、functions.phpに記述される。