ローカル環境のWordPressにテーマの元となる空ファイルを作成してみた。

今回はこちらのサイトを参考に、ローカル環境のWordPressにテーマの元となる空ファイルを作成してみました。 ※デザイン等はあててませんし、記事も表示していません。ただファイルを用意してテーマを有効化しただけです。
この記事は実施内容の備忘録となります。

plusers.net
webst8.com

1. 環境

2. テーマを作成する準備

準備として、下記を実施していきます。
 ① ローカルにテーマ用のフォルダの作成
 ② 開発環境にテーマ用のフォルダの作成
 ③ ローカルと開発環境のフォルダの同期

① ローカルにテーマ用のフォルダの作成

wp-templateというフォルダを作成します。

mkdir wp-template

f:id:edasaka:20191215140807p:plain
wp-template

② 開発環境にテーマ用のフォルダの作成

開発環境のwordpressをインストールしたフォルダ内の「wp-content/themes」フォルダにも、wp-templateというフォルダを作成します。
フォルダを作成したら権限をapacheに変更しておきます。

cd wp-content/themes
mkdir wp-template
chown -R apache:apache ./wp-template/

f:id:edasaka:20191215141632p:plain
開発環境にフォルダ作成

③ ローカルと開発環境のフォルダの同期

※ こちらについては、VirtualBoxを使用していて、Guest Additionsの設定がすんでいる場合のみ実施できる作業です。
VirtualBoxに共有フォルダの追加をします。

f:id:edasaka:20191215142207p:plain
VirtualBoxに共有フォルダの追加

ローカル開発環境上で下記コマンドを実施します。

mount -t vboxsf wp-template /usr/share/wordpress/wp-content/themes/wp-template -o uid=48,gid=48
※48はApacheのUIDとGID

f:id:edasaka:20191215143441p:plain
マウント

3. style.cssの作成

テーマ用のCSSの雛形を作成してローカルのwp-templateフォルダにstyle.cssという名前で保存します。

@charset "utf-8";
/*
theme Name: テーマ名を記入します。
Author: 作者名を記入します。
Description: テーマの説明を記入します。
version: 1.0.0
*/

f:id:edasaka:20191215153106p:plain
style.css

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' ); 

f:id:edasaka:20191215174539p:plain
functions.php

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>

f:id:edasaka:20191215174345p:plain
header.php

6. footer.phpの作成

サイトのフッター部分を作成し、ローカルのwp-templateフォルダにfooter.phpという名前で保存します。

    <footer>
    フッター
    </footer>
<?php wp_footer(); ?>
</body>
</html>

f:id:edasaka:20191215174932p:plain
footer.php

7. sidebar.phpの作成

サイトのサイドバー部分を作成し、ローカルのwp-templateフォルダにsidebar.phpという名前で保存します。

    <div id="side-bar">
        サイドバー
    </div>

f:id:edasaka:20191215175226p:plain
sidebar.php

8. index.phpの作成

共通パーツを読み込んだインデックスページを作成し、ローカルのwp-templateフォルダにindex.phpという名前で保存します。

<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

f:id:edasaka:20191215180007p:plain
index.php

9.single.phpの作成

記事用のページを作成し、ローカルのwp-templateフォルダにsingle.phpという名前で保存します。
今回はindex.phpをコピーしました。

f:id:edasaka:20191215180418p:plain
single.php

10.screenshot.pngの作成

横:880px、縦:660pxの画像を作成し、ローカルのwp-templateフォルダにscreenshot.pngという名前で保存します。

f:id:edasaka:20191215181330p:plain
screenshot.png

11. テーマの有効化・確認

テーマを有効化して確認していきます。

f:id:edasaka:20191215181759p:plain
作成したテーマを有効化します。
f:id:edasaka:20191215182026p:plain
表示できました!

以上、ローカル環境のWordPressにテーマの元となる空ファイルを作成してみた。でした。