テーマ作成に必要なphpファイルの作り方を解説【コピペOK】

WordPress

今回の記事はWordPress(ワードプレス)のテーマ作成に必要なphpファイルの構成を解説します。また最後には今回解説するファイルデータを一式無料提供します。

環境準備が終わり、テーマ作成を開始するとき、初めの段階で次の様な必ず必要になるファイルを準備しましょう。基本構成を理解すれば今後の応用が楽になります。なので、今回のファイルを全て準備したらHTMLベースでいいので一つの形を作ってみましょう。

うまくいかない場合は、見本コードをコピペして使って下さい。(その場合Bootstrapは必須)
各見本では、以下の記事で紹介したレイアウトをWordPress化しています。(レイアウトのみ)

見本で作成しているレイアウト

テーマのディレクトリに新しいテーマをアップしよう

まずはテーマファイルのディレクトリの場所を把握しましょう。

(ドメイン)(wp)wp-contentthemesoriginal(任意のテーマファイル)

この階層に新規で作成したいテーマファイルをアップしましょう。(今回の場合はoriginalと言う名前のテーマを作成します。)

重要メモ

ここで作成したテーマファイルのディレクトリを指定する時は以下の記述を使います。

<?php echo get_template_directory_uri(); ?>

例えば、http://example.jp/img/image.img指定したい場合、
<?php echo get_template_directory_uri(); ?>/img/image.imgと指定します。

header.php

header.phpはサイトの頭部分になる必須なテンプレートパーツです。

<!doctype html>
<html>
<head>
    
<?php wp_head(); ?>

</head>

<body>

header.phpでは、スタイルシートやJavaScriptやmetaタグなど、headタグ内で読み込みたい要素を書いたり、グローバルナビゲーションなどのサイト全体の上部に存在するヘッダー部分の要素を書いていきます。

header.phpを呼び出したい場合は以下のコードを使います。

<?php get_header(); ?>

header.phpの見本

<!doctype html>
<html>
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>KT Thema</title>
<link rel="icon" href="<?php echo get_template_directory_uri(); ?>/favicon/favicon.jpg">
<meta name="description" content="KT Thema(テーマ制作テスト)">

<! – ブートストラップ -->
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/bootstrap.min.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/bootstrap-grid.min.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/bootstrap-reboot.min.css">

<?php wp_enqueue_script( 'jquery' ); ?>

<?php wp_head(); ?>

</head>

<body>
<! – ヘッダー -->
<header>
<! – グロナビ -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">KT Thema</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">

<?php
// メニューを表示
if ( has_nav_menu( 'main-menu' )){
$MainMenu = array(
'theme_location' => 'main-menu',
);
wp_nav_menu( $MainMenu ); 
}; 
?>

<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">検索</button>
</form>
</div>
</nav>

headタグに必要な要素を色々と書いています。またheadはしっかり閉じます。基本的にHTMLと同じくファイルパスを指定すれば必要なファイルを読み込めますがstyle.cssとjqueryは少し特殊です。

jqueryは以下の記述で読み込めます。これはWPに標準搭載しているjqueryを読み込んでいます。style.cssに関しては当記事の10項目目で説明しています。

<?php wp_enqueue_script( 'jquery' ); ?>

以下の記述はWordPressを動作させるのに必須になります。細かい事は他で説明します。

<?php wp_head(); ?>

以下の記述はヘッダーメニューを読み込んで表示させるためのものです。WordPressの管理画面で作成したメニューが表示されます。ただし表示させるか否かはfunctions.phpで制御します。詳しくは9項目のfunctions.phpで説明します。

<?php
// メニューを表示
if ( has_nav_menu( 'main-menu' )){
$MainMenu = array(
'theme_location' => 'main-menu',
);
wp_nav_menu( $MainMenu ); 
}; 
?>

また、header.phpに<body>の内容を書く場合は開始タグは入れますが、次のindex.phpとfooter.phpにも続くので終了タグは入れません。<html>タグも同様です。

footer.php

footer.phpはサイトの一番下にあるコンテンツの必須なテンプレートパーツです。

<?php get_sidebar() ; ?>

<?php wp_footer(); ?>

</body>
</html>

footer.phpは、サイトの最後に読み込む部分で、サイトの下部に表示される要素です。JaaScriptはここで読み込むことが多いです。

footer.phpを呼び出したい場合は以下のコードを使います。

<?php get_footer(); ?>

footer.phpの見本

<?php get_sidebar() ; ?>
<! – フッター -->

<footer>

<?php
// メニューを表示
if ( has_nav_menu( 'footer-menu' )){
$FooterMenu = array(
'theme_location' => 'footer-menu',
);
wp_nav_menu( $FooterMenu ); 
}; 
?>

</footer>

<?php wp_footer(); ?>

