Wordpress

4. Wordpressのテーマを作成する

自作テーマの作成手順

WPのインストール完了後、不必要な記事・プラグインなどを削除。
削除後、パーマリンクの設定を行う
- WPのおすすめパーマリンク
作成したテーマフォルダを
htdocs → (wordpressフォルダ) → wp-content → themes
内に移動させる
index.php と style.cssを準備する
- index.php はベースとなるHTMLから作成していく
- style.css は、cssフォルダ内から出す。(index.phpと同じ階層に置く)
  スタイルシート上部にTheme Nameなどが必要
```
/*
Theme Name: テーマの名前
Description: テーマの説明
Theme URI: テーマのURL
Author: テーマの作者
Author URI: 作者のサイト
Version: バージョン
*/
```
- 必要であれば、スクリーンショットの画像も作成。ファイル名は「screenshot.png」、サイズは880x660
ダッシュボードの外観メニューから、作成したテーマを有効化する
index.php を開き、テンプレートタグで置換していく
index.php 内の相対パスを絶対パスに置き換えていく
（画像のパス、スタイルシートのパス、外部ファイルのパスなど）
```
href = "style.css"　//相対パスは不可
href = "<?php echo get_template_directory_uri(); ?>/style.css"　//絶対パスはOK
```

ホームURLやサイト名など、ダッシュボードに入力した内容を利用するため、専用のテンプレートタグに置き換えていく

<?php echo home_url('/'); ?>　//ホーム（トップページ）のURL
<?php bloginfo('name'); ?>　// サイト名を出力
<?php wp_head(); ?>　// </head>の直前に入力
<?php wp_body_open(); ?>　// <body>の直後に入力
<?php wp_footer(); ?>　// </body>の直前に入力

投稿記事や固定ページ（ダッシュボード）に入力した内容を表示したい場所に、ループ文を使用する

<?php if(have_posts()): while(have_posts()): the_post(); ?>
<!-- 記事があるときの表示内容をここに書く -->
<?php endwhile; endif; ?>

※上記ループ文章は
	トップページ　→　投稿記事があるだけ繰り返し表示
	固定ページ・個別ページ　→　該当記事を1件だけ表示
の命令となる。

ループ文の中に、必要なタグを入れていき、HTMLで成形する

<?php the_title(); ?>　//記事のタイトルを出力
<?php the_content(); ?>　//記事の本文を出力
<?php the_permalink(); ?>　//記事の個別ページのURLを出力
<?php echo get_the_date(); ?>　//記事の投稿日を出力
<?php the_category(','); ?>　//投稿カテゴリーを出力　など
<?php the_ID(); ?>  //投稿IDを表示

各ページに共通となる部分を、「header.php」「sidebar.php」「footer.php」などパーツテンプレートとして、新しいファイルとして分離する
```
<?php get_header(); ?>　//header.phpを読み込む
<?php get_sidebar(); ?>　//sidebar.phpを読み込む
<?php get_footer(); ?>　//footer.phpを読み込む
```
各ページのデザインに合わせて、テンプレートファイルを作成していく
例えば、Topページを表示する場合、Wordpressはまず、テーマフォルダ内に「home.php」があるかを確認、なければ、「index.php」をひな形として画面を表示する。
【重要】テンプレートの優先順位
- トップページ　→　home.php　→　index.php
- 固定ページ　→　page-[slug].php　→　page-[id].php　→　page.php　→　singular.php　index.php
- 個別ページ　→　single-[post-type].php　→　single.php　　→　singular.php　→　index.php
- カテゴリーページ　→　category.php　→　archive.php　→　index.php
- 日付ページ　→　date.php　→　archive.php　→　index.php
- カスタム投稿アーカイブ　→　archive-[post-type]　→　archive.php　→　index.php
※固定ページとは - 頻繁に更新していかないページ。会社概要、アバウト、問い合わせページなど

※個別ページとは - 投稿ページ、更新を頻繁に行うページ。

※参考URL　テンプレート階層(codex)

テンプレート

【重要】ループの動作について
- トップページ　→　投稿記事があるだけ投稿記事の内容を表示し、繰り返す
- 固定ページ　→　クリックした固定ページの記事を1度だけ表示する
- 個別ページ　→　クリックした個別ページの記事を1度だけ表示する
- アーカイブページ　→　該当する投稿記事があるだけ記事の内容を表示し、繰り返す
固定ページを作成する
- ダッシュボードの固定ページで必要なページを作成しておく(about,accessなど)
- それぞれのページのアドレス(パーマリンク)を確認しておく(必要であれば、スラッグを変更する)
  WPの固定ページは標準では、ページのタイトルがそのままアドレス（パーマリンク）となる
```
Topページアドレスが 「http://localhost/wp/」　固定ページのタイトルを 「access」 とした場合
アクセスページのURLは　http://localhost/wp/access/ となる。
上記URLをテンプレートタグで表記すると、<?php echo home_url('/access/'); ?>　となる。
```

固定ページの作成（パターン１）

