【WordPress】オリジナルテーマファイルの設定について解説

シュウ

今回は【WordPress】オリジナルテーマファイルの設定について解説!!
の解説になります！

こんな方に読んでほしい

WordPressを学び始めた方へ
WordPressのオリジナルについて解説していきます。
今回はWordPressの「テーマファイルの設定」について解説しております。

[記事の内容]

WordPressのテーマの設定について

WordPressのテーマファイルとは、サイトを作成する際に、「無料」「有料」「オリジナルテーマ」を決めます。
テーマファイルを元にホームページをカスタマイズをしていきます。
WordPressにはデフォルトで「Twenty Nineteen」、「Twenty Sixteen」などが用意されております。

今回は「オリジナルテーマ」に必要なファイルの紹介になります。

テーマ画面について

テーマファイルを設定するには、「メインナビゲーションメニュー > 外観 > テーマ」を選択します。
テーマ画面に移行を確認後、ご自身で作成してテーマファイルを「有効化」にし完了になりますが、
テーマファイルには、必要なファイルがあります。

●1:テーマ画面に移行: 「メインナビゲーションメニュー > 外観 > テーマ」を選択します。

●2:テーマファイルの有効化: 必要なファイルが揃ってる場合は、テーマ選択画面にご自身で作成したテーマファイルの「screenshot」が表示します。
テーマファイルの有効化をクリックしテーマ変更完了になります。
※テーマファイルが壊れてる場合以下のように表示します。

テーマファイルの作成について

上記では、テーマを変更、追加について解説してきました。
次に、テーマファイルに必要になるファイルについて解説していきます。

ディレクトリについて

最初に、フォルダを作成します。
フォルダ名は、「半角・小文字の英数字とハイフン以外」は、なるべく使わないようにしましょう。
フォルダ作成後は、wp-content/themes/テーマ名の配下に作成していきます。

必要なファイルについて

上記で解説したように、必要なファイルが存在しない場合、「壊れたテーマ」とみなされテーマ画面に反映されません。
先ほど作成したフォルダにまだファイルがない為、「壊れたテーマ」になっております。

主な必要ファイルは以下のようになります。

●style.css (必須): テーマのスタイル記述します。

●index.php (必須): ホームページのトップページの役割になります。

●screenshot.png (必須): 必ず必須ではないが、なるべく用意しましょう。

●functions.php (必須): テーマに使用する関数等のファイルになります。

style.cssについて

順に解説していきます。
スタイルシートとは、style.cssが必要になっております。
style.cssを作成後、以下のように、テーマのスタイル記述します。

 /* 
Theme Name: オリジナルテーマ名
Theme URI: ホームページのurlに変更
Description: オリジナルテーマの説明を入力
Version: バージョンを入力
Author: 作成者名に変更
*/

style.cssを入力後、先ほどのwp-content/themes/テーマ名/style.cssの配下にアップロードします。

フォルダ名「demo」、説明には「テンプレートが不足しています。独立したテーマには index.php…」になっております。
次に、index.phpを準備します。

index.phpについて

現状、「index.html」がある場合は、phpファイルを用意します。
コピー&ペーストし、ファイル名を「index.php」に変更しましょう。
index.phpに変更後、先ほどのwp-content/themes/テーマ名/index.phpの配下にアップロードします。

●現状:テーマフォルダのアップロード先について: wp-content/themes/demo/　の「demo」の中身

●現状:テーマフォルダの中身について: ・style.css
・index.php
・screenshot.png
・functions.php
・ホームページで使う「images」、「css」フォルダもアップロードしておきましょう

●現状:テーマ画面: 現状、「style.css」、「index.php」の2点しかありませんんが、テーマとしては表示できます。
「screenshot.png」がない場合、以下のように表示します。

screenshotについて

「screenshot.png」は、必ず必須ではありませんが、他のテーマと間違い防止になるので、
用意できる際には必ず用意しましょう。
画像サイズは「横880px × 縦660px」ぐらいにしておきましょう。

上記の画像サイズで、「screenshot.png」を作成します。
同じようにwp-content/themes/テーマ名/screenshot.pngの配下にアップロードします。

functions.phpについて

「functions.php」の役割としては、主にテーマに使用する関数等のファイルになります。

functions.phpの役割
・管理画面のカスタマイズ
投稿名の名前を変更したい、ダッシュボードの不必要な項目を非表示にしたい、など
・記事のカスタマイズ
アイキャッチ画像を投稿画面に表示させたい、アイキャッチ画像のサイズを指定、など
・ウイジェットのカスタマイズ
主に、サイドバーをカスタマイズしたい場合など、様々なコードを記述することが可能になります。