<!------ – Javascript – ------>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/bootstrap.min.js"></script>

</body>
</html>

サイドバーを表示する場合は、footerの初めに読み込めば、スマホ時の順番がサイドバー → フッターになります。

以下の記述はWordPressを動作させるのに必須になります。こちらも細かい事は他で説明します。

<?php wp_footer(); ?>

以下の記述はフッターメニューを読み込んで表示させるためのものです。WordPressの管理画面で作成したメニューが表示されます。ただし表示させるか否かはfunctions.phpで制御します。詳しくは9項目のfunctions.phpで説明します。

<?php
// メニューを表示
if ( has_nav_menu( 'footer-menu' )){
$FooterMenu = array(
'theme_location' => 'footer-menu',
);
wp_nav_menu( $FooterMenu ); 
}; 
?>

またbodyタグとhtmlタグの閉じタグを忘れないようにしましょう。

index.php

index.phpはTOPページになる必須なテンプレートパーツです。

<?php get_header(); ?>

<! – コンテンツ start -->

<! – コンテンツ end -->

<?php get_footer(); ?>

index.phpでは、bodyタグ内に入るメインコンテンツを書いていきます。記事一覧などもここで書いていきます。

<?php get_header(); ?><?php get_footer(); ?>でヘッダーとフッターを読み込んでHTMLに吐き出さられて初めて形になります。そのためheader.phpとfooter.phpは必須で、どちらか一方のファイルでも間違えが有れば正常に表示されません。

index.phpの見本

<?php get_header(); ?>

<! – contens start -->

<! – メインビジュアル -->
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: メインビジュアル1"><title>メインビジュアル1</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#555" dy=".3em">メインビジュアル1</text></svg>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: メインビジュアル2"><title>メインビジュアル2</title><rect width="100%" height="100%" fill="#666"/><text x="50%" y="50%" fill="#444" dy=".3em">メインビジュアル2</text></svg>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
<! – ヘッダー end-->

<! – メインコンテンツ -->
<main>
<section>

<! – 記事一覧 -->
<div class="container kijiitirann">
<?php
$information= get_posts( array(
'posts_per_page' => 6
//ここで取得条件を指定する
));
if( $information):
?>

<ul class="kijiitirannblok">

<?php
foreach( $information as $post ):
setup_postdata( $post );
?>
<li>

<! – サムネイル -->
<?php if ( has_post_thumbnail() ): ?>
<?php echo the_post_thumbnail(); ?>
<?php else: ?>
<img src="ここに代替画像のURL">
<?php endif; ?> 

<! – 記事取得 -->
<span class="kiji_category"><?php the_time('Y年n月j日'); ?> - <?php the_category(', '); ?></span> <br> <h5><a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a></h5>
<div class="excerpt"><?php the_excerpt(); ?>
<a href="<?php the_permalink(); ?>" class="btn btn-primary">詳しく見る</a>
</div>
</li>

<?php
endforeach;
wp_reset_postdata();
?>

</ul>

<?php else: ?>
<p>表示できる情報はありません。</p>
<?php endif; ?>
</div>
<! – 記事一覧 end-->

</section>
</main>

<! – contens end -->

<?php get_footer(); ?>

<!– コンテンツ start –>から<!– コンテンツ end –>までは自由にHTMLを書いてコンテンツを作成出来ます。なのでここを凝る事で思った通りの見た目のTOPページを作成する事が出来ます。もちろん新着記事を読み込むことも出来ますがループ処理が必要になるので、ここでは割愛します。

また固定ページをTOPページにする方法もありますが、ここでは紹介しません。

sidebar.php

sidebar.phpはサイドバーを作成するテンプレートパーツです。

<! – サイドバー -->

<! – functions.phpで設定したウィジェット(サイドナビ用)の読み込み -->
<?php dynamic_sidebar('id名'); ?>

</div>

functions.phpでウィジェットの読み込みを設定した場合に要素が動作します。

sidebar.phpの見本

<! – サイドバー -->

<! – functions.phpで設定したウィジェット(サイドナビ用)の読み込み -->
<?php dynamic_sidebar('sidenavi'); ?>

</div>

functions.phpで関数を設定したら、以下のWordPress管理画面左側ツールバーのウィジェットを選択した時に開くページのウィジェットに要素を入れるとサイトに反映されます。

サイドバーの配置は、デフォルトだとサイトの左側の1/4程度を上から下までサイドバーの領域になります。これを右側のメインビジュアルより下に配置したい場合はCSSで調整します。

single.php

single.phpは投稿ページ用のテンプレートパーツです。

<?php get_header(); ?>
</header>
<! – ヘッダー end-->

<main>

