今回の記事はWordPress（ワードプレス）のテーマ作成に必要なphpファイルの構成を解説します。また最後には今回解説するファイルデータを一式無料提供します。
環境準備が終わり、テーマ作成を開始するとき、初めの段階で次の様な必ず必要になるファイルを準備しましょう。基本構成を理解すれば今後の応用が楽になります。なので、今回のファイルを全て準備したらHTMLベースでいいので一つの形を作ってみましょう。
うまくいかない場合は、見本コードをコピペして使って下さい。（その場合Bootstrapは必須）
各見本では、以下の記事で紹介したレイアウトをWordPress化しています。（レイアウトのみ）
テーマのディレクトリに新しいテーマをアップしよう
まずはテーマファイルのディレクトリの場所を把握しましょう。
(ドメイン)→(wp)→wp-content→themes→original（任意のテーマファイル）
この階層に新規で作成したいテーマファイルをアップしましょう。（今回の場合はoriginalと言う名前のテーマを作成します。）
ここで作成したテーマファイルのディレクトリを指定する時は以下の記述を使います。
<?php echo get_template_directory_uri(); ?>例えば、をhttp://example.jp/img/image.img指定したい場合、
<?php echo get_template_directory_uri(); ?>/img/image.imgと指定します。
テンプレート階層の優先順位
各種テンプレートページを作成する前にまずは以下の重要な概念を理解しておきましょう。
WordPressのファイル構造は予め使用できるファイル名が決められています。その中で使用するファイルが何処の何のページで使用するのかはテンプレート階層の優先順位が存在します。
例えば「index.php」と「front-page.php」と「home.php」が存在する場合は、「index.php」は使用されずに最も優先度の高い「front-page.php」がTOPページとして使用され、「home.php」がブログトップページに使用される事になります。
このような優先順位がカテゴリーやアーカイブにも存在します。その一部よく利用するものが以下です。
| ページの種類 | 優先1 | 優先2 | 優先3 | 優先4 |
|---|---|---|---|---|
| フロントページ | front-page.php | ーーー | ーーー | ーーー |
| ホームページ | home.php | ーーー | ーーー | ーーー |
| カテゴリー | category-slug.php | category-id.php | category.php | archive.php |
| タグ | tag-slug.php | tag-id.php | tag.php | archive.php |
| 投稿ページ | single-post_type.php | ーーー | ーーー | single.php |
| 固定ページ | customname.php | page-slug.php | page-id.php | page.php |
| カスタム分類 | taxonomy-taxonomy-term.php | taxonomy-taxonomy.php | taxonomy.php | archive.php |
| 作成者 | author-nicename.php | author-id.php | author.php | archive.php |
| アーカイブ | archive-post_type.php | ーーー | ーーー | archive.php |
| 日付別 | date.php | ーーー | ーーー | archive.php |
| 検索 | search.php | ーーー | ーーー | ーーー |
| 添付ファイル | MIME_type.php | attachment.php | single-attachment.php | single.php |
上記のファイルが存在しないページの場合は「index.php」が選択される。
（index.phpは必須なので存在しなければエラーとなります。）
より詳しくはこちらのWordPress Codexのドキュメントを確認下さい。
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ページになる必須なテンプレートパーツです。もしくはTOPページになる場合はfront-page.phpでも可能です。
<?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 //投稿コンテンツの呼び出し
if(have_posts()){
while(have_posts()){
the_post();
the_content();
}
} ?>/<?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(); ?>page.php
page.phpは固定ページを表示する必須なテンプレートパーツです。
このファイルはデフォルトで用意されている管理画面の「固定ページ」から作成した記事を表示させるものです。
「固定ページ」で作成コンテンツを呼び出すには「投稿」と同じく以下の記述をする必要があります。
<?php //固定ページのコンテンツの呼び出し
if(have_posts()){
while(have_posts()){
the_post();
the_content();
}
} ?>/また固定ページでは、テンプレートページの作成が可能です。テンプレートでは好きなHTML要素でのレイアウトを作成して選択されたページのレイアウトに反映されます。これを利用することで同じ「固定ページ」からの投稿でもレイアウトの違うページを作成することが出来るようになります。
<?php
/*
Template Name: テンプレートページA
*/
?>
<?php get_header(); ?>
<main>
<!-- 固定ページ -->
<div class="container d-flex justify-content-center">
<div class="page_container m-md-5">
<div class="page_container_honnbunn">
<div class="page_title"><h1><?php the_title(); ?></h1></div>
<div class="page_inner">
<?php
if(have_posts()){
while(have_posts()){
the_post();
the_content();
}
} ?>
</div>
</div>
</div>
</div>
</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(); ?>
<main>
<div class="container top_left_container">
<div class="search_container">
<?php
if (isset($_GET['s']) && empty($_GET['s'])) {
echo '<span>検索キーワード未入力</span>'; // 検索キーワードが未入力の場合のテキストを指定
} else {
echo '<span>“'.$_GET['s'] .'”の検索結果：'.$wp_query->found_posts .'件</span>'; // 検索キーワードと該当件数を表示
}
?>
</div>
<!-- 検索 -->
<?php get_search_form(); ?>
<div class="row">
<?php while(have_posts()): the_post(); ?>
<div class="col-md-6 pr-md-5 pl-md-5 top_card">
<a href="<?php the_permalink(); ?>">
<div class="top_card_inner mb-4">
<?php if ( has_post_thumbnail() ): ?>
<img src="<?php the_post_thumbnail_url(); ?>" loading="auto" alt="<?php the_title(); ?>のサムネイル">
<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/img/noimg.png" alt="noimg">
<?php endif; ?>
<div class="top_card_text">
<p class="m-0 post_alts"><i class="far fa-calendar-alt"></i><?php echo get_the_date(); ?><span class="mr-1 ml-1"><i class="far fa-user"></i><?php the_author(); ?></span></p>
<p class="mt-1 mb-1 post_title"><?php the_title(); ?></p>
<?php
$cat = get_the_category();
$cat_name = $cat[0]->cat_name;
$cat_slug = $cat[0]->category_nicename;
?>
<p class="mt-1 mb-1 top_category <?php echo $cat_slug ?>"><?php echo $cat_name; ?></p>
</div>
</div>
</a>
</div>
<?php endwhile; ?>
</div>
</div>
</main>
<?php get_footer(); ?>上記の検索ページを作成するには以下のsearchfrom.phpも必要になります。
<div class="from_container">
<div class="from_container_side">
<form method="get" action="<?php bloginfo('url'); ?>" class="form-inline my-2 my-lg-0">
<input type="text" name="s" id="s" placeholder="<?php if(!is_search()){ echo '検索';} ?>" value="<?php if(is_search()){ echo get_search_query();} ?>" class="form-control mr-sm-2"/>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">検索</button>
</form>
</div>
</div>functions.php
functions.phpはテーマがどのように動くのかを処理する関数を記述した必須のファイルです。
style.cssを読み込むには、通常このファイルに関数を記述して読み込みます。他にもサイドバーの設定やメニューの設定などWordPressの管理画面との連動をさせたい場合に様々な関数を記述する必要があります。
<?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】」でした。
