ローカル環境のWordPressにテーマの元となる空ファイルを作成してみた。
今回はこちらのサイトを参考に、ローカル環境のWordPressにテーマの元となる空ファイルを作成してみました。 ※デザイン等はあててませんし、記事も表示していません。ただファイルを用意してテーマを有効化しただけです。
この記事は実施内容の備忘録となります。
- 1. 環境
- 2. テーマを作成する準備
- 3. style.cssの作成
- 4. functions.phpの作成
- 5. header.phpの作成
- 6. footer.phpの作成
- 7. sidebar.phpの作成
- 8. index.phpの作成
- 9.single.phpの作成
- 10.screenshot.pngの作成
- 11. テーマの有効化・確認
1. 環境
2. テーマを作成する準備
準備として、下記を実施していきます。
① ローカルにテーマ用のフォルダの作成
② 開発環境にテーマ用のフォルダの作成
③ ローカルと開発環境のフォルダの同期
① ローカルにテーマ用のフォルダの作成
wp-templateというフォルダを作成します。
mkdir wp-template
② 開発環境にテーマ用のフォルダの作成
開発環境のwordpressをインストールしたフォルダ内の「wp-content/themes」フォルダにも、wp-templateというフォルダを作成します。
フォルダを作成したら権限をapacheに変更しておきます。
cd wp-content/themes mkdir wp-template chown -R apache:apache ./wp-template/
③ ローカルと開発環境のフォルダの同期
※ こちらについては、VirtualBoxを使用していて、Guest Additionsの設定がすんでいる場合のみ実施できる作業です。
VirtualBoxに共有フォルダの追加をします。
ローカル開発環境上で下記コマンドを実施します。
mount -t vboxsf wp-template /usr/share/wordpress/wp-content/themes/wp-template -o uid=48,gid=48 ※48はApacheのUIDとGID
3. style.cssの作成
テーマ用のCSSの雛形を作成してローカルのwp-templateフォルダにstyle.cssという名前で保存します。
@charset "utf-8"; /* theme Name: テーマ名を記入します。 Author: 作者名を記入します。 Description: テーマの説明を記入します。 version: 1.0.0 */
4. functions.phpの作成
このテーマで使用する関数を記述するfunctions.phpを作成して、ローカルのwp-templateフォルダに保存します。
<?php function initialize_template() { // 初期化時に実行する処理を記入してください。 // WordPressが提供しているテーマのサポート機能については、 // 下記、関数で追加できます。 // add_theme_support( $feature, $arguments ); // 詳細はリファレンス参照 // https://wpdocs.osdn.jp/関数リファレンス/add_theme_support } // テーマ設定・オプションを初期化時にinitialize_templateメソッドを実行 add_action( 'after_setup_theme', 'initialize_template' );
5. header.phpの作成
サイトのヘッダー部分を作成し、ローカルのwp-templateフォルダにheader.phpという名前で保存します。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>タイトル</title> <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"> <?php wp_head(); ?> </head> <body> <header> ヘッダー </header>
6. footer.phpの作成
サイトのフッター部分を作成し、ローカルのwp-templateフォルダにfooter.phpという名前で保存します。
<footer> フッター </footer> <?php wp_footer(); ?> </body> </html>
7. sidebar.phpの作成
サイトのサイドバー部分を作成し、ローカルのwp-templateフォルダにsidebar.phpという名前で保存します。
<div id="side-bar"> サイドバー </div>