<! – タイトルなど基本情報の読み込み -->
<div class="entry-header">
<!--タイトル-->
<h2 class="pagetitle"><?php the_title();?></h2>
<!--投稿日-->
<p class="entry-date"><?php echo mysql2date('Y年n月j日', $post->post_date); ?></p>
<!--投稿者-->
<p class="entry-author"><?php the_author_posts_link(); ?></p>
<!--投稿カテゴリ-->
<p class="entry-cat">
<?php
$categories = get_the_category();
//選択したカテゴリ全て表示
foreach($categories as $category){
	echo '<a href="'.get_category_link($category->term_id).'">'.$category->name.'</a>';
}
?>
</p>
<!--投稿タグ-->
<p class="entry-tag">
<?php
$tags = get_the_tags();
foreach($tags as $tag){
	echo '<a href="'.get_tag_link($tag->term_id).'">'.$tag->name.'</a>';
}
?>
</p>
</div>

<! – 本文の読み込み -->
<div class="entry-content">
<?php
if(have_posts()){
	while(have_posts()){
		the_post();
		the_content();
	}
} ?>
</div>

<! – 前後の記事リンク -->
<?php if( get_previous_post()|| get_next_post()): ?>
<div class="entry-pager">
	<?php
	//前の記事へ
	previous_post_link('%link', '<span>%title</span>', TRUE, '');
	
	//次の記事へ
	next_post_link('%link', '<span>%title</span>', TRUE, '');
	?>
</div>
<?php endif; ?>

</main>

<?php get_footer(); ?>

archive.php

archive.phpは記事一覧を表示するテンプレートパーツです。

<?php get_header(); ?>

<! – タイトルの読み込み -->
<div class="entry-header">
<h2 class="pagetitle"><?php echo single_term_title('', false);?></h2>
</div>

<! – 本文の読み込み -->
<div class="entry-content">
<?php if(have_posts()): //記事がある場合 ?>
<?php
//記事データがある間、1記事分ずつ指定の内容を出力させる(1ページ分の表示記事数は管理画面>設定>表示設定から変更できます)
while(have_posts()){
	the_post();
	get_template_part(content_archive, get_post_format());
}
?>

<?php
//ページネーションの表示
$pagination = get_the_posts_pagination();
//そのまま書き出すとデカデカと「投稿ナビゲーション」と表示されるのでそれを消したものを出力
$pagination = preg_replace('/\<h2(.*?)\<\/h2\>/', '', $pagination);
echo $pagination;
?>
<?php else: //記事が無い場合 ?>
<p>記事がありません。
<?php endif; ?>
</div>

<?php get_footer(); ?>

search.php

search.phpは検索結果を作成するテンプレートパーツです。

<?php get_header(); ?>

<?php $serchword = get_search_query(); //検索された文字列を取得 ?>

<! – タイトルの読み込み -->
<div class="entry-header">
<h2 class="pagetitle">「<?php echo $serchword);?>」検索結果</h2>
</div>

<! – 本文の読み込み -->
<div class="entry-content">
<?php if(have_posts()): //記事がある場合 ?>
<?php
//記事データの表示
while(have_posts()){
	the_post();
	get_template_part(content_archive, get_post_format());
}
?>

<?php
//ページネーションの表示
$pagination = get_the_posts_pagination();
$pagination = preg_replace('/\<h2(.*?)\<\/h2\>/', '', $pagination);
echo $pagination;
?>

<?php else: //記事が無い場合 ?>
<p>「<?php echo $serchword; ?>」記事はまだありません。
<?php endif; ?>
</div>

<?php get_footer(); ?>

functions.php

functions.phpはテーマがどのように動くのかを処理する関数を記述した必須のファイルです。

style.cssを読み込むには、通常このファイルに関数を記述して読み込みます。他にもサイドバーの設定やメニューの設定などWordPressの管理画面との連動をさせたい場合に様々な関数を記述する必要があります。

functions.phpの見本

<?php

// cssの読み込み
function register_stylesheet()
{
    wp_register_style('style', get_stylesheet_directory_uri().'/style.css');
}
function add_stylesheet()
{
    register_stylesheet();
    wp_enqueue_style('style', '', array(), '1.0', false);
}
add_action('wp_enqueue_scripts', 'add_stylesheet');

// ウィジェットの有効化・設定
function theme_slug_widgets_init()
{
    register_sidebar(array(
'name' => 'サイドナビ',
'id' => 'sidenavi',
'before_widget' => '<div class="side_widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="side_widget_title">',
'after_title' => '</h2>',
));
}
add_action('widgets_init', 'theme_slug_widgets_init');


// メニューの設定
function register_my_menus()
{
    register_nav_menus(array(
'main-menu' => 'Main Menu',
'footer-menu' => 'Footer Menu',
));
}
add_action('after_setup_theme', 'register_my_menus');

// アイキャッチ
add_theme_support('post-thumbnails');