ダッシュボードの固定ページで必要なページを作成しておく(about,accessなど)
index.php を複製して、page.php を作成する
index.php のコードを確認し、不要なところを削除する
見本となるHTMLを確認し、page.php の該当箇所に貼り付ける
置き換える部分、ループ使用する部分を判別し、テンプレートタグを入力していく
page.phpでループを使用すると、「記事の内容を１件だけ表示する」という指示内容となる
ダッシュボードの固定ページ（コードエディタに変更しておく）に必要なHTMLソース、文章などを入力する
コンテンツボックスにHTMLタグを入力するときは、 からの中に入力する

各ページで異なる表示がある場合は、条件分岐を使って分岐させる

■ 条件分岐の基本
<?php if(条件1): ?>
　条件1に当てはまる場合
<?php elseif(条件2): ?>
　条件2に当てはまる場合
<?php else: ?>
　条件1にも条件2にも当てはまらない場合
<?php endif; ?>

<?php if(条件1 || 条件2): ?>
  条件1もしくは条件2に当てはまる場合
<?php endif; ?>

<?php if(条件1 && 条件2): ?>
  条件1と条件2、両方に当てはまる場合
<?php endif; ?>

<?php if (  is_front_page() ||  is_home() ) : ?>
    トップページで行う処理を書く
<?php endif; ?>

<?php if ( is_page() ) : ?>
    全ての固定ページで行う処理を書く
<?php endif; ?>

<?php if ( is_page(5) ) : ?>
    IDが5の固定ページで行う処理を書く
<?php endif; ?>

<?php if ( is_page('about') ) : ?>
    スラッグが「about」の固定ページで行う処理を書く
<?php endif; ?>

<?php if ( is_single() ) : ?>
    全ての個別投稿ページで行う処理を書く
<?php endif; ?>

固定ページの作成（パターン２）
1. ダッシュボードの固定ページで必要なページを作成しておく(about,accessなど)
2. index.php をベースに、各固定ページを専用テンプレートで作成する(page-slug.php or page-id.php)
3. index.php のコードを確認し、不要なところを削除する
4. 見本となるHTMLを確認し、page-slug.php の該当箇所に貼り付ける
5. このパターンではループは使用しないので、コンテンツはそのまま直貼りしておく。（相対パスは絶対パスに変更）
6. 上記フローにて、他ページも必要であれば作成していく

個別ページ、アーカイブページも優先テンプレートを確認しながら、作成していく

カテゴリーリンクページ一覧を出力

<?php wp_list_categories(); ?>
※<?php wp_list_categories('title_li='); ?>
で見出しをなしにする
※<li><a href="">カテゴリ名</a></li>の形式で出力される

日付ベースのリンク一覧を出力

<?php wp_get_archives(); ?>
※<?php wp_get_archives('type=postbypost&limit=3'); ?>　という書き方、もしくは
<?php
$args = array(
	'type' => 'yearly',
	show_post_count => 1
);
wp_get_archives($args);　?>　の書き方
※<li><a href="">日別・月別表示</a></li>の形式で出力される

ループ外でカテゴリー名を表示する
```
<?php echo single_cat_title(); ?>
```

functions.php を作成する
※functions.php とはWPに機能を追加するファイル

<?php を先頭行に入力し、以下はphpのコードのみ
以下、よく使うコード

	//タイトルタグの設定
	add_theme_support( 'title-tag' );

	//アイキャッチ画像を有効化
	add_theme_support( 'post-thumbnails' );

	//ショートコードの追加
	add_shortcode('tp_dir', 'shortcode_tp');
	function shortcode_tp() {
	  return get_template_directory_uri();
	}
	//カットした画像の使用
	add_image_size('staff',360,360,array('center','bottom'));

	//共通パーツの追加（これは覚えなくてもよい）
	add_shortcode( 'parts_hum_menu', 'shortcode_hum' );
	function shortcode_hum() {
	  ob_start(); // 記録開始
	  ?>
	  //ここにHTMLなど共通パーツを入力する
	<?php
	  $data = ob_get_contents();
	  ob_end_clean(); // 記録終了
	  return $data;
	}

など

※アイキャッチ画像の出力

//パラメータなし
<?php the_post_thumbnail(); ?>                      
 
// サムネイル
<?php the_post_thumbnail( 'thumbnail' ); ?>      
 // 中サイズ
<?php the_post_thumbnail( 'medium' ); ?>            
// 大サイズ
<?php the_post_thumbnail( 'large' ); ?>               
// フルサイズ
<?php the_post_thumbnail( 'full' ); ?> 
  
//サイズを数値で指定する場合
<?php the_post_thumbnail( array( 100, 100 ) ); ?>

//条件分岐する場合
<?php if ( has_post_thumbnail()): ?>
  <?php the_post_thumbnail('full'); ?>
<?php endif; ?>

//クラス名を付加する場合
<?php echo get_the_post_thumbnail( $post_id, 'thumbnail', array( 'class' => 'ileft' ) ); ?>

4. Wordpressのテーマを作成する

自作テーマの作成手順

【重要】テンプレートの優先順位

【重要】ループの動作について