Appli Base


① フォルダと最低限のファイル の作成

新規オリジナルテーマで index.php を作るまでの流れをまとめました。
①~⑦まで、少しずつ完成させていく内容となっていますので、興味のある方はチャレンジしてみてください。


①では、フォルダ・index.php・style.css・screenshot.png を作成します。

※ローカル環境にWordPressをインストールしてあることが前提です。

テーマフォルダに新しくフォルダを作る

「Apache」-「htdocs」-「wordpress」-「wp-content」-「themes」にフォルダを作ります。

この状態で、Wordpressの「外観」を確認すると、スタイルシートが足りないと表示されます。

style.css を作成する

スタイルの中身は後ほど記述するので、空のファイルを作ります。

wp_tpl フォルダstyle.css で保存。

ここまでを「外観」で確認すると、index.php が必要というメッセージが表示されます。

index.phpを作る

まずは簡単な枠組みを作ります。

下記をコピペして、 wp_tplフォルダindex.php で保存。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>
 <div class="header">
 header
 </div>

 <div class="side">
 side
 </div>

 <div class="main">
 main
 </div>

 <div class="footer">
 footer
 </div>
</body>
</html>


「外観」で確認すると、作成したオリジナルテーマが表示されます。

screenshot.png を作成する

外観で画像を表示させるためには、スクリーンショットの画像が必要ですが、まだ全体像ができていないのでとりあえずの画像を用意します。

→画像の作り方(後日)

用意ができない方は、下図をお使いください。
(winの場合、右クリックで名前を付けて保存)

wp_tpl フォルダに screenshot.png を保存すると、「外観」で反映されます。

テーマが完成してから再度作り直した場合は、同じファイル名で保存してください。

最適なサイズは1200×900です。

まとめ

WordPressのオリジナルテーマを作るときは、まず

  • フォルダを作る
  • index.php を作る
  • style.cssを作る
  • screenshot.png を作る

この4つを行います。


外観で反映されない場合は、ファイルが足りないか、コードが間違っている可能性がありますので、再度見直してください。

次は 「index.php を4つのファイルに分ける」です。


2026/03/02



Yes:265 Total:452987 Today:296