style.cssを読み込むには、3行目から13行目まで記載されている関数が必須です。

15行目から27行目の記述では、ウィジェットを作成し、管理画面で設定できるようにします。表示にはテーマテンプレート内でdynamic_sidebar()に設定したidを指定します。
例えば、<?php dynamic_sidebar('sidenavi’); ?>を表示させたいならばidはsidenaviになります。

30行目から38行目まではメニューの設定です。’ロケーションID名’ => '管理画面での表示名’ で記述します。
WordPress管理画面左サイドバーの管理画面外観メニューでメニューの作成後、メニューの位置で下記の設定が選択出来るようになっています。

メニューの表示には上で設定したロケーションID(位置)を以下のコードに入れて管理画面からメニュー作成後に同じ位置を選択します。

<?php
// メニューを表示
if ( has_nav_menu( 'ロケーションID名' )){
$任意1 = array(
'theme_location' => 'ロケーションID名',
);
wp_nav_menu( $任意1 ); 
}; 
?>

style.css

style.cssはテーマ全体のスタイルシートです。

/*
Theme Name: original
*/

WordPressのテーマを作成する際は「style.css」と名前のスタイルシートが必須になります。

またこのファイルを読み込むにはfunctions.phpに以下の記述が必ず必要になります。

// cssの読み込み
function register_stylesheet()
{
    wp_register_style('style', get_stylesheet_directory_uri().'/style.css');
}
function add_stylesheet()
{
    register_stylesheet();
    wp_enqueue_style('style', '', array(), '1.0', false);
}
add_action('wp_enqueue_scripts', 'add_stylesheet');

この時にstyle.cssのファイルの場所を/css/style.cssの様に下の階層に起き、以下の様にパスを指定するとエラーになるので注意しましょう。

wp_register_style('style', get_stylesheet_directory_uri().'/css/style.css');

CSSの書き方は、何も変わらないです。

CSSの見本

/*
Theme Name: original
*/

/* グリットテンプレート */

body {
    display: grid;
    grid-template:
     "... header header header ..." auto
     "... main   main   right ..." 1fr
     "... footer footer footer ..." 50px
     / auto 1fr 1fr 300px auto;
 }

 @media screen and (max-width: 1000px){
    body{
      grid-template: 
      "header" auto
      "main" 1fr
      "right " auto
      "footer" 100px
      ;
    }
  }

 header {
    grid-area: header;
    background-color: brown;
  }
   
  main {
    grid-area: main;
    background-color: white;
  }
   
  .side_widget {
    grid-area: right;
    background-color: gold;
  }
   
  footer {
    grid-area: footer;
    background-color: #777;
  }

  /* グリットテンプレート end*/

  /* 全体 */
  h5 {
    font-size: 2em;
  }

  /* 全体 end*/

  /* メニュー */

  .menu {
    display: flex;
    list-style: none;
    margin-top: 10px;
  }

  .menu-item {
    padding: 0px 20px;
  }

  /* メニュー end*/

  /* フッター */

  .form-inline {
    position: absolute;
    right: 10px;
  }

  /* フッター end*/

  /* 記事一覧 */

  .kijiitirann img {
    width: 100%;
    max-height: 240px;
  }

  .kijiitirannblok {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    grid-row-gap: 6px;
    grid-column-gap: 6px;
    padding: 0;
    margin: 0;
    list-style-type: none;
  }

  .kijiitirannblok li {
    box-sizing: border-box;
    margin: 10px;
  }

  .kijiitirann .kiji_category,
  .kijiitirann h5,
  .kijiitirann .excerpt p {   
    margin: 0px 10px 0px 10px;
  }
  .kijiitirann .excerpt p {
    font-size: 0.9em;
    color: #777;
  }
  .kijiitirann a {
    color: #333;
  }

  .excerpt {
    position: relative;
    height: 174px;
  }
  .excerpt a {
    color: white;
  }

  .btn-primary {
    position: absolute;
    bottom: 10px;
    left: 10px;
  }

  /* 記事一覧 end*/



  /* スマホ時 */

  @media screen and (max-width: 769px){

    .menu {
      display: inline-block;
    }

    .kijiitirannblok {
      display: inline-block;
    }

    
  }

screenshot.png

screenshot.pngはテーマ選択画面で表示されるサムネイルです。ファイルの置き場所はテーマファイル直下の階層です。

(イメージ)

見本データをダウンロード

最後に今回紹介した「見本」のデータ一式を以下に添付しておきます。基本今回の内容をコピペで大丈夫形になると思いますが上手くいかない場合は以下を使ってみて下さい。


以上が「テーマ作成に必要なphpファイルの作り方を解説【コピペOK】」でした。

2021年1月9日WordPressphp,Reference,WP

Posted by KT