WordPressオリジナルテーマの作り方-基本編

   

最近、WordPressのオリジナルテーマ作成を始めたので備忘録として残していきたいと思います。
本記事はオリジナルテーマ作成における基本部分についてです。

最小構成

ひとまず最小構成でテーマの適用を確認します。
以下を作成して同じフォルダに格納し、/wp-content/themes配下にアップロードします。

  • index.php
  • style.css
  • screenshot.png (4:3のアスペクト比で作成)

最小構成アップロード

これだけでオリジナルテーマを適用可能になります!

  • 外観>テーマ
  • アップロードしたテーマが表示されるので有効化
    テーマ選択

プレビュー

オリジナルテーマ画面

オリジナルテーマを適用した画面が表示されました!

ソース

index.php の分離

  • header.php
  • footer.php
  • sidebar.php

を作成し、index.phpから読み込ませます。

index.phpを下記の様に変更します。置き換えた箇所のコードをそれぞれのファイルに記述してアップロードします。

ファイル分離アップロード

ファイルを分離しましたが、見た目は変わりません。

サイドバー用のWidgetを追加

サイドバーを使用するためには下記手順が必要です。functions.phpを作成し、以下を記述します。

そしてsidebar.phpも下記の様に変更します。

これで外観ウィジェットが表示され、サイドバーの追加が可能となります。

適用前

サイドバー有効化前

適用後

サイドバー有効化

サイドバーにテキストを追加してみます。

サイドバーへのテキスト追加

プレビュー

サイドバー適用プレビュー

追加したサイドバーが表示されました!

ヘッダにタイトルなどを反映する

headタグの編集

header.phpにmeta情報を追加します。また、</head>の直前に<?php wp_head(); ?>を記述します。

headerタグの編集

<?php bloginfo( 'name' ); ?>を使ってサイト名を表示するように変更しました。

style.cssに下記を追加します。

投稿記事の表示

index.phpを変更して記事の表示を行います。 <div class="main">の中を下記の様に変更します。

プレビュー

プレビュー

記事の表示までを行うことができました。ここからCSSや表示を調整していくことになります。

 - WordPress