ワードプレスオリジナルテーマ作り方⑨ テーマ変更・固定ページ設定
2023年05月25日
オリジナルテーマに変更
今回は今まで作ってきた
ワードプレスのオリジナルテーマをFTPでアップロードして、インストールしたときのテンプレートデザインからオリジナルデザインに変更していきます。
執筆時点の現段階のテンプレートで表示されている状態はこちら
トップページ
オリジナルテーマに変更すると見れなくなるので、画像で取っておきます。
次に記事の個別ぺージはこちら
間は割愛してます。
このデザインから、今までで準備したオリジナルテーマに変更します。
HTMLでの完成見本はこれ
それではまずはファイルの確認
mariokun_tempというフォルダに今まで作ったファイルやフォルダを入れています。
mariokun_tempのフォルダの中身はこちら
一応上から説明していきます。
■CSSフォルダ
中にはstyle.cssがはいっていてCSSが記述されています。
■imgフォルダ
オリジナルテーマで使用する画像が入っています。
■jsフォルダ
ジャバスクリプトを記述したファイルを入れるフォルダですが今回は空です
■partsフォルダ
オリジナルテーマでパーツ化（共通化）したファイルが入っています。
1）header.php <head>の中身をパーツ化したファイル
2）head.php ページ上部をパーツ化したファイル
3）navi.php ナビゲーションをパーツ化したファイル
4）foot.php ぺージ下部をパーツ化したファイル
上記4つのファイルが入っています。
■階層変更フォルダ
ワードプレスをサブディレクトリーに入れた時に変更したファイルを一応とっています。
ここからはファイル説明
■blog.phpファイル
カスタムテンプレートファイルの固定ページでブログの記事一覧を表示するファイル
■category.phpファイル
ワードプレスで決まっているファイルで投稿記事のカテゴリーの一覧を表示するぺージ
■company.phpファイル
カスタムテンプレートファイルの固定ページで会社概要を表示するファイル
■contact.phpファイル
カスタムテンプレートファイルの固定ページでお問い合わせフォームを表示するファイル
■feature.phpファイル
カスタムテンプレートファイルの固定ページでマリオ君の特徴を表示するファイル
■flow.phpファイル
カスタムテンプレートファイルの固定ページでご依頼の流れを表示するファイル
■functions.phpファイル
ワードプレスにいろいろな命令がかけるファイル、後程説明します。
■home.phpファイル
ワードプレスで決まっているファイルでトップページを表示するファイル
■hp.phpファイル
カスタムテンプレートファイルの固定ページでホームページ制作を表示するファイル
■page.phpファイル
ワードプレスで決まっているファイルで固定ページを表示するファイルですが今回はすべてカスタムテンプレートファイルで固定ページを作成していますので中身は空です。なくてもいいです。一応いれているだけ。
■price.phpファイル
カスタムテンプレートファイルの固定ページで料金を表示するファイル
■question.phpファイル
カスタムテンプレートファイルの固定ページでよくある質問を表示するファイル
■screenshot.pngファイル
これは1200×900で作られた画像でファイル名はきまっていて、これを作っておけば、ワードプレスの管理画面の外観でテーマを変更するときに、テーマのサムネイル画像としてでてきます。ファイル名。拡張子変更不可。
■single.phpファイル
ワードプレスで決まっているファイルで投稿を表示するファイルです
■style.cssファイル
管理画面の外観でテーマを変更するときに、このファイルに記述されているTheme Name:の部分が出ます。必要なファイルです。中身は下記
/*
Theme Name: mariokun theme
Theme URI:
Description: mariokun's THEMP
Author:
Author URI:
*/
■works.phpファイル
カスタムテンプレートファイルの固定ページで制作実績を表示するファイル
以上がファイル構成です。
それでは、テンプレートデザインからオリジナルテーマに変更していきます。
まずは当然ワードプレスをインストールした状態ということで話を進めます。
フォルダをアップロード
オリジナルでつくったテーマフォルダ今回はmariokun_tempフォルダをアップロードします。
アップロード先は
ワードプレスがインストールされているフォルダの中にある
wp-contentファルダ
の中にある
themesフォルダの中にアップロードします。
themesフォルダを開くと、簡単インストールで自動でインストールされてテーマフォルダが出てきます。
サーバーの簡単インストールされるテーマはサーバーなどによって違います。
もともとあるテーマフォルダと同階層にオリジナルテーマが入っている
mariokun_tempフォルダをアップロードします。
こんな感じ
オリジナルテーマに変えたら、テンプレートフォルダの
twentytwentyone
twentytwentythree
twentytwentytwo
は削除しても構いません。
index.phpはさわらないでください。
管理画面で設定
次にアップロードが完成したのでワードプレスにログインして
メニューの外観からテーマをクリックします。
するとこんな感じでオリジナルテーマが選択できるようになります。
mariokun themeをクリックして有効化するとオリジナルテーマに変更になります。
あとは固定ページを設定すれば完成です。
固定ページの設定
それではカスタムテンプレートファイルの固定ページをひもづけていきます。
カスタムテンプレートで固定ページを作る方法は下記をご覧ください。
まずは会社概要ぺージの
company.phpを紐づけます。
ワードプレス管理画面の固定ページで新規追加して
タイトルに会社概要
矢印の部分にあるテンプレートをクリックすると
mariokun_tempのフォルダの中にあるカスタムテンプレートファイルの一覧がでますので
companyを選択
そしてその下にあるURLを
companyに変更して更新を押して完了です。
これは事前にナビゲーションを作るときに会社概要のスラッグを
companyにしていたからです。
本文には何もかきません。
company.phpファイルに記述されているものが表示される仕組みです。
これで完成。
タイトルにページのタイトルをいれて、対象のテンプレートを選んで、URLを書き換える
をするだけです。（再度本分はいじりません。）
もう一つやってみます。
次はマリオ君の特徴ぺージの固定ページを作ります。
ワードプレスの固定ページで新規追加
タイトルに
マリオ君の特徴を入力
右側のテンプレートfeatureを選択し
URLを
featureにして
更新で完了です
残りのすべての固定ページも新規追加して完成となります。
残りは
ブログの記事一覧を表示する blogをブログ一覧で追加
お問い合わせを表示するcontactをお問い合わせで追加
ご依頼の流れを表示するflowをご依頼の流れで追加
ホームページ制作を表示するhpをホームページ制作で追加
金額を表示するpriceを金額で追加
よくある質問を表示するquestionをよくある質問で追加
最後に制作事例を表示するworkを制作事例で追加して完了です。
いかがでしたでしょうか。
これでスーパー簡単に説明しましたが（よみずらくてすいません）
ワードプレスでオリジナルテーマを作るでした。
次回投稿予定のワードプレスのプラグインでお問い合わせフォームを作成し完成となります。
それではまた。
